daad500 · bridge · git.iko.soy

git.iko.soy/bridge

ui: center the window in the browser page

commitdaad5008f66377817ff4e312a79305281a421c2f authortomholford <tomholford@users.noreply.github.com> dateWed 15 Sep 2021, 23:14 (5 years ago) parente3589b2

7 files changed+46−45

compare with master

unifiedsplit

src/components/View.js+9−1 src/views/Activate/ActivateCode.tsx+1−15 src/views/Activate/ActivateView.tsx+4−4 src/views/Activate/MasterKeyConfirm.tsx+5−3 src/views/Activate/MasterKeyDownload.tsx+3−2 src/views/Activate/MasterKeyReveal.tsx+3−2 src/views/Activate/MasterKeyTransfer.tsx+21−18

src/components/View.js+9−1

@@ -17,6 +17,7 @@ function View({

1717 hideBack = false,

1818 pop,

1919 header,

20+ centered = false,

2021 ...rest

2122}) {

2223 const { reset } = useHistory();

@@ -87,7 +88,14 @@ function View({

8788 )}

8889 </Flex.Item>

8990

90− <Flex.Item flex={1} as={Flex} col justify="between">

91+ <Flex.Item

92+ flex={1}

93+ as={Flex}

94+ col

95+ className={cn({

96+ 'justify-between': !centered,

97+ 'justify-center': centered,

98+ })}>

9199 <Flex.Item className="pb5 ">

92100 {header || <Header logout={goBack} />}

93101 {children}

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

@@ -1,13 +1,8 @@

11import { useCallback } from 'react';

33import View from 'components/View';

4−import { ForwardButton } from 'components/Buttons';

5−import FooterButton from 'components/FooterButton';

64import ActivateView from './ActivateView';

8−import { useHistory } from 'store/history';

9−

10−import { ROUTE_NAMES } from 'lib/routeNames';

116import { useLocalRouter } from 'lib/LocalRouter';

127import useImpliedTicket from 'lib/useImpliedTicket';

138import useHasDisclaimed from 'lib/useHasDisclaimed';

@@ -19,15 +14,10 @@ import { FadeableActivateCodeForm as ActivateCodeForm } from './ActivateCodeForm

1914import useFadeIn from './useFadeIn';

2015

2116export default function ActivateCode() {

22− const history = useHistory();

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

2418 const { impliedPatp, impliedTicket } = useImpliedTicket();

2519 const [hasDisclaimed] = useHasDisclaimed();

2620

27− const goToLogin = useCallback(() => history.popAndPush(ROUTE_NAMES.LOGIN), [

28− history,

29− ]);

30−

3121 const goToMasterKey = useCallback(() => {

3222 if (!hasDisclaimed) {

3323 push(names.DISCLAIMER, { next: names.MASTER_KEY });

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

4030 useFadeIn();

4131

4232 return (

43− <View inset>

33+ <View centered={true} inset>

4434 <ActivateView

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

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

@@ -57,10 +47,6 @@ export default function ActivateCode() {

5747 {impliedPatp && <PointPresenter patp={impliedPatp} />}

5848 </Box>

5949 </ActivateView>

60−

61− <FooterButton as={ForwardButton} onClick={goToLogin}>

62− Login

63− </FooterButton>

6450 </View>

6551 );

6652}

src/views/Activate/ActivateView.tsx+4−4

@@ -28,10 +28,10 @@ export default function ActivateView({

2828 border={'1px solid rgb(204, 204, 204)'}

2929 border-radius={'5px'}

3030 padding={'10px'}

31− width={'550px'}

32− height={'550px'}

33− max-width={'550px'}

34− max-height={'550px'}

31+ width={'512px'}

32+ height={'512px'}

33+ max-width={'512px'}

34+ max-height={'512px'}

3535 className={cn(className)}

3636 mb={3}>

3737 <Box gridArea="header">{header}</Box>

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

@@ -19,6 +19,7 @@ import BridgeForm from 'form/BridgeForm';

1919import FormError from 'form/FormError';

2020import useFadeIn from './useFadeIn';

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

22+import View from 'components/View';

2223

2324const MasterKeyConfirm = () => {

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

@@ -52,7 +53,8 @@ const MasterKeyConfirm = () => {

5253 ticket0: STUB_VERIFY_TICKET ? ticketSegments[0] : undefined,

5354 ticket1: STUB_VERIFY_TICKET ? ticketSegments[1] : undefined,

5455 ticket2: STUB_VERIFY_TICKET ? ticketSegments[2] : undefined,

55− ticket3: STUB_VERIFY_TICKET ? ticketSegments[3] : undefined,

56+ // ticket3: STUB_VERIFY_TICKET ? ticketSegments[3] : undefined,

57+ ticket3: undefined,

5658 }),

5759 [STUB_VERIFY_TICKET, ticket, ticketSegments]

5860 );

@@ -79,7 +81,7 @@ const MasterKeyConfirm = () => {

7981 useFadeIn();

8082

8183 return (

82− <>

84+ <View centered={true} inset>

8385 <ActivateView

8486 header={header}

8587 gridRows={'20% 80%'}

@@ -185,7 +187,7 @@ const MasterKeyConfirm = () => {

185187 </Box>

186188 </ActivateView>

187189 <ActivateSteps currentStep={2} totalSteps={4} overrideFadeIn={true} />

188− </>

190+ </View>

189191 );

190192};

191193

src/views/Activate/MasterKeyDownload.tsx+3−2

@@ -19,6 +19,7 @@ import { downloadWallet } from 'lib/invite';

1919import PaperBuilder from 'components/PaperBuilder';

2020import { DEFAULT_FADE_TIMEOUT, MASTER_KEY_DURATION } from 'lib/constants';

2121import { timeout } from 'lib/timeout';

22+import View from 'components/View';

2223

2324const MasterKeyDownload = () => {

2425 const {

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

104105 }, [delayedReveal, setIsIn]);

105106

106107 return (

107− <>

108+ <View centered={true} inset>

108109 <ActivateView

109110 header={triggerAnimation && header}

110111 footer={triggerAnimation && footer}>

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

132133 setPaper(Just(data));

133134 }}

134135 />

135− </>

136+ </View>

136137 );

137138};

138139

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

@@ -11,6 +11,7 @@ import { timeout } from 'lib/timeout';

1111import { useLocalRouter } from 'lib/LocalRouter';

1212import { FadeableActivateButton as ActivateButton } from './ActivateButton';

1313import { DEFAULT_FADE_TIMEOUT, MASTER_KEY_DURATION } from 'lib/constants';

14+import View from 'components/View';

1415

1516const MasterKeyReveal = () => {

1617 const { setIsIn } = useActivateFlow();

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

7172 }, [delayedFadeIn, setIsIn]);

7273

7374 return (

74− <>

75+ <View centered={true} inset>

7576 <ActivateView

7677 header={triggerAnimation && header}

7778 footer={triggerAnimation && footer}>

@@ -96,7 +97,7 @@ const MasterKeyReveal = () => {

9697 {triggerAnimation && (

9798 <ActivateSteps currentStep={0} totalSteps={4} overrideFadeIn={true} />

9899 )}

99− </>

100+ </View>

100101 );

101102};

102103

src/views/Activate/MasterKeyTransfer.tsx+21−18

@@ -11,6 +11,7 @@ import { FadeableActivateButton as ActivateButton } from './ActivateButton';

1111import useFadeIn from './useFadeIn';

1212import PointPresenter from './PointPresenter';

1313import DangerBox from './DangerBox';

14+import View from 'components/View';

1415

1516const MasterKeyTransfer = () => {

1617 const { api, transferPoint } = useRoller();

@@ -88,15 +89,15 @@ const MasterKeyTransfer = () => {

8889 flexDirection={'column'}

8990 flexWrap={'nowrap'}

9091 justifyContent={'space-between'}>

91− {error && <DangerBox>{error.toString()}</DangerBox>}

92+ {/* {error && <DangerBox>{error.toString()}</DangerBox>} */}

9293 <ActivateButton

9394 onClick={() =>

9495 window.open(

9596 'https://github.com/urbit/port/releases/latest/download/Port.dmg'

9697 )

9798 }

98− success={true}

99− disabled={error}>

99+ // disabled={error}

100+ success={true}>

100101 Download the Client for Mac

101102 </ActivateButton>

102103 <Anchor

@@ -118,21 +119,23 @@ const MasterKeyTransfer = () => {

118119 }, [error]);

119120

120121 return (

121− <ActivateView header={header} footer={footer}>

122− <Box

123− alignItems={'center'}

124− display={'flex'}

125− flexDirection={'column'}

126− flexWrap={'nowrap'}

127− height={'100%'}

128− justifyContent={'center'}>

129− <PointPresenter

130− patp={derivedPatp.value}

131− showLabel={false}

132− success={true}

133− />

134− </Box>

135− </ActivateView>

122+ <View centered={true} inset>

123+ <ActivateView header={header} footer={footer}>

124+ <Box

125+ alignItems={'center'}

126+ display={'flex'}

127+ flexDirection={'column'}

128+ flexWrap={'nowrap'}

129+ height={'100%'}

130+ justifyContent={'center'}>

131+ <PointPresenter

132+ patp={derivedPatp.value}

133+ showLabel={false}

134+ success={true}

135+ />

136+ </Box>

137+ </ActivateView>

138+ </View>

136139 );

137140};

138141