Add theme to more components

skip-mev · Jul 3, 2024 · cbd2fe8 · cbd2fe8
1 parent 4bde2b2
commit cbd2fe8
Show file tree

Hide file tree

Showing 9 changed files with 60 additions and 16 deletions.
diff --git a/examples/nextjs/pages/index.tsx b/examples/nextjs/pages/index.tsx
@@ -34,10 +34,12 @@ const Home: NextPage = () => {
             primary: {
               backgroundColor: 'black',
               textColor: 'white',
+              borderColor: 'gray',
             },
             secondary: {
               backgroundColor: 'grey',
               textColor: 'white',
+              borderColor: 'darkgray',
             },
           }}
           defaultRoute={{

diff --git a/packages/widget/src/ui/AssetInput.tsx b/packages/widget/src/ui/AssetInput.tsx
@@ -85,7 +85,7 @@ function AssetInput({
   }, [selectedAssetBalance]);
 
   return (
-    <div
+    <AssetInputContainer
       className={cn(
         'rounded-lg border border-neutral-200 p-4 transition-[border,shadow]',
         'focus-within:border-neutral-300 focus-within:shadow-sm',
@@ -254,7 +254,7 @@ function AssetInput({
           {isError}
         </div>
       )}
-    </div>
+    </AssetInputContainer>
   );
 }
 
@@ -264,3 +264,7 @@ const AmountInput = styled.input`
   background-color: ${(props) => props.theme.primary.backgroundColor};
   color: ${(props) => props.theme.primary.textColor};
 `;
+
+const AssetInputContainer = styled.div`
+  border-color: ${(props) => props.theme.primary.borderColor};
+`;
diff --git a/packages/widget/src/ui/AssetSelect/AssetSelectContent.tsx b/packages/widget/src/ui/AssetSelect/AssetSelectContent.tsx
@@ -7,6 +7,7 @@ import { formatUnits } from 'viem';
 
 import { SpinnerIcon } from '../Icon/SpinnerIcon';
 import { cn } from '../../utils/ui';
+import { styled } from 'styled-components';
 
 interface Props {
   assets?: Asset[];
@@ -79,15 +80,15 @@ function AssetSelectContent({
           <SpinnerIcon className="h-4 w-4 animate-spin text-neutral-400" />
         )}
       </div>
-      <input
+      <SearchInput
         className="z-20 w-full rounded-md border px-4 py-2"
         type="text"
         placeholder="Search name or paste address"
         onChange={(e) => setSearchValue(e.target.value)}
         value={searchValue}
         ref={inputRef}
       />
-      <ScrollArea.Root
+      <ScrollAreaRoot
         className={cn(
           'relative isolate flex-grow overflow-hidden',
           'before:absolute before:inset-x-0 before:top-0 before:z-10 before:h-2',
@@ -153,9 +154,28 @@ function AssetSelectContent({
           <ScrollArea.Thumb className="relative flex-1 rounded-[10px] bg-neutral-500/50 transition-colors before:absolute before:left-1/2 before:top-1/2 before:h-2 before:w-2 before:-translate-x-1/2 before:-translate-y-1/2 before:content-[''] hover:bg-neutral-500" />
         </ScrollArea.Scrollbar>
         <ScrollArea.Corner />
-      </ScrollArea.Root>
+      </ScrollAreaRoot>
     </div>
   );
 }
 
 export default AssetSelectContent;
+
+export const ScrollAreaRoot = styled(ScrollArea.Root)`
+  &::before {
+    --tw-gradient-from: ${(props) => props.theme.primary.backgroundColor}
+      var(--tw-gradient-from-position);
+  }
+  &::after {
+    --tw-gradient-from: ${(props) => props.theme.primary.backgroundColor}
+      var(--tw-gradient-from-position);
+  }
+`;
+
+export const SearchInput = styled.input`
+  background-color: ${(props) => props.theme.secondary.backgroundColor};
+  border-color: ${(props) => props.theme.secondary.borderColor};
+  &::placeholder {
+    color: ${(props) => props.theme.secondary.textColor};
+  }
+`;
diff --git a/packages/widget/src/ui/Button/HistoryButton.tsx b/packages/widget/src/ui/Button/HistoryButton.tsx
@@ -3,14 +3,15 @@ import { SimpleTooltip } from '../SimpleTooltip';
 import { cn } from '../../utils/ui';
 import { disclosure } from '../../store/disclosures';
 import { HistoryIcon } from '../Icon/HistoryIcon';
+import { ThemedButton } from './ShareButton';
 
 export const HistoryButton = ({
   className,
   ...props
 }: ComponentProps<'button'>) => {
   return (
     <SimpleTooltip label="Transaction History">
-      <button
+      <ThemedButton
         className={cn(
           'rounded-full p-2 text-black/80 hover:bg-neutral-100 hover:text-black/100',
           'transition-colors focus:outline-none',
@@ -21,7 +22,7 @@ export const HistoryButton = ({
         {...props}
       >
         <HistoryIcon className="h-4 w-4" />
-      </button>
+      </ThemedButton>
     </SimpleTooltip>
   );
 };
diff --git a/packages/widget/src/ui/Button/SettingsButton.tsx b/packages/widget/src/ui/Button/SettingsButton.tsx
@@ -3,14 +3,15 @@ import { ComponentProps } from 'react';
 import { SimpleTooltip } from '../SimpleTooltip';
 import { cn } from '../../utils/ui';
 import { disclosure } from '../../store/disclosures';
+import { ThemedButton } from './ShareButton';
 
 export const SettingsButton = ({
   className,
   ...props
 }: ComponentProps<'button'>) => {
   return (
     <SimpleTooltip label="Swap Settings">
-      <button
+      <ThemedButton
         className={cn(
           'rounded-full p-2 text-black/80 hover:bg-neutral-100 hover:text-black/100',
           'transition-colors focus:outline-none',
@@ -21,7 +22,7 @@ export const SettingsButton = ({
         {...props}
       >
         <Cog6ToothIcon className="h-4 w-4" />
-      </button>
+      </ThemedButton>
     </SimpleTooltip>
   );
 };
diff --git a/packages/widget/src/ui/Button/ShareButton.tsx b/packages/widget/src/ui/Button/ShareButton.tsx
@@ -2,11 +2,12 @@ import { ShareIcon } from '@heroicons/react/20/solid';
 import toast from 'react-hot-toast';
 import { SimpleTooltip } from '../SimpleTooltip';
 import { cn } from '../../utils/ui';
+import { styled } from 'styled-components';
 
 export const ShareButton = ({ shareableLink }: { shareableLink: string }) => {
   return (
     <SimpleTooltip label="Share">
-      <button
+      <ThemedButton
         onClick={() => {
           try {
             navigator.clipboard.writeText(shareableLink);
@@ -21,7 +22,11 @@ export const ShareButton = ({ shareableLink }: { shareableLink: string }) => {
         )}
       >
         <ShareIcon className="h-4 w-4" />
-      </button>
+      </ThemedButton>
     </SimpleTooltip>
   );
 };
+
+export const ThemedButton = styled.button`
+  color: ${(props) => props.theme.primary.textColor};
+`;
diff --git a/packages/widget/src/ui/ChainSelect/ChainSelectContent.tsx b/packages/widget/src/ui/ChainSelect/ChainSelectContent.tsx
@@ -4,6 +4,7 @@ import { matchSorter } from 'match-sorter';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { Chain } from '../../hooks/use-chains';
 import { cn } from '../../utils/ui';
+import { SearchInput, ScrollAreaRoot } from '../AssetSelect/AssetSelectContent';
 
 interface Props {
   chains: Chain[];
@@ -36,7 +37,7 @@ function ChainSelectContent({ chains, onChange, onClose }: Props) {
         </button>
         <p className="text-xl font-bold">Select Network</p>
       </div>
-      <input
+      <SearchInput
         className="z-20 w-full rounded-md border px-4 py-2"
         type="text"
         placeholder="Search for a chain"
@@ -68,7 +69,7 @@ function ChainSelectContent({ chains, onChange, onClose }: Props) {
           </svg>
         </div>
       ) : (
-        <ScrollArea.Root
+        <ScrollAreaRoot
           className={cn(
             'relative isolate flex-grow overflow-hidden',
             'before:absolute before:inset-x-0 before:top-0 before:z-10 before:h-2',
@@ -109,7 +110,7 @@ function ChainSelectContent({ chains, onChange, onClose }: Props) {
             <ScrollArea.Thumb className="relative flex-1 rounded-[10px] bg-neutral-500/50 transition-colors before:absolute before:left-1/2 before:top-1/2 before:h-2 before:w-2 before:-translate-x-1/2 before:-translate-y-1/2 before:content-[''] hover:bg-neutral-500" />
           </ScrollArea.Scrollbar>
           <ScrollArea.Corner />
-        </ScrollArea.Root>
+        </ScrollAreaRoot>
       )}
     </div>
   );

diff --git a/packages/widget/src/ui/Dialog/DialogContent.tsx b/packages/widget/src/ui/Dialog/DialogContent.tsx
@@ -4,6 +4,7 @@ import { PropsWithChildren, useContext } from 'react';
 
 import { DialogContext } from './context';
 import { cn } from '../../utils/ui';
+import { styled } from 'styled-components';
 
 interface Props extends PropsWithChildren {
   onInteractOutside?: DialogContentProps['onInteractOutside'];
@@ -17,7 +18,7 @@ export function DialogContent({ children, onInteractOutside }: Props) {
   return (
     <Dialog.Portal>
       <Dialog.Overlay className="bg-blackA6 data-[state=open]:animate-overlayShow fixed inset-0 font-jost" />
-      <Dialog.Content
+      <DialogWrapper
         className={cn(
           'data-[state=open]:animate-contentShow fixed top-[50%] left-[50%]',
           'w-[90vw] max-w-[450px] max-h-[820px] h-[90vh] rounded-xl',
@@ -26,7 +27,12 @@ export function DialogContent({ children, onInteractOutside }: Props) {
         onInteractOutside={onInteractOutside}
       >
         {children}
-      </Dialog.Content>
+      </DialogWrapper>
     </Dialog.Portal>
   );
 }
+
+const DialogWrapper = styled(Dialog.Content)`
+  background-color: ${(props) => props.theme.primary.backgroundColor};
+  color: ${(props) => props.theme.primary.textColor};
+`;
diff --git a/packages/widget/src/ui/theme.ts b/packages/widget/src/ui/theme.ts
@@ -4,21 +4,25 @@ export const defaultTheme = {
   primary: {
     backgroundColor: 'white',
     textColor: 'black',
+    borderColor: 'rgb(229 229 229)',
   },
   secondary: {
     backgroundColor: 'rgb(245, 245, 245)',
     textColor: 'black',
+    borderColor: 'rgb(229 229 229)',
   },
 };
 
 export type Theme = {
   primary: {
     backgroundColor: string;
     textColor: string;
+    borderColor: string;
   };
   secondary: {
     backgroundColor: string;
     textColor: string;
+    borderColor: string;
   };
 };