move things around

rfront/public/style.css

@@ -1,14 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
-

rfront/src/App.js

@@ -1,6 +1,6 @@
-import "./App.css";
+import "./styles/App.css";
-import Messages from "./Messages";
+import Messages from "./components/Messages";
-import TextField from "./TextField";
+import TextField from "./components/TextField";
 import { useEffect, useState } from "react";
 import { io } from "socket.io-client";
 

rfront/src/index.js

@@ -1,6 +1,8 @@
-import React from "react";
+import React from 'react';
-import ReactDOM from "react-dom/client";
+import ReactDOM from 'react-dom/client';
-import App from './components/App';
 
-const root = ReactDOM.createRoot(document.getElementById("root"));
+import './styles/index.css';
-root.render(<App />);
+import App from './App';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(<App />);

rfront/src/styles/index.css

@@ -0,0 +1,65 @@
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: sans-serif;
+}
+
+body {
+  margin: 0;
+  background-color: #383838;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+label {
+  font-weight: bold;
+  margin-bottom: 0.5rem;
+  display: block;
+  font-size: 1.25rem;
+}
+
+input {
+  font: inherit;
+  padding: 1rem;
+  border: 1px solid #ccc;
+  font-size: 1.5rem;
+  display: block;
+  width: 100%;
+  margin-bottom: 1rem;
+  border-radius: 30px;
+  text-align: center;
+  color: #242424;
+}
+
+input:focus {
+  outline: none;
+  border-color: #6e0040;
+  background-color: #ffdff2;
+}
+
+button {
+  font: inherit;
+  background-color: #6e0040;
+  color: white;
+  border: 1px solid #6e0040;
+  border-radius: 30px;
+  padding: 0.5rem 1.5rem;
+  cursor: pointer;
+  font-size: 2rem;
+}
+
+button:hover,
+button:active {
+  background-color: #b80e71;
+  border-color: #b80e71;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}