From 4b976259bf0c5ad8dc8ef0d9f659a90bcf1a66d6 Mon Sep 17 00:00:00 2001 From: William Grant Date: Wed, 28 Feb 2024 17:14:54 +1100 Subject: [PATCH] feat: updated recovery password bannner --- _locales/en/messages.json | 7 +- images/session/session_shield.svg | 1 + .../leftpane/LeftPaneSectionHeader.tsx | 100 ++++++++++-------- ts/types/LocalizerKeys.ts | 5 +- 4 files changed, 60 insertions(+), 53 deletions(-) create mode 100644 images/session/session_shield.svg diff --git a/_locales/en/messages.json b/_locales/en/messages.json index d8c8cd9fb..fb247dd9e 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -487,9 +487,6 @@ "areYouSureDeleteDeviceOnly": "Are you sure you want to delete your device data only?", "areYouSureDeleteEntireAccount": "Are you sure you want to delete your data from the network? If you continue, you will not be able to restore your messages or contacts.", "iAmSure": "I am sure", - "recoveryPhraseSecureTitle": "You're almost finished!", - "recoveryPhraseRevealMessage": "Secure your account by saving your recovery phrase. Reveal your recovery phrase then store it safely to secure it.", - "recoveryPhraseRevealButtonText": "Reveal Recovery Phrase", "notificationSubtitle": "Notifications - $setting$", "surveyTitle": "We'd Love Your Feedback", "faq": "FAQ", @@ -590,5 +587,7 @@ "onboardingAccountCreated": "Account Created", "onboardingBubbleWelcomeToSession": "Welcome to Session", "conversationsNone": "You don't have any conversations yet", - "onboardingHitThePlusButton": "Hit the plus button to start a chat, create a group, or join an official community!" + "onboardingHitThePlusButton": "Hit the plus button to start a chat, create a group, or join an official community!", + "saveRecoveryPassword": "Save your recovery password", + "saveRecoveryPasswordDescription": "Save your recovery password to make sure you don't lose access to your account." } diff --git a/images/session/session_shield.svg b/images/session/session_shield.svg new file mode 100644 index 000000000..b5b87975c --- /dev/null +++ b/images/session/session_shield.svg @@ -0,0 +1 @@ + diff --git a/ts/components/leftpane/LeftPaneSectionHeader.tsx b/ts/components/leftpane/LeftPaneSectionHeader.tsx index 9c39ea224..43b22c635 100644 --- a/ts/components/leftpane/LeftPaneSectionHeader.tsx +++ b/ts/components/leftpane/LeftPaneSectionHeader.tsx @@ -8,7 +8,9 @@ import { getShowRecoveryPhrasePrompt } from '../../state/selectors/userConfig'; import { isSignWithRecoveryPhrase } from '../../util/storage'; import { Flex } from '../basic/Flex'; import { SessionButton } from '../basic/SessionButton'; +import { SpacerMD } from '../basic/Text'; import { MenuButton } from '../buttons'; +import { SessionIcon } from '../icon'; const SectionTitle = styled.h1` padding-top: var(--margins-xs); @@ -26,44 +28,49 @@ const StyledProgressBarContainer = styled.div` const StyledProgressBarInner = styled.div` background: var(--primary-color); - width: 90%; + width: 100%; transition: width 0.5s ease-in; height: 100%; `; -export const StyledBannerTitle = styled.div` - line-height: 1.3; - font-size: var(--font-size-md); - font-weight: bold; - margin: var(--margins-sm) var(--margins-sm) 0 var(--margins-sm); - - span { - color: var(--primary-color); - } -`; - -export const StyledLeftPaneBanner = styled.div` - background: var(--background-primary-color); - display: flex; - flex-direction: column; - border-bottom: 1px solid var(--border-color); -`; - -const StyledBannerInner = styled.div` +const StyledBanner = styled(Flex)` p { + padding: 0; margin: 0; + line-height: 1.2; } - .left-pane-banner___phrase { - margin-top: var(--margins-md); + p:nth-child(2) { + font-size: 12px; } .session-button { - margin-top: var(--margins-md); + width: 100%; + } + + svg { + margin-top: -3px; + margin-left: var(--margins-xs); } `; -const BannerInner = () => { +const StyledBannerTitle = styled.p` + font-size: var(--font-size-lg); + font-weight: 700; + line-height: 1; +`; + +const StyledLeftPaneBanner = styled.div` + background: var(--background-secondary-color); + display: flex; + flex-direction: column; + border-bottom: 1px solid var(--border-color); +`; + +export const LeftPaneBanner = () => { + const section = useSelector(getFocusedSection); + const isSignInWithRecoveryPhrase = isSignWithRecoveryPhrase(); + const dispatch = useDispatch(); const showRecoveryPhraseModal = () => { @@ -71,22 +78,6 @@ const BannerInner = () => { dispatch(recoveryPhraseModal({})); }; - return ( - -

{window.i18n('recoveryPhraseRevealMessage')}

- - - ); -}; - -export const LeftPaneBanner = () => { - const section = useSelector(getFocusedSection); - const isSignInWithRecoveryPhrase = isSignWithRecoveryPhrase(); - if (section !== SectionType.Message || isSignInWithRecoveryPhrase) { return null; } @@ -96,12 +87,29 @@ export const LeftPaneBanner = () => { - - {window.i18n('recoveryPhraseSecureTitle')} 90% - - - - + + + {window.i18n('saveRecoveryPassword')} + + +

{window.i18n('saveRecoveryPasswordDescription')}

+ + + ); }; diff --git a/ts/types/LocalizerKeys.ts b/ts/types/LocalizerKeys.ts index 82068ac43..2583d5fa0 100644 --- a/ts/types/LocalizerKeys.ts +++ b/ts/types/LocalizerKeys.ts @@ -418,10 +418,7 @@ export type LocalizerKeys = | 'received' | 'recoveryPhrase' | 'recoveryPhraseEmpty' - | 'recoveryPhraseRevealButtonText' - | 'recoveryPhraseRevealMessage' | 'recoveryPhraseSavePromptMain' - | 'recoveryPhraseSecureTitle' | 'remove' | 'removeAccountPasswordDescription' | 'removeAccountPasswordTitle' @@ -444,6 +441,8 @@ export type LocalizerKeys = | 'ringing' | 'save' | 'saveLogToDesktop' + | 'saveRecoveryPassword' + | 'saveRecoveryPasswordDescription' | 'saved' | 'savedMessages' | 'savedTheFile'