7c224bc · bridge · git.iko.soy

git.iko.soy/bridge

ui: address Design feedback in Activate Flow

- add Back button to Confirm page - tweak animation timing of master key reveal - reduce view inset - prevent double fade-ins

commit7c224bcd0e0f01dcfdb415013dd4640539ae42d2 authortomholford <tomholford@users.noreply.github.com> dateSun 3 Oct 2021, 15:44 (5 years ago) parente42f619

8 files changed+32−18

compare with master

unifiedsplit

DEVELOPMENT.md+1−1 src/style/fadeable.scss−10 src/views/Activate/ActivateCode.tsx+1−1 src/views/Activate/MasterKey.tsx+3 src/views/Activate/MasterKeyConfirm.tsx+20−1 src/views/Activate/MasterKeyDownload.tsx+1−1 src/views/Activate/MasterKeyReveal.tsx+5−3 src/views/Activate/MasterKeyTransfer.tsx+1−1

DEVELOPMENT.md+1−1

@@ -166,5 +166,5 @@ npm run pilot-l2

166166|start %roller-rpc

167167

168168# If having CORS issues with API requests, try this:

169−> |cors-approve ~~http~3a.~2f.~2f.localhost~3a.3000

169+|cors-approve ~~http~3a.~2f.~2f.localhost~3a.3000

170170```

src/style/fadeable.scss−10

@@ -19,13 +19,3 @@

1919 transition: opacity 300ms;

2020 transition-timing-function: ease-in;

2121}

22−

23−.fadeable-appear {

24− opacity: 0;

25−}

26−

27−.fadeable-appear-active {

28− opacity: 1;

29− transition: opacity 300ms;

30− transition-timing-function: ease-in;

31−}

src/views/Activate/ActivateCode.tsx+1−1

@@ -30,7 +30,7 @@ export default function ActivateCode() {

3030 useFadeIn();

3131

3232 return (

33− <View centered={true} inset>

33+ <View centered={true}>

3434 <ActivateView

3535 header={<ActivateHeader content={'Welcome. This is your Urbit.'} />}

3636 footer={<ActivateCodeForm afterSubmit={goToMasterKey} />}>

src/views/Activate/MasterKey.tsx+3

@@ -1,5 +1,6 @@

11import cn from 'classnames';

22import 'style/master-key.scss';

3+import withFadeable from './withFadeable';

45export const MasterKey = ({ paused = false }) => {

56 return (

@@ -117,3 +118,5 @@ export const MasterKey = ({ paused = false }) => {

117118 </svg>

118119 );

119120};

121+

122+export const FadeableMasterKey = withFadeable(MasterKey);

src/views/Activate/MasterKeyConfirm.tsx+20−1

@@ -20,6 +20,8 @@ import FormError from 'form/FormError';

2020import useFadeIn from './useFadeIn';

2121import { HiddenInput, TicketSegmentInput } from 'form/Inputs';

2222import View from 'components/View';

23+import NavHeader from 'components/NavHeader';

24+import { MiniBackButton } from 'components/MiniBackButton';

2325

2426const MasterKeyConfirm = () => {

2527 const { derivedWallet, setIsIn } = useActivateFlow();

@@ -64,6 +66,12 @@ const MasterKeyConfirm = () => {

6466 push(names.TRANSFER);

6567 }, [names.TRANSFER, push, setIsIn]);

6668

69+ const goBack = useCallback(async () => {

70+ setIsIn(false);

71+ await timeout(DEFAULT_FADE_TIMEOUT); // Pause for UI fade animation

72+ push(names.DOWNLOAD);

73+ }, [names.DOWNLOAD, push, setIsIn]);

74+

6775 const header = useMemo(() => {

6876 return (

6977 <Box>

@@ -80,7 +88,18 @@ const MasterKeyConfirm = () => {

8088 useFadeIn();

8189

8290 return (

83− <View centered={true} inset>

91+ <View centered={true}>

92+ <NavHeader>

93+ <Box

94+ marginBottom={'10px'}>

95+ <MiniBackButton

96+ hpadding={true}

97+ vpadding={true}

98+ onClick={goBack}

99+ className=""

100+ />

101+ </Box>

102+ </NavHeader>

84103 <ActivateView

85104 header={header}

86105 gridRows={'20% 80%'}

src/views/Activate/MasterKeyDownload.tsx+1−1

@@ -104,7 +104,7 @@ const MasterKeyDownload = () => {

104104 }, [delayedReveal, setIsIn]);

105105

106106 return (

107− <View centered={true} inset>

107+ <View centered={true}>

108108 <ActivateView

109109 header={triggerAnimation && header}

110110 footer={triggerAnimation && footer}>

src/views/Activate/MasterKeyReveal.tsx+5−3

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';

33import ActivateView from './ActivateView';

44import { FadeableActivateHeader as ActivateHeader } from './ActivateHeader';

5−import { MasterKey } from './MasterKey';

5+import { FadeableMasterKey as MasterKey } from './MasterKey';

66import { Box, Icon } from '@tlon/indigo-react';

77import { FadeableActivateParagraph as ActivateParagraph } from './ActivateParagraph';

88import { FadeableActivateSteps as ActivateSteps } from './ActivateSteps';

@@ -17,6 +17,7 @@ const MasterKeyReveal = () => {

1717 const { setIsIn } = useActivateFlow();

1818 const { push, names } = useLocalRouter();

1919 const [triggerAnimation, setTriggerAnimation] = useState<boolean>(false);

20+ const [fadeOutKey, setFadeOutKey] = useState<boolean>(false);

2021

2122 const goToDownload = useCallback(() => {

2223 push(names.DOWNLOAD);

@@ -25,6 +26,7 @@ const MasterKeyReveal = () => {

2526 const onRevealClick = useCallback(async () => {

2627 setTriggerAnimation(false);

2728 setIsIn(false);

29+ setFadeOutKey(true);

2830 await timeout(DEFAULT_FADE_TIMEOUT); // Pause for UI fade animation

2931 goToDownload();

3032 }, [goToDownload, setIsIn]);

@@ -72,7 +74,7 @@ const MasterKeyReveal = () => {

7274 }, [delayedFadeIn, setIsIn]);

7375

7476 return (

75− <View centered={true} inset>

77+ <View centered={true}>

7678 <ActivateView

7779 header={triggerAnimation && header}

7880 footer={triggerAnimation && footer}>

@@ -90,7 +92,7 @@ const MasterKeyReveal = () => {

9092 width={'80%'}

9193 height={'min-content'}

9294 justifyContent={'center'}>

93− <MasterKey />

95+ <MasterKey overrideFadeIn={!fadeOutKey} />

9496 </Box>

9597 </Box>

9698 </ActivateView>

src/views/Activate/MasterKeyTransfer.tsx+1−1

@@ -123,7 +123,7 @@ const MasterKeyTransfer = () => {

123123 }, [error]);

124124

125125 return (

126− <View centered={true} inset>

126+ <View centered={true}>

127127 <ActivateView header={header} footer={footer}>

128128 <Box

129129 alignItems={'center'}