From 568ad64fcfdc6346870143440c007e567b475119 Mon Sep 17 00:00:00 2001
From: Titouan Rigoudy <titouan.rigoudy@gmail.com>
Date: Fri, 30 Jul 2021 14:38:09 -0400
Subject: [PATCH] Style /connect using Tailwind CSS.

---
 public/index.html              |  2 +-
 src/components/ConnectForm.tsx | 19 +++++++++++++++----
 src/components/SolsticeApp.tsx |  2 +-
 src/containers/ConnectPage.tsx |  2 +-
 src/index.css                  |  8 ++++++++
 src/index.tsx                  |  1 -
 tailwind.config.js             |  5 ++++-
 7 files changed, 30 insertions(+), 9 deletions(-)
diff --git a/public/index.html b/public/index.html
index c950ff5..f66dab8 100644
--- a/public/index.html
+++ b/public/index.html
@@ -18,7 +18,7 @@
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
+    <div id="root" class="bg-yellow-100"></div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
diff --git a/src/components/ConnectForm.tsx b/src/components/ConnectForm.tsx
index 7411d10..0a6f1b4 100644
--- a/src/components/ConnectForm.tsx
+++ b/src/components/ConnectForm.tsx
@@ -23,12 +23,14 @@ const ConnectForm: FC<Props> = ({ socket }) => {
   const isSocketClosed = socket.state === SocketState.Closed;
 
   return (
-    <div id="connect-form">
-      <h2>Connect to a solstice client</h2>
+    <div class="text-center bg-white py-5 px-10 rounded-xl shadow">
+      <h2 class="text-3xl font-bold mb-2 text-yellow-600">
+        Connect to a solstice client
+      </h2>
       <Form
         onSubmit={onSubmit}
         render={({ handleSubmit, submitting }) => (
-          <form onSubmit={handleSubmit}>
+          <form onSubmit={handleSubmit} class="my-2">
             <Field
               name="url"
               component="input"
@@ -36,8 +38,17 @@ const ConnectForm: FC<Props> = ({ socket }) => {
               defaultValue="ws://localhost:2244"
               required
               pattern="wss?://.+"
+              class="border border-gray-400 rounded px-1 mx-1"
             />
-            <button type="submit" disabled={submitting || !isSocketClosed}>
+            <button
+              type="submit"
+              disabled={submitting || !isSocketClosed}
+              class={
+                "border border-gray-500 rounded px-1 " +
+                "bg-yellow-200 focus:bg-red " +
+                "disabled:bg-gray-300 disabled:text-gray-500"
+              }
+            >
               Connect
             </button>
           </form>
diff --git a/src/components/SolsticeApp.tsx b/src/components/SolsticeApp.tsx
index 10cf00f..6a4b189 100644
--- a/src/components/SolsticeApp.tsx
+++ b/src/components/SolsticeApp.tsx
@@ -47,7 +47,7 @@ const ConnectedApp: FC = ({ children }) => {
     );
   }
 
-  return <div id="solstice-app">{children}</div>;
+  return <div>{children}</div>;
 };
 
 const SolsticeApp = () => (
diff --git a/src/containers/ConnectPage.tsx b/src/containers/ConnectPage.tsx
index 153663c..31d1fdb 100644
--- a/src/containers/ConnectPage.tsx
+++ b/src/containers/ConnectPage.tsx
@@ -25,7 +25,7 @@ const ConnectPage: React.FC = () => {
   }
 
   return (
-    <div id="connect-page">
+    <div class="h-full w-full flex flex-col items-center justify-center">
       <ConnectForm socket={socket} />
     </div>
   );
diff --git a/src/index.css b/src/index.css
index b5c61c9..89bf6d3 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,11 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/* Full-screen app. */
+html,
+body,
+#root {
+  height: 100%;
+  width: 100%;
+}
diff --git a/src/index.tsx b/src/index.tsx
index a3218be..de70601 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -4,7 +4,6 @@ import { Provider } from "react-redux";
 import { BrowserRouter as Router } from "react-router-dom";
 
 import "index.css";
-import "./styles/styles.scss";
 
 import { store } from "./app/store";
 
diff --git a/tailwind.config.js b/tailwind.config.js
index 10970da..47a6cc4 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -5,7 +5,10 @@ module.exports = {
     extend: {},
   },
   variants: {
-    extend: {},
+    extend: {
+      textColor: ["disabled"],
+      backgroundColor: ["active", "disabled"],
+    },
   },
   plugins: [],
 };
