refactor: move the complications to the input component file

secretkeylabs · Mar 5, 2024 · f866f86 · f866f86
1 parent 73395d1
commit f866f86
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 55 deletions.
diff --git a/src/app/screens/sendRune/runeAmountSelector.tsx b/src/app/screens/sendRune/runeAmountSelector.tsx
@@ -1,6 +1,5 @@
 import { FungibleToken } from '@secretkeylabs/xverse-core';
-import { MaxButton, VertRule } from '@ui-components/amountInput/complications';
-import Input from '@ui-library/input';
+import Input, { MaxButton, VertRule } from '@ui-library/input';
 import { getFtBalance } from '@utils/tokens';
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';

diff --git a/src/app/ui-components/amountInput/complications.ts b/src/app/ui-components/amountInput/complications.ts
diff --git a/src/app/ui-components/btcAmountSelector.tsx b/src/app/ui-components/btcAmountSelector.tsx
@@ -7,8 +7,7 @@ import {
   getFiatBtcEquivalent,
   satsToBtc,
 } from '@secretkeylabs/xverse-core';
-import { ConvertComplication, MaxButton, VertRule } from '@ui-components/amountInput/complications';
-import Input from '@ui-library/input';
+import Input, { ConvertComplication, MaxButton, VertRule } from '@ui-library/input';
 import BigNumber from 'bignumber.js';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';

diff --git a/src/app/ui-library/input.tsx b/src/app/ui-library/input.tsx
@@ -258,3 +258,54 @@ function Input({
 }
 
 export default Input;
+
+// some complications that can be used with the input
+export const ConvertComplication = styled.button`
+  ${(props) => props.theme.typography.body_medium_s}
+  user-select: none;
+
+  display: flex;
+  align-items: center;
+  gap: ${(props) => props.theme.space.xs};
+
+  cursor: pointer;
+  background-color: transparent;
+  color: ${(props) => props.theme.colors.white_200};
+
+  &:hover:enabled {
+    color: ${(props) => props.theme.colors.white_400};
+  }
+
+  &:disabled {
+    color: ${(props) => props.theme.colors.white_600};
+    cursor: not-allowed;
+  }
+`;
+
+export const VertRule = styled.div`
+  width: 1px;
+  height: 16px;
+  background-color: ${(props) => props.theme.colors.white_800};
+  margin: 0 8px;
+`;
+
+export const MaxButton = styled.button<{ $sendMax: boolean }>`
+  ${(props) => props.theme.typography.body_medium_m}
+  user-select: none;
+  margin-right: ${(props) => props.theme.space.xxs};
+
+  cursor: pointer;
+  background-color: transparent;
+  color: ${(props) => props.theme.colors.tangerine};
+
+  ${(props) => props.$sendMax && `color: ${props.theme.colors.tangerine_400};`}
+
+  &:hover:enabled {
+    color: ${(props) => props.theme.colors.tangerine_400};
+  }
+
+  &:disabled {
+    color: ${(props) => props.theme.colors.tangerine_dark};
+    cursor: not-allowed;
+  }
+`;