Active Sessions: Move logout button at the bottom (#6975)

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

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

src/components/left/settings/SettingsActiveSession.tsx

@@ -71,16 +71,10 @@ const SettingsActiveSession: FC<OwnProps & StateProps> = ({
           iconName="close"
         />
         <div className="modal-title">{lang('SessionPreviewTitle')}</div>
-        <Button
-          color="danger"
-          onClick={handleTerminateSessionClick}
-          className={buildClassName('modal-action-button', styles.headerButton)}
-        >
-          {lang('SessionPreviewTerminateSession')}
-        </Button>
       </div>
     );
   }
+
   return (
     <Modal
       header={renderHeader()}
@@ -140,6 +134,16 @@ const SettingsActiveSession: FC<OwnProps & StateProps> = ({
           checked={renderingSession.areCallsEnabled}
         />
       </ListItem>
+      <div className="dialog-buttons mt-2">
+        <Button
+          color="danger"
+          className="confirm-dialog-button"
+          isText
+          onClick={handleTerminateSessionClick}
+        >
+          {lang('SessionPreviewTerminateSession')}
+        </Button>
+      </div>
     </Modal>
   );
 };

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

@@ -33,15 +33,3 @@
   border-radius: var(--border-radius-default);
   background: var(--color-background-secondary);
 }
-
-.action-header {
-  margin-top: 1px;
-}
-
-.action-name {
-  margin-right: auto;
-}
-
-.header-button {
-  margin-right: -0.5rem;
-}

src/components/left/settings/SettingsActiveWebsite.tsx

@@ -1,11 +1,8 @@
-import type { FC } from '../../../lib/teact/teact';
 import { memo, useCallback } from '../../../lib/teact/teact';
 import { getActions, withGlobal } from '../../../global';
 
 import type { ApiUser, ApiWebSession } from '../../../api/types';
 
-import buildClassName from '../../../util/buildClassName';
-
 import useCurrentOrPrev from '../../../hooks/useCurrentOrPrev';
 import useOldLang from '../../../hooks/useOldLang';
 
@@ -27,12 +24,12 @@ type StateProps = {
   bot?: ApiUser;
 };
 
-const SettingsActiveWebsite: FC<OwnProps & StateProps> = ({
+const SettingsActiveWebsite = ({
   isOpen,
   session,
   bot,
   onClose,
-}) => {
+}: OwnProps & StateProps) => {
   const { terminateWebAuthorization } = getActions();
   const lang = useOldLang();
 
@@ -60,16 +57,10 @@ const SettingsActiveWebsite: FC<OwnProps & StateProps> = ({
           iconName="close"
         />
         <div className="modal-title">{lang('WebSessionsTitle')}</div>
-        <Button
-          color="danger"
-          onClick={handleTerminateSessionClick}
-          className={buildClassName('modal-action-button', styles.headerButton)}
-        >
-          {lang('AuthSessions.LogOut')}
-        </Button>
       </div>
     );
   }
+
   return (
     <Modal
       header={renderHeader()}
@@ -101,6 +92,16 @@ const SettingsActiveWebsite: FC<OwnProps & StateProps> = ({
         <dd>{renderingSession?.region}</dd>
       </dl>
       <p className={styles.note}>{lang('AuthSessions.View.LocationInfo')}</p>
+      <div className="dialog-buttons mt-2">
+        <Button
+          color="danger"
+          className="confirm-dialog-button"
+          isText
+          onClick={handleTerminateSessionClick}
+        >
+          {lang('AuthSessions.LogOut')}
+        </Button>
+      </div>
     </Modal>
   );
 };