nicer styling on login/signup page

4 files changed, 23 insertions, 13 deletions

diff --git a/public/index.html b/public/index.html
index b08669b..4b756bb 100644
--- a/public/index.html
+++ b/public/index.html
@@ -7,7 +7,7 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="Truly free and open-source DNS hosting"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
diff --git a/src/App.js b/src/App.js
index 80ac3b3..62e8506 100644
--- a/src/App.js
+++ b/src/App.js
@@ -6,9 +6,9 @@ import Records from './routes/Records'
 import SignUp from './routes/SignUp.js'
 import Zones from './routes/Zones'
 import Button from './uikit/Button'
+import { styled } from '@stitches/react'
 import { BrowserRouter, Route, Routes } from 'react-router-dom'
 import { Link, useNavigate } from 'react-router-dom'
-import { styled } from '@stitches/react'
 
 const MessageBar = styled('div', {
   display: 'flex',
@@ -17,9 +17,10 @@ const MessageBar = styled('div', {
   padding: '0px',
   fontSize: '1.5em',
   fontWeight: 'bold',
-  background: 'repeating-linear-gradient(-45deg, #ffff00, #ffff00 20px, #000000 20px, #000000 40px)',
+  background:
+    'repeating-linear-gradient(-45deg, #ffff00, #ffff00 20px, #000000 20px, #000000 40px)',
   width: '100%',
-});
+})
 const MessageBox = styled('div', {
   fontSize: '1.5em',
   padding: '0px 2em',
@@ -76,11 +77,12 @@ function App() {
 
   return (
     <div className="App">
-    <MessageBar>
-      <MessageBox>
-        This software is in public alpha. Please don't use it for anything critical
-      </MessageBox>
-    </MessageBar>
+      <MessageBar>
+        <MessageBox>
+          This software is in public alpha. Please don't use it for anything
+          critical
+        </MessageBox>
+      </MessageBar>
       <BrowserRouter>
         <header>
           <Link to={auth.isAuthenticated() ? '/zones' : '/'}>
diff --git a/src/routes/Login.js b/src/routes/Login.js
index 1b5befc..facfa5e 100644
--- a/src/routes/Login.js
+++ b/src/routes/Login.js
@@ -90,7 +90,11 @@ function Login(props) {
         )}
         <AlignRight>
           {/* <Button secondary>Cancel</Button> */}
-          <Button onClick={handleSubmit} primary>
+          <Button
+            style={{ width: '100%', marginTop: '16px' }}
+            onClick={handleSubmit}
+            primary
+          >
             Log In {'\u2794'}
           </Button>
         </AlignRight>
diff --git a/src/routes/SignUp.js b/src/routes/SignUp.js
index 85b7bf0..469f76d 100644
--- a/src/routes/SignUp.js
+++ b/src/routes/SignUp.js
@@ -19,10 +19,11 @@ export const LoginCard = styled('div', {
   boxShadow: '0 4px 6px rgba(0,0,0,0.1)',
   borderRadius: '12px',
   padding: '1em',
-  marginTop: '20vh',
+  marginTop: '10vh',
   border: '1px solid #D4D4D8',
   backgroundColor: '#F4F4F5',
   width: '360px',
+  textAlign: 'left',
 })
 
 export const Title = styled('h1', {
@@ -180,8 +181,11 @@ export function SignUp() {
           type="password"
         ></Input>
         <AlignRight>
-          {/* <Button secondary>Cancel</Button> */}
-          <Button onClick={handleSubmit} primary>
+          <Button
+            style={{ width: '100%', marginTop: '16px' }}
+            onClick={handleSubmit}
+            primary
+          >
             Sign Up {'\u2794'}
           </Button>
         </AlignRight>