From e3c2ad5f4d8505ddc6bdde3c690c17e1113b6226 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Tue, 3 May 2022 14:17:23 +0100
Subject: [PATCH] Settings / Active Session: Better UI (#1850)

---
 .../SettingsActiveSession.module.scss         |  4 ++++
 .../left/settings/SettingsActiveSession.tsx   | 23 +++++++++++++++----
 src/components/ui/Modal.scss                  | 11 +++++++++
 3 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/src/components/left/settings/SettingsActiveSession.module.scss b/src/components/left/settings/SettingsActiveSession.module.scss
index 9f7ef7b5b..ad3c2d598 100644
--- a/src/components/left/settings/SettingsActiveSession.module.scss
+++ b/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;
+}
diff --git a/src/components/left/settings/SettingsActiveSession.tsx b/src/components/left/settings/SettingsActiveSession.tsx
index d4101019a..4d240a066 100644
--- a/src/components/left/settings/SettingsActiveSession.tsx
+++ b/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>
   );
 };
diff --git a/src/components/ui/Modal.scss b/src/components/ui/Modal.scss
index b4468e79e..b161a832b 100644
--- a/src/components/ui/Modal.scss
+++ b/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);
+        }
+      }
     }
   }