From e509402c942ade03f285ccf876b60be0fefd16cd Mon Sep 17 00:00:00 2001
From: Mike Starr <imhs@protonmail.com>
Date: Fri, 29 Nov 2024 11:46:46 +0000
Subject: [PATCH] update SwapWidget styles

---
 packages/site/src/components/RadixSelect.tsx  | 10 ++--
 .../site/src/pages/SwapWidget/SwapWidget.tsx  | 57 +++++++++++--------
 .../src/pages/SwapWidget/SwapWidgetStyles.ts  | 20 ++++++-
 3 files changed, 55 insertions(+), 32 deletions(-)

diff --git a/packages/site/src/components/RadixSelect.tsx b/packages/site/src/components/RadixSelect.tsx
index 073e3b88..cde8a462 100644
--- 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
index 9ea4e90b..f0545836 100644
--- 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
index cc16d07e..df7bc51b 100644
--- 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>`