updated styles

Crossmint · Oct 30, 2024 · 7c6e91e · 7c6e91e
1 parent 763b7d1
commit 7c6e91e
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 24 deletions.
diff --git a/apps/wallets/smart-wallet/next/src/app/_lib/providers.tsx b/apps/wallets/smart-wallet/next/src/app/_lib/providers.tsx
@@ -18,14 +18,13 @@ export function Providers({ children }: { children: ReactNode }) {
                         defaultChain: "polygon-amoy",
                     }}
                     appearance={{
-                        spacingUnit: "8px",
                         borderRadius: "16px",
                         colors: {
-                            inputBackground: "#fffdf9",
-                            buttonBackground: "#fffaf2",
+                            inputBackground: "#FAF5EC",
+                            buttonBackground: "#E9E3D8",
                             border: "#835911",
                             background: "#FAF5EC",
-                            textPrimary: "#5f2c1b",
+                            textPrimary: "#704130",
                             textSecondary: "#835911",
                             danger: "#ff3333",
                             accent: "#602C1B",

diff --git a/packages/client/ui/react-ui/src/components/auth/methods/web3/Web3ConnectButton.tsx b/packages/client/ui/react-ui/src/components/auth/methods/web3/Web3ConnectButton.tsx
@@ -45,6 +45,7 @@ export function Web3ConnectButton({
                 style={{
                     borderRadius: appearance?.borderRadius,
                     borderColor: appearance?.colors?.border,
+                    backgroundColor: appearance?.colors?.buttonBackground,
                 }}
                 onClick={isLoading ? undefined : onConnectClick}
             >

diff --git a/packages/client/ui/react-ui/src/components/common/Dialog.tsx b/packages/client/ui/react-ui/src/components/common/Dialog.tsx
@@ -9,21 +9,6 @@ const DialogTrigger = DialogPrimitive.Trigger;
 const DialogClose = DialogPrimitive.Close;
 const DialogPortal = DialogPrimitive.Portal;
 
-const DialogOverlay = React.forwardRef<
-    React.ElementRef<typeof DialogPrimitive.Overlay>,
-    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-    <DialogPrimitive.Overlay
-        ref={ref}
-        className={classNames(
-            "fixed inset-0 z-50 bg-black/80 backdrop-blur-[2px] data-[state=closed]:animate-out data-[state=closed]:animate-fade-out data-[state=open]:animate-in data-[state=open]:animate-fade-in",
-            className
-        )}
-        {...props}
-    />
-));
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-
 interface DialogContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
     showCloseButton?: boolean;
     closeButtonColor?: string;
@@ -34,7 +19,7 @@ const DialogContent = React.forwardRef<React.ElementRef<typeof DialogPrimitive.C
     ({ className, children, showCloseButton = true, closeButtonColor, closeButtonRingColor, ...props }, ref) => (
         <DialogPortal>
             {/* Because we're using modal={false}, the regular overlay is not shown. We need to add our own overlay */}
-            <div className="fixed inset-0 z-40 bg-black/50 backdrop-blur-sm overflow-x-hidden" />
+            <div className="fixed inset-0 z-40 bg-black/60 backdrop-blur-sm overflow-x-hidden" />
             <DialogPrimitive.Content
                 ref={ref}
                 className={classNames(
@@ -127,7 +112,6 @@ DialogDescription.displayName = DialogPrimitive.Description.displayName;
 export {
     Dialog,
     DialogPortal,
-    DialogOverlay,
     DialogClose,
     DialogTrigger,
     DialogContent,

diff --git a/packages/client/ui/react-ui/src/components/common/InputOTP.tsx b/packages/client/ui/react-ui/src/components/common/InputOTP.tsx
@@ -19,10 +19,10 @@ type CustomStyles = {
 // Create a context for customStyles
 const CustomStylesContext = createContext<CustomStyles | undefined>(undefined);
 
-const InputOTP = React.forwardRef<
+const InputOTP: React.ForwardRefRenderFunction<
     React.ElementRef<typeof OTPInput>,
     React.ComponentPropsWithoutRef<typeof OTPInput> & { customStyles?: CustomStyles }
->(({ className, containerClassName, customStyles, ...props }, ref) => (
+> = ({ className, containerClassName, customStyles, ...props }, ref) => (
     <CustomStylesContext.Provider value={customStyles}>
         <OTPInput
             autoFocus
@@ -32,7 +32,7 @@ const InputOTP = React.forwardRef<
             {...props}
         />
     </CustomStylesContext.Provider>
-));
+);
 InputOTP.displayName = "InputOTP";
 
 const InputOTPGroup = React.forwardRef<React.ElementRef<"div">, React.ComponentPropsWithoutRef<"div">>(