keejef
/
session-desktop
mirror of https://github.com/oxen-io/session-desktop
2
0
Fork 0
Code Issues 8 Projects Releases Wiki Activity

feat: updated recovery password bannner

Browse Source
pull/3056/head
William Grant 1 year ago
parent 1048a7411c
commit 4b976259bf
4 changed files with 60 additions and 53 deletions
Show Stats Download Patch File Download Diff File

7
_locales/en/messages.json
Unescape Escape View File

@ -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."
}

1
images/session/session_shield.svg
Unescape Escape View File

@ -0,0 +1 @@
<svg width="108" height="128" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M49.335 1.05C50.829.356 52.39 0 53.975 0l.022.045c1.54 0 3.056.334 4.574 1.026 1.851.871 3.747 1.697 5.644 2.523l2.186.96 10.284 4.598c3.349 1.489 6.697 2.98 10.047 4.473a8052.21 8052.21 0 0014.538 6.466c4.573 2.031 7.072 6.16 6.692 10.96-.029.26-.02.614-.01 1.013.005.217.01.448.01.684.023.558.023 1.138.023 1.808-.067 6.094-.067 12.3 0 18.394v.112l-.023.111v2.154c-.022 2.155-.045 4.33-.111 6.44-.112 5.604-1.183 10.917-2.12 14.913l-.067.267-.089.268c-.803 2.724-1.718 5.626-2.9 8.617-1.584 3.929-3.659 7.97-6.358 12.367l-.111.178-.134.179c-3.19 4.688-6.158 8.349-9.325 11.541-5.198 5.224-11.066 9.51-17.468 12.791l-.312.178v.001h-.001a27.43 27.43 0 01-.312.178l-.334.179-.335.156c-3.123 1.384-6.849 2.924-10.931 4.018l-.09.045h-.089c-.982.245-1.986.357-2.945.357-.959 0-1.94-.112-2.99-.379-3.814-1.005-7.696-2.456-11.533-4.309l-.067-.067h-.067c-10.953-5.491-20.055-13.617-27.06-24.13l-.313-.358-.334-.558C9.134 94.203 7.305 90.72 5.81 87.26c-1.224-2.865-2.127-5.666-3.002-8.382l-.054-.168-.335-1.027-.156-.513-.112-.514-.2-.993-.201-.994-.05-.246c-.454-2.2-.92-4.464-1.2-6.852-.497-3.919-.494-7.645-.49-11.215V32.547c0-.3.002-.59.005-.872.005-.54.01-1.048-.005-1.517-.179-4.33 2.097-7.991 6.224-9.889 4.394-1.952 8.782-3.905 13.17-5.858l.004-.002c4.39-1.953 8.778-3.906 13.173-5.86L40.545 5l.335-.156.557-.268.179-.09c.342-.15.686-.304 1.033-.459.626-.28 1.257-.562 1.89-.835l1.4-.619a183.58 183.58 0 003.396-1.524zm11.397 57.693l10.405 5.695a14.999 14.999 0 015.682 5.468 14.762 14.762 0 012.088 7.56 13.695 13.695 0 01-4.085 9.728 14.036 14.036 0 01-9.848 4.036H40.347a11.241 11.241 0 01-4.296-.8 11.134 11.134 0 01-3.652-2.373 10.983 10.983 0 01-2.444-3.58 10.873 10.873 0 010-8.468 10.983 10.983 0 012.444-3.58 11.135 11.135 0 013.652-2.373 11.241 11.241 0 014.296-.799h7.062l-10.407-5.696a15.003 15.003 0 01-5.686-5.467 14.764 14.764 0 01-2.09-7.562 13.696 13.696 0 014.085-9.727 14.037 14.037 0 019.847-4.036h24.627c2.95 0 5.778 1.157 7.864 3.218a10.92 10.92 0 013.258 7.769 10.92 10.92 0 01-3.258 7.769 11.192 11.192 0 01-7.864 3.218h-7.053zm-26.38-2.262a11.575 11.575 0 004.313 4.102L52.35 68.07V56.861c0-.403.16-.79.447-1.075a1.549 1.549 0 011.085-.449h13.902c1.04 0 2.07-.21 3.025-.616a7.686 7.686 0 002.535-1.743 7.576 7.576 0 001.635-2.589c.362-.963.523-1.99.472-3.015-.205-4.08-3.76-7.201-7.89-7.201H43.423c-5.918 0-10.887 4.785-10.747 10.63a11.392 11.392 0 001.676 5.678zm6.218 31.345h24.139c5.92 0 10.889-4.786 10.749-10.623a11.392 11.392 0 00-1.676-5.682 11.573 11.573 0 00-4.315-4.106L55.79 59.93v11.21a1.504 1.504 0 01-.45 1.076 1.541 1.541 0 01-1.09.446H40.347c-1.04.001-2.07.211-3.025.617a7.685 7.685 0 00-2.535 1.744 7.578 7.578 0 00-1.635 2.588 7.506 7.506 0 00-.47 3.016c.203 4.078 3.76 7.2 7.888 7.2z" fill="currentColor"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

100
ts/components/leftpane/LeftPaneSectionHeader.tsx
Unescape Escape View File

@ -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 (
<StyledBannerInner>
<p>{window.i18n('recoveryPhraseRevealMessage')}</p>
<SessionButton
text={window.i18n('recoveryPhraseRevealButtonText')}
onClick={showRecoveryPhraseModal}
dataTestId="reveal-recovery-phrase"
/>
</StyledBannerInner>
);
};
export const LeftPaneBanner = () => {
const section = useSelector(getFocusedSection);
const isSignInWithRecoveryPhrase = isSignWithRecoveryPhrase();
if (section !== SectionType.Message || isSignInWithRecoveryPhrase) {
return null;
}
@ -96,12 +87,29 @@ export const LeftPaneBanner = () => {
<StyledProgressBarContainer>
<StyledProgressBarInner />
</StyledProgressBarContainer>
<StyledBannerTitle>
{window.i18n('recoveryPhraseSecureTitle')} <span>90%</span>
</StyledBannerTitle>
<Flex flexDirection="column" justifyContent="space-between" padding={'var(--margins-sm)'}>
<BannerInner />
</Flex>
<StyledBanner
container={true}
width={'100%'}
flexDirection="column"
alignItems={'flex-start'}
padding={'var(--margins-md)'}
>
<Flex container={true} width={'100%'} alignItems="flex-start">
<StyledBannerTitle>{window.i18n('saveRecoveryPassword')}</StyledBannerTitle>
<SessionIcon
iconType="recoveryPassword"
iconSize="medium"
iconColor="var(--text-primary-color)"
/>
</Flex>
<p>{window.i18n('saveRecoveryPasswordDescription')}</p>
<SpacerMD />
<SessionButton
text={window.i18n('continue')}
onClick={showRecoveryPhraseModal}
dataTestId="reveal-recovery-phrase"
/>
</StyledBanner>
</StyledLeftPaneBanner>
);
};

5
ts/types/LocalizerKeys.ts
Unescape Escape View File

@ -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'

Write Preview
Loading…
Cancel
Save