update SwapWidget styles

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

Hide file tree

Showing 3 changed files with 55 additions and 32 deletions.
diff --git a/packages/site/src/components/RadixSelect.tsx b/packages/site/src/components/RadixSelect.tsx
@@ -2,14 +2,11 @@ import * as Select from '@radix-ui/react-select';
 import styled from 'styled-components';
 
 const StyledTrigger = styled(Select.Trigger)`
+  width: 100%;
   font-size: 12px;
   background: transparent;
   color: white;
   border: none;
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-  border-top-right-radius: 15px;
-  border-bottom-right-radius: 15px;
 `;
 
 const StyledContent = styled(Select.Content)`
@@ -19,6 +16,10 @@ const StyledContent = styled(Select.Content)`
   border: solid #34425c 1px;
   border-radius: 10px;
   padding: 1rem;
+
+  &:hover {
+    border: solid #34425c 1px;
+  }
 `;
 
 const StyledItem = styled(Select.Item)`
@@ -27,6 +28,7 @@ const StyledItem = styled(Select.Item)`
   cursor: pointer;
   &:hover {
     background-color: #21396a;
+    // border: solid 1px #34425c;
   }
 `;
 

diff --git a/packages/site/src/pages/SwapWidget/SwapWidget.tsx b/packages/site/src/pages/SwapWidget/SwapWidget.tsx
@@ -18,6 +18,9 @@ import {
   HorizontalFlexBox,
   InputWrapper,
   SelectLabel,
+  SelectLabelExpiresIn,
+  SelectLabelFor,
+  SelectWrapper,
 } from './SwapWidgetStyles';
 
 const hoursItems = [
@@ -51,28 +54,30 @@ export const SwapWidget = () => {
       {/* wrapper around 'for' and 'expires in' containers */}
       <HorizontalFlexBox>
         <ForContainer>
-          <SelectLabel>For</SelectLabel>
-          <RadixSelect
-            ariaLabel="for"
-            placeholder="anyone"
-            value={takerType}
-            items={takerItems}
-            onSelectChange={(value: string) => {
-              // Handle `anyone` or `0x...` address
-              if (value === 'anyone' || value.startsWith('0x')) {
-                setTakerType(value as TakerTypeValues);
-                if (value === 'anyone') {
-                  setTakerAddress(undefined); // Clear taker address for `anyone`
+          <SelectLabelFor>For</SelectLabelFor>
+          <SelectWrapper>
+            <RadixSelect
+              ariaLabel="for"
+              placeholder="anyone"
+              value={takerType}
+              items={takerItems}
+              onSelectChange={(value: string) => {
+                // Handle `anyone` or `0x...` address
+                if (value === 'anyone' || value.startsWith('0x')) {
+                  setTakerType(value as TakerTypeValues);
+                  if (value === 'anyone') {
+                    setTakerAddress(undefined); // Clear taker address for `anyone`
+                  }
                 }
-              }
-            }}
-          />
+              }}
+            />
+          </SelectWrapper>
         </ForContainer>
 
         {/* duration container */}
         <ExpiryContainer>
           <HeaderInputContainer>
-            <SelectLabel>Expires In</SelectLabel>
+            <SelectLabelExpiresIn>Expires In</SelectLabelExpiresIn>
             <DurationContainer>
               <NumberInput
                 placeholder="1"
@@ -84,15 +89,17 @@ export const SwapWidget = () => {
                 }}
               />
             </DurationContainer>
-            <RadixSelect
-              ariaLabel="hours"
-              placeholder="HOURS"
-              value={durationUnits}
-              items={hoursItems}
-              onSelectChange={(value: string) =>
-                setDurationUnits(value as DurationUnits)
-              }
-            />
+            <SelectWrapper>
+              <RadixSelect
+                ariaLabel="hours"
+                placeholder="HOURS"
+                value={durationUnits}
+                items={hoursItems}
+                onSelectChange={(value: string) =>
+                  setDurationUnits(value as DurationUnits)
+                }
+              />
+            </SelectWrapper>
           </HeaderInputContainer>
         </ExpiryContainer>
       </HorizontalFlexBox>

diff --git a/packages/site/src/pages/SwapWidget/SwapWidgetStyles.ts b/packages/site/src/pages/SwapWidget/SwapWidgetStyles.ts
@@ -42,17 +42,31 @@ export const HeaderInputContainer = styled.div`
   border-radius: 10px;
 `;
 
-export const SelectLabel = styled.span`
+export const SelectLabelFor = styled.span`
+  display: flex;
+  flex-direction: row;
   padding: 1rem;
   color: #798bad;
+  padding-left: 2rem;
+  padding-right: 2rem;
+`;
+
+export const SelectLabelExpiresIn = styled.span`
+  display: flex;
+  flex-direction: row;
+  padding-left: 2rem;
+  padding-right: 2rem;
+  color: #798bad;
+  border-right: solid #34425c 1px;
 `;
 
 export const DurationContainer = styled.div`
   display: flex;
+`;
 
+export const SelectWrapper = styled.div`
+  border-left: solid #34425c 1px;
   padding: 1rem;
-  justify-self: center;
-  border: solid #34425c 1px;
 `;
 
 export const InputWrapper = styled.div<InputWrapperProps>`