Merge pull request #200 from makeopensource/styling-improvements

#21 - Margin/padding scheme, styling fixes

Author: jessehartloff

devU-client/src/assets/global.scss

@@ -14,11 +14,12 @@
   }
 
   h1 {
-    margin: 1.75rem auto;
+    margin: 20px auto;
     text-align: center;
   }
 
   h2 {
+    margin: 20px 0;
     text-align: center;
   }
 

devU-client/src/components/listItems/userCourseListItem.scss

@@ -105,7 +105,6 @@
   .Buttons {
     flex-direction: row;
     justify-content: space-between;
-    padding: 10px;
     margin-top: auto;
   }
 }

devU-client/src/components/misc/globalToolbar.scss

@@ -30,7 +30,7 @@ $font-size: 16px;
   text-decoration: none;
   color: #FFF;
   font-weight: 700;
-  height: 51px;
+  height: 51px; // Centers text in navbar
 }
 
 .bar {

devU-client/src/components/pages/courses/courseDetailPage.scss

@@ -16,10 +16,10 @@
 }
 
 
-.color{
+.courseCardHeading{
     background-color: $primary;
     color: #FFF; // always white against purple bg
-    width: 100%;
+    width: inherit;
     padding: 20px;
     text-align: center;
     font-size: 1.2em;
@@ -43,9 +43,9 @@
     height: 100%;
     padding: 0;
     background-color: rebeccapurple;
-    border-radius: 5px;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     overflow: hidden;
+    border-radius: 20px;
     margin-bottom: 20px;
 
     .MuiList-root {
@@ -83,26 +83,22 @@
         justify-content: space-between;
         align-items: flex-start;
         background-color: $secondary;
-        // padding: 30px 60px;
-        padding: 20px;
-        //border-radius: 10px;
+        padding: 30px;
+        border-radius: 20px;
         color: $text-color;
-        width: 70%
+        width: fit-content;
     }
 
     h1 {
-        margin: 0 0 10px 0;
         font-size: 1.5rem;
         text-align: left;
         font-weight: bold;
-
+        margin: 0;
     }
 
-    .h2 {
-        padding-top: 20px;
-        margin: 0 0 20px 0;
+    h2 {
         font-size: 1.0rem;
-        padding-bottom: 10px;
+        margin: 0;
     }
 
     h3{
@@ -112,27 +108,26 @@
     }
 }
 
-        .buttons-container {
-            display: flex;
-            flex-wrap: wrap;
-
-            justify-content: space-around;
-            width:100%;
-        }
+.buttons_container {
+    display: flex; 
+    flex-wrap: wrap; 
+    justify-content: flex-start; 
+    gap: 10px;
+    margin-top: 10px;
+}
 
-            .actual_button {
-                display: flex;
-                flex-direction: row;
-                border: 0; /* Primary button color */
-                /* Button text color */
-                padding: 10px 20px; /* Padding for button */
-                border-radius: 5px;
-                font-weight: 600;
-                transition: background-color 0.3s ease;
-                margin : 0 10px;
-                background-color: $purple !important;
-                color: white !important;
-            }
+.actual_button {
+    display: flex;
+    flex-direction: row;
+    border: 0; /* Primary button color */
+    /* Button text color */
+    padding: 10px 20px; /* Padding for button */
+    border-radius: 5px;
+    font-weight: 600;
+    transition: background-color 0.3s ease;
+    background-color: $purple !important;
+    color: white !important;
+}
 
 .assignmentName {
     &::after {

devU-client/src/components/pages/courses/courseDetailPage.tsx

@@ -103,8 +103,7 @@ const CourseDetailPage = () => {
                             <h2> Section: </h2>
 
 
-                            <div style={{display: 'flex', flexWrap:'wrap', justifyContent: 'space-between'}}>
-
+                            <div className={styles.buttons_container}>
 
 
                                 <button className={styles.actual_button}  onClick={() => {
@@ -155,9 +154,9 @@ const CourseDetailPage = () => {
                             <div className={styles.coursesContainer}>
                             {Object.keys(categoryMap).map((category, index) => (
 
-                                <Card key={index} className={styles.courseCard}>
+                                <Card key={index} className={styles.courseCard} style = {{borderRadius: '20px'}}>
                                     <CardContent sx={{padding:0}}>
-                                        <Typography variant="h5" className={styles.color} style={{ textAlign: 'center' }}>
+                                        <Typography variant="h5" className={styles.courseCardHeading} style={{ textAlign : 'center' }}>
                                             {category}
                                         </Typography>
                                     </CardContent>
@@ -182,9 +181,7 @@ const CourseDetailPage = () => {
                                                                               variant="body2"
                                                                               color="grey"
                                                                           >
-                                                                              Start: {new Date(assignment.startDate).toLocaleDateString()}
-                                                                                |
-                                                                              Due: {new Date(assignment.dueDate).toLocaleDateString()}
+                                                                              Start: {new Date(assignment.startDate).toLocaleDateString()} | Due: {new Date(assignment.dueDate).toLocaleDateString()}
                                                                           </Typography>
                                                                       </React.Fragment>
                                                                   }

devU-client/src/components/pages/forms/assignments/assignmentFormPage.tsx

@@ -122,7 +122,7 @@ const AssignmentCreatePage = () => {
 
     return (
         <PageWrapper className={formStyles.pageWrapper}>
-            <h2>Create Assignment</h2>
+            <h1>Create Assignment</h1>
             <div className={formStyles.flex}>
                 <div className={formStyles.form}>
                     <h2>Assignment Information</h2>

devU-client/src/components/pages/homePage/homePage.scss

@@ -4,7 +4,7 @@
 
 .courses_heading {
     text-align: left;
-    // margin-left: 20px;
+    margin: 20px 0;
     // font-size: 30px;
     // font-weight: 550;
     margin: 10px 0;
@@ -18,14 +18,12 @@
 //     margin-bottom: 30px;
 // }
 
-
 .no_courses {
     font-style: italic;
     margin-bottom: 20px;
 }
 
 
-
 .coursesContainer {
     display: flex;
     flex-direction: row;

devU-client/src/index.html

@@ -7,7 +7,7 @@
       name="viewport"
       content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=6.0, shrink-to-fit=no, user-scalable=yes, width=device-width"
     />
-    <title>AutoFour</title>
+    <title>DevU</title>
   </head>
 
   <body>

readme.md

@@ -92,6 +92,11 @@ Enter the project repo.
 cd devU
 ```
 
+Run this command to setup submodules.
+```bash
+git submodule update  --init --recursive
+```
+
 ### 3. Run the Project with Docker Compose
 ```bash
 docker compose up --build