updated styling of homepage

makeopensource · Nov 12, 2024 · e56eca8 · e56eca8
1 parent 14099b3
commit e56eca8
Show file tree

Hide file tree

Showing 6 changed files with 157 additions and 147 deletions.
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/pages/forms/assignments/assignmentFormPage.scss b/devU-client/src/components/pages/forms/assignments/assignmentFormPage.scss
@@ -26,6 +26,7 @@ p {
   border-radius: 20px;
   padding: 30px;
   width: 50%;
+  height: fit-content;
 }
 
 .form>h2 {

diff --git a/devU-client/src/components/pages/homePage/homePage.scss b/devU-client/src/components/pages/homePage/homePage.scss
@@ -2,14 +2,14 @@
 
 
 
-.courses_heading{
+.courses_heading {
     text-align: left;
-    margin-left: 20px;
-    font-size: 30px;
-    font-weight: 550;
+    // margin-left: 20px;
+    // font-size: 30px;
+    // font-weight: 550;
     margin-bottom: 30px;
-
 }
+
 // h1 {
 //     align-items:left;
 //     margin-left 20px;
@@ -19,67 +19,73 @@
 // }
 
 
-.no_courses {
-    margin-left: 20px;
-}
+// .no_courses {
+//     margin-left: 20px;
+// }
 
 
 
 .coursesContainer {
     display: flex;
     flex-direction: row;
-    gap: 20px; 
-    margin:20px;
+    gap: 20px;
+    // margin: 20px;
 }
+
 .courseCard {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     align-items: stretch;
-    width:400px;
-    padding: 0; 
-    background-color: #D9D9D9;
-    border-radius: 5px; 
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
-    overflow: hidden; 
+    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;
-  }
-.create_course {
-    border:0; /* Primary button color */
-    color: $primary;
-    padding: 10px 20px; 
-    border-radius: 5px;
-    text-decoration: none;
-    font-weight: 600;
-    transition: background-color 0.3s ease;
-    margin:20px
 }
+
+// .create_course {
+//     border: 0;
+//     color: $primary;
+//     padding: 10px 20px;
+//     border-radius: 5px;
+//     text-decoration: none;
+//     font-weight: 600;
+//     transition: background-color 0.3s ease;
+//     margin: 20px
+// }
+
 .header {
     color: $text-color;
     display: block;
-    align-items: center;  
+    align-items: center;
 }
 
-
-.courses_heading::after {
-    content: '';
+#createCourseBtn {
     display: block;
-    margin-top: 10px; 
-    width: 100%;
-    height: 1px; 
-    font-weight: 600;
-    background-color: $text-color; 
-  }
+    margin-left: auto;
+}
 
+// .courses_heading::after {
+//     content: '';
+//     display: block;
+//     margin-top: 10px;
+//     width: 100%;
+//     height: 1px;
+//     font-weight: 600;
+//     background-color: $text-color;
+// }
 
 @media (max-width: 768px) {
     .coursesContainer {
-        flex-direction: column; 
-        align-items: center; 
+        flex-direction: column;
+        align-items: center;
     }
 
     .courseCard {
-        width: 100%; 
-        max-width: none; 
+        width: 100%;
+        max-width: none;
     }
-}
+}