Story settings modal copy and design changes

signalapp · Oct 26, 2022 · 5ccfabe · 5ccfabe
1 parent 7f0a668
commit 5ccfabe
Show file tree

Hide file tree

Showing 9 changed files with 295 additions and 93 deletions.
diff --git a/_locales/en/messages.json b/_locales/en/messages.json
@@ -5388,7 +5388,7 @@
     "description": "Label of the button on the bottom of the media editor that trigger the add-caption dialog"
   },
   "MyStories__title": {
-    "message": "My Stories",
+    "message": "My Story",
     "description": "Title for the my stories list"
   },
   "MyStories__story": {
@@ -5460,7 +5460,7 @@
     "description": "Title for the stories list"
   },
   "Stories__mine": {
-    "message": "My Stories",
+    "message": "My Story",
     "description": "Label for your stories"
   },
   "Stories__add": {
@@ -5515,6 +5515,10 @@
     "message": "Story settings",
     "description": "Title for the story settings modal"
   },
+  "icu:StoriesSettings__description": {
+    "messageformat": "Stories automatically disapper after 24 hours. Choose who can view your story or create new stories with specific viewers or groups.",
+    "description": "Description for story settings modal"
+  },
   "StoriesSettings__new-list": {
     "message": "New custom story",
     "description": "Label to create a new custom distribution list"
@@ -5600,7 +5604,7 @@
     "description": "Description of button StoriesSettings__mine__all--label"
   },
   "StoriesSettings__mine__exclude--label": {
-    "message": "All Signal connections except...",
+    "message": "All except...",
     "description": "Input label to create a block list"
   },
   "StoriesSettings__mine__exclude--description": {
@@ -5704,8 +5708,8 @@
     "description": "Modal title when choosing groups"
   },
   "SendStoryModal__my-stories-privacy": {
-    "message": "My stories privacy",
-    "description": "Modal title for setting privacy for My Stories"
+    "message": "My Story privacy",
+    "description": "Modal title for setting privacy for My Story"
   },
   "SendStoryModal__privacy-disclaimer": {
     "message": "Choose which Signal connections can view your story. You can always change this in privacy settings. $learnMore$",

diff --git a/stylesheets/_mixins.scss b/stylesheets/_mixins.scss
@@ -74,7 +74,7 @@
 
 @mixin font-subtitle {
   @include font-family;
-  font-size: 11px;
+  font-size: 12px;
   line-height: 16px;
   letter-spacing: 0;
 }

diff --git a/stylesheets/components/StoriesSettingsModal.scss b/stylesheets/components/StoriesSettingsModal.scss
@@ -74,9 +74,9 @@
     @include font-body-1;
     align-items: center;
     display: flex;
-    height: 52px;
     justify-content: space-between;
     width: 100%;
+    padding: 8px 0;
 
     &--no-pointer {
       cursor: inherit;
@@ -144,9 +144,9 @@
   }
 
   &__divider {
-    border-color: $color-gray-65;
-    border-style: solid;
     width: 100%;
+    border: 0 solid $color-gray-65;
+    border-top-width: 1px;
   }
 
   &__input__container {
@@ -165,12 +165,51 @@
     margin-top: 32px;
   }
 
+  &__description {
+    @include font-subtitle;
+    color: $color-gray-25;
+    margin-top: 0px;
+    margin-bottom: 16px;
+  }
+
+  &__listHeader {
+    display: flex;
+    align-items: center;
+  }
+
+  &__listHeader__title {
+    flex: 1;
+    @include font-body-1-bold;
+    margin-right: 8px;
+  }
+
+  &__listHeader__button {
+    @include button-reset;
+    @include button-secondary;
+    @include rounded-corners;
+    padding: 4px 10px;
+    @include font-family;
+    font-size: 12px;
+    display: flex;
+    align-items: center;
+
+    &::before {
+      content: '';
+      display: inline-block;
+      width: 12px;
+      height: 12px;
+      flex-shrink: 0;
+      margin-right: 6px;
+      @include color-svg('../images/icons/v2/plus-24.svg', $color-white);
+    }
+  }
+
   &__delete-list {
     @include button-reset;
     align-items: center;
     color: $color-accent-red;
     display: flex;
-    height: 52px;
+    padding: 8px 0;
     width: 100%;
 
     &::before {
@@ -186,7 +225,22 @@
   }
 
   &__checkbox {
-    margin: 18px 0;
+    margin: 14px 0;
+  }
+
+  &__checkbox-container {
+    flex: 1;
+    display: flex;
+    align-items: center;
+  }
+
+  &__checkbox-label {
+    flex: 1;
+    margin-right: 8px;
+  }
+
+  &__checkbox-description {
+    color: $color-gray-25;
   }
 
   &__conversation-list {
@@ -204,4 +258,15 @@
       color: $color-gray-05;
     }
   }
+
+  &__stories-off-container {
+    display: flex;
+    gap: 16;
+    align-items: center;
+  }
+
+  &__stories-off-text {
+    flex: 1;
+    font-size: 12px;
+  }
 }
diff --git a/ts/components/Checkbox.tsx b/ts/components/Checkbox.tsx
@@ -12,6 +12,7 @@ export type PropsType = {
     id: string;
     checkboxNode: JSX.Element;
     labelNode: JSX.Element;
+    checked?: boolean;
   }) => JSX.Element;
   description?: string;
   disabled?: boolean;
@@ -65,7 +66,7 @@ export const Checkbox = ({
     <div className={getClassName('')}>
       <div className={getClassName('__container')}>
         {children ? (
-          children({ id, checkboxNode, labelNode })
+          children({ id, checkboxNode, labelNode, checked })
         ) : (
           <>
             {checkboxNode}

diff --git a/ts/components/SendStoryModal.tsx b/ts/components/SendStoryModal.tsx
@@ -113,7 +113,7 @@ function getKeyForMyStoryType(list: StoryDistributionListWithMembersDataType) {
   return 'StoriesSettings__mine__all--label';
 }
 
-function getListViewers(
+export function getListViewers(
   list: StoryDistributionListWithMembersDataType,
   i18n: LocalizerType,
   signalConnections: Array<ConversationType>

diff --git a/ts/components/StoriesSettingsModal.stories.tsx b/ts/components/StoriesSettingsModal.stories.tsx
@@ -7,7 +7,10 @@ import React from 'react';
 import type { PropsType } from './StoriesSettingsModal';
 import enMessages from '../../_locales/en/messages.json';
 import { StoriesSettingsModal } from './StoriesSettingsModal';
-import { getDefaultConversation } from '../test-both/helpers/getDefaultConversation';
+import {
+  getDefaultConversation,
+  getDefaultGroup,
+} from '../test-both/helpers/getDefaultConversation';
 import { setupI18n } from '../util/setupI18n';
 import {
   getMyStories,
@@ -23,9 +26,15 @@ export default {
     candidateConversations: {
       defaultValue: Array.from(Array(100), () => getDefaultConversation()),
     },
+    signalConnections: {
+      defaultValue: Array.from(Array(42), getDefaultConversation),
+    },
     distributionLists: {
       defaultValue: [],
     },
+    groupStories: {
+      defaultValue: Array.from(Array(2), getDefaultGroup),
+    },
     getPreferredBadge: { action: true },
     hideStoriesSettings: { action: true },
     i18n: {
@@ -43,6 +52,7 @@ export default {
     onViewersUpdated: { action: true },
     setMyStoriesToAllSignalConnections: { action: true },
     toggleSignalConnectionsModal: { action: true },
+    setStoriesDisabled: { action: true },
   },
 } as Meta;