diff --git a/ts/components/session/LeftPaneSectionHeader.tsx b/ts/components/session/LeftPaneSectionHeader.tsx index 9d32acdf6..d530d25a4 100644 --- a/ts/components/session/LeftPaneSectionHeader.tsx +++ b/ts/components/session/LeftPaneSectionHeader.tsx @@ -22,8 +22,8 @@ const Tab = ({ }) => { const handleClick = onSelect ? () => { - onSelect(type); - } + onSelect(type); + } : undefined; return ( @@ -68,14 +68,13 @@ export const LeftPaneSectionHeader = (props: Props) => { ); }; -export const LeftPaneBanner = (Props: any) => { - +export const LeftPaneBanner = () => { const [completion, setCompletion] = useState(80); const [bodyText, setBodyText] = useState(window.i18n('recoveryPhraseSecureMessage')); const [buttonText, setButtonText] = useState(window.i18n('recoveryPhraseSecureButtonText')); const [recoveryPhraseHidden, setRecoveryPhraseHidden] = useState(true); const [isCompleted, setIsCompleted] = useState(false); - const [bannerTitle, setBannerTitle] = useState(window.i18n("recoveryPhraseSecureTitle")); + const [bannerTitle, setBannerTitle] = useState(window.i18n('recoveryPhraseSecureTitle')); const recoveryPhrase = UserUtils.getCurrentRecoveryPhrase(); const secondsBeforeRemoval = 2 * 1000; const completionText = `${completion}%`; @@ -84,7 +83,7 @@ export const LeftPaneBanner = (Props: any) => { setRecoveryPhraseHidden(false); setBodyText(window.i18n('recoveryPhraseInfoMessage')); setButtonText(window.i18n('copy')); - } + }; const handleSecureClick = () => { if (completion === 80) { @@ -92,14 +91,14 @@ export const LeftPaneBanner = (Props: any) => { setBodyText(window.i18n('recoveryPhraseRevealMessage')); setButtonText(window.i18n('recoveryPhraseRevealButtonText')); } - } + }; const BannerInner = (props: any) => { const dispatch = useDispatch(); const handleCopyPhraseClick = async () => { await navigator.clipboard.writeText(recoveryPhrase); - setCompletion(100) + setCompletion(100); setBannerTitle(window.i18n('recoveryPhraseCompleteTitle')); setBodyText(''); setRecoveryPhraseHidden(true); @@ -109,63 +108,57 @@ export const LeftPaneBanner = (Props: any) => { setTimeout(() => { dispatch(disableRecoveryPhrasePrompt()); }, secondsBeforeRemoval); - } + }; - let onClick = - completion === 80 ? handleSecureClick : - completion === 90 ? - recoveryPhraseHidden ? - handleShowRecoveryClick : - handleCopyPhraseClick - : null; + const onClick = + completion === 80 + ? handleSecureClick + : completion === 90 + ? recoveryPhraseHidden + ? handleShowRecoveryClick + : handleCopyPhraseClick + : null; - // TODO: This can be refactored down. all returns have p tag + button, final has conditional phrase element. return ( -

- {bodyText} -

- {!recoveryPhraseHidden && +

{bodyText}

+ {!recoveryPhraseHidden && ( + className="left-pane-banner___phrase" + onClick={handleShowRecoveryClick} + > {recoveryPhrase} - } - {!isCompleted && + )} + {!isCompleted && ( - } + )}
- ) - } + ); + }; - const useColumn = completion === 90 && handleShowRecoveryClick; + const flexDirection = completion === 90 && handleShowRecoveryClick ? 'column' : 'row'; const theme = useTheme(); return ( - + - + - + {bannerTitle} {completionText} - + - ) -} + ); +}; interface StyledProgressBarContainerProps { theme: DefaultTheme; @@ -196,15 +189,12 @@ export const StyledBannerTitle = styled.div` line-height: 1.3; font-size: ${(p: StyledBannerTitle) => p.theme.common.fonts.md}; font-weight: bold; - margin: - ${Constants.UI.SPACING.marginSm} - ${Constants.UI.SPACING.marginSm} - 0 + margin: ${Constants.UI.SPACING.marginSm} ${Constants.UI.SPACING.marginSm} 0 ${Constants.UI.SPACING.marginSm}; span { - color: ${(p: StyledBannerTitle) => p.theme.colors.textAccent}; - } + color: ${(p: StyledBannerTitle) => p.theme.colors.textAccent}; + } `; interface StyledLeftPaneBannerProps { @@ -219,13 +209,12 @@ export const StyledLeftPaneBanner = styled.div` border-bottom: ${(p: StyledLeftPaneBannerProps) => p.border}; opacity: 1; transition: opacity 2s; - ${(p: StyledLeftPaneBannerProps) => p.isCompleted === true ? - ` + ${(p: StyledLeftPaneBannerProps) => + p.isCompleted === true + ? ` opacity: 0; ` - : - null - } + : null} `; const StyledBannerInner = styled.div` @@ -252,14 +241,6 @@ const StyledRecoveryPhrase = styled.p` border: ${(props: StyledRecoveryPhraseProps) => props.theme.colors.sessionBorderHighContrast}; `; - -// 90% - -// tap and hold the redacted words to reveal your recovery phrase then store it safely to secure - -// meet your recovery phrase -// your recovery phrase is the master key to your session ID - you can use it to restore your Session ID if you lose access to your device, Store your recovery phrase in a safe place, and don't give it to anyone. - interface StyledBannerContainerProps { flexDirection?: string; } @@ -267,7 +248,7 @@ export const StyledBannerContainer = styled.div` display: flex; flex-direction: ${(p: StyledBannerContainerProps) => p.flexDirection}; justify-content: space-between; - padding: ${Constants.UI.SPACING.marginSm} + padding: ${Constants.UI.SPACING.marginSm}; `; export const StyledLeftPaneHeaderContainer = styled.div` diff --git a/ts/state/ducks/userConfig.tsx b/ts/state/ducks/userConfig.tsx index 20316fcdf..af64b2cb4 100644 --- a/ts/state/ducks/userConfig.tsx +++ b/ts/state/ducks/userConfig.tsx @@ -22,10 +22,8 @@ const userConfigSlice = createSlice({ state.audioAutoplay = !state.audioAutoplay; }, disableRecoveryPhrasePrompt: state => { - console.log('setting recovery phrase state'); - state.showRecoveryPhrasePrompt = false + state.showRecoveryPhrasePrompt = false; }, - }, }); diff --git a/ts/state/selectors/userConfig.ts b/ts/state/selectors/userConfig.ts index 1e3de4c7c..9c8641cb2 100644 --- a/ts/state/selectors/userConfig.ts +++ b/ts/state/selectors/userConfig.ts @@ -9,7 +9,6 @@ export const getAudioAutoplay = createSelector( (state: UserConfigState): boolean => state.audioAutoplay ); - export const getShowRecoveryPhrasePrompt = createSelector( getUserConfig, (state: UserConfigState): boolean => state.showRecoveryPhrasePrompt