@@ -1,5 +1,6 @@
11import React, { useCallback, useMemo, useState } from 'react';
22import * as need from 'lib/need';
3+import cn from 'classnames';
34
45import ActivateView from './ActivateView';
56import { Box, Text } from '@tlon/indigo-react';
@@ -23,6 +24,8 @@ import View from 'components/View';
2324import NavHeader from 'components/NavHeader';
2425import { MiniBackButton } from 'components/MiniBackButton';
2526
27+import './MasterKeyConfirm.scss';
28+
2629const MasterKeyConfirm = () => {
2730 const { derivedWallet, setIsIn } = useActivateFlow();
2831 const { ticket } = need.wallet(derivedWallet);
@@ -90,7 +93,7 @@ const MasterKeyConfirm = () => {
9093 useFadeIn();
9194
9295 return (
93− <View centered={true}>
96+ <View centered={true} id={'master-key-confirm'}>
9497 <NavHeader>
9598 <Box marginBottom={'10px'}>
9699 <MiniBackButton
@@ -105,13 +108,7 @@ const MasterKeyConfirm = () => {
105108 header={header}
106109 gridRows={'20% 80%'}
107110 gridAreas={"'header' 'content'"}>
108− <Box
109− alignItems={'center'}
110− display={'flex'}
111− flexDirection={'column'}
112− flexWrap={'nowrap'}
113− height={'100%'}
114− justifyContent={'center'}>
111+ <Box className={'content'}>
115112 <BridgeForm
116113 style={{
117114 display: 'flex',
@@ -126,34 +123,14 @@ const MasterKeyConfirm = () => {
126123 onValues={onValues}
127124 initialValues={initialValues}>
128125 {({ handleSubmit, valid }) => (
129− <Box
130− display={'grid'}
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'}>
126+ <Box className="form-inner">
127+ <Box className="inputs-outer">
144128 {showError && (
145129 <Box height={'24px'}>
146130 {/* this is a flexbox placeholder to balance the error message below*/}
147131 </Box>
148132 )}
149− <Box
150− display={'flex'}
151− flexDirection={'row'}
152− width={'80%'}
153− height={'min-content'}
154− marginY={'16px'}
155− flexWrap={'nowrap'}
156− justifyContent={'center'}>
133+ <Box className="inputs-inner">
157134 {ticketSegments.map((segment, i) => {
158135 return (
159136 <Box
@@ -162,18 +139,9 @@ const MasterKeyConfirm = () => {
162139 flexDirection={'row'}
163140 flexWrap={'nowrap'}>
164141 <TicketSegmentInput
165− width={'75px'}
166− paddingY={'18px'}
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− }
175− color={showError ? '#FF4136' : 'rgba(0,0,0,0.95)'}
176− backgroundColor={showError ? '#FF41360D' : '#FFF'}
142+ className={cn('ticket-input', {
143+ 'has-error': showError,
144+ })}
177145 name={`ticket${i}`}
178146 autoFocus={i === 0}
179147 />
@@ -192,12 +160,7 @@ const MasterKeyConfirm = () => {
192160 </Box>
193161 {showError && (
194162 <Box>
195− <Text
196− color={'#FF4136'}
197− fontFamily={'Inter'}
198− fontSize={'14px'}
199− fontWeight={'600'}
200− lineHeight={'24px'}>
163+ <Text className="error-message">
201164 The Master Ticket you entered is incorrect
202165 </Text>
203166 </Box>