Settings / Active Session: Better UI (#1850)

src/components/left/settings/SettingsActiveSession.module.scss

@@ -50,3 +50,7 @@ $icons: "android", "apple", "brave", "chrome", "edge", "firefox", "linux", "oper
 .actionName {
   margin-right: auto;
 }
+
+.headerButton {
+  margin-right: -0.5rem;
+}

src/components/left/settings/SettingsActiveSession.tsx

@@ -57,9 +57,26 @@ const SettingsActiveSession: FC<OwnProps & StateProps> = ({
     return undefined;
   }
 
+  function renderHeader() {
+    return (
+      <div className="modal-header-condensed" dir={lang.isRtl ? 'rtl' : undefined}>
+        <Button round color="translucent" size="smaller" ariaLabel={lang('Close')} onClick={onClose}>
+          <i className="icon-close" />
+        </Button>
+        <div className="modal-title">{lang('SessionPreview.Title')}</div>
+        <Button
+          color="danger"
+          onClick={handleTerminateSessionClick}
+          className={buildClassName('modal-action-button', styles.headerButton)}
+        >
+          {lang('SessionPreview.TerminateSession')}
+        </Button>
+      </div>
+    );
+  }
   return (
     <Modal
-      title={lang('SessionPreview.Title')}
+      header={renderHeader()}
       isOpen={isOpen}
       hasCloseButton
       onClose={onClose}
@@ -91,7 +108,7 @@ const SettingsActiveSession: FC<OwnProps & StateProps> = ({
 
       <p className={styles.note}>{lang('SessionPreview.IpDesc')}</p>
 
-      <h4 className={styles.actionHeader}>{lang('SessionPreview.AcceptHeader')}</h4>
+      <h4 className={styles.actionHeader}>{lang('AuthSessions.View.AcceptTitle')}</h4>
 
       <ListItem onClick={handleSecretChatsStateChange}>
         <span className={styles.actionName}>{lang('SessionPreview.Accept.Secret')}</span>
@@ -109,8 +126,6 @@ const SettingsActiveSession: FC<OwnProps & StateProps> = ({
           checked={renderingSession.areCallsEnabled}
         />
       </ListItem>
-
-      <Button color="danger" onClick={handleTerminateSessionClick}>{lang('SessionPreview.TerminateSession')}</Button>
     </Modal>
   );
 };

src/components/ui/Modal.scss

@@ -121,6 +121,17 @@
       padding-left: 1.25rem;
       padding-right: 1.25rem;
       min-width: 5rem;
+
+      &.danger {
+        background-color: var(--color-error);
+        color: var(--color-white);
+
+        &:hover,
+        &:focus,
+        &:active {
+          background-color: var(--color-error-shade);
+        }
+      }
     }
   }