From 424d8785b6cab1402bc1f70b660203752c0df012 Mon Sep 17 00:00:00 2001
From: Josh Perez <60019601+josh-signal@users.noreply.github.com>
Date: Tue, 24 Aug 2021 16:59:44 -0400
Subject: [PATCH] Restyle relink dialog

---
 _locales/en/messages.json                      |  2 +-
 stylesheets/components/LeftPaneDialog.scss     |  5 +++++
 ...og.stories.tsx => DialogRelink.stories.tsx} |  8 ++++----
 .../{RelinkDialog.tsx => DialogRelink.tsx}     | 18 +++++++++++-------
 ts/state/smart/RelinkDialog.tsx                |  4 ++--
 5 files changed, 23 insertions(+), 14 deletions(-)
 rename ts/components/{RelinkDialog.stories.tsx => DialogRelink.stories.tsx} (81%)
 rename ts/components/{RelinkDialog.tsx => DialogRelink.tsx} (63%)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 276cbf6ead..4799329fb6 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -2219,7 +2219,7 @@
     "description": "When a person inputs a number that is invalid"
   },
   "unlinkedWarning": {
-    "message": "Relink Signal Desktop to your mobile device to continue messaging."
+    "message": "Click to relink Signal Desktop to your mobile device to continue messaging."
   },
   "unlinked": {
     "message": "Unlinked"
diff --git a/stylesheets/components/LeftPaneDialog.scss b/stylesheets/components/LeftPaneDialog.scss
index 6c5564e962..9552c841c4 100644
--- a/stylesheets/components/LeftPaneDialog.scss
+++ b/stylesheets/components/LeftPaneDialog.scss
@@ -46,6 +46,11 @@
     margin-right: 18px;
     background-color: $color-white;
 
+    &--relink {
+      -webkit-mask: url('../images/icons/v2/link-broken-16.svg') no-repeat
+        center;
+    }
+
     &--network {
       -webkit-mask: url('../images/icons/v2/offline-22.svg') no-repeat center;
     }
diff --git a/ts/components/RelinkDialog.stories.tsx b/ts/components/DialogRelink.stories.tsx
similarity index 81%
rename from ts/components/RelinkDialog.stories.tsx
rename to ts/components/DialogRelink.stories.tsx
index 328487d5fb..c5f4db6ec1 100644
--- a/ts/components/RelinkDialog.stories.tsx
+++ b/ts/components/DialogRelink.stories.tsx
@@ -6,7 +6,7 @@ import { storiesOf } from '@storybook/react';
 import { boolean } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
 
-import { RelinkDialog } from './RelinkDialog';
+import { DialogRelink } from './DialogRelink';
 import { setup as setupI18n } from '../../js/modules/i18n';
 import enMessages from '../../_locales/en/messages.json';
 
@@ -27,19 +27,19 @@ const permutations = [
   },
 ];
 
-storiesOf('Components/RelinkDialog', module)
+storiesOf('Components/DialogRelink', module)
   .add('Knobs Playground', () => {
     const isRegistrationDone = boolean('isRegistrationDone', false);
 
     return (
-      <RelinkDialog {...defaultProps} isRegistrationDone={isRegistrationDone} />
+      <DialogRelink {...defaultProps} isRegistrationDone={isRegistrationDone} />
     );
   })
   .add('Iterations', () => {
     return permutations.map(({ props, title }) => (
       <>
         <h3>{title}</h3>
-        <RelinkDialog {...defaultProps} {...props} />
+        <DialogRelink {...defaultProps} {...props} />
       </>
     ));
   });
diff --git a/ts/components/RelinkDialog.tsx b/ts/components/DialogRelink.tsx
similarity index 63%
rename from ts/components/RelinkDialog.tsx
rename to ts/components/DialogRelink.tsx
index 9d2af3fcd3..41fa641c46 100644
--- a/ts/components/RelinkDialog.tsx
+++ b/ts/components/DialogRelink.tsx
@@ -11,7 +11,7 @@ export type PropsType = {
   relinkDevice: () => void;
 };
 
-export const RelinkDialog = ({
+export const DialogRelink = ({
   i18n,
   isRegistrationDone,
   relinkDevice,
@@ -22,14 +22,18 @@ export const RelinkDialog = ({
 
   return (
     <div className="LeftPaneDialog LeftPaneDialog--warning">
+      <div className="LeftPaneDialog__icon LeftPaneDialog__icon--relink" />
       <div className="LeftPaneDialog__message">
         <h3>{i18n('unlinked')}</h3>
-        <span>{i18n('unlinkedWarning')}</span>
-      </div>
-      <div className="LeftPaneDialog__actions">
-        <button onClick={relinkDevice} type="button">
-          {i18n('relink')}
-        </button>
+        <div>
+          <button
+            className="LeftPaneDialog__action-text"
+            onClick={relinkDevice}
+            type="button"
+          >
+            {i18n('unlinkedWarning')}
+          </button>
+        </div>
       </div>
     </div>
   );
diff --git a/ts/state/smart/RelinkDialog.tsx b/ts/state/smart/RelinkDialog.tsx
index ceec7ee1f2..6aed71db4b 100644
--- a/ts/state/smart/RelinkDialog.tsx
+++ b/ts/state/smart/RelinkDialog.tsx
@@ -3,7 +3,7 @@
 
 import { connect } from 'react-redux';
 import { mapDispatchToProps } from '../actions';
-import { RelinkDialog } from '../../components/RelinkDialog';
+import { DialogRelink } from '../../components/DialogRelink';
 import { StateType } from '../reducer';
 import { getIntl } from '../selectors/user';
 import { isDone } from '../../util/registration';
@@ -17,4 +17,4 @@ const mapStateToProps = (state: StateType) => {
 
 const smart = connect(mapStateToProps, mapDispatchToProps);
 
-export const SmartRelinkDialog = smart(RelinkDialog);
+export const SmartRelinkDialog = smart(DialogRelink);