fix sign in page styling

394-w25 · Jan 15, 2025 · 8b5e4ff · 8b5e4ff
1 parent 3dc6c1c
commit 8b5e4ff
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 17 deletions.
diff --git a/src/components/SignIn/SignIn.css b/src/components/SignIn/SignIn.css
@@ -5,30 +5,20 @@
     min-height: 100vh;
     margin: 0;
     padding: 0;
-  }
-
-  .signin-card {
-    background-color: #ffffff;
-    border-radius: 12px;
-    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
-    padding: 40px 30px;
-    max-width: 400px;
-    width: 90%;
-    text-align: center;
+    flex-direction: column;
   }
 
   .logo {
     display: block;
     margin: 0 auto 20px auto;
-    max-width: 400px;
+    max-width: 300px;
     height: auto;
   }
 
-
     .signin-button {
     background-color: #4285f4;
     color: #ffffff;
-    padding: 16px 100px;
+    padding: 16px 20px;
     font-size: 1.25rem;
     font-weight: 500;
     border: none;

diff --git a/src/components/SignIn/SignIn.jsx b/src/components/SignIn/SignIn.jsx
@@ -2,6 +2,7 @@ import { signInWithGooglePopup } from "../../utilities/firebase";
 import { useNavigate } from "react-router-dom";
 import "./SignIn.css";
 import logo from "../../images/CBLogo.png";
+import { Container } from '@mui/material';
 
 const SignIn = ({ setUser, setUserEmail }) => {
   const navigate = useNavigate();
@@ -21,14 +22,12 @@ const SignIn = ({ setUser, setUserEmail }) => {
   };
 
   return (
-    <div className="signin-page">
-      <div className="signin-card">
+    <Container className="signin-page" maxWidth="sm">
         <img className="logo" src={logo} alt="CourseBuddy Logo" />
         <button className="signin-button" onClick={logGoogleUser}>
           Sign in with Google
         </button>
-      </div>
-    </div>
+    </Container>
   );
 };