titouan
/
solstice-web
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Style /connect using Tailwind CSS.

main
Titouan Rigoudy 4 years ago
parent
fa719ec77c
commit
568ad64fcf
7 changed files with 30 additions and 9 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -1
      public/index.html
  2. +15
    -4
      src/components/ConnectForm.tsx
  3. +1
    -1
      src/components/SolsticeApp.tsx
  4. +1
    -1
      src/containers/ConnectPage.tsx
  5. +8
    -0
      src/index.css
  6. +0
    -1
      src/index.tsx
  7. +4
    -1
      tailwind.config.js

+ 1
- 1
public/index.html View File

@ -18,7 +18,7 @@
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <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. This HTML file is a template.
If you open it directly in the browser, you will see an empty page. If you open it directly in the browser, you will see an empty page.


+ 15
- 4
src/components/ConnectForm.tsx View File

@ -23,12 +23,14 @@ const ConnectForm: FC<Props> = ({ socket }) => {
const isSocketClosed = socket.state === SocketState.Closed; const isSocketClosed = socket.state === SocketState.Closed;
return ( 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 <Form
onSubmit={onSubmit} onSubmit={onSubmit}
render={({ handleSubmit, submitting }) => ( render={({ handleSubmit, submitting }) => (
<form onSubmit={handleSubmit}>
<form onSubmit={handleSubmit} class="my-2">
<Field <Field
name="url" name="url"
component="input" component="input"
@ -36,8 +38,17 @@ const ConnectForm: FC<Props> = ({ socket }) => {
defaultValue="ws://localhost:2244" defaultValue="ws://localhost:2244"
required required
pattern="wss?://.+" 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 Connect
</button> </button>
</form> </form>


+ 1
- 1
src/components/SolsticeApp.tsx View File

@ -47,7 +47,7 @@ const ConnectedApp: FC = ({ children }) => {
); );
} }
return <div id="solstice-app">{children}</div>;
return <div>{children}</div>;
}; };
const SolsticeApp = () => ( const SolsticeApp = () => (


+ 1
- 1
src/containers/ConnectPage.tsx View File

@ -25,7 +25,7 @@ const ConnectPage: React.FC = () => {
} }
return ( return (
<div id="connect-page">
<div class="h-full w-full flex flex-col items-center justify-center">
<ConnectForm socket={socket} /> <ConnectForm socket={socket} />
</div> </div>
); );


+ 8
- 0
src/index.css View File

@ -1,3 +1,11 @@
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
/* Full-screen app. */
html,
body,
#root {
height: 100%;
width: 100%;
}

+ 0
- 1
src/index.tsx View File

@ -4,7 +4,6 @@ import { Provider } from "react-redux";
import { BrowserRouter as Router } from "react-router-dom"; import { BrowserRouter as Router } from "react-router-dom";
import "index.css"; import "index.css";
import "./styles/styles.scss";
import { store } from "./app/store"; import { store } from "./app/store";


+ 4
- 1
tailwind.config.js View File

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

Write Preview
Loading…
Cancel
Save