Update misc styling (#76)

skip-mev · Jul 19, 2024 · f621037 · f621037
1 parent 4a6d402
commit f621037
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 14 deletions.
diff --git a/.changeset/tall-stingrays-destroy.md b/.changeset/tall-stingrays-destroy.md
@@ -0,0 +1,5 @@
+---
+'@skip-go/widget': patch
+---
+
+Update misc styling in widget
diff --git a/packages/widget/src/ui/AssetInput.tsx b/packages/widget/src/ui/AssetInput.tsx
@@ -226,7 +226,7 @@ function AssetInput({
           ) : null}
           <div className="flex-grow" />
           {context === 'source' && account?.address && asset && (
-            <div className="flex animate-slide-left-and-fade items-center text-sm text-neutral-400">
+            <div className="flex animate-slide-left-and-fade items-center text-sm">
               <span className="mr-1">Balance:</span>{' '}
               {isBalancesLoading ? (
                 <SpinnerIcon className="mr-2 h-4 w-4 animate-spin" />

diff --git a/packages/widget/src/ui/HistoryDialog/HistoryList.tsx b/packages/widget/src/ui/HistoryDialog/HistoryList.tsx
@@ -28,6 +28,7 @@ import { ChainSymbol } from '../ChainSymbol';
 import { AssetValue } from '../AssetValue';
 import { disclosure } from '../../store/disclosures';
 import { StyledHighlightButton } from '../StyledComponents/Buttons';
+import { StyledBorderDiv } from '../StyledComponents/Theme';
 
 type RootProps = Omit<Accordion.AccordionSingleProps, 'type'>;
 
@@ -101,10 +102,11 @@ export const Item = forwardRef<HTMLDivElement, ItemProps>(function Item(
   }, [errorUpdateCount, id, txsStatus]);
 
   return (
-    <Accordion.Item
+    <StyledBorderDiv
+      as={Accordion.Item}
       className={cn(
         'p-1',
-        'rounded-lg border border-neutral-200 transition-all',
+        'rounded-lg border transition-all',
         'data-[state=open]:shadow-md',
         'data-[state=open]:-mx-1 data-[state=open]:p-2',
         className
@@ -259,6 +261,6 @@ export const Item = forwardRef<HTMLDivElement, ItemProps>(function Item(
           </StyledHighlightButton>
         </div>
       </Accordion.Content>
-    </Accordion.Item>
+    </StyledBorderDiv>
   );
 });
diff --git a/packages/widget/src/ui/PreviewRoute/ChainStep.tsx b/packages/widget/src/ui/PreviewRoute/ChainStep.tsx
@@ -28,7 +28,7 @@ import {
 import { cn } from '../../utils/ui';
 import { ExpandArrow } from '../Icon/ExpandArrow';
 import { useAssets } from '../../provider/assets';
-import { StyledThemedDiv } from '../StyledComponents/Theme';
+import { StyledBorderDiv, StyledThemedDiv } from '../StyledComponents/Theme';
 import { useTheme, styled } from 'styled-components';
 import { StyledThemedButton } from '../StyledComponents/Buttons';
 
@@ -278,12 +278,13 @@ export const ChainStep = ({
                 <div className="absolute right-6 flex w-full flex-col">
                   {intermidiaryChainsImage.map((c, i) => (
                     <SimpleTooltip label={c.name} key={i}>
-                      <img
+                      <StyledBorderDiv
+                        as="img"
                         src={c.image}
                         height={20}
                         width={20}
                         className={cn(
-                          '-mt-1 rounded-full border-2 border-neutral-200 object-contain'
+                          '-mt-1 rounded-full border-2 object-contain'
                         )}
                         alt={chainID}
                       />
@@ -293,7 +294,7 @@ export const ChainStep = ({
               )}
               {!isExpanded && (
                 <StyledThemedButton
-                  className="absolute top-[18px] rounded-full border-2 border-neutral-200 p-1 text-neutral-400 transition-transform hover:scale-110"
+                  className="absolute top-[18px] rounded-full border-2 p-1 text-neutral-400 transition-transform hover:scale-110"
                   onClick={() => setIsExpanded(true)}
                 >
                   <ExpandArrow className="h-4 w-4" />

diff --git a/packages/widget/src/ui/Widget.tsx b/packages/widget/src/ui/Widget.tsx
@@ -179,11 +179,11 @@ export const SwapWidgetUI = ({
             </div>
             <div className="relative">
               <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-                <button
+                <StyledSwapButton
                   className={cn(
-                    'pointer-events-auto flex h-8 w-8 items-center justify-center rounded-md bg-neutral-900 text-white',
+                    'pointer-events-auto flex h-8 w-8 items-center justify-center rounded-md',
                     'transition-transform enabled:hover:rotate-3 enabled:hover:scale-105',
-                    'disabled:cursor-not-allowed disabled:bg-neutral-500 disabled:hover:scale-100',
+                    'disabled:cursor-not-allowed disabled:hover:scale-100',
                     'data-[swap=true]:pointer-events-none data-[swap=true]:animate-spin-swap'
                   )}
                   disabled={!destinationChain}
@@ -196,7 +196,7 @@ export const SwapWidgetUI = ({
                   ref={invertButtonRef}
                 >
                   <ArrowsUpDownIcon className="h-4 w-4" />
-                </button>
+                </StyledSwapButton>
               </div>
               <p className="text-2xl font-semibold">To</p>
             </div>
@@ -252,12 +252,12 @@ export const SwapWidgetUI = ({
             )}
             {!!routeError && (
               <div className="flex w-full items-center rounded-md bg-red-50 p-3 text-left text-xs font-medium uppercase text-red-500">
-                <p className="flex-1">{routeError}</p>
+                <p className="flex-1 text-red-500">{routeError}</p>
               </div>
             )}
             {destinationChain?.chainID === 'dydx-mainnet-1' && (
               <div className="flex w-full items-center rounded-md bg-red-50 p-3 text-left text-xs font-medium uppercase text-red-500">
-                <p className="flex-1 [&_a]:underline">
+                <p className="flex-1 [&_a]:underline text-red-500">
                   This transaction will let you transfer and stake tokens on
                   dydx, it will not allow you to trade. Follow the{' '}
                   <AdaptiveLink href="https://dydx.exchange">
@@ -341,3 +341,9 @@ const StyledAppWrapper = styled.div`
     color: ${(props) => props.theme.textColor};
   }
 `;
+
+const StyledSwapButton = styled.button<{ disabled?: boolean }>`
+  background-color: ${(props) => props.theme.textColor};
+  ${(props) => props.disabled && 'opacity: 0.5'};
+  color: ${(props) => props.theme.backgroundColor};
+`;