Merge pull request #16 from ChangePlusPlusVandy/grayson/MentorDashboard

Adds Mentor Dashboard Home + Grid Updates
ChangePlusPlusVandy · Dec 3, 2024 · bbc5d0a · bbc5d0a
2 parents 515949a + 1ed9bf6
commit bbc5d0a
Show file tree

Hide file tree

Showing 7 changed files with 149 additions and 80 deletions.
diff --git a/app/.env.example b/app/.env.example
diff --git a/app/src/components/Navbar.tsx b/app/src/components/Navbar.tsx
@@ -21,7 +21,6 @@ const Navbar = (): ReactElement => {
           ></div>
           <div className="Flex-row Margin-left--auto">
             <div
-              // className="Navbar-body-link Margin-right--20"
               onClick={() => {
                 navigate("/home");
               }}

diff --git a/app/src/pages/MentorDashboard.tsx b/app/src/pages/MentorDashboard.tsx
@@ -1,13 +1,48 @@
 import React, { useState } from "react";
 import Navbar from "../components/Navbar";
 
+
 const MentorDashboard = () => {
+
   return (
     <>
       <Navbar />
-      <h1>Mentor Dashboard</h1>
-      <div className="Flex Flex-column">
-        <div className="Button Button-color--dark-1000">Example Button</div>
+      <div className="Flex-row Justify-content--spaceBetween">
+        <div className="Block Width--60 Margin-right--40 Margin-left--40 Margin-top--40 Height--100vh">
+
+        <div className="Flex-row Margin-bottom--30">
+          <div className="Button--large Border-color--light-1000 Text-color--gray-600 Margin-right--40">My Mentees</div>
+          <div className="Button--large Border-color--light-1000 Text-color--gray-600">Courses</div>
+        </div>
+
+          <div className="Flex-grid Justify-content--spaceBetween Margin-bottom--40">
+            <div className="Card Card--noPadding Card-hover Margin-right--10" style={{ width: "215px"}}>
+              <div className="Background-color--teal-1000 Padding--20 Border-radius-topLeft--8 Border-radius-topRight--8 Align-items--center Justify-content--center" style={{ height: "96px" }}></div>
+              <div className="Padding--10" style={{ height: "75px" }}>
+                <h3 className="Text-fontSize--20 Text-color--gray-600">JaneDoe</h3>
+              </div>
+            </div>
+
+            <div className="Card Card--noPadding Card-hover Margin-right--10" style={{ width: "215px"}}>
+              <div className="Background-color--green-1000 Padding--20 Border-radius-topLeft--8 Border-radius-topRight--8 Align-items--center Justify-content--center" style={{ height: "96px" }}></div>
+              <div className="Padding--10" style={{ height: "75px" }}>
+                <h3 className="Text-fontSize--20 Text-color--gray-600">Jane Doe</h3>
+              </div>
+            </div>
+
+            <div className="Card Card--noPadding Card-hover Margin-right--10" style={{ width: "215px"}}>
+              <div className="Background-color--blue-1000 Padding--20 Border-radius-topLeft--8 Border-radius-topRight--8 Align-items--center Justify-content--center" style={{ height: "96px" }}></div>
+              <div className="Padding--10" style={{ height: "75px" }}>
+                <h3 className="Text-fontSize--20 Text-color--gray-600">Jane Doe</h3>
+              </div>
+            </div>
+          </div>
+
+        </div>
+        <div className="Block Width--40 Margin-right--40 Margin-top--40 Height--100vh">
+          <div className="Block-header Text--center Text-color--gray-1000 Margin-bottom--20">Upcoming Events!</div>  
+        </div> 
+
       </div>
     </>
   );

diff --git a/app/src/styles/_components.scss b/app/src/styles/_components.scss
@@ -38,17 +38,26 @@
             margin-right: 20px; 
         }
 
-        &-link {
-            color: var(--pww-color-dark-1000);
-            cursor: pointer;
-            font-size: var(--pww-font-size-16);
-            display: flex; // Add this
-            align-items: center; // Add this
-            height: 50px; // Match the height of the home icon
-            &:hover {
-                color: var(--pww-color-teal-1000);
-            }
-        }
+    &-home {
+      font-size: var(--pww-font-size-30);
+      font-weight: 900;
+      background-image: url('../assets/home.png');
+      background-size: contain; /* Ensure the entire logo fits within the defined area */
+      background-repeat: no-repeat; /* Prevent repeating */
+      background-position: center; /* Center the logo within its container */
+      width: 50px;  // Reduced from 125px to be more proportional
+      height: 50px; // Reduced from 70px to match navbar height
+      margin-right: 20px; 
+  }
+
+    &-link {
+      color: var(--pww-color-dark-1000);
+      cursor: pointer;
+      font-size: var(--pww-font-size-16);
+
+      &:hover {
+        color: var(--pww-color-teal-1000);
+      }
     }
   }
 }
@@ -140,3 +149,4 @@
     }
   }
 }
+}
diff --git a/app/src/styles/_utilities.scss b/app/src/styles/_utilities.scss
@@ -117,6 +117,10 @@
   justify-content: space-between;
 }
 
+.Justify-content--center {
+  justify-content: center;
+}
+
 .Align-items--center {
   align-items: center;
 }
@@ -332,6 +336,11 @@
     padding: 2px 5px;
   }
 
+  &--large {
+    font-size: 20px;
+    padding: 8px 16px;
+  }
+
   &:hover {
     background-color: transparent;
     cursor: pointer;
@@ -404,21 +413,25 @@
     padding: 0;
   }
 
+  &--noPadding {
+    padding: 0;
+  }
+
   &-dark {
     background-color: var(--pww-color-dark-1000);
   }
 }
 
 .Block {
-  padding: 56px 48px;
+  padding: 30px 30px;
   box-shadow: var(--pww-shadow-dark);
   background-color: var(--pww-color-light-1000);
   border-radius: var(--pww-border-radius-8);
   border: 1px solid var(--pww-color-gray-200);
 
   &-header {
     font-size: var(--pww-font-size-24);
-    margin-bottom: 10px;
+    margin-bottom: 30px;
   }
 
   &-subtitle {
@@ -430,13 +443,18 @@
   }
 }
 
+.Image {
+  width: 50%;
+  height: auto;
+}
+
 .Modal--overlay {
   background-color: rgba(0, 0, 0, 0.4);
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
-  bottom: 0;
+  bottom: 0x;
   z-index: var(--pww-z-100);
   overflow: hidden;
 }
@@ -463,6 +481,11 @@
   // }
 }
 
+.Flex-grid {
+  display: flex;
+  flex-wrap: wrap;
+}
+
 .Flex-column {
   display: flex;
   flex-direction: column;
@@ -525,6 +548,7 @@
   // }
 }
 
+
 .Display--gteDesktop {
   display: none;
 
@@ -563,6 +587,9 @@
 .Width--40 { width: 40%; }
 .Width--60 { width: 60%; }
 
+.Width--40 { width: 40%; }
+.Width--60 { width: 60%; }
+
 .Width--50 {
   width: 50%;
 }
@@ -577,6 +604,10 @@
   height: 100vh; 
 }
 
+.Height--100vh { 
+  height: 100vh; 
+}
+
 ul {
   list-style-type: none;
   padding: 0;

diff --git a/app/src/styles/_variables.scss b/app/src/styles/_variables.scss
@@ -2,31 +2,31 @@
 // this is where we define our colors used in the app
 
 //add spaces so that the hex codes are lined up
-$pww-color-yellow:   #B1CF24;
-//$pww-color-teal:     #149BAF;
+$pww-color-yellow: #b1cf24;
+//$pww-color-teal: #149baf;
 $pww-color-teal:     #0096C0;
-//$pww-color-blue:     #32559A;
+//$pww-color-blue: #32559a;
 $pww-color-blue:     #4C65A6;
-$pww-color-red:      #DB504A;
-// $pww-color-green:    #4A9A4E;
+$pww-color-red: #db504a;
+//$pww-color-green: #4a9a4e;
 $pww-color-green:    #BFD71B;
-$pww-color-light:    #ffffff;
+$pww-color-light: #ffffff;
 $pww-color-neutral:    #f6f4ef;
-// $pww-color-gray:     #626262;
+//$pww-color-gray: #626262;
 $pww-color-gray:     #545454;
-$pww-color-dark:     #000000;
+$pww-color-dark: #000000;
 
 // allow the colors to be used in inline styles
 $palette: (
-    "yellow":   $pww-color-yellow,
-    "teal":     $pww-color-teal,
-    "blue":     $pww-color-blue,
-    "red":      $pww-color-red,
-    "green":    $pww-color-green,
-    "light":    $pww-color-light,
-    "neutral":  $pww-color-neutral,
-    "gray":     $pww-color-gray,
-    "dark":     $pww-color-dark
+  "yellow": $pww-color-yellow,
+  "teal": $pww-color-teal,
+  "blue": $pww-color-blue,
+  "red": $pww-color-red,
+  "green": $pww-color-green,
+  "light": $pww-color-light,
+  "neutral":  $pww-color-neutral,
+  "gray": $pww-color-gray,
+  "dark": $pww-color-dark,
 );
 
 // opacities

diff --git a/app/src/styles/main.scss b/app/src/styles/main.scss
@@ -1,7 +1,7 @@
 // Imports for all of the external libraries
-@import url('https://fonts.googleapis.com/css?family=Rubik');
+@import url("https://fonts.googleapis.com/css?family=Rubik");
 @import url('https://fonts.googleapis.com/css?family=Lato');
-@import url('https://pro.fontawesome.com/releases/v5.10.0/css/all.css');
+@import url("https://pro.fontawesome.com/releases/v5.10.0/css/all.css");
 
 @import "~bootstrap/scss/bootstrap-utilities.scss";
 @import "~bootstrap/scss/bootstrap-grid.scss";
@@ -16,40 +16,40 @@
 
 :root {
   // define colors
-    @include root-palette($palette);
-  
-    --text-on-dark: var(--pww-color-light-1000);
-    --text-on-light: var(--pww-color-dark-1000);
-  
-    --transition-duration: 0.15s;
-  
-    --border-radius: 4rem;
-    --box-shadow: 0 0 3rem rgba(var(--dark), .1);
-    --line-height: 1.5em;
-  
-    --container-padding: 2rem;
-  }
-  
-  // Fonts
-  html,
-  body {
-    // font-family: 'Quattrocento';
-    font-family: Lato;
-    margin: 0;
-  }
-  
-  // default settings for the body
-  body {
-    font-size: var(--pww-font-size-4);
-    background-color: var(--pww-color-neutral-1000);
-    color: var(--pww-color-dark-1000);
-  }
-  
-  // Background Colors
-  .app {
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-    color: var(--pww-color-dark-1000);
-    font-weight: 100;
-  }
+  @include root-palette($palette);
+
+  --text-on-dark: var(--pww-color-light-1000);
+  --text-on-light: var(--pww-color-dark-1000);
+
+  --transition-duration: 0.15s;
+
+  --border-radius: 4rem;
+  --box-shadow: 0 0 3rem rgba(var(--dark), 0.1);
+  --line-height: 1.5em;
+
+  --container-padding: 2rem;
+}
+
+// Fonts
+html,
+body {
+  //font-family: "Quattrocento";
+  font-family: Lato;
+  margin: 0;
+}
+
+// default settings for the body
+body {
+  font-size: var(--pww-font-size-4);
+  background-color: var(--pww-color-neutral-1000);
+  color: var(--pww-color-dark-1000);
+}
+
+// Background Colors
+.app {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  color: var(--pww-color-dark-1000);
+  font-weight: 100;
+}