Merge pull request #365 from alephium/lock-time-ilias

Lock time ilias
alephium · Sep 26, 2022 · 179f5d9 · 179f5d9
2 parents 747333b + 7875f43
commit 179f5d9
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 48 deletions.
diff --git 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 && (
-        <>
-          <AvailableAmount tabIndex={0}>
-            {t`Available`}: <Amount value={BigInt(availableAmount)} nbOfDecimalsToShow={4} />
-          </AvailableAmount>
-          <ActionLink onClick={onUseMaxAmountClick}>{t`Use max amount`}</ActionLink>
-        </>
-      )}
+      >
+        {availableAmount && (
+          <AvailableAmountRow>
+            <AvailableAmount tabIndex={0}>
+              {t`Available`}: <Amount value={BigInt(availableAmount)} nbOfDecimalsToShow={4} />
+            </AvailableAmount>
+            <ActionLinkStyled onClick={onUseMaxAmountClick}>{t`Use max amount`}</ActionLinkStyled>
+          </AvailableAmountRow>
+        )}
+      </Input>
     </div>
   )
 }
 
+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
@@ -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, hint, children, ...props }: InputProps) => {
   const [canBeAnimated, setCanBeAnimated] = useState(false)
 
   const className = classNames(props.className, {
@@ -64,6 +64,8 @@ const Input = ({ label, error, isValid, disabled, onChange, value, ...props }: I
         </InputValidIconContainer>
       )}
       {!disabled && error && <InputErrorMessage animate={{ y: 10, opacity: 1 }}>{error}</InputErrorMessage>}
+      {hint && <Hint>{hint}</Hint>}
+      {children}
     </InputContainer>
   )
 }
@@ -72,7 +74,7 @@ export default Input
 
 export const InputContainer = styled(motion.div)`
   position: relative;
-  height: var(--inputHeight);
+  min-height: var(--inputHeight);
   width: 100%;
   margin: 16px 0;
 `
@@ -81,3 +83,10 @@ const StyledInput = styled.input<InputProps>`
   ${({ 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
@@ -26,6 +26,7 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
   error?: ReactNode
   isValid?: boolean
   disabled?: boolean
+  hint?: string
   className?: string
 }
 

diff --git 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/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,44 @@ const SendModalTransactionForm = ({ data, onSubmit, onCancel }: TransactionFormP
             <AlefSymbol />
           </InfoBoxStyled>
         )}
+        <HorizontalDivider />
+        <ToggleSectionStyled title={t`Set lock time`} onClick={onClickClearLockTime}>
+          <Input
+            id="locktime"
+            label={t`Lock time`}
+            value={dayjs(lockTime).format('YYYY-MM-DDTHH:mm')}
+            onChange={(e) => handleLocktimeChange(e.target.value)}
+            type="datetime-local"
+            hint="DD/MM/YYYY hh:mm"
+            min={dayjs().format('YYYY-MM-DDTHH:mm')}
+          />
+        </ToggleSectionStyled>
+        <ToggleSectionStyled title={t`Tweak gas settings`} onClick={onClickClearGasSettings}>
+          <Input
+            id="gas-amount"
+            label={t`Gas amount`}
+            value={gasAmount}
+            onChange={(e) => handleGasAmountChange(e.target.value)}
+            type="number"
+            min={MINIMAL_GAS_AMOUNT}
+            error={gasAmountError}
+          />
+          <Input
+            id="gas-price"
+            label={
+              <>
+                {t`Gas price`} (<AlefSymbol color={theme.font.secondary} />)
+              </>
+            }
+            value={gasPrice}
+            type="number"
+            min={minimalGasPriceInALPH}
+            onChange={(e) => handleGasPriceChange(e.target.value)}
+            step={minimalGasPriceInALPH}
+            error={gasPriceError}
+          />
+        </ToggleSectionStyled>
       </ModalContent>
-      <ToggleSectionStyled title={t`Set lock time`} onClick={onClickClearLockTime}>
-        <Input
-          id="locktime"
-          label={t`Lock time`}
-          value={dayjs(lockTime).format('YYYY-MM-DDTHH:mm')}
-          onChange={(e) => handleLocktimeChange(e.target.value)}
-          type="datetime-local"
-        />
-      </ToggleSectionStyled>
-      <ToggleSectionStyled title={t`Tweak gas settings`} onClick={onClickClearGasSettings}>
-        <Input
-          id="gas-amount"
-          label={t`Gas amount`}
-          value={gasAmount}
-          onChange={(e) => handleGasAmountChange(e.target.value)}
-          type="number"
-          min={MINIMAL_GAS_AMOUNT}
-          error={gasAmountError}
-        />
-        <Input
-          id="gas-price"
-          label={
-            <>
-              {t`Gas price`} (<AlefSymbol color={theme.font.secondary} />)
-            </>
-          }
-          value={gasPrice}
-          type="number"
-          min={minimalGasPriceInALPH}
-          onChange={(e) => handleGasPriceChange(e.target.value)}
-          step={minimalGasPriceInALPH}
-          error={gasPriceError}
-        />
-      </ToggleSectionStyled>
       <ModalFooterButtons>
         <ModalFooterButton secondary onClick={onCancel}>
           {t`Cancel`}

diff --git 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)',