Introduce a new design for the left pane

ts/components/DialogExpiredBuild.tsx

@@ -4,15 +4,19 @@
 import React from 'react';
 
 import { LocalizerType } from '../types/Util';
+import type { WidthBreakpoint } from './_util';
 
 import { LeftPaneDialog } from './LeftPaneDialog';
+import { openLinkInWebBrowser } from '../util/openLinkInWebBrowser';
 
 type PropsType = {
+  containerWidthBreakpoint: WidthBreakpoint;
   hasExpired: boolean;
   i18n: LocalizerType;
 };
 
 export const DialogExpiredBuild = ({
+  containerWidthBreakpoint,
   hasExpired,
   i18n,
 }: PropsType): JSX.Element | null => {
@@ -21,17 +25,16 @@ export const DialogExpiredBuild = ({
   }
 
   return (
-    <LeftPaneDialog type="error">
+    <LeftPaneDialog
+      containerWidthBreakpoint={containerWidthBreakpoint}
+      type="error"
+      onClick={() => {
+        openLinkInWebBrowser('https://signal.org/download/');
+      }}
+      clickLabel={i18n('upgrade')}
+      hasAction
+    >
       {i18n('expiredWarning')}{' '}
-      <a
-        className="LeftPaneDialog__action-text"
-        href="https://signal.org/download/"
-        rel="noreferrer"
-        tabIndex={-1}
-        target="_blank"
-      >
-        {i18n('upgrade')}
-      </a>
     </LeftPaneDialog>
   );
 };