fix: address reviews comment

_locales/en/messages.json

@@ -173,6 +173,7 @@
   "sendFailed": "Send Failed",
   "mediaMessage": "Media message",
   "messageBodyMissing": "Please enter a message body.",
+  "messageBody": "Message body",
   "unblockToSend": "Unblock this contact to send a message.",
   "unblockGroupToSend": "This group is blocked. Unlock it if you would like to send a message.",
   "youChangedTheTimer": "You set the disappearing message timer to $time$",
@@ -421,7 +422,7 @@
   "recoveryPhraseRevealMessage": "Secure your account by saving your recovery phrase. Reveal your recovery phrase then store it safely to secure it.",
   "recoveryPhraseRevealButtonText": "Reveal Recovery Phrase",
   "notificationSubtitle": "Notifications - $setting$",
-  "surveyTitle": "We'd love your Feedback",
+  "surveyTitle": "We'd Love Your Feedback",
   "faq": "FAQ",
   "support": "Support",
   "clearAll": "Clear All",

stylesheets/_session_conversation.scss

@@ -393,38 +393,6 @@
     }
   }
 
-  &--status {
-    display: flex;
-    justify-content: center;
-    position: absolute;
-    left: 0;
-    z-index: 2;
-    right: 0;
-    bottom: $composition-container-height + var(--margins-md);
-
-    .session-button {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 173px;
-      font-weight: 300;
-      font-family: $session-font-default;
-
-      &.primary {
-        cursor: default;
-        user-select: none;
-
-        &:hover {
-          filter: brightness(100%);
-          border: 2px solid #161819;
-        }
-
-        background-color: $session-shade-1-alt;
-        border: 2px solid #161819;
-      }
-    }
-  }
-
   &--timer {
     display: inline-flex;
     align-items: center;

stylesheets/_session_left_pane.scss

@@ -71,7 +71,6 @@ $session-compose-margin: 20px;
 }
 
 .module-left-pane {
-  width: var(--left-pane-list-width);
   position: relative;
   height: 100vh;
   flex-shrink: 0;

stylesheets/_session_signin.scss

@@ -178,7 +178,7 @@
   &-description-long {
     padding-top: 0;
     padding-bottom: 20px;
-
+    // TODO Theming needs to be updated
     color: rgba(black, 0.6);
     text-align: center;
     font-size: 12px;

ts/components/basic/SessionRadio.tsx

@@ -1,5 +1,6 @@
 import React, { ChangeEvent } from 'react';
 import styled from 'styled-components';
+import { black } from '../../state/ducks/SessionTheme';
 import { Flex } from '../basic/Flex';
 // tslint:disable: react-unused-props-and-state
 
@@ -46,7 +47,7 @@ const StyledLabel = styled.label<{
     outline: var(--color-text) solid 1px;
     border: none;
     outline-offset: ${props => props.outlineOffset}px;
-    margin: ${props => props.beforeMargins || ''};
+    ${props => props.beforeMargins && `margin: ${props.beforeMargins};`};
   }
 `;
 
@@ -86,6 +87,7 @@ export const SessionRadio = (props: Props) => {
         filledSize={filledSize}
         outlineOffset={outlineOffset}
         beforeMargins={beforeMargins}
+        aria-label={label}
       >
         {label}
       </StyledLabel>
@@ -105,7 +107,7 @@ const StyledInputOutlineSelected = styled(StyledInput)`
 const StyledLabelOutlineSelected = styled(StyledLabel)<{ selectedColor: string }>`
   :before {
     background: ${props => props.selectedColor};
-    outline: #0000 solid 1px;
+    outline: ${black} solid 1px;
   }
 `;
 

ts/components/basic/SessionToggle.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { updateConfirmModal } from '../../state/ducks/modalDialog';
 import { useDispatch } from 'react-redux';
 import styled from 'styled-components';
+import { white } from '../../state/ducks/SessionTheme';
 
 const StyledKnob = styled.div<{ active: boolean }>`
   position: absolute;
@@ -10,7 +11,7 @@ const StyledKnob = styled.div<{ active: boolean }>`
   height: 21px;
   width: 21px;
   border-radius: 28px;
-  background-color: white;
+  background-color: ${white};
   box-shadow: ${props =>
     props.active ? '-2px 1px 3px rgba(0, 0, 0, 0.15)' : '2px 1px 3px rgba(0, 0, 0, 0.15);'};
 
@@ -22,7 +23,7 @@ const StyledKnob = styled.div<{ active: boolean }>`
 const StyledSessionToggle = styled.div<{ active: boolean }>`
   width: 51px;
   height: 25px;
-  border: 1px solid #e5e5ea;
+  border: 1px solid #e5e5ea; // TODO Theming update
   border-radius: 16px;
   position: relative;
 

ts/components/conversation/TypingAnimation.tsx

@@ -14,7 +14,7 @@ const StyledTypingContainer = styled.div`
 
 const StyledTypingDot = styled.div<{ index: number }>`
   border-radius: 50%;
-  background-color: var(--color-text-subtle);
+  background-color: var(--color-text-subtle);  // TODO Theming update
 
   height: 6px;
   width: 6px;

ts/components/dialog/OnionStatusPathDialog.tsx

@@ -47,6 +47,25 @@ const StyledOnionDescription = styled.p`
   width: 0;
 `;
 
+const StyledVerticalLine = styled.div`
+  background: rgba(#7a7a7a, 0.6);
+  position: absolute;
+  height: calc(100% - 2 * 15px);
+  margin: 15px calc(100% / 2 - 1px);
+
+  width: 1px;
+`;
+
+const StyledLightsContainer = styled.div`
+  position: relative;
+`;
+
+const StyledGrowingIcon = styled.div`
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+`;
+
 const OnionCountryDisplay = ({ labelText, snodeIp }: { snodeIp?: string; labelText: string }) => {
   const element = (hovered: boolean) => (
     <StyledCountry>{hovered && snodeIp ? snodeIp : labelText}</StyledCountry>
@@ -120,25 +139,6 @@ const OnionPathModalInner = () => {
   );
 };
 
-const StyledVerticalLine = styled.div`
-  background: rgba(#7a7a7a, 0.6);
-  position: absolute;
-  height: calc(100% - 2 * 15px);
-  margin: 15px calc(100% / 2 - 1px);
-
-  width: 1px;
-`;
-
-const StyledLightsContainer = styled.div`
-  position: relative;
-`;
-
-const StyledGrowingIcon = styled.div`
-  flex-grow: 1;
-  display: flex;
-  align-items: center;
-`;
-
 export type OnionNodeStatusLightType = {
   glowStartDelay: number;
   glowDuration: number;

ts/components/leftpane/LeftPane.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { useSelector } from 'react-redux';
-import { CSSProperties } from 'styled-components';
+import styled from 'styled-components';
 import { SectionType } from '../../state/ducks/section';
 import { SessionTheme } from '../../state/ducks/SessionTheme';
 import { getLeftPaneLists } from '../../state/selectors/conversations';
@@ -12,6 +12,11 @@ import { ActionsPanel } from './ActionsPanel';
 import { LeftPaneMessageSection } from './LeftPaneMessageSection';
 import { LeftPaneSettingSection } from './LeftPaneSettingSection';
 
+export const leftPaneListWidth = 300;
+const StyledLeftPane = styled.div`
+  width: ${leftPaneListWidth}px;
+`;
+
 const InnerLeftPaneMessageSection = () => {
   const showSearch = useSelector(isSearching);
 
@@ -46,20 +51,15 @@ const LeftPaneSection = () => {
   return null;
 };
 
-export const leftPaneListWidth = 300;
-
 export const LeftPane = () => {
   return (
     <SessionTheme>
       <div className="module-left-pane-session">
         <ActionsPanel />
 
-        <div
+        <StyledLeftPane className="module-left-pane">
-          className="module-left-pane"
-          style={{ '--left-pane-list-width': `${leftPaneListWidth}px` } as CSSProperties}
-        >
           <LeftPaneSection />
-        </div>
+        </StyledLeftPane>
       </div>
     </SessionTheme>
   );

ts/components/leftpane/LeftPaneMessageSection.tsx

@@ -42,6 +42,13 @@ const StyledConversationListContent = styled.div`
   background: var(--color-conversation-list);
 `;
 
+const StyledLeftPaneContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
+`;
+
 const ClosableOverlay = () => {
   const overlayMode = useSelector(getOverlayMode);
 
@@ -146,10 +153,3 @@ export class LeftPaneMessageSection extends React.Component<Props> {
     );
   }
 }
-
-const StyledLeftPaneContent = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  overflow: hidden;
-`;

ts/components/settings/BlockedList.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 
 // tslint:disable-next-line: no-submodule-imports
 import useUpdate from 'react-use/lib/useUpdate';
-import styled, { CSSProperties } from 'styled-components';
+import styled from 'styled-components';
 import { useSet } from '../../hooks/useSet';
 import { ToastUtils } from '../../session/utils';
 import { BlockedNumberController } from '../../util';
@@ -18,14 +18,14 @@ const BlockedEntriesContainer = styled.div`
   overflow: auto;
   min-height: 40px;
   max-height: 100%;
-  background: var(--blocked-contact-list-bg);
+  background: var(--color-input-background); // TODO theming update
 `;
 
 const BlockedEntriesRoundedContainer = styled.div`
   overflow: hidden;
   border-radius: 16px;
   padding: var(--margins-lg);
-  background: var(--blocked-contact-list-bg);
+  background: var(--color-input-background); // TODO theming update
 `;
 
 const BlockedContactsSection = styled.div`
@@ -119,9 +119,7 @@ export const BlockedContactsList = () => {
   }
 
   return (
-    <BlockedContactsSection
+    <BlockedContactsSection>
-      style={{ '--blocked-contact-list-bg': 'var(--color-input-background)' } as CSSProperties}
-    >
       <StyledBlockedSettingItem clickable={!noBlockedNumbers}>
         <BlockedContactListTitle onClick={toggleUnblockList}>
           <SettingsTitleAndDescription title={window.i18n('blockedSettingsTitle')} />

ts/components/settings/SessionNotificationGroupSettings.tsx

@@ -57,7 +57,10 @@ export const SessionNotificationGroupSettings = (props: { hasPassword: boolean |
     Notifications.addNotification(
       {
         conversationId: `preview-notification-${Date.now()}`,
-        message: items.find(m => m.value === initialItem)?.label || 'Message body',
+        message:
+          items.find(m => m.value === initialItem)?.label ||
+          window?.i18n?.('messageBody') ||
+          'Message body',
         title: window.i18n('notificationPreview'),
         iconUrl: null,
         isExpiringMessage: false,

ts/components/settings/SessionSettings.tsx

@@ -163,7 +163,7 @@ const SettingInCategory = (props: {
     case SessionSettingCategory.Permissions:
       return <SettingsCategoryPermissions hasPassword={hasPassword} />;
 
-    // those three down there have no options, they are just a button
+    // these three down there have no options, they are just a button
     case SessionSettingCategory.ClearData:
     case SessionSettingCategory.MessageRequests:
     case SessionSettingCategory.RecoveryPhrase:

ts/components/settings/SessionSettingsHeader.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import styled from 'styled-components';
-import { LocalizerKeys } from '../../types/LocalizerKeys';
 import { missingCaseError } from '../../util';
 import { SessionSettingCategory, SettingsViewProps } from './SessionSettings';
 
@@ -26,32 +25,30 @@ const StyledHeaderTittle = styled.div`
 export const SettingsHeader = (props: Props) => {
   const { category } = props;
 
-  let categoryLocalized: LocalizerKeys | null = null;
+  let categoryTitle: string | null = null;
   switch (category) {
     case SessionSettingCategory.Appearance:
-      categoryLocalized = 'appearanceSettingsTitle';
+      categoryTitle = window.i18n('appearanceSettingsTitle');
       break;
     case SessionSettingCategory.Conversations:
-      categoryLocalized = 'conversationsSettingsTitle';
+      categoryTitle = window.i18n('conversationsSettingsTitle');
       break;
     case SessionSettingCategory.Notifications:
-      categoryLocalized = 'notificationsSettingsTitle';
+      categoryTitle = window.i18n('notificationsSettingsTitle');
       break;
     case SessionSettingCategory.Help:
-      categoryLocalized = 'helpSettingsTitle';
+      categoryTitle = window.i18n('helpSettingsTitle');
       break;
     case SessionSettingCategory.Permissions:
-      categoryLocalized = 'permissionsSettingsTitle';
+      categoryTitle = window.i18n('permissionsSettingsTitle');
       break;
     case SessionSettingCategory.Privacy:
-      categoryLocalized = 'privacySettingsTitle';
+      categoryTitle = window.i18n('privacySettingsTitle');
       break;
     default:
       throw missingCaseError('SettingsHeader' as never);
   }
 
-  const categoryTitle = window.i18n(categoryLocalized);
-
   return (
     <StyledSettingsHeader>
       <StyledHeaderTittle>{categoryTitle}</StyledHeaderTittle>

ts/components/settings/SettingsThemeSwitcher.tsx

@@ -159,7 +159,7 @@ const Themes = () => {
 };
 
 export const SettingsThemeSwitcher = () => {
-  //FIXME store that value somewhere in the theme object
+  //TODO Theming
   const [selectedAccent, setSelectedAccent] = useState<PrimaryColorIds | undefined>(undefined);
 
   return (

ts/state/ducks/SessionTheme.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 
 import { createGlobalStyle } from 'styled-components';
 
-const white = '#ffffff';
+export const white = '#ffffff';
-const black = '#000000';
+export const black = '#000000';
 const warning = '#e7b100';
 const destructive = '#ff453a';
 const accentLightTheme = '#00e97b';

ts/types/LocalizerKeys.ts

@@ -7,6 +7,7 @@ export type LocalizerKeys =
   | 'startedACall'
   | 'mainMenuWindow'
   | 'unblocked'
+  | 'keepDisabled'
   | 'userAddedToModerators'
   | 'otherSingular'
   | 'to'
@@ -390,6 +391,7 @@ export type LocalizerKeys =
   | 'changeAccountPasswordDescription'
   | 'notificationSettingsDialog'
   | 'invalidOldPassword'
+  | 'messageBody'
   | 'audioMessageAutoplayTitle'
   | 'removePasswordInvalid'
   | 'password'

ts/util/blockedNumberController.ts

@@ -88,7 +88,7 @@ export class BlockedNumberController {
   }
 
   /**
-   * Unblock all thope users.
+   * Unblock all these users.
    * This will only unblock the primary device of the user.
    *
    * @param user The user to unblock.