oceanprotocol/market
1
0
Fork 0
mirror of https://github.com/oceanprotocol/market.git synced 2024-12-02 05:57:29 +01:00
Code Releases Activity

Enhance Credentials Component UI

Browse Source
This commit is contained in:
KY Lau 2021-06-11 14:35:51 +08:00
parent 7a8a5a5fcd
commit d9f86edbd5
2 changed files with 8 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/molecules/FormFields/Credential/Credential.module.css
View File

@ -1,26 +1,7 @@
.chip { .chip {
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
display: flex; display: flex;
margin-top: 5px; padding-left: 10px;
margin-bottom: 5px;
}
.input {
font-size: var(--font-size-base);
font-family: var(--font-family-base);
color: var(--font-color-heading);
border: 1px solid var(--border-color);
box-shadow: none;
width: 100%;
background: var(--background-body);
padding: calc(var(--spacer) / 3);
margin: 0;
border-radius: var(--border-radius);
transition: 0.2s ease-out;
height: 43px;
min-width: 0;
appearance: none;
display: block;
} }
.buttonWrapper { .buttonWrapper {
@ -37,13 +18,11 @@
width: var(--font-size-large); width: var(--font-size-large);
height: var(--font-size-large); height: var(--font-size-large);
fill: var(--brand-pink); fill: var(--brand-pink);
transform: rotate(90deg);
vertical-align: middle; vertical-align: middle;
} }
.scroll { .scroll {
border-top: 1px solid var(--border-color); border-top: 1px solid var(--border-color);
margin-top: calc(var(--spacer) / 4);
min-height: fit-content; min-height: fit-content;
max-height: 200px; max-height: 200px;
position: relative; position: relative;
@ -56,7 +35,6 @@
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
background-color: var(--background-highlight); background-color: var(--background-highlight);
border-radius: var(--border-radius); border-radius: var(--border-radius);
margin-bottom: calc(var(--spacer) / 2);
font-size: var(--font-size-small); font-size: var(--font-size-small);
min-height: 200px; min-height: 200px;
} }

12
src/components/molecules/FormFields/Credential/index.tsx
View File

@ -7,6 +7,7 @@ import styles from './Credential.module.css'
import { isAddress } from 'web3-utils' import { isAddress } from 'web3-utils'
import { toast } from 'react-toastify' import { toast } from 'react-toastify'
import { ReactComponent as Cross } from '../../../../images/cross.svg' import { ReactComponent as Cross } from '../../../../images/cross.svg'
import InputElement from '../../../atoms/Input/InputElement'
export default function Credentials(props: InputProps) { export default function Credentials(props: InputProps) {
const [field, meta, helpers] = useField(props.name) const [field, meta, helpers] = useField(props.name)
@ -40,14 +41,15 @@ export default function Credentials(props: InputProps) {
return ( return (
<div className={styles.credential}> <div className={styles.credential}>
<InputGroup> <InputGroup>
<input <InputElement
className={styles.input} type="text"
name="address"
size="default"
placeholder={props.placeholder} placeholder={props.placeholder}
name="search" value={value}
onChange={(e: ChangeEvent<HTMLInputElement>) => onChange={(e: ChangeEvent<HTMLInputElement>) =>
setValue(e.target.value) setValue(e.target.value)
} }
value={value}
/> />
<Button <Button
onClick={(e: FormEvent<HTMLButtonElement>) => handleAddValue(e)} onClick={(e: FormEvent<HTMLButtonElement>) => handleAddValue(e)}
@ -60,7 +62,7 @@ export default function Credentials(props: InputProps) {
arrayInput.map((value) => { arrayInput.map((value) => {
return ( return (
<div className={styles.chip} key={value}> <div className={styles.chip} key={value}>
{value} <code>{value}</code>
<span className={styles.buttonWrapper}> <span className={styles.buttonWrapper}>
<Button <Button
className={styles.crossButton} className={styles.crossButton}