style(scss): use function to apply z-index

This update uses a function to apply the z-index in each .scss file.
The function needs to iterate over a map of z-index values, so all of
the z-indexes end up in a single list and can be tracked more easily.

This allows us to manage all z-index values in a single location.

app/components/Contacts/ChannelForm/ChannelForm.scss

@@ -3,7 +3,7 @@
 .container {
   position: absolute;
   top: 0;
-  z-index: 10;
+  z-index: z("contact-form", "modal");
   height: 100vh;
   width: 100%;
   background: var(--darkestBackground);

app/components/Contacts/ConnectManually/ConnectManually.scss

@@ -3,7 +3,7 @@
 .container {
   position: absolute;
   top: 0;
-  z-index: 10;
+  z-index: z("connect-form", "modal");
   height: 100vh;
   width: 100%;
   background: red;

app/components/Contacts/Network/Network.scss

@@ -83,7 +83,7 @@
         display: block;
         position: absolute;
         margin-top: 0;
-        z-index: 10;
+        z-index: z("network-filters", "open");
 
         li {
           margin: 10px 0;

app/components/Form/Form.scss

@@ -3,7 +3,7 @@
 .container {
   position: absolute;
   top: 0;
-  z-index: 20;
+  z-index: z("form", "container");
   height: 100vh;
   width: 100%;
   background: var(--lightestBackground);

app/components/Form/Pay/Pay.scss

@@ -127,7 +127,7 @@
       visibility: hidden;
       position: absolute;
       top: 30px;
-      z-index: 10;
+      z-index: z("form", "pay");
 
       &.active {
         visibility: visible;

app/components/Form/Request/Request.scss

@@ -106,7 +106,7 @@
       visibility: hidden;
       position: absolute;
       top: 30px;
-      z-index: 10;
+      z-index: z("form", "request");
 
       &.active {
         visibility: visible;

app/components/GlobalError/GlobalError.scss

@@ -2,7 +2,7 @@
 
 .container {
   position: absolute;
-  z-index: 1001;
+  z-index: z("global-error", "container");
   background: $red;
   color: $white;
   width: 100%;

app/components/LoadingBolt/LoadingBolt.scss

@@ -1,7 +1,7 @@
 @import 'styles/variables.scss';
 
 .container {
-  z-index: 1000;
+  z-index: z("loading-bolt", "container");
   position: absolute;
   top: 0;
   left: 0;

app/components/Settings/Settings.scss

@@ -4,7 +4,7 @@
   width: 200px;
   top: 30px;
   left: -100px;
-  z-index: 10;
+  z-index: z("settings-form", "modal");
 
   li {
     padding: 20px;

app/styles/app.global.scss

@@ -34,19 +34,6 @@ input[type=number] {
   }
 }
 
-.ReactModal__Overlay {
-  transition: opacity 500ms ease-in-out;
-  opacity: 0;
-
-  &--after-open {
-    opacity: 1;
-  }
-
-  &--before-close {
-    opacity: 0;
-  }
-}
-
 .load-draw-svg {
   stroke-dasharray: 211;
   stroke-dashoffset: 2110;
@@ -206,7 +193,3 @@ input[type=number] {
   stroke-dasharray: 100;
   animation: dash 2.5s infinite linear;
 }
-
-.ReactModal__Overlay.ReactModal__Overlay--after-open {
-  z-index: 50;
-}

app/styles/tooltip.scss

@@ -11,7 +11,7 @@
   will-change: transform;
   visibility: hidden;
   opacity: 0;
-  z-index: 900005;
+  z-index: z("tooltip", "after");
   pointer-events: none;
   transition: 0.2s ease;
   transition-delay: 0ms;
@@ -22,7 +22,7 @@
   position: absolute;
   background: transparent;
   border: 6px solid transparent;
-  z-index: 900006;
+  z-index: z("tooltip", "before");
 }
 
 [data-hint]::after {

app/styles/variables.scss

@@ -54,3 +54,65 @@ $curve: cubic-bezier(0.65, 0, 0.45, 1);
   --primaryText: #000;
   --gradient: linear-gradient(270deg, #fd9800 0%, #ffbd59 100%);
 }
+
+$z-layers: (
+  // Layer 1
+  "form": (
+    "container": 10,
+    "pay": 10,
+    "request": 10
+  ),
+  "contact-form": (
+    "modal": 10,
+  ),
+  "connect-form": (
+    "modal": 10,
+  ),
+  "settings-form": (
+    "modal": 10
+  ),
+  "network-filters": (
+    "open": 10,
+  ),
+  // Layer 2
+  "loading-bolt":  (
+    "container": 20,
+  ),
+  // Layer 3
+  "global-error": (
+    "container": 30,
+  ),
+  // Layer 4
+  "tooltip": (
+    "after": 40,
+    "before": 40
+  )
+);
+
+// Functions for pulling z-index values from $z-layers map
+@function z($layer...) {
+  @if not map-has-nested-keys($z-layers, $layer) {
+    @warn "No layer found for `#{$layer}` in $z-layers map. Property omitted.";
+  }
+
+  @return map-deep-get($z-layers, $layer);
+}
+
+@function map-has-nested-keys($map, $keys) {
+  @each $key in $keys {
+    @if not map-has-key($map, $key) {
+      @return false;
+    }
+    $map: map-get($map, $key);
+  }
+
+  @return true;
+}
+
+@function map-deep-get($map, $keys) {
+  @each $key in $keys {
+    $map: map-get($map, $key);
+  }
+
+  @return $map;
+}