From e7fe246def280be07145498408c6073212f52b93 Mon Sep 17 00:00:00 2001
From: yougotwill <willmgrant@gmail.com>
Date: Wed, 7 Aug 2024 15:53:08 +1000
Subject: [PATCH] fix: align recovery password shield on settings page

---
 .../settings/section/CategoryRecoveryPassword.tsx  | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/ts/components/settings/section/CategoryRecoveryPassword.tsx b/ts/components/settings/section/CategoryRecoveryPassword.tsx
index c3f9f06e4..95dd00adb 100644
--- a/ts/components/settings/section/CategoryRecoveryPassword.tsx
+++ b/ts/components/settings/section/CategoryRecoveryPassword.tsx
@@ -23,7 +23,11 @@ import { SessionHtmlRenderer } from '../../basic/SessionHTMLRenderer';
 import { SpacerMD, SpacerSM } from '../../basic/Text';
 import { CopyToClipboardIcon } from '../../buttons/CopyToClipboardButton';
 import { SessionIconButton } from '../../icon';
-import { SessionSettingButtonItem, SessionSettingsItemWrapper } from '../SessionSettingListItem';
+import {
+  SessionSettingButtonItem,
+  SessionSettingsItemWrapper,
+  StyledSettingItem,
+} from '../SessionSettingListItem';
 import { useHotkey } from '../../../hooks/useHotkey';
 import { getIsModalVisble } from '../../../state/selectors/modal';
 
@@ -37,6 +41,12 @@ const StyledSettingsItemContainer = styled.div`
   button[data-testid='hide-recovery-password-button'] {
     width: 130px;
   }
+
+  ${StyledSettingItem} {
+    svg {
+      margin-top: -2px;
+    }
+  }
 `;
 
 const StyledRecoveryPassword = styled(AnimatedFlex)<{ color: string }>`
@@ -113,7 +123,7 @@ export const SettingsCategoryRecoveryPassword = () => {
         title={window.i18n('sessionRecoveryPassword')}
         icon={{
           iconType: 'recoveryPasswordFill',
-          iconSize: 16,
+          iconSize: 18,
           iconColor: 'var(--text-primary-color)',
         }}
         description={