Merge pull request #196 from makeopensource/145-redesign-pages

145 redesign pages
makeopensource · Dec 3, 2024 · 4c0d852 · 4c0d852
2 parents d980c97 + e56eca8
commit 4c0d852
Show file tree

Hide file tree

Showing 16 changed files with 387 additions and 520 deletions.
diff --git a/devU-client/src/assets/global.scss b/devU-client/src/assets/global.scss
@@ -14,7 +14,7 @@
   }
 
   h1 {
-    margin: 2.25rem auto;
+    margin: 1.75rem auto;
     text-align: center;
   }
 
@@ -24,7 +24,7 @@
 
   // general button template, extends to 3 types of buttons - primary, secondary, delete
   .btn {
-    padding: 15px 30px;
+    padding: 10px 15px;
     border-radius: 100px;
     border: none;
     font-weight: 700;

diff --git a/devU-client/src/assets/variables.scss b/devU-client/src/assets/variables.scss
@@ -66,6 +66,8 @@ $medium: 1000px;
 $small: 600px;
 $extreme: 780px;
 
+$pagePadding: 50px;
+
 @mixin ellipsis {
   overflow: hidden;
   text-overflow: ellipsis;

diff --git a/devU-client/src/components/listItems/simpleAssignmentListItem.scss b/devU-client/src/components/listItems/simpleAssignmentListItem.scss
@@ -7,7 +7,8 @@
   border-radius: 0.6rem;
   justify-content: space-between;
   transition: background-color 0.2s linear;
-  color:$primary;
+  // color:$primary;
+  color: $text-color;
 }
 
 .meta {
@@ -44,10 +45,11 @@
   border-radius: 0.6rem;
   transition: background-color 0.2s linear;
 
-  color: #52468A;
+  // color: $primary;
 
-  &:hover,
-  &:focus {
-    background: $list-simple-item-background-hover;
-  }
+  color: $text-color;
+  // &:hover,
+  // &:focus {
+  //   background: $list-simple-item-background-hover;
+  // }
 }
diff --git a/devU-client/src/components/listItems/userCourseListItem.scss b/devU-client/src/components/listItems/userCourseListItem.scss
@@ -3,43 +3,47 @@
 .name {
   font-size: 1.2rem;
   font-weight: 600;
-  margin: 0; 
-  padding: 30px; /* Add padding to the text inside the name block */
-  background: $primary; 
-  width: 100%; 
-  text-align: center; 
-  color: $text-color; 
-  border-radius: 5px 5px 0 0; 
+  margin: 0;
+  padding: 30px;
+  /* Add padding to the text inside the name block */
+  background: $primary;
+  width: 100%;
+  text-align: center;
+  color: #FFF;
+  border-radius: 20px 20px 0 0;
   box-sizing: border-box;
   text-overflow: ellipsis;
   overflow-wrap: break-word;
 }
 
-.No_assignments
-{ 
+.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;
+  border-radius: 5px;
   padding: 30px;
   flex-wrap: wrap;
-  color:$primary;
+  // color: $primary;
+  color: $text-color;
   text-overflow: ellipsis;
   overflow-wrap: break-word;
 }
-.Buttons{
+
+.Buttons {
   display: flex;
   justify-content: space-around;
   margin-top: auto;
-  padding:10px;
+  padding: 10px;
 }
-.gradebook_button ,.coursepage_button {
+
+.gradebook_button,
+.coursepage_button {
   border: 0;
-  color: $primary; 
+  color: $text-color;
   background: none;
   font-weight: 600;
   margin-left: 15px;
@@ -93,10 +97,11 @@
   .subText {
     display: block;
   }
+
   .Buttons {
-    flex-direction: row; 
-    justify-content: space-between; 
+    flex-direction: row;
+    justify-content: space-between;
     padding: 10px;
-    margin-top: auto; 
-}
+    margin-top: auto;
+  }
 }
diff --git a/devU-client/src/components/listItems/userCourseListItem.tsx b/devU-client/src/components/listItems/userCourseListItem.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
-import {Assignment, Course} from 'devu-shared-modules'
-import {useHistory} from "react-router-dom";
+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'
@@ -18,30 +18,30 @@ type Props = {
 }
 
 
-const UserCourseListItem = ({course, assignments, past = false, instructor = false}: Props) => {
+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 + " " +  course.number + " (" + course.semester + ")" + " Instructor") : course.name.toUpperCase() + " " + course.number + " " + "(" + course.semester + ")" }</div>
-        <div className={styles.subText}>
-            {assignments && assignments.length > 0 ? (assignments.map((assignment) => (
-                <SimpleAssignmentListItem assignment={assignment} key={assignment.id}/>
-            ))) : ((past) ? <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>
+    return (
+        <ListItemWrapper to={null} tag={course.number} containerStyle={styles.container}>
+
+            <div className={styles.name}>{instructor ? (course.name + " " + course.number + " (" + course.semester + ")" + " Instructor") : course.name.toUpperCase() + " " + course.number + " " + "(" + course.semester + ")"}</div>
+            <div className={styles.subText}>
+                {assignments && assignments.length > 0 ? (assignments.map((assignment) => (
+                    <SimpleAssignmentListItem assignment={assignment} key={assignment.id} />
+                ))) : ((past) ? <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>
+        </ListItemWrapper>
 
-);
+    );
 };
 export default UserCourseListItem
diff --git a/devU-client/src/components/misc/globalToolbar.scss b/devU-client/src/components/misc/globalToolbar.scss
@@ -1,6 +1,6 @@
 @import 'variables';
 
-$bar-height: 50px;
+$bar-height: 60px;
 $sidebar-width: 260px;
 $hover-effect: 0.7;
 $font-size: 16px;
@@ -17,43 +17,28 @@ $font-size: 16px;
 
   text-decoration: none;
   color: #FFF;
-
   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;
+  font-weight: 500;
 
   &:hover {
     opacity: $hover-effect;
   }
 }
 
 .header {
-  @extend .link;
-  font-size: 40px;
-  border-radius: 30px;
-  font-weight: 550;
-  //font-size: 2em;
-  //font-weight: bold;
+  font-size: 32px;
+  text-decoration: none;
+  color: #FFF;
+  font-weight: 500;
 }
 
 .bar {
-
-  height: 80px;
+  height: $bar-height;
   background-color: $primary;
   font-size: 40px;
   color: #D9D9D9;
   font-weight: 550;
-
-
+  padding: 0 $pagePadding;
 
   @extend .flex;
   justify-content: space-between;
@@ -71,7 +56,7 @@ $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: 410px) {
+@media (max-width: 500px) {
   .flex {
     gap: 1rem;
 

diff --git a/devU-client/src/components/misc/navbar.scss b/devU-client/src/components/misc/navbar.scss
@@ -3,7 +3,7 @@
 .breadcrumbContainer {
     display: flex;
     align-items: center;
-    margin-left: 3.5rem;
+    margin-left: $pagePadding;
     margin-top:10px;
 
 }