Brand Refresh

ts/components/About.stories.tsx

@@ -0,0 +1,36 @@
+// Copyright 2024 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { setupI18n } from '../util/setupI18n';
+import enMessages from '../../_locales/en/messages.json';
+import type { ComponentMeta } from '../storybook/types';
+import type { AboutProps } from './About';
+import { About } from './About';
+
+const i18n = setupI18n('en', enMessages);
+
+export default {
+  title: 'Components/About',
+  component: About,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    i18n,
+    closeAbout: action('showWhatsNewModal'),
+    appEnv: 'production',
+    platform: 'darwin',
+    arch: 'arm64',
+    version: '1.2.3',
+  },
+} satisfies ComponentMeta<AboutProps>;
+
+export function Basic(args: AboutProps): JSX.Element {
+  return (
+    <div style={{ height: '100vh' }}>
+      <About {...args} />
+    </div>
+  );
+}

ts/components/About.tsx

@@ -6,28 +6,46 @@ import React from 'react';
 import type { LocalizerType } from '../types/Util';
 import { useEscapeHandling } from '../hooks/useEscapeHandling';
 
-export type PropsType = {
+export type AboutProps = Readonly<{
   closeAbout: () => unknown;
-  environment: string;
+  appEnv: string;
+  arch: string;
+  platform: string;
   i18n: LocalizerType;
   version: string;
-};
+}>;
 
 export function About({
   closeAbout,
-  environment,
+  appEnv,
+  arch,
+  platform,
   i18n,
   version,
-}: PropsType): JSX.Element {
+}: AboutProps): JSX.Element {
   useEscapeHandling(closeAbout);
 
+  let env: string;
+
+  if (platform === 'darwin') {
+    if (arch === 'arm64') {
+      env = i18n('icu:About__AppEnvironment--AppleSilicon', { appEnv });
+    } else {
+      env = i18n('icu:About__AppEnvironment--AppleIntel', { appEnv });
+    }
+  } else {
+    env = i18n('icu:About__AppEnvironment', { appEnv });
+  }
+
   return (
     <div className="About">
       <div className="module-splash-screen">
-        <div className="module-splash-screen__logo module-img--150" />
+        <div className="module-splash-screen__logo module-splash-screen__logo--128" />
 
+        <h1 className="About__Title">{i18n('icu:signalDesktop')}</h1>
         <div className="version">{version}</div>
-        <div className="environment">{environment}</div>
+        <div className="environment">{env}</div>
+        <br />
         <div>
           <a href="https://signal.org">signal.org</a>
         </div>

ts/components/ChatsTab.stories.tsx

@@ -0,0 +1,46 @@
+// Copyright 2024 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { setupI18n } from '../util/setupI18n';
+import enMessages from '../../_locales/en/messages.json';
+import type { ComponentMeta } from '../storybook/types';
+import type { ChatsTabProps } from './ChatsTab';
+import { ChatsTab } from './ChatsTab';
+
+const i18n = setupI18n('en', enMessages);
+
+export default {
+  title: 'Components/ChatsTab',
+  component: ChatsTab,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    i18n,
+    otherTabsUnreadStats: {
+      unreadCount: 0,
+      unreadMentionsCount: 0,
+      markedUnread: false,
+    },
+    isStaging: false,
+    hasPendingUpdate: false,
+    hasFailedStorySends: false,
+    navTabsCollapsed: false,
+    onToggleNavTabsCollapse: action('onToggleNavTabsCollapse'),
+    renderConversationView: () => <>{null}</>,
+    renderLeftPane: () => <>{null}</>,
+    renderMiniPlayer: () => <>{null}</>,
+    selectedConversationId: undefined,
+    showWhatsNewModal: action('showWhatsNewModal'),
+  },
+} satisfies ComponentMeta<ChatsTabProps>;
+
+export function Basic(args: ChatsTabProps): JSX.Element {
+  return (
+    <div style={{ height: '100vh' }}>
+      <ChatsTab {...args} />
+    </div>
+  );
+}

ts/components/ChatsTab.tsx

@@ -7,7 +7,7 @@ import type { NavTabPanelProps } from './NavTabs';
 import { WhatsNewLink } from './WhatsNewLink';
 import type { UnreadStats } from '../util/countUnreadStats';
 
-type ChatsTabProps = Readonly<{
+export type ChatsTabProps = Readonly<{
   otherTabsUnreadStats: UnreadStats;
   i18n: LocalizerType;
   isStaging: boolean;
@@ -59,7 +59,7 @@ export function ChatsTab({
         ) : (
           <div className="Inbox__no-conversation-open">
             {renderMiniPlayer({ shouldFlow: false })}
-            <div className="module-splash-screen__logo module-img--80 module-logo-blue" />
+            <div className="module-splash-screen__logo module-splash-screen__logo--96" />
             <h3 className="Inbox__welcome">
               {isStaging
                 ? 'THIS IS A STAGING DESKTOP'

ts/components/Inbox.tsx

@@ -150,7 +150,9 @@ export function Inbox({
       }
       logo = <div className="Inbox__logo">{parts}</div>;
     } else {
-      logo = <div className="module-splash-screen__logo module-img--150" />;
+      logo = (
+        <div className="module-splash-screen__logo module-splash-screen__logo--128" />
+      );
     }
 
     return (