Style /connect using Tailwind CSS.

4 years ago · 568ad64fcf
--- 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.
--- 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>
--- 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 = () => (
--- 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>
  );
--- 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%;
 }
--- 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";

--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -5,7 +5,10 @@ module.exports = {
    extend: {},
  },
  variants: {
    extend: {},
    extend: {
      textColor: ["disabled"],
      backgroundColor: ["active", "disabled"],
    },
  },
  plugins: [],
 };