Merge pull request #201 from makeopensource/redesigned-homepage

jessehartloff · web-flow · commit 3305d87d9237 · 2025-02-14T23:02:29.000-05:00
#25 Redesigned homepage
diff --git a/devU-client/package.json b/devU-client/package.json
@@ -10,8 +10,8 @@
     "build-local": "cross-env NODE_ENV=local webpack --mode=production",
     "format": "prettier --write \"src/**/*.{ts,tsx,json,md}\"",
     "pre-commit": "lint-staged",
-    "dev-backend": "docker compose -f ../compose.yml --profile dev-client up -d",
-    "dev-backend-stop": "docker compose -f ../compose.yml --profile dev-client stop"
+    "dev-backend": "docker compose -f ../docker-compose.yml --profile dev-client up -d",
+    "dev-backend-stop": "docker compose -f ../docker-compose.yml --profile dev-client stop"
   },
   "lint-staged": {
     "./**/*.{js,ts,json,md}": [
diff --git a/devU-client/src/assets/global.scss b/devU-client/src/assets/global.scss
@@ -33,6 +33,7 @@
   button.btnPrimary {
     @extend .btn;
     background-color: var(--primary);
+    border: 3px solid var(--primary);
     color: #fff; // primary button always white text
   }
 
@@ -148,6 +149,8 @@
     --btn-secondary-background: var(--purple-darker);
     --btn-secondary-text: #FFF;
 
+    --btn-text-color: var(--purple-lighter)
+
     --btn-delete-border: var(--red-lighter);
     --btn-delete-background: var(--red);
     --btn-delete-text: #FFF;
diff --git a/devU-client/src/assets/variables.scss b/devU-client/src/assets/variables.scss
@@ -66,7 +66,7 @@ $medium: 1000px;
 $small: 600px;
 $extreme: 780px;
 
-$pagePadding: 50px;
+$pagePadding: 100px;
 
 @mixin ellipsis {
   overflow: hidden;
diff --git a/devU-client/src/components/listItems/simpleAssignmentListItem.scss b/devU-client/src/components/listItems/simpleAssignmentListItem.scss
@@ -1,38 +1,43 @@
 @import 'variables';
 
 .title {
-  padding: 10px;
   display: flex;
-  flex-direction: row;
-  border-radius: 0.6rem;
+  flex-direction: column;
   justify-content: space-between;
   transition: background-color 0.2s linear;
   // color:$primary;
+  border-bottom: 1px solid #ddd;
   color: $text-color;
+  padding: 10px;
 }
 
 .meta {
-  display: flex;
   text-decoration: none;
-  gap: 1rem;
-  font-size:12px;
-  font-weight: 600;
+  display: flex;
+  flex-direction: row;
+  font-size:11px;
+  flex-wrap: wrap;
+  color: $text-color-secondary;
+  font-family: monospace;
+  font-weight: 500;
 }
 
+
 .subText {
-  font-size: 12px;
-  font-weight: 600;
+  font-size: 18px;
+  font-weight: 500;
   display: grid;
   justify-content: space-between;
   gap: 1.5rem;
   width: 100%;
+  margin-bottom: 8px;
+  line-height: 100%
 }
 
 .tag {
   display: flex;
   min-width: 8px;
   background-color: $primary;
-  margin-top: 10px;
 }
 
 .container {
diff --git a/devU-client/src/components/listItems/simpleAssignmentListItem.tsx b/devU-client/src/components/listItems/simpleAssignmentListItem.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import ListItemWrapper from 'components/shared/layouts/listItemWrapper'
-import {prettyPrintDate} from 'utils/date.utils'
+import {wordPrintDate} from 'utils/date.utils'
 import styles from './simpleAssignmentListItem.scss'
 import {Assignment} from 'devu-shared-modules'
 
@@ -13,8 +13,11 @@ const SimpleAssignmentListItem = ({assignment}: Props) => (
     <ListItemWrapper to={`/course/${assignment.courseId}/assignment/${assignment.id}`} tag={assignment.name}
                      className={styles.title} tagStyle={styles.tag} containerStyle={styles.container}>
         <div className={styles.subText}>{assignment.name}</div>
-        <div className={styles.subText}>{assignment.categoryName}</div>
-        <div className={styles.meta}>Due At: {prettyPrintDate(assignment.dueDate)}</div>
+        <div className={styles.meta}>
+            <span style={{fontWeight:'700'}}>Due:&nbsp;</span>{wordPrintDate(assignment.dueDate)} | &nbsp;
+            <span style={{fontWeight:'700'}}>End:&nbsp;</span>{wordPrintDate(assignment.endDate)}
+        </div>
+
 
     </ListItemWrapper>
 )
diff --git a/devU-client/src/components/listItems/userCourseListItem.scss b/devU-client/src/components/listItems/userCourseListItem.scss
@@ -4,13 +4,13 @@
   font-size: 1.2rem;
   font-weight: 600;
   margin: 0;
-  padding: 30px;
+  padding: 15px 0;
   /* Add padding to the text inside the name block */
   background: $primary;
   width: 100%;
   text-align: center;
   color: #FFF;
-  border-radius: 20px 20px 0 0;
+  border-radius: 10px 10px 0 0;
   box-sizing: border-box;
   text-overflow: ellipsis;
   overflow-wrap: break-word;
@@ -23,31 +23,34 @@
   text-align: center;
   flex-grow: 1;
   font-size: 12px;
-  font-weight: 600;
-  border-radius: 5px;
-  padding: 30px;
+  font-weight: 500;
+  padding: 15px;
+  font-style: italic;
   flex-wrap: wrap;
   // color: $primary;
   color: $text-color;
   text-overflow: ellipsis;
   overflow-wrap: break-word;
+  border-bottom: 1px solid #ddd;
+
 }
 
 .Buttons {
   display: flex;
-  justify-content: space-around;
+  justify-content: center;
   margin-top: auto;
-  padding: 10px;
+  padding: 15px;
+  gap: 20px;
 }
 
-.gradebook_button,
-.coursepage_button {
+.sub_button {
   border: 0;
-  color: $text-color;
+  color: $primary;
   background: none;
   font-weight: 600;
-  margin-left: 15px;
+  margin: 0 10px;
   cursor: pointer;
+  font-size: 16px;
 }
 
 .tag {
@@ -86,10 +89,11 @@
 
 .container {
   text-decoration: none;
-
-  border-radius: 0.6rem;
-  margin-bottom: 1rem;
+  border-radius: 15px;
+  border: solid 3px $primary;
+  border-color: $primary;
   color: $text-color;
+  background:none;
 
 }
 
diff --git a/devU-client/src/components/listItems/userCourseListItem.tsx b/devU-client/src/components/listItems/userCourseListItem.tsx
@@ -2,6 +2,7 @@ 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 FaIcon from 'components/shared/icons/faIcon'
 
 //import {prettyPrintDate} from 'utils/date.utils'
 
@@ -23,20 +24,23 @@ const UserCourseListItem = ({ course, assignments, past = false, instructor = fa
     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.name}>{instructor ? (course.number + ": " + course.name + " "): course.number + ": " + course.name + " "} 
+            {instructor === true && <FaIcon icon='chalkboardUser'/>}
+
+            </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>)}
+                ))) : past && <div></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) => {
+                    <button className={styles.sub_button} onClick={(e) => {
                         e.stopPropagation();
                         history.push(`/course/${course.id}`);
-                    }}>Coursepage</button>
+                    }}>COURSE PAGE</button>
+                    <button className={styles.sub_button} onClick={(e) => {
+                        e.stopPropagation();
+                        history.push(`/course/${course.id}/gradebook`);
+                    }}>GRADEBOOK</button>
                 </div>
             </div>
 
diff --git a/devU-client/src/components/misc/globalToolbar.scss b/devU-client/src/components/misc/globalToolbar.scss
@@ -29,7 +29,8 @@ $font-size: 16px;
   font-size: 32px;
   text-decoration: none;
   color: #FFF;
-  font-weight: 500;
+  font-weight: 700;
+  height: 51px;
 }
 
 .bar {
diff --git a/devU-client/src/components/pages/homePage/homePage.scss b/devU-client/src/components/pages/homePage/homePage.scss
@@ -7,7 +7,7 @@
     // margin-left: 20px;
     // font-size: 30px;
     // font-weight: 550;
-    margin-bottom: 30px;
+    margin: 10px 0;
 }
 
 // h1 {
@@ -19,16 +19,18 @@
 // }
 
 
-// .no_courses {
-//     margin-left: 20px;
-// }
+.no_courses {
+    font-style: italic;
+    margin-bottom: 20px;
+}
 
 
 
 .coursesContainer {
     display: flex;
     flex-direction: row;
     gap: 20px;
+    margin: 0;
     // margin: 20px;
 }
 
@@ -39,11 +41,8 @@
     align-items: stretch;
     width: 400px;
     padding: 0;
-    background-color: $list-item-background;
-    border-radius: 20px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     overflow: hidden;
-    margin-bottom: 20px;
+    margin-bottom: 10px;
 }
 
 // .create_course {
@@ -56,18 +55,26 @@
 //     transition: background-color 0.3s ease;
 //     margin: 20px
 // }
-
+.courses_title{
+    margin: 0;
+    width: fit-content;
+    align-self: center;
+    grid-column-start: 2;
+}
 .header {
     color: $text-color;
-    display: block;
-    align-items: center;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    justify-items: center;
+    padding: 20px;
 }
-
-#createCourseBtn {
-    display: block;
+.buttonContainer{
+    display: flex;
+    gap: 20px;
     margin-left: auto;
 }
 
+
 // .courses_heading::after {
 //     content: '';
 //     display: block;
diff --git a/devU-client/src/components/pages/homePage/homePage.tsx b/devU-client/src/components/pages/homePage/homePage.tsx
@@ -78,16 +78,22 @@ const HomePage = () => {
         <PageWrapper>
             <div className={styles.header}>
                 {/* <div className={styles.smallLine}></div> */}
-                <h1 className={styles.courses_title}>Courses</h1>
-                <button className='btnSecondary' id='createCoursBtn' onClick={() => {
-                    history.push(`/addCoursesForm`)
-                }}>Create Course
-                </button>
+                <h1 className={styles.courses_title}>DevU Home</h1>
+                <div className={styles.buttonContainer}>
+                    <button className='btnSecondary' onClick={() => {
+                        history.push(`/addCoursesForm`)
+                    }}>create course
+                    </button>
+                    <button className='btnPrimary' onClick={() => {
+                        history.push(`/courses`)
+                    }}>join course
+                    </button>
+                </div>
                 {/* <div className={styles.largeLine}></div> */}
             </div>
             {/* <div className={styles.header}> */}
                 {/* <div className={styles.smallLine}></div> */}
-                <h2 className={styles.courses_heading}>Current</h2>
+                <h2 className={styles.courses_heading}>Current Courses</h2>
                 {/* <div className={styles.largeLine}></div> */}
             {/* </div> */}
             <div className={styles.coursesContainer}>
@@ -98,21 +104,19 @@ const HomePage = () => {
                             instructor={true} />
                     </div>
                 ))}
-            </div>
-            <div className={styles.coursesContainer}>
+
                 {enrollCourses && enrollCourses.map((course) => (
                     <div className={styles.courseCard}
                         key={course.id}
                         onClick={() => handleCourseClick(course.id)} style={{ cursor: 'pointer' }}>
-
                         <UserCourseListItem course={course} assignments={assignments.get(course)} key={course.id} />
                     </div>
                 ))}
-                {enrollCourses.length === 0 && instructorCourses.length == 0 && <h4 className={styles.no_courses}>You do not have current enrollment yet</h4>}
+                {enrollCourses.length === 0 && instructorCourses.length == 0 && <div className={styles.no_courses}>You do not have current enrollment yet</div>}
             </div>
             {/* <div className={styles.header}> */}
                 {/* <div className={styles.smallLine}></div> */}
-                <h2 className={styles.courses_heading}>Completed</h2>
+                <h2 className={styles.courses_heading}>Completed Courses</h2>
                 {/* <div className={styles.largeLine}></div> */}
             {/* </div> */}
             <div className={styles.coursesContainer}>
@@ -127,12 +131,12 @@ const HomePage = () => {
                         />
                     </div>
                 ))}
-                {pastCourses.length === 0 && <h4 className={styles.no_courses}>No completed courses</h4>}
+                {pastCourses.length === 0 && <div className={styles.no_courses}>No completed courses</div>}
             </div>
 
             {/* <div className={styles.header}> */}
                 {/* <div className={styles.smallLine}></div> */}
-                <h2 className={styles.courses_heading}>Upcoming</h2>
+                <h2 className={styles.courses_heading}>Upcoming Courses</h2>
                 {/* <div className={styles.largeLine}></div> */}
             {/* </div> */}
 
@@ -144,7 +148,7 @@ const HomePage = () => {
                     </div>
                 ))}
 
-                {upcomingCourses.length === 0 && <h4 className={styles.no_courses}>No upcoming Courses</h4>}
+                {upcomingCourses.length === 0 && <div className={styles.no_courses}>No upcoming courses</div>}
             </div>
 
 
diff --git a/devU-client/src/components/shared/icons/faIcon.tsx b/devU-client/src/components/shared/icons/faIcon.tsx
diff --git a/devU-client/src/components/shared/layouts/listItemWrapper.scss b/devU-client/src/components/shared/layouts/listItemWrapper.scss
diff --git a/devU-client/src/components/shared/layouts/pageWrapper.scss b/devU-client/src/components/shared/layouts/pageWrapper.scss
diff --git a/devU-client/src/utils/date.utils.ts b/devU-client/src/utils/date.utils.ts

Original file line number	Diff line number	Diff line change
`@@ -29,7 +29,8 @@ $font-size: 16px;`
`29`	`29`	`font-size: 32px;`
`30`	`30`	`text-decoration: none;`
`31`	`31`	`color: #FFF;`
`32`		`- font-weight: 500;`
	`32`	`+ font-weight: 700;`
	`33`	`+ height: 51px;`
`33`	`34`	`}`
`34`	`35`
`35`	`36`	`.bar {`