Merge pull request #76 from Taks07/main

Auth forms now use more of the tailwind config styles

frontend/src/components/AuthForm.jsx

@@ -5,7 +5,7 @@ import axios from "axios";
 // This component is a reusable form that can be used for both the login and signup pages. This was done to reduce code duplication.
 export default function AuthForm({endpoint, title, buttonText, redirectTitleText, redirectLink, redirectText}) {
     const labelStyle = "text-2xl";
-    const inputStyle = "border-2 w-64 h-8 p-2 rounded-lg mb-4 mt-2 border-black focus:border-blue-800 focus:outline-none";
+    const inputStyle = "border-2 w-64 h-8 p-2 rounded-lg mb-4 mt-2 border-primary focus:border-primary-highlight focus:outline-none";
 
     const [email, setEmail] = useState("");
     const [password, setPassword] = useState("");
@@ -29,7 +29,7 @@ export default function AuthForm({endpoint, title, buttonText, redirectTitleText
     }
 
     return (
-        <form className="flex flex-col border-2 items-center border-blue-800 w-80 p-4 rounded-xl bg-blue-100">
+        <form className="flex flex-col border-2 items-center border-primary-dark w-80 p-4 rounded-xl bg-blue-100">
             <h2 className="text-4xl font-bold text-center mb-4">{title}</h2>
             <div className="flex flex-col">
                 <label className={labelStyle} htmlFor="email">Email</label>
@@ -39,9 +39,9 @@ export default function AuthForm({endpoint, title, buttonText, redirectTitleText
                 <label className={labelStyle} htmlFor="password">Password</label>
                 <input className={inputStyle} required type="password" onChange={(e) => {setPassword(e.target.value)}} value={password} />
             </div>
-            <button className="w-60 bg-blue-600 text-white text-2xl p-2 rounded-lg mt-4" onClick={(e) => handleSubmit(e)}>{buttonText}</button>
+            <button className="w-60 bg-primary text-white text-button p-2 rounded-lg mt-4" onClick={(e) => handleSubmit(e)}>{buttonText}</button>
             <p className="text-xl mt-4">{redirectTitleText}</p>
-            <Link to={redirectLink} className="text-blue-800 text-xl">{redirectText}</Link>
+            <Link to={redirectLink} className="text-primary-highlight text-xl">{redirectText}</Link>
         </form>
     );
 }