mirror of
https://github.com/oceanprotocol/market.git
synced 2024-06-29 00:57:50 +02:00
fix required/tooltip icon order
This commit is contained in:
parent
f4eab6e09a
commit
b28f7992dd
|
@ -6,11 +6,3 @@
|
|||
display: block;
|
||||
margin-bottom: calc(var(--spacer) / 4);
|
||||
}
|
||||
|
||||
.required:after {
|
||||
content: '*';
|
||||
font-size: var(--font-size-base);
|
||||
color: var(--color-secondary);
|
||||
display: inline-block;
|
||||
margin-left: 0.1rem;
|
||||
}
|
||||
|
|
|
@ -2,19 +2,13 @@ import React, { ReactElement, ReactNode } from 'react'
|
|||
import styles from './Label.module.css'
|
||||
|
||||
const Label = ({
|
||||
required,
|
||||
children,
|
||||
...props
|
||||
}: {
|
||||
required?: boolean
|
||||
children: ReactNode
|
||||
htmlFor: string
|
||||
}): ReactElement => (
|
||||
<label
|
||||
className={`${styles.label} ${required && styles.required}`}
|
||||
title={required ? 'Required' : ''}
|
||||
{...props}
|
||||
>
|
||||
<label className={styles.label} {...props}>
|
||||
{children}
|
||||
</label>
|
||||
)
|
||||
|
|
|
@ -12,6 +12,13 @@
|
|||
margin-bottom: calc(var(--spacer) / 2);
|
||||
}
|
||||
|
||||
.required {
|
||||
font-size: var(--font-size-base);
|
||||
color: var(--color-secondary);
|
||||
display: inline-block;
|
||||
margin-left: 0.1rem;
|
||||
}
|
||||
|
||||
.error {
|
||||
display: inline-block;
|
||||
font-size: var(--font-size-mini);
|
||||
|
|
|
@ -10,13 +10,11 @@ import React, {
|
|||
import InputElement from './InputElement'
|
||||
import Label from './Label'
|
||||
import styles from './index.module.css'
|
||||
import { ErrorMessage, FieldInputProps, FieldMetaProps, useField } from 'formik'
|
||||
import { ErrorMessage, FieldInputProps } from 'formik'
|
||||
import classNames from 'classnames/bind'
|
||||
import Disclaimer from './Disclaimer'
|
||||
import Tooltip from '@shared/atoms/Tooltip'
|
||||
import Markdown from '@shared/Markdown'
|
||||
import MetadataFields from 'src/components/Publish/Metadata'
|
||||
import toPath from 'lodash/toPath'
|
||||
|
||||
const cx = classNames.bind(styles)
|
||||
|
||||
|
@ -113,8 +111,14 @@ export default function Input(props: Partial<InputProps>): ReactElement {
|
|||
|
||||
return (
|
||||
<div className={styleClasses}>
|
||||
<Label htmlFor={props.name} required={props.required}>
|
||||
{label} {help && <Tooltip content={<Markdown text={help} />} />}
|
||||
<Label htmlFor={props.name}>
|
||||
{label}
|
||||
{props.required && (
|
||||
<span title="Required" className={styles.required}>
|
||||
*
|
||||
</span>
|
||||
)}
|
||||
{help && <Tooltip content={<Markdown text={help} />} />}
|
||||
</Label>
|
||||
<InputElement size={size} {...field} {...props} />
|
||||
|
||||
|
@ -124,8 +128,6 @@ export default function Input(props: Partial<InputProps>): ReactElement {
|
|||
</div>
|
||||
)}
|
||||
|
||||
{/* {help && <Help>{help}</Help>} */}
|
||||
|
||||
{disclaimer && (
|
||||
<Disclaimer visible={disclaimerVisible}>{disclaimer}</Disclaimer>
|
||||
)}
|
||||
|
|
|
@ -1,9 +1,7 @@
|
|||
import PriceUnit from '@shared/Price/PriceUnit'
|
||||
import React, { ReactElement, useEffect, useState } from 'react'
|
||||
import Alert from '@shared/atoms/Alert'
|
||||
import FormHelp from '@shared/Form/Input/Help'
|
||||
import Tooltip from '@shared/atoms/Tooltip'
|
||||
import Wallet from '../../Header/Wallet'
|
||||
import Coin from './Coin'
|
||||
import styles from './Dynamic.module.css'
|
||||
import Fees from './Fees'
|
||||
|
@ -66,18 +64,6 @@ export default function Dynamic({ content }: { content: any }): ReactElement {
|
|||
<>
|
||||
<FormHelp>{content.info}</FormHelp>
|
||||
|
||||
<aside className={styles.wallet}>
|
||||
{balance?.ocean && (
|
||||
<PriceUnit
|
||||
className={styles.balance}
|
||||
price={balance.ocean}
|
||||
symbol="OCEAN"
|
||||
small
|
||||
/>
|
||||
)}
|
||||
<Wallet />
|
||||
</aside>
|
||||
|
||||
<h4 className={styles.title}>
|
||||
Price <Tooltip content={content.tooltips.poolInfo} />
|
||||
</h4>
|
||||
|
|
|
@ -20,8 +20,6 @@ export default function PricingFields(): ReactElement {
|
|||
const { pricing } = values
|
||||
const { price, amountOcean, weightOnOcean, weightOnDataToken, type } = pricing
|
||||
|
||||
console.log(pricing)
|
||||
|
||||
// Switch type value upon tab change
|
||||
function handleTabChange(tabName: string) {
|
||||
const type = tabName.toLowerCase()
|
||||
|
|
Loading…
Reference in New Issue
Block a user