UI changes

6 files changed, 35 insertions, 16 deletions

diff --git a/package.json b/package.json
index 3faaa2d..3ccebe8 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,7 @@
     "eject": "react-scripts eject",
     "deploy": "rsync -avz build/ root@hostsdottxt.net:/var/www/html/"
   },
-  "proxy": "http://hostsdottxt.net",
+  "proxy": "http://localhost:8080",
   "eslintConfig": {
     "extends": [
       "react-app",
diff --git a/src/routes/Login.js b/src/routes/Login.js
index e6ae7f1..98c887d 100644
--- a/src/routes/Login.js
+++ b/src/routes/Login.js
@@ -23,14 +23,17 @@ const Flex = styled("div", {
   alignItems: "center",
   justifyContent: "center",
   minHeight: "100vh",
+  // If ever we decide to move the title out of the login card itself
+  flexDirection: "column"
 });
 
 const LoginCard = styled("div", {
   boxShadow: "0 4px 6px rgba(0,0,0,0.1)",
-  borderRadius: "4px",
+  borderRadius: "12px",
   padding: "1em",
   border: "1px solid #D4D4D8",
   backgroundColor: "#F4F4F5",
+  width: "360px"
 });
 
 const Title = styled("h1", {
@@ -124,13 +127,13 @@ function Login(props) {
       <LoginCard>
         <Title>HOSTSdotTXT</Title>
         <Subtitle>Log In</Subtitle>
-        <StyledLabel for="email">Email</StyledLabel>
+        <StyledLabel htmlFor="email">Email</StyledLabel>
         <Input id="email" type="email" onChange={checkTotpRequired}></Input>
-        <StyledLabel for="password">Password</StyledLabel>
+        <StyledLabel htmlFor="password">Password</StyledLabel>
         <Input id="password" type="password" onKeyUp={onKeyPress}></Input>
         {features.totp && (
           <>
-            <StyledLabel for="totp">TOTP Code</StyledLabel>
+            <StyledLabel htmlFor="totp">TOTP Code</StyledLabel>
             <Input
               id="totp"
               disabled={!totpRequired}
diff --git a/src/routes/Records.css b/src/routes/Records.css
index 662bfa0..2ab2d82 100644
--- a/src/routes/Records.css
+++ b/src/routes/Records.css
@@ -92,3 +92,16 @@
   margin: auto;
   text-align: left;
 }
+
+/* keep weight consistent with login screen */
+.modal-table th {
+  font-weight: 400;
+}
+
+/* Can't find how to proprely style this */
+.ReactModal__Content {
+  border-radius: 10px !important;
+  border-color: #d4d4d8 !important;
+  background-color: #FAFAFA !important;
+  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+}
diff --git a/src/routes/Records.js b/src/routes/Records.js
index 86b21a3..b5d0486 100644
--- a/src/routes/Records.js
+++ b/src/routes/Records.js
@@ -8,6 +8,7 @@ import Modal from "react-modal";
 import useFetch from "../hooks/useFetch";
 import { useParams } from "react-router-dom";
 import Button from "../uikit/Button";
+import Input from "../uikit/Input"
 
 const modalStyle = {
   content: {
@@ -134,7 +135,7 @@ export function Records() {
             <tbody>
               <tr>
                 <td>
-                  <input
+                  <Input
                     rows={1}
                     onChange={(e) =>
                       setOpenRecord({
@@ -143,10 +144,10 @@ export function Records() {
                       })
                     }
                     defaultValue={openRecord.name}
-                  ></input>
+                  ></Input>
                 </td>
                 <td>
-                  <input
+                  <Input
                     rows={1}
                     onChange={(e) =>
                       setOpenRecord({
@@ -155,10 +156,10 @@ export function Records() {
                       })
                     }
                     defaultValue={openRecord.content}
-                  ></input>
+                  ></Input>
                 </td>
                 <td>
-                  <input
+                  <Input
                     rows={1}
                     onChange={(e) =>
                       setOpenRecord({
@@ -168,7 +169,7 @@ export function Records() {
                     }
                     type="number"
                     defaultValue={openRecord.ttl}
-                  ></input>
+                  ></Input>
                 </td>
               </tr>
             </tbody>
diff --git a/src/uikit/Button.js b/src/uikit/Button.js
index 100b14e..d14ca06 100644
--- a/src/uikit/Button.js
+++ b/src/uikit/Button.js
@@ -2,13 +2,14 @@ import { styled } from "@stitches/react";
 
 export const Button = styled("button", {
   display: "block",
-  padding: "0.5rem",
+  // Making the button wider makes it look less cramped
+  padding: "0.5rem 1rem",
   fontSize: "1rem",
   margin: "0.2rem",
   border: "none",
-  borderRadius: "4px",
+  borderRadius: "6px",
   color: "#fafafa",
-  transition: "background-color 0.2s ease-in-out",
+  transition: "background-color 0.1s ease-out",
 
   variants: {
     primary: {
diff --git a/src/uikit/Input.js b/src/uikit/Input.js
index 6614e7b..338f8f1 100644
--- a/src/uikit/Input.js
+++ b/src/uikit/Input.js
@@ -3,8 +3,9 @@ import { styled } from "@stitches/react";
 export const StyledInput = styled("input", {
   padding: "0.5em",
   border: "1px solid #D4D4D8",
-  borderRadius: "4px",
-  minWidth: "320px",
+  borderRadius: "6px",
+  // Not my favourite way of doing this, but padding doesn't add to width
+  width: "calc(100% - 1em)",
   fontSize: "1rem",
   marginBottom: "0.5em",
 });