Ap/refactor zindexes (#228)

* Revert "Update .gitignore (#220)" This reverts commit f935a37. * refactored zindexes on all frontend style files * removed reverting of .gitignore
sandboxnu · Nov 27, 2023 · 3091f90 · 3091f90
1 parent 806cbda
commit 3091f90
Show file tree

Hide file tree

Showing 13 changed files with 64 additions and 35 deletions.
diff --git a/styles/_AlertBanner.scss b/styles/_AlertBanner.scss
@@ -1,7 +1,8 @@
 @use 'variables' as Colors;
+@use 'zIndexes' as Indexes;
 
 .alertBannerContainer {
-  z-index: 100000;
+  z-index: Indexes.$Thirteen;
   top: 0px;
   width: 100%;
 }

diff --git a/styles/_DropdownFilter.scss b/styles/_DropdownFilter.scss
@@ -1,4 +1,5 @@
 @use 'variables' as Colors;
+@use 'zIndexes' as Indexes;
 
 .DropdownFilter {
   font-family: lato, sans-serif; //TO-DO: Change all fonts in filter sidebar
@@ -111,7 +112,7 @@
   &__selectable {
     position: absolute;
     overflow-y: auto;
-    z-index: 100000000;
+    z-index: Indexes.$Fifteen;
     max-height: 180px;
     border-radius: 0 0 7px 7px;
     width: 100%;

diff --git a/styles/_FeedbackModal.scss b/styles/_FeedbackModal.scss
@@ -5,7 +5,6 @@
     position: fixed;
     bottom: 2%;
     right: 2%;
-    z-index: 30;
     display: flex;
     align-items: center;
     height: 32px;
@@ -43,7 +42,6 @@
     position: fixed;
     display: flex;
     flex-direction: column;
-    z-index: 31;
     bottom: 7%;
     right: 1.5%;
     width: 224px;

diff --git a/styles/_InfoIconTooltip.scss b/styles/_InfoIconTooltip.scss
@@ -1,4 +1,5 @@
 @use 'variables' as Colors;
+@use 'zIndexes' as Indexes;
 
 .InfoIconTooltip {
   background: transparent;
@@ -19,7 +20,7 @@
       white-space: wrap;
       width: 225px;
       padding: 7px;
-      z-index: 100000;
+      z-index: Indexes.$Thirteen;
       line-height: 20px;
       margin-left: -5px;
 

diff --git a/styles/_Modal.scss b/styles/_Modal.scss
@@ -1,12 +1,13 @@
 @use 'variables' as Colors;
+@use 'zIndexes' as Indexes;
 
 .modal-wrapper {
   position: fixed;
   top: 0;
   left: 0;
   height: 100vh;
   width: 100vw;
-  z-index: 999999;
+  z-index: Indexes.$Fourteen;
   background: Colors.$Light_Grey;
   display: flex;
   align-items: center;

diff --git a/styles/_PhoneModal.scss b/styles/_PhoneModal.scss
@@ -1,4 +1,5 @@
 @use 'variables' as Colors;
+@use 'zIndexes' as Indexes;
 
 .phone-modal {
   position: relative;
@@ -11,7 +12,7 @@
     align-items: center;
     justify-content: center;
     background: Colors.$White;
-    z-index: 99;
+    z-index: Indexes.$Seven;
   }
 
   &__body {

diff --git a/styles/_SearchHeader.scss b/styles/_SearchHeader.scss
@@ -1,11 +1,11 @@
 @use 'variables' as Colors;
-
+@use 'zIndexes' as Indexes;
 .SearchHeader {
   width: 100%;
   height: 88px;
   left: 0;
   top: 0;
-  z-index: 9999;
+  z-index: Indexes.$Twelve;
   background: Colors.$White;
   box-shadow: 0 2px 4px Colors.$Grey;
   flex-direction: row;
@@ -21,7 +21,7 @@
   transition: all 300ms ease;
   border: 1px solid Colors.$Grey;
   border-radius: 9px;
-  z-index: 9999;
+  z-index: Indexes.$Twelve;
   order: 0;
   width: 539px;
   height: 53px;
@@ -54,7 +54,7 @@
 
 .SearchHeader_Logo {
   height: 30px;
-  z-index: 10;
+  z-index: Indexes.$Five;
   cursor: pointer;
   order: 2;
 }
diff --git a/styles/_zIndexes.scss b/styles/_zIndexes.scss
@@ -0,0 +1,21 @@
+/*
+This file contains global variables for z-indexes, 
+meant to be used accross all styles.
+*/
+
+//Levels of Z-indexes
+$One: 10;
+$Two: 20;
+$Three: 30;
+$Four: 40;
+$Five: 50;
+$Six: 60;
+$Seven: 70;
+$Eight: 80;
+$Nine: 90;
+$Ten: 100;
+$Eleven: 110;
+$Twelve: 120;
+$Thirteen: 130;
+$Fourteen: 140;
+$Fifteen: 150;
diff --git a/styles/pages/_Down.scss b/styles/pages/_Down.scss
@@ -1,4 +1,5 @@
 @use '../variables' as Colors;
+@use '../zIndexes' as Indexes;
 @import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@700&display=swap');
 
 /* Styles for Down Page. */
@@ -8,7 +9,7 @@
   position: absolute;
   right: -260px;
   bottom: 0px;
-  z-index: 100;
+  z-index: Indexes.$Eight;
 }
 
 .huskyDollar {
@@ -17,7 +18,7 @@
   position: absolute;
   right: -90px;
   bottom: -150px;
-  z-index: 100;
+  z-index: Indexes.$Eight;
 }
 
 .down-text-container {

diff --git a/styles/pages/_Error.scss b/styles/pages/_Error.scss
@@ -1,4 +1,5 @@
 @use '../variables' as Colors;
+@use '../zIndexes' as Indexes;
 @import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@700&display=swap');
 
 /* Styles for ApiError Page. */
@@ -108,7 +109,7 @@
 .crying-husky-2 {
   width: 400px;
   height: auto;
-  z-index: 102;
+  z-index: Indexes.$Ten;
 }
 
 @media only screen and (max-width: 1000px) {

diff --git a/styles/pages/_Home.scss b/styles/pages/_Home.scss
@@ -4,6 +4,7 @@
  */
 
 @use '../variables' as Colors;
+@use '../zIndexes' as Indexes;
 @import url('https://fonts.googleapis.com/css?family=Lato:300,400,700');
 
 .home-container {
@@ -71,7 +72,7 @@
 
   .logo {
     height: 60px;
-    z-index: 10;
+    z-index: Indexes.$Five;
     margin-bottom: 10px;
 
     @media only screen and (min-width: 830px) {
@@ -87,7 +88,7 @@
     position: absolute;
     right: -20px;
     bottom: -50px;
-    z-index: 102;
+    z-index: Indexes.$Ten;
 
     // there is definitely a better way to scale the width/position
     // but for now there is just a bunch of media queries
@@ -118,7 +119,7 @@
     bottom: 0;
     text-align: center;
     line-height: 0;
-    z-index: 8;
+    z-index: Indexes.$Four;
     pointer-events: none;
   }
 
@@ -175,7 +176,7 @@
     top: 0;
     border: 0;
     right: 0;
-    z-index: 101;
+    z-index: Indexes.$Nine;
     display: none;
   }
 
@@ -184,7 +185,7 @@
     top: 0;
     border: 0;
     left: 0;
-    z-index: 101;
+    z-index: Indexes.$Nine;
     margin-left: 15px;
     margin-top: 15px;
     width: 30px;
@@ -263,7 +264,7 @@
   /* Styles on tooltips that appear on desktop in the ClassPanel.js. Need to pass in the styles once, in Home.js, and not in every ClassPanel that appears. */
   .listIconTooltip {
     font-size: 14px !important;
-    z-index: 999999;
+    z-index: Indexes.$Fourteen;
     padding-top: 6px !important;
     padding-bottom: 6px !important;
     padding-left: 10px !important;

diff --git a/styles/pages/_Results.scss b/styles/pages/_Results.scss
@@ -1,4 +1,5 @@
 @use '../variables' as Colors;
+@use '../zIndexes' as Indexes;
 
 $TOPNAV_HEIGHT: 60px;
 $SIDEBAR_WIDTH: 268px;
@@ -8,7 +9,7 @@ $SIDEBAR_WIDTH: 268px;
   height: $TOPNAV_HEIGHT;
   left: 0;
   top: 0;
-  z-index: 9999;
+  z-index: Indexes.$Twelve;
   background: Colors.$White;
   flex-direction: row;
   display: flex;
@@ -63,7 +64,7 @@ $SIDEBAR_WIDTH: 268px;
 
 .Results__Logo {
   height: 40px;
-  z-index: 10;
+  z-index: Indexes.$Five;
   cursor: pointer;
   margin-left: 17px;
   margin-right: 2px;
@@ -104,7 +105,7 @@ $SIDEBAR_WIDTH: 268px;
   bottom: 0;
   overflow-y: scroll;
   scrollbar-width: none;
-  z-index: 21;
+  z-index: Indexes.$Six;
 
   &::-webkit-scrollbar {
     display: none;
@@ -209,7 +210,7 @@ $SIDEBAR_WIDTH: 268px;
   }
 
   &__dropdown {
-    z-index: 999999;
+    z-index: Indexes.$Fourteen;
     position: absolute;
     background: Colors.$White;
     border-radius: 3px;

diff --git a/styles/panels/_SplashPage.scss b/styles/panels/_SplashPage.scss
@@ -4,6 +4,7 @@
  */
 
 @use '../variables' as Colors;
+@use '../zIndexes' as Indexes;
 
 #splash-page {
   margin: 0;
@@ -78,7 +79,7 @@
 
   .row-first {
     background: Colors.$Grey;
-    z-index: 105;
+    z-index: Indexes.$Eleven;
     position: relative;
 
     .text {
@@ -114,7 +115,7 @@
 
     #cs2510-desktop {
       width: 89%;
-      z-index: 2;
+      z-index: Indexes.$Two;
       position: relative;
     }
   }
@@ -147,13 +148,13 @@
 
     #engw1111-desktop {
       width: 67%;
-      z-index: 2;
+      z-index: Indexes.$Two;
       position: relative;
     }
 
     #lerner-mobile {
       position: absolute;
-      z-index: 3;
+      z-index: Indexes.$Three;
     }
   }
 
@@ -272,7 +273,7 @@
       #engw1111-desktop {
         margin-top: 0;
         width: 132%;
-        z-index: 2;
+        z-index: Indexes.$Two;
         position: relative;
         margin-left: 100px;
       }
@@ -291,31 +292,31 @@
   top: 0%;
   left: 12.8%;
   width: 35%;
-  z-index: 2;
+  z-index: Indexes.$Two;
 }
 
 #oodMobile2 {
   position: absolute;
   top: 17%;
   left: 3%;
   width: 35%;
-  z-index: 1;
+  z-index: Indexes.$One;
 }
 
 #cs2500Mobile {
   position: absolute;
   top: 0%;
   left: 60%;
   width: 35%;
-  z-index: 2;
+  z-index: Indexes.$Two;
 }
 
 #cs2500Resultsmobile {
   position: absolute;
   top: 17%;
   left: 50%;
   width: 35%;
-  z-index: 1;
+  z-index: Indexes.$One;
 }
 
 @media only screen and (max-width: 767px) {
@@ -356,15 +357,15 @@
       position: absolute;
       top: 5%;
       left: 30%;
-      z-index: 2;
+      z-index: Indexes.$Two;
       width: 65%;
     }
 
     #oodMobile2 {
       position: absolute;
       left: 3%;
       width: 65%;
-      z-index: 1;
+      z-index: Indexes.$One;
       top: initial;
       bottom: 25px;
     }