Jack Mallers
7 years ago
10 changed files with 149 additions and 9 deletions
@ -0,0 +1,38 @@ |
|||
import React from 'react' |
|||
import PropTypes from 'prop-types' |
|||
import styles from './RecoverForm.scss' |
|||
|
|||
const RecoverForm = ({ seed, seedInput, updateSeedInput }) => ( |
|||
<div className={styles.container}> |
|||
<ul className={styles.seedContainer}> |
|||
{ |
|||
Array(24).fill('').map((word, index) => ( |
|||
<li key={index}> |
|||
<section> |
|||
<label htmlFor={index}>{index + 1}</label> |
|||
</section> |
|||
<section> |
|||
<input |
|||
type='text' |
|||
id={index} |
|||
placeholder='word' |
|||
value={seedInput[index] ? seedInput[index].word : ''} |
|||
onChange={event => updateSeedInput({ word: event.target.value, index })} |
|||
className={styles.word} |
|||
/> |
|||
</section> |
|||
</li> |
|||
)) |
|||
} |
|||
</ul> |
|||
</div> |
|||
) |
|||
|
|||
|
|||
RecoverForm.propTypes = { |
|||
seed: PropTypes.array.isRequired, |
|||
seedInput: PropTypes.array.isRequired, |
|||
updateSeedInput: PropTypes.func.isRequired |
|||
} |
|||
|
|||
export default RecoverForm |
@ -0,0 +1,61 @@ |
|||
@import '../../variables.scss'; |
|||
|
|||
.seedContainer { |
|||
position: relative; |
|||
display: inline-block; |
|||
font-size: 12px; |
|||
|
|||
li { |
|||
display: inline-block; |
|||
margin: 5px 0; |
|||
width: 25%; |
|||
|
|||
section { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
color: $white; |
|||
|
|||
&:nth-child(1) { |
|||
width: 15%; |
|||
text-align: center; |
|||
opacity: 0.5; |
|||
} |
|||
|
|||
&:nth-child(2) { |
|||
width: calc(85% - 10px); |
|||
margin: 0 5px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
.word { |
|||
margin: 0 3px; |
|||
background-color: #1c1e26; |
|||
outline: 0; |
|||
border: none; |
|||
padding: 5px 10px; |
|||
color: $white; |
|||
font-family: courier; |
|||
font-family: 'Courier'; |
|||
|
|||
&.valid { |
|||
color: $green; |
|||
} |
|||
|
|||
&.invalid { |
|||
color: $red; |
|||
} |
|||
} |
|||
|
|||
.word::-webkit-input-placeholder { |
|||
text-shadow: none; |
|||
-webkit-text-fill-color: initial; |
|||
} |
|||
|
|||
.contentEditable { |
|||
width: 100px; |
|||
background: red; |
|||
} |
Loading…
Reference in new issue