Merge pull request #22 from Capstone-Projects-2022-Spring/BAZ-116-consistent-theming-for-login-register-page

Baz 116 consistent theming for login register page

Author: linlioechsle

src/Components/Pages/LoginPage/LoginForm.js

@@ -126,7 +126,7 @@ export function LoginForm() {
   // );
 
   const RegisterText = props => (
-    <div className="switchText">
+    <div className="switchText text-center text-gray-500">
       Are you new here?
       <Link to="/register">
         Click here to register.
@@ -164,7 +164,7 @@ export function LoginForm() {
   )
 
   return (
-    <section className='login_form'>
+    <section className='bg-purple-400 p-6 '>
       <div id="loginform">
         {renderLoggedInMessage()}
         <FormHeader title="Login" />
@@ -190,8 +190,8 @@ export function LoginForm() {
           value={password}
           onChange={handlePasswordChange}
         /> */}
-        <div id="button" className="row">
-          <button onClick={(username, password) => handleFormSubmit(username, password)}>
+        <div id="button" className=" flex justify-center items-center my-4   ">
+          <button className="bg-purple-500 px-2 py-1  text-white rounded-full w-48 text-white" onClick={(username, password) => handleFormSubmit(username, password)}>
             Log in
           </button>
         </div>
@@ -201,4 +201,4 @@ export function LoginForm() {
       </div>
     </section>
   )
-}
+}

src/Components/Pages/LoginPage/styles.css

@@ -8,8 +8,8 @@ html{
   font-size: 100%;
 }
 .login_form{
-  background: rgb(34,193,195);
-  background: linear-gradient(135deg, rgba(34,193,195,1) 0%,     rgba(253,187,45,1) 100%);
+  /* background: rgb(34,193,195);
+  background: linear-gradient(135deg, rgba(34,193,195,1) 0%,     rgba(253,187,45,1) 100%); */
   font-family: "work sans";
   width: 100%;
   height: 100%;
@@ -85,8 +85,8 @@ html{
   font-size: 1.3rem;
   color: white;
   font-weight: 700;
-  background: rgb(34,193,195);
-  background: linear-gradient(90deg, rgba(34,193,195,1) 0%,     rgba(253,187,45,1) 100%);
+  /* background: rgb(34,193,195);
+  background: linear-gradient(90deg, rgba(34,193,195,1) 0%,     rgba(253,187,45,1) 100%); */
   border: 0px;
   cursor: pointer;
   transition: opacity 0.25s ease-out;

src/Components/Pages/RegisterPage/RegisterForm.js

@@ -7,7 +7,7 @@ export class RegisterForm extends React.Component {
     render(){
     return(
         <>
-        <section className='regiser'>
+        <section className='bg-purple-400 p-6'>
         <div id="registerform">
             <FormHeader title="Register" />
             <Form />
@@ -36,8 +36,8 @@ const Form = props => (
 );
 
 const FormButton = props => (
-<div id="button" class="row">
-    <button>{props.title}</button>
+<div id="button" className="flex justify-center items-center my-4">
+    <button className="bg-purple-500 px-2 py-1 text-white rounded-full w-48 text-white">{props.title}</button>
 </div>
 );
 
@@ -49,7 +49,7 @@ const FormInput = props => (
 );
 
 const LoginButton = props => (
-    <div class="switchText">
+    <div className="switchText text-center text-gray-500">
         Already have an account?
         <Link to="/">
             Click here to log in.