From f39164c0d828d7be6326595897adfab077179a86 Mon Sep 17 00:00:00 2001
From: tamara-taylor <ttaylor8522@gmail.com>
Date: Sat, 31 Jul 2021 15:14:20 -0400
Subject: [PATCH] added more styling

---
 app/src/App.js                 |  1 +
 app/src/components/Home.js     | 27 ++++++++++++++----
 app/src/components/Register.js | 51 ++++++++++++++++++++++++----------
 3 files changed, 59 insertions(+), 20 deletions(-)

diff --git a/app/src/App.js b/app/src/App.js
index 6d26549..0ee12cb 100644
--- a/app/src/App.js
+++ b/app/src/App.js
@@ -19,6 +19,7 @@ function App() {
 const H1 = styled.h1`
 font-size: 3rem;
 color: black;
+text-align: center;
 `
 
 export default App;
diff --git a/app/src/components/Home.js b/app/src/components/Home.js
index 04ee169..87ad6ba 100644
--- a/app/src/components/Home.js
+++ b/app/src/components/Home.js
@@ -73,20 +73,24 @@ export default function Home () {
                     <Link to='Register'>Register</Link>
                 </div>
             </div>
+            <br/>
             <form id='home-page' onSubmit={onSubmit}>
                 <div style={{color: 'red'}}>
                     <div>{error.username}</div><div>{error.password}</div>
                 </div>
                 <div>
-                    <label>Username
-                        <input onChange={onChange} value={home.username} name='username' type='text' />
+                    <label>Username:
+                        <Input onChange={onChange} value={home.username} name='username' type='text' />
                     </label>
-                    <label>Password
-                        <input onChange={onChange} value={home.password} name='password' type='text' />
+                    <br/>
+                    <label>Password:
+                        <Input onChange={onChange} value={home.password} name='password' type='text' />
                     </label>
+                    <br/>
                     <div className='login-style-button'>
                         <LoginButton disabled={disabled} id='login-button'>Login</LoginButton>
                     </div>
+                    <br/>
                     <div className='register-style-button'>
                         <Button id='register-button'>Register</Button>
                     </div>
@@ -114,4 +118,17 @@ background-color: black;
 font-size: 1.5rem;
 color: white;
 cursor: pointer;
-`
\ No newline at end of file
+`
+
+const Input = styled.input.attrs(props => ({
+    type: 'text',
+    size: props.size || '.5em',
+}))`
+color: black;
+font-size: 1em;
+border: 2px solid black;
+border-radius: 3px;
+
+margin: ${props => props.size};
+padding: ${props => props.size};
+`;
\ No newline at end of file
diff --git a/app/src/components/Register.js b/app/src/components/Register.js
index 27b86e6..5188b09 100644
--- a/app/src/components/Register.js
+++ b/app/src/components/Register.js
@@ -104,32 +104,40 @@ export default function Register (props){
                     <Link to='/'>Home</Link>
                 </div>
             </div>
+            <br/>
             <form id='register-form' onSubmit={onSubmit}>
                 <div style= {{color: 'red'}}>
                     <div>{error.firstname}</div><div>{error.lastname}</div><div>{error.email}</div><div>{error.phone}</div><div>{error.address}</div><div>{error.ssn}</div>
                 </div>
             <div>
-            <label>First Name
-                <input onChange={onChange} value={form.firstname} name='firstname' type='text' />
+            <label>First Name:
+                <Input onChange={onChange} value={form.firstname} name='firstname' type='text' />
             </label>
-            <label>Last Name
-                <input onChange={onChange} value={form.lastname} name='lastname' type='text' />
+            <br/>
+            <label>Last Name:
+                <Input onChange={onChange} value={form.lastname} name='lastname' type='text' />
             </label>
-            <label>User
-                <input onChange={onChange}  name='user' type='checkbox' checked={form.user} />
+            <br/>
+            <label>User:
+                <Input onChange={onChange}  name='user' type='checkbox' checked={form.user} />
             </label>
-            <label>Owner
-                <input onChange={onChange} name='owner' type='checkbox' checked={form.owner} />
+            <br/>
+            <label>Owner:
+                <Input onChange={onChange} name='owner' type='checkbox' checked={form.owner} />
             </label>
-            <label>Email
-                <input onChange={onChange} value={form.email} name='email' type='text' />
+            <br/>
+            <label>Email:
+                <Input onChange={onChange} value={form.email} name='email' type='text' />
             </label>
-            <label>Create Password
-                <input onChange={onChange} value={form.createpassword} name='create password' type='text' />
+            <br/>
+            <label>Create Password:
+                <Input onChange={onChange} value={form.createpassword} name='create password' type='text' />
             </label>
-            <label>Verify Password
-                <input onChange={onChange} value={form.verifypassword} name='verify password' type='text' />
+            <br/>
+            <label>Verify Password:
+                <Input onChange={onChange} value={form.verifypassword} name='verify password' type='text' />
             </label>
+            <br/>
             <div className='form-style-button'>
                 <Button disabled={disabled} id='register-button'>Submit</Button>
             </div>
@@ -148,4 +156,17 @@ background-color: black;
 font-size: 1.5rem;
 color: white;
 cursor: pointer;
-`
\ No newline at end of file
+`
+
+const Input = styled.input.attrs(props => ({
+    type: 'text',
+    size: props.size || '.5em',
+}))`
+color: black;
+font-size: 1em;
+border: 2px solid black;
+border-radius: 3px;
+
+margin: ${props => props.size};
+padding: ${props => props.size};
+`;
\ No newline at end of file