I redesigned the homepage files to match the design on te figma style…

…. I also made changes in the globaltoolbar files to match the themes in the figma. I made changes in the simpleAssignment to fix the font so when the assignment is created, it will align with course_card. I also added two buttons in userCourseListItem for gradebook and coursepage.
makeopensource · Oct 8, 2024 · 0d4ca71 · 0d4ca71
1 parent bdcc0c2
commit 0d4ca71
Show file tree

Hide file tree

Showing 14 changed files with 231 additions and 88 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/devU-client/src/assets/global.scss b/devU-client/src/assets/global.scss
@@ -14,7 +14,7 @@
   }
 
   body {
-    font-family: 'Open Sans', 'Helvetica', 'Arial', sans-serif;
+    font-family: 'Source Sans Pro', 'Helvetica', 'Arial', sans-serif;
     margin: 0;
     padding: 0;
     text-size-adjust: 100%;
@@ -23,7 +23,7 @@
     color: var(--text-color);
 
     --background: white;
-    --text-color: black;
+    --text-color: #52468A;
     --text-color-secondary: #363636;
     --focus: #38c172;
 
@@ -66,7 +66,7 @@
 
   body.dark-mode {
     --background: #1b1f20;
-    --text-color: white;
+    --text-color: #D9D9D9;
     --text-color-secondary: #9b9b9b;
 
     --primary-lighter: #3796bc;

diff --git a/devU-client/src/components/listItems/simpleAssignmentListItem.scss b/devU-client/src/components/listItems/simpleAssignmentListItem.scss
@@ -18,10 +18,13 @@
   display: flex;
   text-decoration: none;
   gap: 1rem;
+  font-size:12px;
+  font-weight: 600;
 }
 
 .subText {
-  font-size: 1rem;
+  font-size: 12px;
+  font-weight: 600;
   display: grid;
   justify-content: space-between;
   gap: 1.5rem;
@@ -41,14 +44,14 @@
   display: flex;
   flex-direction: column;
 
-  background: $list-simple-item-background;
+
   border-radius: 0.6rem;
 
-  padding: 0.5rem;
+
 
   transition: background-color 0.2s linear;
 
-  color: $text-color;
+  color: #52468A;
 
   &:hover,
   &:focus {

diff --git a/devU-client/src/components/listItems/userCourseListItem.scss b/devU-client/src/components/listItems/userCourseListItem.scss
@@ -2,8 +2,45 @@
 
 .name {
   font-size: 1.2rem;
-  font-weight: 700;
-  margin-bottom: 0.4rem;
+  font-weight: 600;
+  margin: 0; /* Remove any margin around the name */
+  padding: 15px; /* Add padding to the text inside the name block */
+  background: #b5acdd; /* Background color for the name area */
+  width: 100%; /* Make sure it spans the entire width of the card */
+  text-align: center; /* Center the text */
+  color: #52468a; /* Text color */
+  border-radius: 5px 5px 0 0; /* Rounded top corners */
+  box-sizing: border-box;
+}
+
+.No_assignments
+{ 
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  flex-grow: 1;
+  font-size: 12px;
+  font-weight: 600;
+  border-radius:5px;
+  padding: 10px;
+  flex-wrap: wrap;
+  color:#52468A;
+}
+.Buttons{
+  display: flex;
+  justify-content: space-between;
+  padding: 15px;
+  margin-top: auto;
+}
+.gradebook_button ,.coursepage_button {
+  border: 0;
+  color: #52468A; 
+  background: none;
+  font-weight: 600;
+  margin-left: 15px;
+  padding: 10px;
+  cursor: pointer;
 }
 
 .tag {
@@ -43,28 +80,25 @@
 .container {
   text-decoration: none;
 
-  display: flex;
-  flex-direction: row;
-
-  background: $list-item-background;
   border-radius: 0.6rem;
 
-  padding: 1.5rem;
+  padding: 5px;
 
   margin-bottom: 1rem;
 
-  transition: background-color 0.2s linear;
 
   color: $text-color;
 
-  &:hover,
-  &:focus {
-    background: $list-item-background-hover;
-  }
 }
 
 @media (max-width: $medium) {
   .subText {
     display: block;
   }
+  .Buttons {
+    flex-direction: row; 
+    justify-content: space-between; 
+    padding: 10px;
+    margin-top: auto; 
 }
+}
diff --git a/devU-client/src/components/listItems/userCourseListItem.tsx b/devU-client/src/components/listItems/userCourseListItem.tsx
@@ -1,15 +1,14 @@
 import React from 'react'
-
 import {Assignment, Course} from 'devu-shared-modules'
-
+import {useHistory} from "react-router-dom";
 import ListItemWrapper from 'components/shared/layouts/listItemWrapper'
 
-import {prettyPrintDate} from 'utils/date.utils'
+//import {prettyPrintDate} from 'utils/date.utils'
 
 import styles from './userCourseListItem.scss'
 
 import SimpleAssignmentListItem from "./simpleAssignmentListItem";
-import {prettyPrintSemester} from "../../utils/semester.utils";
+//import {prettyPrintSemester} from "../../utils/semester.utils";
 
 type Props = {
     course: Course
@@ -18,25 +17,31 @@ type Props = {
     instructor?: boolean
 }
 
-const UserCourseListItem = ({course, assignments, past = false, instructor = false}: Props) => (
-    <ListItemWrapper to={`/course/${course.id}`} tag={course.number} containerStyle={styles.container}>
 
-        <div className={styles.name}>{instructor ? (course.name + " (Instructor)") : course.name}</div>
+const UserCourseListItem = ({course, assignments, past = false, instructor = false}: Props) => {
+    const history = useHistory()
+    return(
+    <ListItemWrapper  to={null} tag={course.number} containerStyle={styles.container}>
+
+        <div className={styles.name}>{instructor ? (course.name + " (Instructor)") : course.name.toUpperCase() + " " + course.number + " " + "(" + course.semester + ")" }</div>
         <div className={styles.subText}>
-            <div>{course.number}</div>
-            <div>Semester: {prettyPrintSemester(course.semester)}</div>
-            <div>Start Date: {prettyPrintDate(course.startDate)}</div>
-            <div>End Date: {prettyPrintDate(course.endDate)}</div>
-
             {assignments && assignments.length > 0 ? (assignments.map((assignment) => (
                 <SimpleAssignmentListItem assignment={assignment} key={assignment.id}/>
-            ))) : ((past || instructor) ? <div></div> : <div className={styles.name}>No Assignments Due Yet</div>)}
-
-        </div>
+            ))) : ((past || instructor) ? <div></div> : <div className={styles.No_assignments}>No Assignments Due Yet</div>)} 
+            <div className={styles.Buttons}>
+            <button className={styles.gradebook_button} onClick={(e) => {
+             e.stopPropagation(); 
+             history.push(`/course/${course.id}/gradebook`);
+            }}>Gradebook</button>
+            <button className={styles.coursepage_button} onClick={(e) => {
+             e.stopPropagation(); 
+             history.push(`/course/${course.id}`);
+            }}>Coursepage</button>
+            </div>
+            </div>
 
     </ListItemWrapper>
 
-
-)
-
+);
+};
 export default UserCourseListItem
diff --git a/devU-client/src/components/misc/globalToolbar.scss b/devU-client/src/components/misc/globalToolbar.scss
@@ -9,19 +9,22 @@ $font-size: 16px;
   display: flex;
   align-items: center;
   justify-content: center;
-
   gap: 1.5rem;
 }
 
 .link {
   @extend .flex;
 
   text-decoration: none;
-
-  color: $text-color;
+  color: #d9d9d9;
   font-size: $font-size;
-
-  height: $bar-height;
+  margin:3vw;
+  height: 4vh;
+  flex-grow: .05;
+  border-radius: 3vw;
+  font-weight: 550;
+  font-size: 14px;
+  padding:0.5vw;
 
   &:hover {
     opacity: $hover-effect;
@@ -31,14 +34,15 @@ $font-size: 16px;
 .header {
   @extend .link;
 
-  font-size: 2em;
-
-  font-weight: bold;
+  font-size: 40px;
+  border-radius: 30px;
+  color: #D9D9D9;
+  font-weight: 550;
 }
 
 .bar {
-  height: $bar-height;
-
+  height: 60px;
+  background-color: #52468A;
   @extend .flex;
   justify-content: space-between;
 }
@@ -55,9 +59,10 @@ $font-size: 16px;
 
 // Controls turning the menu options into a sidebar
 // As well as whether or not that sidebar is being shown
-@media (max-width: $medium) {
+@media (max-width: 300px) {
   .flex {
     gap: 1rem;
+
   }
 
   .menu {
@@ -99,8 +104,9 @@ $font-size: 16px;
   }
 }
 
-@media (max-width: $extreme) {
+@media (max-width: 300px) {
   .flex {
     gap: 0.3rem;
+
   }
 }
diff --git a/devU-client/src/components/misc/globalToolbar.tsx b/devU-client/src/components/misc/globalToolbar.tsx
@@ -7,10 +7,11 @@ import UserOptionsDropdown from 'components/utils/userOptionsDropdown'
 
 
 import styles from './globalToolbar.scss'
+
 import RoleDispatcher from '../utils/roleDispatcher'
 
 const GlobalToolbar = () => {
-
+ 
   return (
     <div className={styles.bar}>
       <Link to='/' className={styles.header}>
@@ -26,9 +27,11 @@ const GlobalToolbar = () => {
           <div className={styles.menu}>
             <RoleDispatcher/>
             <DarkModeToggle />
-            <Link to={`/courses`} className={styles.link}>
-              Courses
+            {
+            <Link to={`/courses`} className={styles.link} >
+              My Courses
             </Link>
+            }     
             {/*<Link to={`/myCourses`} className={styles.link}>*/}
             {/*  My Courses*/}
             {/*</Link>*/}

diff --git a/devU-client/src/components/misc/navbar.scss b/devU-client/src/components/misc/navbar.scss
@@ -2,5 +2,5 @@
 
 .link {
     text-decoration: none;
-    color: $text-color;
+    color: #52468A;
 }