leftpane settings

_locales/en/messages.json

@@ -1035,6 +1035,15 @@
   "unpairDevice": {
     "message": "Unlink Device"
   },
+  "unpairDeviceWarning": {
+    "message": "Are you sure you want to unlink this device?",
+    "description": "Warning for device unlinking in settings view"
+  },
+  "unpairDeviceWarningSub": {
+    "message":
+      "Unlinking this device will delete all history, including all messages, sessions, and contacts from this device.",
+    "description": "Warning description for device unlinking in settings view"
+  },
   "deviceUnpaired": {
     "message": "Device Unlinked"
   },

stylesheets/_session.scss

@@ -693,7 +693,8 @@ label {
     font-size: $session-font-md;
   }
   &-sub-message {
-    margin-top: 5px;
+    text-align: center;
+    margin-top: 20px;
   }
 }
 
@@ -1385,10 +1386,6 @@ input {
       opacity: 0.8;
       margin-bottom: $session-margin-xs;
     }
-
-    .session-confirm-sub-message {
-      text-align: center;
-    }
   }
 }
 
@@ -1641,3 +1638,4 @@ input {
     pointer-events: none;
   }
 }
+

ts/components/LeftPane.tsx

@@ -172,7 +172,9 @@ export class LeftPane extends React.Component<Props, State> {
   }
 
   private renderSettingSection() {
-    return <LeftPaneSettingSection />;
+    const { isSecondaryDevice } = this.props;
+
+    return <LeftPaneSettingSection isSecondaryDevice={isSecondaryDevice} />;
   }
 
   private renderChannelSection() {

ts/components/session/LeftPaneSettingSection.tsx

@@ -15,12 +15,16 @@ import { SessionIcon, SessionIconSize, SessionIconType } from './icon';
 import { SessionSearchInput } from './SessionSearchInput';
 import { SessionSettingCategory } from './settings/SessionSettings';
 
+interface Props {
+  isSecondaryDevice: boolean;
+}
+
 export interface State {
   settingCategory: SessionSettingCategory;
   searchQuery: string;
 }
 
-export class LeftPaneSettingSection extends React.Component<any, State> {
+export class LeftPaneSettingSection extends React.Component<Props, State> {
   public constructor(props: any) {
     super(props);
 
@@ -30,6 +34,7 @@ export class LeftPaneSettingSection extends React.Component<any, State> {
     };
 
     this.setCategory = this.setCategory.bind(this);
+    this.onDeleteAccount = this.onDeleteAccount.bind(this);
   }
 
   public componentDidMount() {
@@ -140,41 +145,61 @@ export class LeftPaneSettingSection extends React.Component<any, State> {
     );
   }
 
-  public renderBottomButtons(): JSX.Element {
+  public renderBottomButtons(): JSX.Element | undefined {
-    const deleteAccount = window.i18n('deleteAccount');
+    const { isSecondaryDevice } = this.props;
+
+    const dangerButtonText = isSecondaryDevice
+      ? window.i18n('unpairDevice')
+      : window.i18n('deleteAccount');
     const showSeed = window.i18n('showSeed');
 
     return (
       <div className="left-pane-setting-bottom-buttons">
         <SessionButton
-          text={deleteAccount}
+          text={dangerButtonText}
           buttonType={SessionButtonType.SquareOutline}
           buttonColor={SessionButtonColor.Danger}
           onClick={this.onDeleteAccount}
         />
+        {!isSecondaryDevice && (
           <SessionButton
             text={showSeed}
             buttonType={SessionButtonType.SquareOutline}
             buttonColor={SessionButtonColor.White}
             onClick={window.showSeedDialog}
           />
+        )}
       </div>
     );
   }
 
   public onDeleteAccount() {
-    const params = {
+    const { isSecondaryDevice } = this.props;
-      title: window.i18n('deleteAccount'),
+
-      message: window.i18n('deleteAccountWarning'),
+    const title = window.i18n(
-      messageSub: window.i18n('deleteAccountWarningSub'),
+      isSecondaryDevice ? 'unpairDevice' : 'deleteAccount'
+    );
+
+    const message = window.i18n(
+      isSecondaryDevice ? 'unpairDeviceWarning' : 'deleteAccountWarning'
+    );
+
+    const messageSub = window.i18n(
+      isSecondaryDevice ? 'unpairDeviceWarningSub' : 'deleteAccountWarningSub'
+    );
+
+    window.confirmationDialog({
+      title,
+      message,
+      messageSub,
       resolve: window.deleteAccount,
       okTheme: 'danger',
-    };
+    });
-
-    window.confirmationDialog(params);
   }
 
   public getCategories() {
+    const { isSecondaryDevice } = this.props;
+
     return [
       {
         id: SessionSettingCategory.Appearance,
@@ -199,6 +224,7 @@ export class LeftPaneSettingSection extends React.Component<any, State> {
       {
         id: SessionSettingCategory.Devices,
         title: window.i18n('devicesSettingsTitle'),
+        hidden: isSecondaryDevice,
       },
     ];
   }