Merge pull request #108 from agiledev-students-spring2024/kiara

color changes to the sign up page
agiledev-students-spring2024 · Apr 9, 2024 · c307946 · c307946
2 parents bced438 + 89d3bd2
commit c307946
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 14 deletions.
diff --git a/front-end/src/App.css b/front-end/src/App.css
@@ -3,11 +3,11 @@
 @tailwind utilities;
 
 .btn {
-  @apply px-4 py-2 bg-goodreads-darkblue text-white font-semibold rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50;
+  @apply px-4 py-2 bg-goodreads-lightgray text-white font-semibold rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50;
 }
 
 .btn-sm {
-  @apply px-1 py-1 text-xs bg-goodreads-darkblue text-white font-semibold rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50;
+  @apply px-1 py-1 text-xs bg-goodreads-lightgray text-white font-semibold rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50;
 }
 
 .App {
@@ -56,7 +56,6 @@
   align-items: center;
   justify-content: center;
   height: 100vh;
-  background-color: #e9e5cd;
 }
 
 .titleContainer {

diff --git a/front-end/src/pages/Form/login.js b/front-end/src/pages/Form/login.js
@@ -54,7 +54,7 @@ const Login = ({ registeredUser, setLoggedInUser }) => {
   };
 
   return (
-    <div className='flex flex-col items-center justify-center h-lvh bg-[#e9e5cd]'>
+    <div className='bg-goodreads-white flex flex-col items-center justify-center h-lvh'>
       <div className='flex flex-col text-[64px] font-bold items-center justify-center'>
         <div>Login</div>
       </div>
@@ -66,7 +66,7 @@ const Login = ({ registeredUser, setLoggedInUser }) => {
           value={email}
           placeholder="Enter your email here"
           onChange={(ev) => setEmail(ev.target.value)}
-          className='h-[48px] w-[300px] text-lg rounded-lg pl-2'
+          className='border border-gray-600 h-[48px] w-[300px] text-lg rounded-lg pl-2'
         />
         <label className="errorLabel">{emailError}</label>
       </div>
@@ -77,13 +77,13 @@ const Login = ({ registeredUser, setLoggedInUser }) => {
           value={password}
           placeholder="Enter your password here"
           onChange={(ev) => setPassword(ev.target.value)}
-          className='h-[48px] w-[300px] text-lg rounded-lg pl-2'
+          className='border border-gray-600 h-[48px] w-[300px] text-lg rounded-lg pl-2'
         />
         <label className="errorLabel">{passwordError}</label>
       </div>
       <br />
       <div className='flex flex-col items-start justify-center'>
-        <button className='bg-[rgba(51,_51,_51,_0.05)] hover:bg-[rgba(51,_51,_51,_0.2)] rounded-[8px] cursor-pointer text-[18px] font-medium leading-[20px] px-[20px] py-[10px] text-center' onClick={handleLogin}>
+        <button className='border border-gray-600 bg-[rgba(51,_51,_51,_0.05)] hover:bg-[rgba(51,_51,_51,_0.2)] rounded-[8px] cursor-pointer text-[18px] font-medium leading-[20px] px-[20px] py-[10px] text-center' onClick={handleLogin}>
           Log in
         </button>
       </div>

diff --git a/front-end/src/pages/home.js b/front-end/src/pages/home.js
@@ -6,13 +6,13 @@ const Home = ({ loggedInUser }) => {
   const navigate = useNavigate();
 
   return (
-    <div className="mainContainer">
+    <div className="mainContainer bg-goodreads-white">
       <div className={"titleContainer"}>
         <div className={"appIcon"}>
           <img src={appIcon} alt="icon" className="w-20 h-20" />
         </div>
-        <div className="text-goodreads-darkbrown">Welcome</div>
-        <div className="text-2xl text-goodreads-brown">to readTrack!</div>
+        <div className="text-goodreads-black">Welcome</div>
+        <div className="text-2xl text-goodreads-black">to readTrack!</div>
         <div className="mt-4"></div>
       </div>
       <div className="flex flex-col space-y-4">

diff --git a/front-end/tailwind.config.js b/front-end/tailwind.config.js
@@ -5,15 +5,18 @@ module.exports = {
     extend: {
       colors: {
         goodreads: {
-          white: "#FFFCEC", //offwhite 
-          lightcream: "#e9e5cd", //
-          darkblue: "#003049",
-          lightblue: "#669BBC",
+          white: "#FFFFFF",
+          lightgray: "#D9D9D9",
+          black: "#000000",
         },
       },
       backgroundImage: {
         'custom-gradient': 'linear-gradient(to bottom, #003049, #669BBC)',
       },
+      outline: {
+        lightgray: '2px solid #D9D9D9',
+      }
+
     },
   },
   plugins: [],