Merge pull request #851 from mrfelton/fix/settings-menu-zindex

fix(ui): ensure settings menu shows on top

app/components/Contacts/ChannelForm/ChannelForm.scss

@@ -3,7 +3,7 @@
 .container {
   position: absolute;
   top: 0;
-  z-index: z("contact-form", "modal");
+  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: z("connect-form", "modal");
+  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: z("network-filters", "open");
+        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: z("form", "container");
+  z-index: z('form', 'container');
   height: 100vh;
   width: 100%;
   background: var(--lightestBackground);

app/components/Settings/Settings.scss

@@ -1,10 +1,12 @@
+@import 'styles/variables.scss';
+
 .container {
   background: var(--lightestBackground);
   position: absolute;
   width: 200px;
   top: 30px;
   left: -100px;
-  z-index: z("settings-form", "modal");
+  z-index: z('settings-form', 'modal');
 
   li {
     padding: 20px;

app/styles/tooltip.scss

@@ -1,3 +1,5 @@
+@import 'styles/variables.scss';
+
 /* Tooltips */
 [data-hint] {
   position: relative;
@@ -11,7 +13,7 @@
   will-change: transform;
   visibility: hidden;
   opacity: 0;
-  z-index: z("tooltip", "after");
+  z-index: z('tooltip', 'after');
   pointer-events: none;
   transition: 0.2s ease;
   transition-delay: 0ms;
@@ -22,7 +24,7 @@
   position: absolute;
   background: transparent;
   border: 6px solid transparent;
-  z-index: z("tooltip", "before");
+  z-index: z('tooltip', 'before');
 }
 
 [data-hint]::after {