ui: fixes spacing and alignment issues

sdslabs · Apr 30, 2021 · d186778 · d186778
1 parent 7a561b5
commit d186778
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 79 deletions.
diff --git a/src/components/common/notificationCard.js b/src/components/common/notificationCard.js
@@ -29,7 +29,6 @@ const NotificationCard = (props) => {
           <span className="bold">{props.notification_data.action}</span> in{' '}
           <span className="bold">{props.notification_data.target}</span>. Click to check it.
         </div>
-        <div className="notifications--card-date">{props.notification_data.date}</div>
         <div className="notifications--card-page">{props.notification_data.target}</div>
       </div>
     </Link>

diff --git a/src/components/coursecard/myCoursePage.js b/src/components/coursecard/myCoursePage.js
@@ -6,6 +6,7 @@ import _ from 'lodash';
 import FileCover from 'components/cover/fileCover';
 import MaterialCard from './materialCard';
 import CustomCheckbox from 'components/customcheckbox/customCheckbox';
+import NoContentCover from 'components/cover/noContentCover';
 import { getFilesByCourse, getFilesByType } from 'api/filesApi';
 import { addCourseForUser, deleteCourseForUser } from 'api/userApi';
 import { getUser } from 'utils/getUser';
@@ -267,45 +268,51 @@ const CoursePage = () => {
           </div>
         </div>
         {/* Uptil here */}
-        <div className="coursepage--material-sort">
-          <div className="coursepage--material-sort_namecheck">
-            <div className="coursepage--material-sort_checkbox">
-              <CustomCheckbox
-                border="1px solid rgba(43, 42, 40, 0.4)"
-                borderhover="1px solid #38A7DE"
-              />
-            </div>
-            <div className="coursepage--material-sort_name">Name</div>
-          </div>
-          <div className="coursepage--material-sort_sizemod">
-            <div className="coursepage--material-sort_size">Size</div>
-            <div className="coursepage--material-sort_lastmod">Last Modified</div>
-          </div>
-        </div>
-        <div className="coursepage--material">
-          {files.map((obj) => (
-            <div key={obj.year}>
-              {obj.year === year
-                ? obj.files.map((file) => (
-                    <MaterialCard
-                      key={file.driveid}
-                      id={file.id}
-                      name={file.title}
-                      url={file.driveid}
-                      downloads={file.downloads}
-                      ext={file.fileext}
-                      size={file.size}
-                      date_modified={file.date_modified}
-                      updateFileState={updateFileState}
-                    />
-                  ))
-                : null}
-              <div className="coursepage--material_year" onClick={() => setYear(obj.year)}>
-                {obj.year}
+        {files.length > 0 ? (
+          <>
+            <div className="coursepage--material-sort">
+              <div className="coursepage--material-sort_namecheck">
+                <div className="coursepage--material-sort_checkbox">
+                  <CustomCheckbox
+                    border="1px solid rgba(43, 42, 40, 0.4)"
+                    borderhover="1px solid #38A7DE"
+                  />
+                </div>
+                <div className="coursepage--material-sort_name">Name</div>
+              </div>
+              <div className="coursepage--material-sort_sizemod">
+                <div className="coursepage--material-sort_size">Size</div>
+                <div className="coursepage--material-sort_lastmod">Last Modified</div>
               </div>
             </div>
-          ))}
-        </div>
+            <div className="coursepage--material">
+              {files.map((obj) => (
+                <div key={obj.year}>
+                  {obj.year === year
+                    ? obj.files.map((file) => (
+                        <MaterialCard
+                          key={file.driveid}
+                          id={file.id}
+                          name={file.title}
+                          url={file.driveid}
+                          downloads={file.downloads}
+                          ext={file.fileext}
+                          size={file.size}
+                          date_modified={file.date_modified}
+                          updateFileState={updateFileState}
+                        />
+                      ))
+                    : null}
+                  <div className="coursepage--material_year" onClick={() => setYear(obj.year)}>
+                    {obj.year}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </>
+        ) : (
+          <NoContentCover />
+        )}
       </div>
     );
 };

diff --git a/src/components/cover/noActivityCover.js b/src/components/cover/noActivityCover.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import error from 'assets/error.svg';
 import 'styles/main.scss';
 import { CLOSE_MODAL } from 'constants/action-types';
@@ -9,12 +9,10 @@ import { CLOSE_MODAL } from 'constants/action-types';
  */
 function NoActivityCover() {
   const dispatch = useDispatch();
-  const state = useSelector((state) => state.modal);
 
   const closeModal = () => {
     dispatch({ type: CLOSE_MODAL });
   };
-  console.log(state);
 
   return (
     <div className="noactivitycover" onClick={() => closeModal()}>

diff --git a/src/styles/partials/_activityCard.scss b/src/styles/partials/_activityCard.scss
@@ -5,9 +5,9 @@
 }
 
 .activitycard {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
+  display: grid;
+  grid-template-columns: 43% 25% 32%;
+  grid-template-rows: 100%;
   border-top: 0.0625rem solid $border;
   border-bottom: 0.0625rem solid $border;
   padding: 1.0625rem 0rem 1.125rem 0rem;
@@ -18,6 +18,7 @@
     justify-self: left;
     align-self: center;
     margin-left: 4rem;
+    padding-right: 1.5rem;
 
     &_date {
       @include font;

diff --git a/src/styles/partials/_materialCard.scss b/src/styles/partials/_materialCard.scss
@@ -51,7 +51,7 @@
     @include font;
     width: 6.8125rem;
     height: 1rem;
-    margin-top: -0.5rem;
+    margin-top: -0.25rem;
     font-size: 0.8125rem;
     line-height: 0.9375rem;
     color: rgba($font-color, 0.4);

diff --git a/src/styles/partials/_notificationCard.scss b/src/styles/partials/_notificationCard.scss
@@ -1,10 +1,12 @@
 .notifications-- {
   &card {
     position: relative;
-    width: 22rem;
-    height: 33.33%;
-    left: 0;
-    top: 0;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    width: 100%;
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
     border-radius: 0.125rem 0.125rem 0rem 0rem;
     border-bottom: 0.0625rem rgba($primary, 0.3);
   }
@@ -14,40 +16,16 @@
   }
   &card- {
     &description {
-      position: absolute;
-      width: 16.0625rem;
-      height: 1.75rem;
-      left: 1rem;
-      top: 1.125rem;
-      font-family: $font;
-      font-style: normal;
-      font-weight: normal;
+      @include font;
+      width: 14.0625rem;
+      padding-left: 0.5rem;
       font-size: 0.75rem;
       line-height: 0.875rem;
-      color: $font-color;
-    }
-    &date {
-      position: absolute;
-      width: 2.75rem;
-      height: 0.8125rem;
-      right: 0.5625rem;
-      top: 0.75rem;
-      font-family: $font;
-      font-style: normal;
-      font-weight: normal;
-      font-size: 0.6875rem;
-      line-height: 0.8125rem;
-      color: rgba($black, 0.5);
     }
     &page {
-      position: absolute;
-      width: 3.3125rem;
-      height: 0.8125rem;
-      right: 1.0625rem;
-      top: 0.375rem;
-      font-family: $font;
-      font-style: normal;
-      font-weight: normal;
+      @include font;
+      align-self: center;
+      width: 4.3125rem;
       font-size: 0.6875rem;
       line-height: 0.8125rem;
       color: rgba($font-color, 0.2);