fix input styles

airswap · Nov 29, 2024 · 015a530 · 015a530
1 parent 482a91d
commit 015a530
Show file tree

Hide file tree

Showing 7 changed files with 92 additions and 59 deletions.
diff --git a/packages/site/src/components/NumberInput.tsx b/packages/site/src/components/NumberInput.tsx
@@ -10,12 +10,11 @@ type NumberInputProps = {
 const Input = styled.input`
   display: flex;
   text-align: end;
-  width: 100%;
-  border: solid #1a1e25 2px;
-  border-radius: 10px;
+  border: none;
   padding: 1rem;
-  background: #13203d;
+  background: transparent;
   color: white;
+  width: 100%;
 
   &::-webkit-outer-spin-button,
   &::-webkit-inner-spin-button {

diff --git a/packages/site/src/components/RadixSelect.tsx b/packages/site/src/components/RadixSelect.tsx
@@ -3,9 +3,9 @@ import styled from 'styled-components';
 
 const StyledTrigger = styled(Select.Trigger)`
   font-size: 12px;
-  background: #13203d;
+  background: transparent;
   color: white;
-  border: solid gray 1px;
+  border: none;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   border-top-right-radius: 15px;
@@ -16,7 +16,9 @@ const StyledContent = styled(Select.Content)`
   font-size: 12px;
   background: #13203d;
   box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
-  border: solid darkgray 1px;
+  border: solid #34425c 1px;
+  border-radius: 10px;
+  padding: 1rem;
 `;
 
 const StyledItem = styled(Select.Item)`

diff --git a/packages/site/src/pages/SwapWidget/SwapWidget.tsx b/packages/site/src/pages/SwapWidget/SwapWidget.tsx
@@ -70,33 +70,31 @@ export const SwapWidget = () => {
         </ForContainer>
 
         {/* duration container */}
-        <HorizontalFlexBox>
-          <ExpiryContainer>
-            <HeaderInputContainer>
-              <SelectLabel>Expires In</SelectLabel>
-              <DurationContainer>
-                <NumberInput
-                  placeholder="1"
-                  value={durationLength}
-                  onTextChange={(value) => {
-                    if (!Number.isNaN(value)) {
-                      setDurationLength(value);
-                    }
-                  }}
-                />
-              </DurationContainer>
-              <RadixSelect
-                ariaLabel="hours"
-                placeholder="HOURS"
-                value={durationUnits}
-                items={hoursItems}
-                onSelectChange={(value: string) =>
-                  setDurationUnits(value as DurationUnits)
-                }
+        <ExpiryContainer>
+          <HeaderInputContainer>
+            <SelectLabel>Expires In</SelectLabel>
+            <DurationContainer>
+              <NumberInput
+                placeholder="1"
+                value={durationLength}
+                onTextChange={(value) => {
+                  if (!Number.isNaN(value)) {
+                    setDurationLength(value);
+                  }
+                }}
               />
-            </HeaderInputContainer>
-          </ExpiryContainer>
-        </HorizontalFlexBox>
+            </DurationContainer>
+            <RadixSelect
+              ariaLabel="hours"
+              placeholder="HOURS"
+              value={durationUnits}
+              items={hoursItems}
+              onSelectChange={(value: string) =>
+                setDurationUnits(value as DurationUnits)
+              }
+            />
+          </HeaderInputContainer>
+        </ExpiryContainer>
       </HorizontalFlexBox>
 
       <InputWrapper isHidden={takerType === 'anyone'}>

diff --git a/packages/site/src/pages/SwapWidget/SwapWidgetStyles.ts b/packages/site/src/pages/SwapWidget/SwapWidgetStyles.ts
@@ -17,35 +17,42 @@ export const HorizontalFlexBox = styled.div`
   display: flex;
   flex-direction: row;
   width: 100%;
+  gap: 1rem;
+`;
+
+export const ForContainer = styled.div`
+  display: flex;
+  width: 100%;
+  border: solid #34425c 1px;
+  border-radius: 10px;
+  flex-direction: row;
+  align-items: center;
 `;
 
 export const ExpiryContainer = styled.div`
+  display: flex;
   width: 100%;
-  justify-items: end;
+  justify-content: flex-end;
 `;
 
 export const HeaderInputContainer = styled.div`
   display: flex;
   align-items: center;
+  border: solid #34425c 1px;
+  border-radius: 10px;
 `;
 
 export const SelectLabel = styled.span`
   padding: 1rem;
-  border: solid gray 1px;
-  border-top-left-radius: 15px;
-  border-bottom-left-radius: 15px;
+  color: #798bad;
 `;
 
 export const DurationContainer = styled.div`
-  width: 4rem;
-  border: solid gray 1px;
-`;
-
-export const ForContainer = styled.div`
   display: flex;
-  width: 100%;
-  flex-direction: row;
-  align-items: center;
+
+  padding: 1rem;
+  justify-self: center;
+  border: solid #34425c 1px;
 `;
 
 export const InputWrapper = styled.div<InputWrapperProps>`

diff --git a/packages/site/src/pages/TokenSelectContainers/FromToken.tsx b/packages/site/src/pages/TokenSelectContainers/FromToken.tsx
@@ -3,21 +3,26 @@ import { useSwapStore } from '../../stores/SwapStore';
 import {
   AmountWrapper,
   TokenContainer,
+  TokenImage,
   TokenSelector,
+  VerticalBox,
 } from './FromTokenStyles';
 
 export const FromToken = () => {
   const { setFromToken, setFromAmount } = useSwapStore();
   return (
     <TokenContainer>
+      <TokenImage src="" alt="" />
       <TokenSelector>
-        From
-        <RadixSelect
-          ariaLabel="from-token"
-          placeholder="ETH"
-          items={[{ value: 'ether', label: 'ether' }]}
-          onSelectChange={(value) => setFromToken(value)}
-        />
+        <VerticalBox>
+          From
+          <RadixSelect
+            ariaLabel="from-token"
+            placeholder="ETH"
+            items={[{ value: 'ether', label: 'ether' }]}
+            onSelectChange={(value) => setFromToken(value)}
+          />
+        </VerticalBox>
       </TokenSelector>
       <AmountWrapper>
         <NumberInput placeholder="0.00" onTextChange={setFromAmount} />

diff --git a/packages/site/src/pages/TokenSelectContainers/FromTokenStyles.ts b/packages/site/src/pages/TokenSelectContainers/FromTokenStyles.ts
@@ -4,16 +4,33 @@ export const TokenContainer = styled.div`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
+  align-items: center;
   width: 100%;
   padding: 1rem;
   margin: 1rem;
   font-size: 18px;
   border: solid #34425c 1px;
   border-radius: 10px;
   background: #13203d;
+  color: #798bad;
+  font-weight: semibold;
+`;
+
+export const TokenImage = styled.img`
+  border: solid white 1px;
+  width: 35px;
+  height: 35px;
+  border-radius: 50%;
+  border: solid #34425c 2px;
+`;
+
+export const VerticalBox = styled.div`
+  display: flex;
+  flex-direction: column;
 `;
 
 export const TokenSelector = styled.div`
+  display: flex;
   width: 50%;
 `;
 

diff --git a/packages/site/src/pages/TokenSelectContainers/ToToken.tsx b/packages/site/src/pages/TokenSelectContainers/ToToken.tsx
@@ -3,21 +3,26 @@ import { useSwapStore } from '../../stores/SwapStore';
 import {
   AmountWrapper,
   TokenContainer,
+  TokenImage,
   TokenSelector,
+  VerticalBox,
 } from './FromTokenStyles';
 
 export const ToToken = () => {
   const { setToToken, setToAmount } = useSwapStore();
   return (
     <TokenContainer>
+      <TokenImage src="" alt="" />
       <TokenSelector>
-        To
-        <RadixSelect
-          ariaLabel="to-token"
-          placeholder="ETH"
-          items={[{ value: 'ether', label: 'ether' }]}
-          onSelectChange={(value) => setToToken(value)}
-        />
+        <VerticalBox>
+          To
+          <RadixSelect
+            ariaLabel="to-token"
+            placeholder="ETH"
+            items={[{ value: 'ether', label: 'ether' }]}
+            onSelectChange={(value) => setToToken(value)}
+          />
+        </VerticalBox>
       </TokenSelector>
       <AmountWrapper>
         <NumberInput placeholder="0.00" onTextChange={setToAmount} />