Stories improvements

images/icons/v2/signal-connections.svg

@@ -0,0 +1 @@
+<svg fill="none" height="88" viewBox="0 0 88 88" width="88" xmlns="http://www.w3.org/2000/svg"><path d="m30.6876 32.2705c6.3397 0 11.6353-5.2955 11.6353-11.6352 0-6.3771-5.2956-11.6353-11.6353-11.6353-6.377 0-11.6725 5.2582-11.6725 11.6353 0 6.3397 5.2955 11.6352 11.6725 11.6352zm26.0302 0c6.3397 0 11.6352-5.2955 11.6352-11.6352 0-6.3771-5.2955-11.6353-11.6352-11.6353s-11.6353 5.2582-11.6353 11.6353c0 6.3397 5.2956 11.6352 11.6353 11.6352zm-26.0302-2.7596c-4.848 0-8.8756-4.0649-8.8756-8.8756 0-4.8481 4.0276-8.8757 8.8756-8.8757 4.8108 0 8.8383 4.0276 8.8383 8.8757 0 4.8107-4.0275 8.8756-8.8383 8.8756zm26.0302 0c-4.848 0-8.8756-4.0649-8.8756-8.8756 0-4.8481 4.0276-8.8757 8.8756-8.8757s8.8756 4.0276 8.8756 8.8757c0 4.8107-4.0276 8.8756-8.8756 8.8756zm-39.0825 26.1047c6.377 0 11.6352-5.2955 11.6352-11.6353 0-6.377-5.2582-11.6352-11.6352-11.6352-6.3398 0-11.6353 5.2582-11.6353 11.6352 0 6.3398 5.2955 11.6353 11.6353 11.6353zm52.0975 0c6.3771 0 11.6726-5.2955 11.6726-11.6353 0-6.377-5.2955-11.6352-11.6726-11.6352-6.3397 0-11.6352 5.2582-11.6352 11.6352 0 6.3398 5.2955 11.6353 11.6352 11.6353zm-52.0975-2.7596c-4.8108 0-8.87566-4.0649-8.87566-8.8757 0-4.848 4.06486-8.8756 8.87566-8.8756 4.848 0 8.8756 4.0276 8.8756 8.8756 0 4.8108-4.0276 8.8757-8.8756 8.8757zm52.0975 0c-4.8107 0-8.8756-4.0649-8.8756-8.8757 0-4.848 4.0649-8.8756 8.8756-8.8756 4.8481 0 8.8757 4.0276 8.8757 8.8756 0 4.8108-4.0276 8.8757-8.8757 8.8757zm-39.0452 26.1047c6.3397 0 11.6353-5.2955 11.6353-11.6353 0-6.377-5.2956-11.6352-11.6353-11.6352-6.377 0-11.6725 5.2582-11.6725 11.6352 0 6.3398 5.2955 11.6353 11.6725 11.6353zm26.0302 0c6.3397 0 11.6352-5.2955 11.6352-11.6353 0-6.377-5.2955-11.6352-11.6352-11.6352s-11.6353 5.2582-11.6353 11.6352c0 6.3398 5.2956 11.6353 11.6353 11.6353zm-26.0302-2.7597c-4.848 0-8.8756-4.0648-8.8756-8.8756 0-4.848 4.0276-8.8756 8.8756-8.8756 4.8108 0 8.8383 4.0276 8.8383 8.8756 0 4.8108-4.0275 8.8756-8.8383 8.8756zm26.0302 0c-4.848 0-8.8756-4.0648-8.8756-8.8756 0-4.848 4.0276-8.8756 8.8756-8.8756s8.8756 4.0276 8.8756 8.8756c0 4.8108-4.0276 8.8756-8.8756 8.8756z" fill="#000"/></svg>

stylesheets/_modules.scss

@@ -2620,6 +2620,7 @@ button.ConversationDetails__action-button {
     background-color: $color-accent-red;
     color: $color-white;
     display: flex;
+    font-size: 10px;
     height: 16px;
     justify-content: center;
     min-width: 16px;
@@ -2627,7 +2628,7 @@ button.ConversationDetails__action-button {
     padding: 0 2px;
     position: absolute;
     right: -6px;
-    top: -6px;
+    top: -4px;
     user-select: none;
     z-index: $z-index-base;
   }

stylesheets/_variables.scss

@@ -263,6 +263,7 @@ $z-index-window-controls: 10000;
 // Component specific
 // The scroll down button should be above everything in the timeline but
 // popups, tooltips, toasts, and other items should stack above it.
+$z-index-story-meta: 3;
 $z-index-scroll-down-button: 10;
 $z-index-stories: 97;
 $z-index-calling: 98;

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
+          $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;

ts/components/StoryViewer.tsx

@@ -208,7 +208,7 @@ export const StoryViewer = ({
     return () => {
       unmountRef.current = true;
     };
-  });
+  }, []);
 
   const [styles, spring] = useSpring(
     () => ({

ts/state/ducks/stories.ts

@@ -906,6 +906,12 @@ export function reducer(
     return {
       ...state,
       isShowingStoriesView: !state.isShowingStoriesView,
+      selectedStoryData: state.isShowingStoriesView
+        ? undefined
+        : state.selectedStoryData,
+      storyViewMode: state.isShowingStoriesView
+        ? undefined
+        : state.storyViewMode,
     };
   }
 

ts/state/selectors/stories.ts

@@ -342,11 +342,14 @@ export const getStories = createSelector(
   }
 );
 
-export const getUnreadStoriesCount = createSelector(
+export const getUnreadStorySenderCount = createSelector(
   getStoriesState,
   ({ stories }): number => {
-    return stories.filter(story => story.readStatus === ReadStatus.Unread)
+    return new Set(
-      .length;
+      stories
+        .filter(story => story.readStatus === ReadStatus.Unread)
+        .map(story => story.conversationId)
+    ).size;
   }
 );
 

ts/state/smart/MainHeader.tsx

@@ -17,7 +17,7 @@ import {
 } from '../selectors/user';
 import { getMe } from '../selectors/conversations';
 import { getStoriesEnabled } from '../selectors/items';
-import { getUnreadStoriesCount } from '../selectors/stories';
+import { getUnreadStorySenderCount } from '../selectors/stories';
 
 const mapStateToProps = (state: StateType) => {
   const me = getMe(state);
@@ -32,7 +32,7 @@ const mapStateToProps = (state: StateType) => {
     badge: getPreferredBadgeSelector(state)(me.badges),
     theme: getTheme(state),
     i18n: getIntl(state),
-    unreadStoriesCount: getUnreadStoriesCount(state),
+    unreadStoriesCount: getUnreadStorySenderCount(state),
   };
 };