From dbc19adeb8c280b98ab51747522acb4842cac754 Mon Sep 17 00:00:00 2001 From: Warrick Corfe-Tan Date: Thu, 19 Aug 2021 12:10:11 +1000 Subject: [PATCH] Adding PR changes, running yarn ready --- _locales/en/messages.json | 5 +- ts/components/dialog/SessionSeedModal.tsx | 10 +- .../session/LeftPaneSectionHeader.tsx | 119 +++++------------- 3 files changed, 38 insertions(+), 96 deletions(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index b68e6783c..51b752fd2 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -430,7 +430,6 @@ "deviceOnly": "Device Only", "entireAccount": "Entire Account", "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", - "recoveryPhraseCompleteTitle": "Account secured!" + "recoveryPhraseRevealMessage": "Secure your account by saving your recovery phrase. Reveal your recovery phrase then store it safely to secure it.", + "recoveryPhraseRevealButtonText": "Reveal Recovery Phrase" } diff --git a/ts/components/dialog/SessionSeedModal.tsx b/ts/components/dialog/SessionSeedModal.tsx index a8261c0f3..3e61e716d 100644 --- a/ts/components/dialog/SessionSeedModal.tsx +++ b/ts/components/dialog/SessionSeedModal.tsx @@ -9,6 +9,7 @@ import { mn_decode } from '../../session/crypto/mnemonic'; import { SessionWrapperModal } from '../session/SessionWrapperModal'; import { SpacerLG, SpacerSM, SpacerXS } from '../basic/Text'; import { recoveryPhraseModal } from '../../state/ducks/modalDialog'; +import { useDispatch } from 'react-redux'; interface PasswordProps { setPasswordValid: (val: boolean) => any; @@ -19,8 +20,9 @@ const Password = (props: PasswordProps) => { const { setPasswordValid, passwordHash } = props; const i18n = window.i18n; const [error, setError] = useState(''); + const dispatch = useDispatch(); - const onClose = () => window.inboxStore?.dispatch(recoveryPhraseModal(null)); + const onClose = () => dispatch(recoveryPhraseModal(null)); const confirmPassword = () => { const passwordValue = jQuery('#seed-input-password').val(); @@ -87,6 +89,7 @@ const Seed = (props: SeedProps) => { const i18n = window.i18n; const bgColor = '#FFFFFF'; const fgColor = '#1B1B1B'; + const dispatch = useDispatch(); const hexEncodedSeed = mn_decode(recoveryPhrase, 'english'); @@ -96,7 +99,7 @@ const Seed = (props: SeedProps) => { if (onClickCopy) { onClickCopy(); } - window.inboxStore?.dispatch(recoveryPhraseModal(null)); + dispatch(recoveryPhraseModal(null)); }; return ( @@ -136,6 +139,7 @@ const SessionSeedModalInner = (props: ModalInnerProps) => { const [hasPassword, setHasPassword] = useState(null); const [passwordValid, setPasswordValid] = useState(false); const [passwordHash, setPasswordHash] = useState(''); + const dispatch = useDispatch(); useEffect(() => { setTimeout(() => ($('#seed-input-password') as any).focus(), 100); @@ -145,7 +149,7 @@ const SessionSeedModalInner = (props: ModalInnerProps) => { const i18n = window.i18n; - const onClose = () => window.inboxStore?.dispatch(recoveryPhraseModal(null)); + const onClose = () => dispatch(recoveryPhraseModal(null)); const checkHasPassword = async () => { if (!loadingPassword) { diff --git a/ts/components/session/LeftPaneSectionHeader.tsx b/ts/components/session/LeftPaneSectionHeader.tsx index 33ad23ff2..fcff680a3 100644 --- a/ts/components/session/LeftPaneSectionHeader.tsx +++ b/ts/components/session/LeftPaneSectionHeader.tsx @@ -1,10 +1,8 @@ -import React, { useState } from 'react'; +import React from 'react'; import classNames from 'classnames'; import { SessionIcon, SessionIconSize, SessionIconType } from './icon'; -import styled, { DefaultTheme, useTheme } from 'styled-components'; +import styled, { useTheme } from 'styled-components'; import { SessionButton, SessionButtonType } from './SessionButton'; -import { Constants } from '../../session'; -import { UserUtils } from '../../session/utils'; import { useDispatch, useSelector } from 'react-redux'; import { disableRecoveryPhrasePrompt } from '../../state/ducks/userConfig'; import { getShowRecoveryPhrasePrompt } from '../../state/selectors/userConfig'; @@ -51,11 +49,11 @@ export const LeftPaneSectionHeader = (props: Props) => { const showRecoveryPhrasePrompt = useSelector(getShowRecoveryPhrasePrompt); return ( - +
{label && } {buttonIcon && ( - + { }; export const LeftPaneBanner = () => { - const [completion, setCompletion] = useState(90); - const [bodyText, setBodyText] = useState(window.i18n('recoveryPhraseRevealMessage')); - const [recoveryPhraseHidden, setRecoveryPhraseHidden] = useState(true); - const [isCompleted, setIsCompleted] = useState(false); - const [bannerTitle, setBannerTitle] = useState(window.i18n('recoveryPhraseSecureTitle')); - const recoveryPhrase = UserUtils.getCurrentRecoveryPhrase(); - const secondsBeforeRemoval = 2 * 1000; - const completionText = `${completion}%`; - const dispatch = useDispatch(); const showRecoveryPhraseModal = () => { dispatch( recoveryPhraseModal({ onClickOk: () => { - setCompletion(100); - setBannerTitle(window.i18n('recoveryPhraseCompleteTitle')); - setBodyText(''); - setRecoveryPhraseHidden(true); - setIsCompleted(true); - - // remove banner after a small delay - setTimeout(() => { - dispatch(disableRecoveryPhrasePrompt()); - }, secondsBeforeRemoval); + dispatch(disableRecoveryPhrasePrompt()); }, }) ); @@ -104,19 +84,12 @@ export const LeftPaneBanner = () => { const BannerInner = () => { return ( -

{bodyText}

- {!recoveryPhraseHidden && ( - - {recoveryPhrase} - - )} - {!isCompleted && ( - - )} +

{window.i18n('recoveryPhraseRevealMessage')}

+ ); }; @@ -124,17 +97,17 @@ export const LeftPaneBanner = () => { const theme = useTheme(); return ( - + - + - - {bannerTitle} {completionText} + + {window.i18n('recoveryPhraseSecureTitle')} 90% @@ -142,61 +115,37 @@ export const LeftPaneBanner = () => { ); }; -interface StyledProgressBarContainerProps { - theme: DefaultTheme; -} const StyledProgressBarContainer = styled.div` width: 100%; height: 5px; flex-direction: row; - background: ${(p: StyledProgressBarContainerProps) => p.theme.colors.sessionBorderColor}; + background: ${p => p.theme.colors.sessionBorderColor}; `; -interface StyledProgressBarProps { - width: string; - color?: string; -} - const StyledProgressBarInner = styled.div` - background: ${(p: StyledProgressBarProps) => p.color}; - width: ${(p: StyledProgressBarProps) => p.width}; + background: ${p => p.theme.colors.accent}; + width: 90%; transition: width 0.5s ease-in; height: 100%; `; -interface StyledBannerTitle { - theme: DefaultTheme; -} export const StyledBannerTitle = styled.div` line-height: 1.3; - font-size: ${(p: StyledBannerTitle) => p.theme.common.fonts.md}; + font-size: ${p => p.theme.common.fonts.md}; font-weight: bold; - margin: ${Constants.UI.SPACING.marginSm} ${Constants.UI.SPACING.marginSm} 0 - ${Constants.UI.SPACING.marginSm}; + margin: ${p => p.theme.common.margins.sm} ${p => p.theme.common.margins.sm} 0 + ${p => p.theme.common.margins.sm}; span { - color: ${(p: StyledBannerTitle) => p.theme.colors.textAccent}; + color: ${p => p.theme.colors.textAccent}; } `; -interface StyledLeftPaneBannerProps { - isCompleted?: boolean; - border: string; - theme: DefaultTheme; -} export const StyledLeftPaneBanner = styled.div` - background: ${(p: StyledLeftPaneBannerProps) => p.theme.colors.recoveryPhraseBannerBackground}; + background: ${p => p.theme.colors.recoveryPhraseBannerBackground}; display: flex; flex-direction: column; - border-bottom: ${(p: StyledLeftPaneBannerProps) => p.border}; - opacity: 1; - transition: opacity 2s; - ${(p: StyledLeftPaneBannerProps) => - p.isCompleted === true - ? ` - opacity: 0; - ` - : null} + border-bottom: ${p => p.theme.colors.sessionBorder}; `; const StyledBannerInner = styled.div` @@ -205,20 +154,10 @@ const StyledBannerInner = styled.div` } .left-pane-banner___phrase { - margin-top: ${Constants.UI.SPACING.marginMd}; + margin-top: ${props => props.theme.common.margins.md}; } .session-button { - margin-top: ${Constants.UI.SPACING.marginSm}; + margin-top: ${props => props.theme.common.margins.sm}; } `; - -interface StyledRecoveryPhraseProps { - theme: DefaultTheme; -} -const StyledRecoveryPhrase = styled.p` - margin: ${Constants.UI.SPACING.marginXs}; - border-radius: 5px; - padding: 5px; - border: ${(props: StyledRecoveryPhraseProps) => props.theme.colors.sessionBorderHighContrast}; -`;