Stories improvements

stylesheets/components/SignalConnectionsModal.scss

@@ -4,6 +4,18 @@
 .SignalConnectionsModal {
   color: $color-gray-05;
 
+  &__icon {
+    @include color-svg(
+      '../images/icons/v2/signal-connections.svg',
+      $color-ultramarine-light
+    );
+    display: block;
+    height: 69px;
+    margin: 0 auto;
+    margin-bottom: 24px;
+    width: 75px;
+  }
+
   &__list {
     margin: 16px 0;
 

stylesheets/components/Stories.scss

@@ -22,8 +22,10 @@
     padding-top: calc(14px + var(--title-bar-drag-area-height));
 
     &__settings {
-      margin-left: 24px;
       opacity: 1;
+      position: absolute;
+      right: 12px;
+      top: -6px;
 
       &::after {
         @include dark-theme {
@@ -40,6 +42,7 @@
       display: flex;
       justify-content: space-between;
       padding: 0 16px;
+      position: relative;
 
       &--centered {
         justify-content: flex-start;
@@ -65,6 +68,8 @@
           $color-white
         );
         height: 22px;
+        position: absolute;
+        right: 63px;
         width: 22px;
       }
 
@@ -72,31 +77,15 @@
         @include button-reset;
 
         height: 24px;
+        position: absolute;
         width: 24px;
 
-        @include light-theme {
-          @include color-svg(
-            '../images/icons/v2/chevron-left-24.svg',
-            $color-gray-60
-          );
-        }
+        @include color-svg(
+          '../images/icons/v2/chevron-left-24.svg',
+          $color-white
+        );
 
         @include keyboard-mode {
-          &:focus {
-            @include color-svg(
-              '../images/icons/v2/chevron-left-24.svg',
-              $color-ultramarine
-            );
-          }
-        }
-
-        @include dark-theme {
-          @include color-svg(
-            '../images/icons/v2/chevron-left-24.svg',
-            $color-gray-25
-          );
-        }
-        @include dark-keyboard-mode {
           &:hover {
             @include color-svg(
               '../images/icons/v2/chevron-left-24.svg',

stylesheets/components/StoryListItem.scss

@@ -25,6 +25,7 @@
     flex: 1;
     flex-direction: column;
     margin-left: 12px;
+    margin-right: 12px;
 
     &--title {
       @include font-body-1-bold;

stylesheets/components/StoryViewer.scss

@@ -54,7 +54,7 @@
     transform: translateX(-50%);
     min-width: 284px;
     width: 56.25vh;
-    z-index: $z-index-above-above-base;
+    z-index: $z-index-story-meta;
 
     &--group-avatar {
       margin-left: -8px;