From 053fd9191b0fa5d740f6f0ff7fcb30ec76e77dbe Mon Sep 17 00:00:00 2001 From: Ilias Trichopoulos Date: Thu, 22 Sep 2022 17:01:31 +0200 Subject: [PATCH 1/5] Change bg accent to match designs --- src/components/ToggleSection.tsx | 2 +- src/style/themes.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/ToggleSection.tsx b/src/components/ToggleSection.tsx index a3ba92550..16525db30 100644 --- a/src/components/ToggleSection.tsx +++ b/src/components/ToggleSection.tsx @@ -60,7 +60,7 @@ const ToggleSection = ({ title, onClick = () => null, children, className }: Tog export default styled(ToggleSection)` display: flex; flex-direction: column; - background-color: ${({ theme }) => theme.bg.secondary}; + background-color: ${({ theme }) => theme.bg.accent}; border-radius: var(--radius-medium); padding-bottom: 21px; ` diff --git a/src/style/themes.ts b/src/style/themes.ts index be7e55f36..1ca116437 100644 --- a/src/style/themes.ts +++ b/src/style/themes.ts @@ -65,7 +65,7 @@ export const darkTheme: DefaultTheme = { tertiary: '#101012', hover: 'rgba(61, 64, 74, 0.1)', contrast: 'white', - accent: colord('#000').alpha(0.2).toRgbString() + accent: colord('#101012').alpha(0.32).toRgbString() }, font: { primary: 'rgba(255, 255, 255, 0.95)', From 54988e3fe3fe16d368299b63c32773cb4f440887 Mon Sep 17 00:00:00 2001 From: Ilias Trichopoulos Date: Thu, 22 Sep 2022 17:16:25 +0200 Subject: [PATCH 2/5] Fix display of available amount --- src/components/Inputs/AmountInput.tsx | 30 ++++++++++++++++++--------- src/components/Inputs/Input.tsx | 5 +++-- 2 files changed, 23 insertions(+), 12 deletions(-) diff --git a/src/components/Inputs/AmountInput.tsx b/src/components/Inputs/AmountInput.tsx index d138740b0..e29483a82 100644 --- a/src/components/Inputs/AmountInput.tsx +++ b/src/components/Inputs/AmountInput.tsx @@ -81,22 +81,32 @@ const AmountInput = ({ className, availableAmount, ...props }: AmountInputProps) } {...restProps} error={error} - /> - {availableAmount && ( - <> - - {t`Available`}: - - {t`Use max amount`} - - )} + > + {availableAmount && ( + + + {t`Available`}: + + {t`Use max amount`} + + )} + ) } +export default AmountInput + const AvailableAmount = styled.span` margin-right: var(--spacing-2); margin-left: 12px; + font-size: 10px; ` -export default AmountInput +const AvailableAmountRow = styled.div` + margin-top: 6px; +` + +const ActionLinkStyled = styled(ActionLink)` + font-size: 10px; +` diff --git a/src/components/Inputs/Input.tsx b/src/components/Inputs/Input.tsx index c7c4ec83d..ca4f460c4 100644 --- a/src/components/Inputs/Input.tsx +++ b/src/components/Inputs/Input.tsx @@ -27,7 +27,7 @@ import styled from 'styled-components' import { sectionChildrenVariants } from '../PageComponents/PageContainers' import { inputDefaultStyle, InputErrorMessage, InputLabel, InputProps, InputValidIconContainer } from '.' -const Input = ({ label, error, isValid, disabled, onChange, value, ...props }: InputProps) => { +const Input = ({ label, error, isValid, disabled, onChange, value, children, ...props }: InputProps) => { const [canBeAnimated, setCanBeAnimated] = useState(false) const className = classNames(props.className, { @@ -64,6 +64,7 @@ const Input = ({ label, error, isValid, disabled, onChange, value, ...props }: I )} {!disabled && error && {error}} + {children} ) } @@ -72,7 +73,7 @@ export default Input export const InputContainer = styled(motion.div)` position: relative; - height: var(--inputHeight); + min-height: var(--inputHeight); width: 100%; margin: 16px 0; ` From 0116c610890df930f244f9215d2952a245025c09 Mon Sep 17 00:00:00 2001 From: Ilias Trichopoulos Date: Thu, 22 Sep 2022 17:40:42 +0200 Subject: [PATCH 3/5] Add horizontal line and date input hint --- src/components/Inputs/Input.tsx | 10 +++- src/components/Inputs/index.tsx | 1 + src/modals/SendModal/TransactionForm.tsx | 71 ++++++++++++------------ 3 files changed, 47 insertions(+), 35 deletions(-) diff --git a/src/components/Inputs/Input.tsx b/src/components/Inputs/Input.tsx index ca4f460c4..86a91c35a 100644 --- a/src/components/Inputs/Input.tsx +++ b/src/components/Inputs/Input.tsx @@ -27,7 +27,7 @@ import styled from 'styled-components' import { sectionChildrenVariants } from '../PageComponents/PageContainers' import { inputDefaultStyle, InputErrorMessage, InputLabel, InputProps, InputValidIconContainer } from '.' -const Input = ({ label, error, isValid, disabled, onChange, value, children, ...props }: InputProps) => { +const Input = ({ label, error, isValid, disabled, onChange, value, hint, children, ...props }: InputProps) => { const [canBeAnimated, setCanBeAnimated] = useState(false) const className = classNames(props.className, { @@ -64,6 +64,7 @@ const Input = ({ label, error, isValid, disabled, onChange, value, children, ... )} {!disabled && error && {error}} + {hint && {hint}} {children} ) @@ -82,3 +83,10 @@ const StyledInput = styled.input` ${({ isValid }) => inputDefaultStyle(isValid)}; color-scheme: ${({ theme }) => (colord(theme.bg.primary).isDark() ? 'dark' : 'light')}; ` + +const Hint = styled.div` + font-size: 10px; + color: ${({ theme }) => theme.font.secondary}; + margin-left: 12px; + margin-top: 6px; +` diff --git a/src/components/Inputs/index.tsx b/src/components/Inputs/index.tsx index 24e5b6e08..fca16e787 100644 --- a/src/components/Inputs/index.tsx +++ b/src/components/Inputs/index.tsx @@ -26,6 +26,7 @@ export interface InputProps extends Omit, error?: ReactNode isValid?: boolean disabled?: boolean + hint?: string className?: string } diff --git a/src/modals/SendModal/TransactionForm.tsx b/src/modals/SendModal/TransactionForm.tsx index f5b12e0a6..9f620ce83 100644 --- a/src/modals/SendModal/TransactionForm.tsx +++ b/src/modals/SendModal/TransactionForm.tsx @@ -27,6 +27,7 @@ import InfoBox from '../../components/InfoBox' import AddressSelect from '../../components/Inputs/AddressSelect' import AmountInput from '../../components/Inputs/AmountInput' import Input, { InputContainer } from '../../components/Inputs/Input' +import HorizontalDivider from '../../components/PageComponents/HorizontalDivider' import ToggleSection from '../../components/ToggleSection' import { useAddressesContext } from '../../contexts/addresses' import { checkAddressValidity } from '../../utils/addresses' @@ -154,41 +155,43 @@ const SendModalTransactionForm = ({ data, onSubmit, onCancel }: TransactionFormP )} + + + handleLocktimeChange(e.target.value)} + type="datetime-local" + hint="DD/MM/YYYY hh:mm" + /> + + + handleGasAmountChange(e.target.value)} + type="number" + min={MINIMAL_GAS_AMOUNT} + error={gasAmountError} + /> + + {t`Gas price`} () + + } + value={gasPrice} + type="number" + min={minimalGasPriceInALPH} + onChange={(e) => handleGasPriceChange(e.target.value)} + step={minimalGasPriceInALPH} + error={gasPriceError} + /> + - - handleLocktimeChange(e.target.value)} - type="datetime-local" - /> - - - handleGasAmountChange(e.target.value)} - type="number" - min={MINIMAL_GAS_AMOUNT} - error={gasAmountError} - /> - - {t`Gas price`} () - - } - value={gasPrice} - type="number" - min={minimalGasPriceInALPH} - onChange={(e) => handleGasPriceChange(e.target.value)} - step={minimalGasPriceInALPH} - error={gasPriceError} - /> - {t`Cancel`} From 42d2f0aed173d8433499542747d3ecce5b00db05 Mon Sep 17 00:00:00 2001 From: Ilias Trichopoulos Date: Thu, 22 Sep 2022 17:44:48 +0200 Subject: [PATCH 4/5] Add min date --- src/modals/SendModal/TransactionForm.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/modals/SendModal/TransactionForm.tsx b/src/modals/SendModal/TransactionForm.tsx index 9f620ce83..b4e561963 100644 --- a/src/modals/SendModal/TransactionForm.tsx +++ b/src/modals/SendModal/TransactionForm.tsx @@ -164,6 +164,7 @@ const SendModalTransactionForm = ({ data, onSubmit, onCancel }: TransactionFormP onChange={(e) => handleLocktimeChange(e.target.value)} type="datetime-local" hint="DD/MM/YYYY hh:mm" + min={dayjs().format('YYYY-MM-DDTHH:mm')} /> From 7875f439176a799927c4246623e4e4277375032e Mon Sep 17 00:00:00 2001 From: Ilias Trichopoulos Date: Mon, 26 Sep 2022 09:10:48 +0200 Subject: [PATCH 5/5] Remove UTC from field label --- src/modals/SendModal/TransactionForm.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/modals/SendModal/TransactionForm.tsx b/src/modals/SendModal/TransactionForm.tsx index b4e561963..0337a54bf 100644 --- a/src/modals/SendModal/TransactionForm.tsx +++ b/src/modals/SendModal/TransactionForm.tsx @@ -159,7 +159,7 @@ const SendModalTransactionForm = ({ data, onSubmit, onCancel }: TransactionFormP handleLocktimeChange(e.target.value)} type="datetime-local"