Restyle relink dialog

Co-authored-by: Josh Perez <60019601+josh-signal@users.noreply.github.com>
signalapp · Aug 24, 2021 · b2ccd9e · b2ccd9e
1 parent cf323cc
commit b2ccd9e
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 14 deletions.
diff --git 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
@@ -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 → ts/components/DialogRelink.stories.tsx b/ts/components/RelinkDialog.stories.tsx → 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 → ts/components/DialogRelink.tsx b/ts/components/RelinkDialog.tsx → 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
@@ -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);