refactor: reusable dialog management

apps/client/src/common/components/identify-overlay/IdentifyOverlay.module.scss

@@ -15,7 +15,7 @@
   display: grid;
   place-content: center;
   text-align: center;
-  z-index: 100;
+  z-index: $zindex-modal;
   cursor: pointer;
 }
 

apps/client/src/common/components/view-params-editor/ViewParamsEditor.module.scss

@@ -11,8 +11,8 @@
 .backdrop {
   position: fixed;
   inset: 0;
-  z-index: 10;
-  background-color: rgba(0, 0, 0, 0.7);
+  z-index: $zindex-backdrop;
+  background-color: $backdrop-color;
   transition: opacity 300ms cubic-bezier(0.45, 1.005, 0, 1.005);
 
   &[data-starting-style],
@@ -27,7 +27,7 @@
   top: 0;
   right: 0;
   bottom: 0;
-  z-index: 11;
+  z-index: $zindex-dialog;
 
   width: 40rem;
   height: 100vh;
@@ -70,7 +70,7 @@
 .body {
   flex: 1;
   padding-bottom: 10vh;
-  overflow-y: scroll;
+  overflow-y: auto;
 }
 
 .footer {

apps/client/src/features/app-settings/panel-content/PanelContent.module.scss

@@ -2,7 +2,7 @@
   position: absolute;
   top: 1rem;
   right: 2rem;
-  z-index: 100;
+  z-index: $zindex-floating;
 }
 
 .contentWrapper {

apps/client/src/features/app-settings/panel-utils/PanelUtils.module.scss

@@ -92,7 +92,7 @@ $inner-padding: 1rem;
   thead {
     position: sticky;
     top: 0;
-    z-index: 3;
+    z-index: $zindex-floating;
     background-color: $gray-1350;
   }
 
@@ -152,12 +152,12 @@ $inner-padding: 1rem;
 .divider {
   border-top: 1px solid $white-10;
   margin: 1rem -2rem;
-  z-index: 999;
+  z-index: $zindex-floating;
 }
 
 .overlay {
   position: absolute;
-  z-index: 10;
+  z-index: $zindex-backdrop;
   width: 100%;
   height: 100%;
   backdrop-filter: blur(2px);

apps/client/src/features/app-settings/panel/automations-panel/template-input/TemplateInput.module.scss

@@ -11,7 +11,7 @@
   left: 0;
   width: 100%;
   margin: 0;
-  z-index: 5;
+  z-index: $zindex-floating;
   padding-block: 0.25rem;
 
   max-height: 200px;

apps/client/src/features/operator/Operator.module.scss

@@ -20,12 +20,12 @@
 
 .editPrompt {
   position: fixed;
-  z-index: 1;
+  z-index: $zindex-dialog;
   left: 50%;
   transform: translate(-50%, 0);
   text-align: center;
 
-  background: rgba(0,0,0, 0.7);
+  background: $backdrop-color;
   border-radius: 2px;
   padding: 0.5em 2em;
   color: $orange-500;

apps/client/src/features/operator/edit-modal/EditModal.module.scss

@@ -3,7 +3,7 @@
   top: 10%;
   left: 50%;
 
-  z-index: 2;
+  z-index: $zindex-dialog;
   transform: translateX(-50%);
 
   padding-inline: 1rem;
@@ -45,9 +45,6 @@
   padding-block: 1rem;
   display: flex;
   align-items: center;
+  justify-content: end;
   gap: 1rem;
-
-  button {
-   width: 100%;
-  }
 }

apps/client/src/features/operator/follow-button/FollowButton.module.scss

@@ -4,7 +4,7 @@
   bottom: calc(1.5rem + env(safe-area-inset-bottom));
   left: 50%;
   transform: translateX(-50%);
-  z-index: 1;
+  z-index: $zindex-floating;
 
   display: flex;
   align-items: center;

apps/client/src/features/operator/status-bar/StatusBar.module.scss

@@ -2,7 +2,7 @@
   position: sticky;
   top: 0;
   width: 100%;
-  z-index: 2;
+  z-index: $zindex-floating;
 
   background-color: $gray-1350;
   border-bottom: 1px solid $white-10;

apps/client/src/features/overview/Overview.module.scss

@@ -17,7 +17,7 @@
     background-color: $red-700;
     border-radius: 2px;
     font-size: calc(1rem - 2px);
-    z-index: 10;
+    z-index: $zindex-sudo;
   }
 }
 

apps/client/src/features/rundown/event-block/RundownIndicators.module.scss

@@ -5,7 +5,7 @@ $gap-left: calc(2rem + 0.25rem + 3rem);
   font-size: calc(1rem - 5px);
   position: absolute;
   top: -1em;
-  z-index: 2;
+  z-index: $zindex-floating;;
   margin-left: $gap-left;
 
   display: flex;

apps/client/src/features/rundown/time-input-flow/TimeInputFlow.module.scss

@@ -1,6 +1,6 @@
 .timeLabel {
   position: absolute;
-  z-index: 100;
+  z-index: $zindex-floating;
   font-size: 0.75rem;
   font-weight: 600;
   top: 2px;

apps/client/src/theme/_ontimeStyles.scss

@@ -7,6 +7,14 @@ $component-border-radius-md: 3px;
 $component-border-radius-sm: 2px;
 $component-border-radius-full: 99px;
 
+// indexes
+$zindex-floating: 100;
+$zindex-nav: 200;
+$zindex-backdrop: 300;
+$zindex-dialog: 400;
+$zindex-modal: 500;
+$zindex-sudo: 1000;
+
 // semantic colours
 $action-blue: $blue-500;
 $action-text-color: $blue-400;
@@ -37,6 +45,7 @@ $bg-container-l3: $gray-1350;
 
 $bg-container-onlight: $gray-100;
 
+$backdrop-color: rgba(0, 0, 0, 0.7);
 $box-shadow-l1: rgba(0, 0, 0, 0.15) 0 3px 3px 0;
 $box-shadow-l2: rgba(0, 0, 0, 0.15) 0 3px 3px 0;
 $box-shadow-right: rgba(0, 0, 0, 0.15) 3px 0 3px 0;

apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.module.scss

@@ -56,7 +56,7 @@ $table-header-font-size: calc(1rem - 2px);
 .tableHeader {
   position: sticky;
   top: 0px;
-  z-index: 10;
+  z-index: $zindex-floating;
   background-color: $ui-black;
   font-size: $table-header-font-size;
   color: $label-gray;

apps/client/src/views/timer/Timer.scss

@@ -25,15 +25,14 @@
 
   .blackout {
     position: absolute;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
+    inset: 0;
+    z-index: 0;
     background-color: #000;
-    z-index: 2;
     opacity: 0;
     transition: opacity $viewer-transition-time;
+
     &--active {
+      z-index: calc($zindex-floating + 1);
       opacity: 1;
     }
   }
@@ -169,17 +168,14 @@
 
   .message-overlay {
     position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    inset: 0;
     padding: 2vw;
     background: var(--background-color-override, $viewer-background-color);
     opacity: 0;
     transition: opacity $viewer-transition-time;
-    z-index: 2;
 
     &--active {
+      z-index: $zindex-floating;
       opacity: 1;
     }
   }