Merge branch 'DocCreatorMenu-work' of https://github.com/brown-dash/Dash-Web into DocCreatorMenu-work

1 files changed, 28 insertions, 21 deletions

diff --git a/src/client/views/DashboardView.scss b/src/client/views/DashboardView.scss
index 90f64b393..daa711bc4 100644
--- a/src/client/views/DashboardView.scss
+++ b/src/client/views/DashboardView.scss
@@ -1,31 +1,39 @@
-@import './global/globalCssVariables.module';
+@use './global/globalCssVariables.module' as global;
+
+$dashboard-left-menu-width: 250px;
+$dashboard-view-padding: 20px;
+$dashboard-container-height: 200px;
+$dashboard-container-width: 250px;
 
 .dashboard-view {
-    padding: 50px;
     display: flex;
     flex-direction: row;
     width: 100%;
-    position: absolute;
     height: 100%;
-    width: 100%;
-    padding-right: 0px;
+    position: absolute;
     overflow: auto;
 
     .left-menu {
         display: flex;
         justify-content: flex-start;
         flex-direction: column;
-        width: 250px;
-        min-width: 250px;
+        position: fixed;
+        min-width: $dashboard-left-menu-width;
         gap: 5px;
+        padding: $dashboard-view-padding;
     }
 
     .all-dashboards {
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;
-        overflow-y: auto;
         width: 100%;
+        height: fit-content;
+        justify-content: flex-start;
+        align-items: flex-start;
+        padding: $dashboard-view-padding 0px 0px $dashboard-left-menu-width;
+        gap: 10px;
+        margin-bottom: 60px;
     }
 }
 
@@ -48,15 +56,14 @@
 
 .dashboard-container-new {
     border-radius: 10px;
-    width: 250px;
-    height: 200px;
+    width: $dashboard-container-width;
+    height: $dashboard-container-height;
     font-size: 120px;
     font-weight: 100;
     text-align: center;
-    border: solid 2px $light-gray;
-    margin: 0 0px 30px 30px;
+    border: solid 2px global.$light-gray;
     cursor: pointer;
-    color: $light-gray;
+    color: global.$light-gray;
     display: flex;
     display: flex;
     justify-content: center;
@@ -64,8 +71,8 @@
     position: relative;
 
     &:hover {
-        color: $light-blue;
-        border: solid 2px $light-blue;
+        color: global.$light-blue;
+        border: solid 2px global.$light-blue;
     }
 
     .background {
@@ -82,16 +89,16 @@
     border-radius: 10px;
     position: relative;
     cursor: pointer;
-    width: 250px;
-    height: 200px;
-    outline: solid 2px $light-gray;
+    width: $dashboard-container-width;
+    height: $dashboard-container-height;
+    outline: solid 2px global.$light-gray;
+    outline-offset: -2px;
     display: flex;
     flex-direction: column;
-    margin: 0 0px 30px 30px;
     overflow: hidden;
 
     &:hover {
-        outline: solid 2px $light-blue;
+        outline: solid 2px global.$light-blue;
     }
 
     .title {
@@ -137,7 +144,7 @@
 }
 
 .new-dashboard {
-    color: $dark-gray;
+    color: global.$dark-gray;
     padding: 10px;
     display: flex;
     width: 100%;