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