Merge pull request #138 from tahmid-saj/dev-dashboard-styling

bootstrapping home and sign in / up
tahmid-saj · Jun 21, 2024 · 88440d4 · 88440d4
2 parents 1cb0402 + 5f14dc8
commit 88440d4
Show file tree

Hide file tree

Showing 7 changed files with 108 additions and 64 deletions.
diff --git a/src/components/shared/mui/media-card/media-card.component.jsx b/src/components/shared/mui/media-card/media-card.component.jsx
@@ -13,31 +13,22 @@ export default function MediaCard({ styles, header, imageUrl, imageTitle, path,
   const navigate = useNavigate()
 
   return (
-    <Card sx={{ margin: "1%", ...styles }} onClick={ () => navigate(path) }>
-      <CardMediaContainer>
-        <CardMedia
+    <Card sx={{ ...styles }} onClick={ () => navigate(path) }>
+      <CardMedia
           // sx={{ height: styles.height }}
           // src={ "https://buffer.com/library/content/images/2023/10/free-images.jpg" }
           title={`${imageTitle}`}
         />
-        <img src={`${imageUrl}`} alt={ `${imageTitle}` } width={ styles.width } height={ styles.height * 0.66 } objectFit={ "contain" }/>
-        <CardContent>
+        <img src={`${imageUrl}`} alt={ `${imageTitle}` } width={ styles.width } height={ styles.height * 0.67 } objectFit={ "contain" }/>
+      <CardMediaContainer>
+        <CardContent sx={{ height: styles.height }}>
           <Typography gutterBottom variant="h5" component="div">
             { header }
           </Typography>
           <Typography variant="body2" color="text.secondary">
             { content }
           </Typography>
         </CardContent>
-
-        <CardActions>
-          {/* <Button size="small">Share</Button> */}
-          <Button size="small">
-            <Link to={ path }>
-              Learn More
-            </Link>
-          </Button>
-        </CardActions>
       </CardMediaContainer>
     </Card>
   );

diff --git a/src/components/signed-out/sign-in-form/sign-in-form.component.jsx b/src/components/signed-out/sign-in-form/sign-in-form.component.jsx
@@ -70,13 +70,19 @@ const SignInForm = () => {
         <FormInput label="Password" type="password" required onChange={ handleChange }
                   name="password" value={ password }/>
 
-        <div className="buttons-container">
-          <Button type="submit">Sign In</Button>
-          <Button buttonType="google-sign-in" type="button"
-                  onClick={ signInWithGoogle }>Google Sign In</Button>
+        <div className="container">
+          <div className="row justify-content-evenly align-items-center">
+            <div className="col-sm-12 col-md-2 button-container">
+              <Button type="submit">Sign In</Button>
+            </div>
+
+            <div className="col-sm-12 col-md-2 button-container">
+              <Button buttonType="google-sign-in" type="button"
+                      onClick={ signInWithGoogle }>Google Sign In</Button>
+            </div>
+          </div>
         </div>                  
       </form>
-
     </div>
   );
 };

diff --git a/src/components/signed-out/sign-in-form/sign-in-form.styles.scss b/src/components/signed-out/sign-in-form/sign-in-form.styles.scss
@@ -1,16 +1,17 @@
 .sign-in-container {
-  display: flex;
-  flex-direction: column;
-  width: 400px;
-  margin-top: 2%;
+  display: block;
+  // flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  // width: 400px;
+  margin: 2% 20% 2% 20%;
 
   h2 {
     margin: 10px 0;
   }
 
-  .buttons-container {
-    display: flex;
-    justify-content: space-between;
+  .button-container {
     width: 400px;
+    margin-bottom: 4%;
   }
 }
diff --git a/src/components/signed-out/sign-up-form/sign-up-form.styles.scss b/src/components/signed-out/sign-up-form/sign-up-form.styles.scss
@@ -1,8 +1,10 @@
 .sign-up-container {
-  display: flex;
-  flex-direction: column;
-  width: 380px;
-  margin-top: 2%;
+  display: block;
+  // flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  // width: 380px;
+  margin: 2% 20% 2% 20%;
 
   h2 {
     margin: 10px 0;

diff --git a/src/pages/shared/home/home.component.jsx b/src/pages/shared/home/home.component.jsx
@@ -11,9 +11,10 @@ import { selectCurrentUser } from "../../../store/shared/user/user.selector.js";
 import { COLOR_CODES, NAV_LINKS } from "../../../utils/constants/shared.constants.js";
 
 const styles = {
-  width: 475,
-  height: 500,
-  backgroundColor: COLOR_CODES.general["0"]
+  width: 350,
+  height: 450,
+  backgroundColor: COLOR_CODES.general["0"],
+  marginBottom: "6%"
 }
 
 const Home = () => {
@@ -79,38 +80,54 @@ const Home = () => {
 
   return (
     <Fragment>
-      <HomeContainer>
-        <MediaCard styles={ styles } header={ homeCardContent.chatbot.header } imageUrl={ homeCardContent.chatbot.imageUrl } 
-          imageTitle={ homeCardContent.chatbot.header } path={ homeCardContent.chatbot.path } content={ homeCardContent.chatbot.description }></MediaCard>
+      <div className="container">
+        <div className="row justify-content-center align-items-center">
+          <div className="col-sm-12 col-md-6 col-lg-4">
+            <MediaCard styles={ styles } header={ homeCardContent.chatbot.header } imageUrl={ homeCardContent.chatbot.imageUrl } 
+            imageTitle={ homeCardContent.chatbot.header } path={ homeCardContent.chatbot.path } content={ homeCardContent.chatbot.description }></MediaCard>
+          </div>
 
-        <MediaCard styles={ styles } header={ homeCardContent.storage.header } imageUrl={ homeCardContent.storage.imageUrl } 
-          imageTitle={ homeCardContent.storage.header } path={ homeCardContent.storage.path } content={ homeCardContent.storage.description }></MediaCard>
-
-        <MediaCard styles={ styles } header={ homeCardContent.nutrientPredictor.header } imageUrl={ homeCardContent.nutrientPredictor.imageUrl } 
-          imageTitle={ homeCardContent.nutrientPredictor.header } path={ homeCardContent.nutrientPredictor.path } content={ homeCardContent.nutrientPredictor.description }></MediaCard>
-      </HomeContainer>
+          <div className="col-sm-12 col-md-6 col-lg-4">
+            <MediaCard styles={ styles } header={ homeCardContent.storage.header } imageUrl={ homeCardContent.storage.imageUrl } 
+            imageTitle={ homeCardContent.storage.header } path={ homeCardContent.storage.path } content={ homeCardContent.storage.description }></MediaCard>
+          </div>
 
-      <HomeContainer>
-        <MediaCard styles={ styles } header={ homeCardContent.nutritionTracker.header } imageUrl={ homeCardContent.nutritionTracker.imageUrl } 
-          imageTitle={ homeCardContent.nutritionTracker.header } path={ homeCardContent.nutritionTracker.path } content={ homeCardContent.nutritionTracker.description }></MediaCard>
+          <div className="col-sm-12 col-md-6 col-lg-4">
+            <MediaCard styles={ styles } header={ homeCardContent.nutrientPredictor.header } imageUrl={ homeCardContent.nutrientPredictor.imageUrl } 
+            imageTitle={ homeCardContent.nutrientPredictor.header } path={ homeCardContent.nutrientPredictor.path } content={ homeCardContent.nutrientPredictor.description }></MediaCard>
+          </div>
 
-        <MediaCard styles={ styles } header={ homeCardContent.fitness.header } imageUrl={ homeCardContent.fitness.imageUrl } 
-          imageTitle={ homeCardContent.fitness.header } path={ homeCardContent.fitness.path } content={ homeCardContent.fitness.description }></MediaCard>
+          <div className="col-sm-12 col-md-6 col-lg-4">
+            <MediaCard styles={ styles } header={ homeCardContent.nutritionTracker.header } imageUrl={ homeCardContent.nutritionTracker.imageUrl } 
+            imageTitle={ homeCardContent.nutritionTracker.header } path={ homeCardContent.nutritionTracker.path } content={ homeCardContent.nutritionTracker.description }></MediaCard>
+          </div>
 
-        <MediaCard styles={ styles } header={ homeCardContent.caloriesBurned.header } imageUrl={ homeCardContent.caloriesBurned.imageUrl } 
-          imageTitle={ homeCardContent.caloriesBurned.header } path={ homeCardContent.caloriesBurned.path } content={ homeCardContent.caloriesBurned.description }></MediaCard>
-      </HomeContainer>
+          <div className="col-sm-12 col-md-6 col-lg-4">
+            <MediaCard styles={ styles } header={ homeCardContent.fitness.header } imageUrl={ homeCardContent.fitness.imageUrl } 
+            imageTitle={ homeCardContent.fitness.header } path={ homeCardContent.fitness.path } content={ homeCardContent.fitness.description }></MediaCard>
+          </div>
 
-      <HomeContainer>
-        <MediaCard styles={ styles } header={ homeCardContent.recipes.header } imageUrl={ homeCardContent.recipes.imageUrl } 
-          imageTitle={ homeCardContent.recipes.header } path={ homeCardContent.recipes.path } content={ homeCardContent.recipes.description }></MediaCard>
+          <div className="col-sm-12 col-md-6 col-lg-4">
+            <MediaCard styles={ styles } header={ homeCardContent.caloriesBurned.header } imageUrl={ homeCardContent.caloriesBurned.imageUrl } 
+            imageTitle={ homeCardContent.caloriesBurned.header } path={ homeCardContent.caloriesBurned.path } content={ homeCardContent.caloriesBurned.description }></MediaCard>
+          </div>
 
-        <MediaCard styles={ styles } header={ homeCardContent.notifications.header } imageUrl={ homeCardContent.notifications.imageUrl } 
-          imageTitle={ homeCardContent.notifications.header } path={ homeCardContent.notifications.path } content={ homeCardContent.notifications.description }></MediaCard>
+          <div className="col-sm-12 col-md-6 col-lg-4">
+            <MediaCard styles={ styles } header={ homeCardContent.recipes.header } imageUrl={ homeCardContent.recipes.imageUrl } 
+            imageTitle={ homeCardContent.recipes.header } path={ homeCardContent.recipes.path } content={ homeCardContent.recipes.description }></MediaCard>
+          </div>
 
-        <MediaCard styles={ styles } header={ homeCardContent.summary.header } imageUrl={ homeCardContent.summary.imageUrl } 
-          imageTitle={ homeCardContent.summary.header } path={ homeCardContent.summary.path } content={ homeCardContent.summary.description }></MediaCard>
-      </HomeContainer>
+          <div className="col-sm-12 col-md-6 col-lg-4">
+            <MediaCard styles={ styles } header={ homeCardContent.notifications.header } imageUrl={ homeCardContent.notifications.imageUrl } 
+            imageTitle={ homeCardContent.notifications.header } path={ homeCardContent.notifications.path } content={ homeCardContent.notifications.description }></MediaCard>
+          </div>
+
+          <div className="col-sm-12 col-md-6 col-lg-4">
+            <MediaCard styles={ styles } header={ homeCardContent.summary.header } imageUrl={ homeCardContent.summary.imageUrl } 
+            imageTitle={ homeCardContent.summary.header } path={ homeCardContent.summary.path } content={ homeCardContent.summary.description }></MediaCard>
+          </div>
+        </div>
+      </div>
     </Fragment>
   );
 };

diff --git a/src/routes/signed-out/authentication/authentication.component.jsx b/src/routes/signed-out/authentication/authentication.component.jsx
@@ -3,11 +3,38 @@ import "./authentication.styles.scss";
 import SignInForm from "../../../components/signed-out/sign-in-form/sign-in-form.component";
 import SignUpForm from "../../../components/signed-out/sign-up-form/sign-up-form.component";
 
+import ItemTabs from "../../../components/shared/mui/tabs/tabs.component";
+import LoginIcon from '@mui/icons-material/Login';
+import AppRegistrationIcon from '@mui/icons-material/AppRegistration';
+
 const AuthenticationRoute = () => {
+  const tabList = [
+    {
+      value: "sign-in-form",
+      icon: <LoginIcon/>,
+      label: "Sign In"
+    },
+    {
+      value: "sign-up-form",
+      icon: <AppRegistrationIcon/>,
+      label: "Register"
+    }
+  ]
+
+  const panelList = [
+    {
+      value: "sign-in-form",
+      children: <SignInForm/>
+    },
+    {
+      value: "sign-up-form",
+      children: <SignUpForm/>
+    }
+  ]
+
   return (
     <div className="authentication-container">
-      <SignInForm/>
-      <SignUpForm/>
+      <ItemTabs tabList={ tabList } panelList={ panelList }></ItemTabs>
     </div>
   );
 };

diff --git a/src/routes/signed-out/authentication/authentication.styles.scss b/src/routes/signed-out/authentication/authentication.styles.scss
@@ -1,6 +1,6 @@
 .authentication-container {
-  display: flex;
-  width: 900px;
-  justify-content: space-between;
-  margin: 30px auto;
+  // display: flex;
+  // width: 900px;
+  // justify-content: space-between;
+  // margin: 30px auto;
 }