8b7f431 · bridge · git.iko.soy

git.iko.soy/bridge

on master help sign in

devex: inline style --> scss; use color var

8b7f431tomholford5 years ago

src/form/Inputs.tsx+7−1

compare with master

unifiedsplit

@@ -216,11 +216,16 @@ export function EmailInput({ ...rest }) {

216}

217

218type TicketSegmentInputProps = {

219+ className?: string;

219 name: string;

220 name: string;

220 rest: StatelessTextInputProps;

221 rest: StatelessTextInputProps;

221};

222};

222

223

223−export function TicketSegmentInput({ name, ...rest }: TicketSegmentInputProps) {

224+export function TicketSegmentInput({

225+ className,

226+ name,

227+ ...rest

228+}: TicketSegmentInputProps) {

224 const { input } = useField(name);

229 const { input } = useField(name);

225 const { change } = useForm();

230 const { change } = useForm();

226

231

@@ -276,6 +281,7 @@ export function TicketSegmentInput({ name, ...rest }: TicketSegmentInputProps) {

276

281

277 return (

282 return (

278 <StatelessTextInput

283 <StatelessTextInput

284+ className={className}

279 {...mergedInput}

285 {...mergedInput}

280 autoCapitalize="none"

286 autoCapitalize="none"

281 autoCorrect="off"

287 autoCorrect="off"

src/style/shared/variables.scss+2

@@ -13,3 +13,5 @@ $accept-green: rgba(0, 159, 101, 1);

13$warning-red: rgb(242, 33, 33);

14$light-gray-border: 1px solid $light-gray;

15$activate-blue: rgba(33, 157, 255, 1);

16+$activate-error-red: #ff4136;

17+

src/views/Activate/MasterKeyConfirm.scssnew file+73

@@ -0,0 +1,73 @@

1+@import 'style/shared/variables';

3+#master-key-confirm {

4+ .content {

5+ align-items: center;

6+ display: flex;

7+ flex-direction: column;

8+ flex-wrap: nowrap;

9+ height: 100%;

10+ justify-content: center;

11+ }

12+

13+ .form-inner {

14+ display: grid;

15+ grid-template-areas: 'inputs' 'submit';

16+ grid-template-columns: 1fr;

17+ grid-template-rows: 80% 20%;

18+ width: 100%;

19+ height: 100%;

20+ }

21+

22+ .inputs-outer {

23+ grid-area: inputs;

24+ display: flex;

25+ flex-direction: column;

26+ flex-wrap: nowrap;

27+ height: 100%;

28+ align-items: center;

29+ justify-content: center;

30+ }

31+

32+ .inputs-inner {

33+ display: flex;

34+ flex-direction: row;

35+ width: 80%;

36+ height: min-content;

37+ margin-top: 16px;

38+ margin-bottom: 16px;

39+ flex-wrap: nowrap;

40+ justify-content: center;

41+ }

42+

43+ .error-message {

44+ color: $activate-error-red;

45+ font-family: Inter;

46+ font-size: 14px;

47+ font-weight: 600;

48+ line-height: 24px;

49+ }

50+

51+ .ticket-input {

52+ width: 75px;

53+ padding-top: 18px;

54+ padding-bottom: 18px;

55+ font-size: 16px;

56+ height: 24px;

57+ font-family: Source Code Pro;

58+ border-radius: 5px;

59+ border-style: solid;

60+ color: black;

61+ border-width: 1px;

62+ border-color: rgba(0, 0, 0, 0.25);

63+ }

64+

65+ .has-error {

66+ border-color: $activate-error-red;

67+ color: $activate-error-red;

68+ background-color: transparentize(

69+ $color: $activate-error-red,

70+ $amount: 0.95

71+ );

72+ }

73+}

src/views/Activate/MasterKeyConfirm.tsx+12−49

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

1import React, { useCallback, useMemo, useState } from 'react';

2import * as need from 'lib/need';

3+import cn from 'classnames';

4import ActivateView from './ActivateView';

5import ActivateView from './ActivateView';

5import { Box, Text } from '@tlon/indigo-react';

6import { Box, Text } from '@tlon/indigo-react';

@@ -23,6 +24,8 @@ import View from 'components/View';

23import NavHeader from 'components/NavHeader';

24import NavHeader from 'components/NavHeader';

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

25import { MiniBackButton } from 'components/MiniBackButton';

27+import './MasterKeyConfirm.scss';

28+

26const MasterKeyConfirm = () => {

29const MasterKeyConfirm = () => {

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

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

28 const { ticket } = need.wallet(derivedWallet);

31 const { ticket } = need.wallet(derivedWallet);

@@ -90,7 +93,7 @@ const MasterKeyConfirm = () => {

90 useFadeIn();

93 useFadeIn();

92 return (

95 return (

93− <View centered={true}>

96+ <View centered={true} id={'master-key-confirm'}>

94 <NavHeader>

97 <NavHeader>

95 <Box marginBottom={'10px'}>

98 <Box marginBottom={'10px'}>

96 <MiniBackButton

99 <MiniBackButton

@@ -105,13 +108,7 @@ const MasterKeyConfirm = () => {

105 header={header}

108 header={header}

106 gridRows={'20% 80%'}

109 gridRows={'20% 80%'}

107 gridAreas={"'header' 'content'"}>

110 gridAreas={"'header' 'content'"}>

108− <Box

111+ <Box className={'content'}>

109− alignItems={'center'}

110− display={'flex'}

111− flexDirection={'column'}

112− flexWrap={'nowrap'}

113− height={'100%'}

114− justifyContent={'center'}>

115 <BridgeForm

112 <BridgeForm

116 style={{

113 style={{

117 display: 'flex',

114 display: 'flex',

@@ -126,34 +123,14 @@ const MasterKeyConfirm = () => {

126 onValues={onValues}

123 onValues={onValues}

127 initialValues={initialValues}>

124 initialValues={initialValues}>

128 {({ handleSubmit, valid }) => (

125 {({ handleSubmit, valid }) => (

129− <Box

126+ <Box className="form-inner">

130− display={'grid'}

127+ <Box className="inputs-outer">

131− gridTemplateAreas={"'inputs' 'submit'"}

132− gridTemplateColumns={'1fr'}

133− gridTemplateRows={'80% 20%'}

134− width={'100%'}

135− height={'100%'}>

136− <Box

137− gridArea="inputs"

138− display={'flex'}

139− flexDirection={'column'}

140− flexWrap={'nowrap'}

141− height={'100%'}

142− alignItems={'center'}

143− justifyContent={'center'}>

144 {showError && (

128 {showError && (

145 <Box height={'24px'}>

129 <Box height={'24px'}>

146 {/* this is a flexbox placeholder to balance the error message below*/}

130 {/* this is a flexbox placeholder to balance the error message below*/}

147 </Box>

131 </Box>

148 )}

132 )}

149− <Box

133+ <Box className="inputs-inner">

150− display={'flex'}

151− flexDirection={'row'}

152− width={'80%'}

153− height={'min-content'}

154− marginY={'16px'}

155− flexWrap={'nowrap'}

156− justifyContent={'center'}>

157 {ticketSegments.map((segment, i) => {

134 {ticketSegments.map((segment, i) => {

158 return (

135 return (

159 <Box

136 <Box

@@ -162,18 +139,9 @@ const MasterKeyConfirm = () => {

162 flexDirection={'row'}

139 flexDirection={'row'}

163 flexWrap={'nowrap'}>

140 flexWrap={'nowrap'}>

164 <TicketSegmentInput

141 <TicketSegmentInput

165− width={'75px'}

142+ className={cn('ticket-input', {

166− paddingY={'18px'}

143+ 'has-error': showError,

167− fontSize={'16px'}

168− height={'24px'}

169− fontFamily={'Source Code Pro'}

170− borderRadius={'5px'}

171− border={'solid 1px rgba(0,0,0,0.25)'}

172− borderColor={

173− showError ? '#FF4136' : 'rgba(0,0,0,0.25)'

174− }

144+ })}

175− color={showError ? '#FF4136' : 'rgba(0,0,0,0.95)'}

176− backgroundColor={showError ? '#FF41360D' : '#FFF'}

177 name={`ticket${i}`}

145 name={`ticket${i}`}

178 autoFocus={i === 0}

146 autoFocus={i === 0}

179 />

147 />

@@ -192,12 +160,7 @@ const MasterKeyConfirm = () => {

192 </Box>

160 </Box>

193 {showError && (

161 {showError && (

194 <Box>

162 <Box>

195− <Text

163+ <Text className="error-message">

196− color={'#FF4136'}

197− fontFamily={'Inter'}

198− fontSize={'14px'}

199− fontWeight={'600'}

200− lineHeight={'24px'}>

201 The Master Ticket you entered is incorrect

164 The Master Ticket you entered is incorrect

202 </Text>

165 </Text>

203 </Box>

166 </Box>