Merge pull request #136 from makeopensource/59-update-edit-course-page

59 update edit course page
makeopensource · Oct 14, 2024 · 6d954e7 · 6d954e7
2 parents 2e8c76d + abcd8d8
commit 6d954e7
Show file tree

Hide file tree

Showing 19 changed files with 495 additions and 179 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
@@ -13,77 +13,149 @@
     position: relative;
   }
 
+  h1 {
+    margin: 2.25rem auto;
+    text-align: center;
+  }
+
+  h2 {
+    text-align: center;
+  }
+
+  // general button template, extends to 3 types of buttons - primary, secondary, delete
+  .btn {
+    padding: 15px 30px;
+    border-radius: 100px;
+    border: none;
+    font-weight: 700;
+  }
+
+  button.btnPrimary {
+    @extend .btn;
+    background-color: var(--primary);
+    color: #fff; // primary button always white text
+  }
+
+  button.btnSecondary {
+    @extend .btn;
+    background-color: var(--btn-secondary-background);
+    color: var(--btn-secondary-text);
+    border: 3px solid var(--btn-secondary-border);
+  }
+
+  button.btnDelete {
+    @extend .btn;
+    background-color: var(--btn-delete-background);
+    color: var(--btn-delete-text);
+    border: 3px solid var(--btn-delete-border);
+  }
+
   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%;
 
     background-color: var(--background);
     color: var(--text-color);
 
-    --background: white;
-    --text-color: black;
+    --background: #FFF;
+    --text-color: #000;
     --text-color-secondary: #363636;
-    --focus: #38c172;
+    --focus: var(--blue);
 
     --primary-lighter: #41a8f7;
-    --primary: #0984e3;
+
+    --primary: var(--purple);
+
+    // --primary: #D9D9D9;
+
     --primary-darker: #054272;
     --secondary-lighter: #cfd1d1;
     --secondary: #a8abab;
     --secondary-darker: #686b6b;
 
-    --list-item-background: #f5f5f5;
+    --list-item-background: #c5c5c5;
     --list-item-background-hover: #e9e9e9;
     --list-item-subtext: #4b4b4b;
 
     --list-simple-item-background: #9f9f9f4f;
     --list-simple-item-background-hover: #a0a0a0;
     --list-simple-item-subtext: #4b4b4b;
-    // Non theme colors
-    --grey-lightest: #dfe6e9;
-    --grey-lighter: #b2bec3;
-    --grey: #636e72;
 
-    --blue-lighter: #74b9ff;
-    --blue: #0984e3;
+    --btn-secondary-border: var(--primary);
+    --btn-secondary-background: #FFF;
+    --btn-secondary-text: var(--primary);
+
+    --btn-delete-border: var(--red);
+    --btn-delete-background: #FFF;
+    --btn-delete-text: var(--red);
+
+    --input-field-background: var(--grey-lightest);
+    --input-field-label: var(--grey);
+
+    // Non theme colors - will not update with light/dark toggle
+    --grey-lightest: #e5e5e5;
+    --grey-lighter: #c5c5c5;
+    --grey: #555555;
+    --grey-dark: #333333; 
+
+    --blue-lighter: #78B7FF;
+    --blue: #1F3D7A;
 
-    --red-lighter: #ff7675;
-    --red: #d63031;
+    --red-lighter: #FFA3A3;
+    --red: #8A2626;
 
-    --purple-lighter: #a29bfe;
-    --purple: #6c5ce7;
+    --purple-lighter: #7257EB;
+    --purple: #52468A;
+    --purple-darker: #2F2363;
 
-    --green-lighter: #55efc4;
-    --green: #00b894;
+    --green-lighter: #B0EEA2;
+    --green: #306025;
 
     --yellow-lighter: #ffeaa7;
-    --yellow: #fdcb6e;
+    --yellow: #F8D487;
 
     transition: background-color 150ms linear;
   }
 
   body.dark-mode {
-    --background: #1b1f20;
-    --text-color: white;
+    --background: #1e1e1e;
+    --text-color: #FFF;
     --text-color-secondary: #9b9b9b;
+    --focus: var(--blue-lighter);
 
     --primary-lighter: #3796bc;
-    --primary: #266781;
+
+    --primary: #7257EB;
+//     --primary-darker: #2F2363;
+
+    // --primary: #636666;
     --primary-darker: #133441;
+
     --secondary-lighter: #636666;
     --secondary: #3d3f3f;
     --secondary-darker: #1f2020;
 
-    --list-item-background: #3b3b3b;
+    --list-item-background: #333333;
     --list-item-background-hover: #303030;
     --list-item-subtext: #e0e0e0;
 
     --list-simple-item-background: #464646;
     --list-simple-item-background-hover: #626262;
     --list-simple-item-subtext: #4b4b4b;
 
+    --btn-secondary-border: var(--primary);
+    --btn-secondary-background: var(--purple-darker);
+    --btn-secondary-text: #FFF;
+
+    --btn-delete-border: var(--red-lighter);
+    --btn-delete-background: var(--red);
+    --btn-delete-text: #FFF;
+
+    --input-field-background: var(--grey);
+    --input-field-label: var(--grey-lightest);
+
     background-color: var(--background);
     color: var(--text-color);
   }

diff --git a/devU-client/src/assets/variables.scss b/devU-client/src/assets/variables.scss
@@ -25,6 +25,9 @@ $list-simple-item-background: var(--list-simple-item-background);
 $list-simple-item-background-hover: var(--list-simple-item-background-hover);
 $list-simple-item-subtext: var(--list-item-subtext);
 
+$input-field-background: var(--input-field-background);
+$input-field-label: var(--input-field-label);
+
 $focus: var(--focus);
 
 // These variables WILL NOT update with dark vs light theme

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; 
+  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; 
+  color: #52468a; 
+  border-radius: 5px 5px 0 0; 
+  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