Spacing Fixes, Revert color changes (#3107)

thirdweb-dev · May 22, 2024 · 57f7cd5 · 57f7cd5
1 parent 10b563c
commit 57f7cd5
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 42 deletions.
diff --git a/.changeset/shy-pants-tickle.md b/.changeset/shy-pants-tickle.md
@@ -0,0 +1,6 @@
+---
+"thirdweb": patch
+---
+
+- Fix spacing issues in UI components
+- Revert color changes in UI components
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.tsx
@@ -327,7 +327,7 @@ const WalletSelectorInner: React.FC<WalletSelectorProps> = (props) => {
                 {tos ? (
                   <Container p="md"> {tos} </Container>
                 ) : (
-                  <Spacer y="md" />
+                  <Spacer y="xxs" />
                 )}
               </Container>
             );
@@ -459,11 +459,7 @@ const WalletSelectorInner: React.FC<WalletSelectorProps> = (props) => {
 
       {bottomSection}
       {isCompact && connectModal.showThirdwebBranding !== false && (
-        <Container
-          style={{
-            paddingBottom: spacing.md,
-          }}
-        >
+        <Container py="md">
           <PoweredByThirdweb />
         </Container>
       )}

diff --git a/packages/thirdweb/src/react/web/ui/components/Img.tsx b/packages/thirdweb/src/react/web/ui/components/Img.tsx
@@ -3,7 +3,6 @@ import { useState } from "react";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import { resolveScheme } from "../../../../utils/ipfs.js";
 import { Skeleton } from "./Skeleton.js";
-import { Container } from "./basic.js";
 
 // Note: Must not use useConnectUI here
 
@@ -29,11 +28,7 @@ export const Img: React.FC<{
   const heightPx = `${props.height || props.width}px`;
 
   if (propSrc === undefined) {
-    return (
-      <Container style={{ margin: "auto" }}>
-        <Skeleton width={widthPx} height={heightPx} />
-      </Container>
-    );
+    return <Skeleton width={widthPx} height={heightPx} />;
   }
 
   const getSrc = () => {
@@ -59,11 +54,7 @@ export const Img: React.FC<{
         justifyItems: "center",
       }}
     >
-      {!isLoaded && (
-        <Container style={{ margin: "auto" }}>
-          <Skeleton width={widthPx} height={heightPx} />
-        </Container>
-      )}
+      {!isLoaded && <Skeleton width={widthPx} height={heightPx} />}
       <img
         onLoad={() => {
           setIsLoaded(true);
@@ -76,7 +67,6 @@ export const Img: React.FC<{
         loading={props.loading}
         decoding="async"
         style={{
-          display: isLoaded ? "block" : "none",
           objectFit: "contain",
           height: !isLoaded
             ? 0

diff --git a/packages/thirdweb/src/react/web/ui/components/TokenIcon.tsx b/packages/thirdweb/src/react/web/ui/components/TokenIcon.tsx
@@ -38,7 +38,7 @@ export function TokenIcon(props: {
 
   return (
     <Img
-      src={tokenImage}
+      src={tokenImage || ""}
       width={iconSize[props.size]}
       height={iconSize[props.size]}
       fallbackImage={genericTokenIcon}

diff --git a/packages/thirdweb/src/react/web/ui/design-system/index.ts b/packages/thirdweb/src/react/web/ui/design-system/index.ts
@@ -14,32 +14,32 @@ type ThemeColors = {
 };
 
 const darkColors = {
-  base1: "hsl(228deg 12% 8%)",
-  base2: "hsl(228deg 12% 12%)",
-  base3: "hsl(228deg 12% 15%)",
-  base4: "hsl(228deg 12% 18%)",
+  base1: "hsl(230deg 11.63% 8.43%)",
+  base2: "hsl(230deg 11.63% 12%)",
+  base3: "hsl(230deg 11.63% 15%)",
+  base4: "hsl(230deg 11.63% 17%)",
   primaryText: "#eeeef0",
   secondaryText: "#7c7a85",
   danger: "#e5484D",
   success: "#30A46C",
   overlay: "rgba(0, 0, 0, 0.7)",
   accentText: "#3385FF",
-  accentBg: "#3385FF",
+  accentBg: "hsl(216 100% 50%)",
   textOnAccent: "#eeeef0",
 } as const satisfies ThemeColors;
 
 const lightColors = {
   base1: "#fdfcfd",
   base2: "#f2eff3",
   base3: "#e3dfe6",
-  base4: "#e5e6ed",
+  base4: "#dbd8e0",
   primaryText: "#211f26",
   secondaryText: "#6f6d78",
   accentText: "hsl(216 100% 45%)",
   success: "#30A46C",
   danger: "#e5484D",
   overlay: "rgba(0, 0, 0, 0.7)",
-  accentBg: "#3385FF",
+  accentBg: "hsl(216 100% 50%)",
   textOnAccent: "#fdfcfd",
 } as const satisfies ThemeColors;
 

diff --git a/packages/thirdweb/src/react/web/wallets/in-app/InAppWalletFormUI.tsx b/packages/thirdweb/src/react/web/wallets/in-app/InAppWalletFormUI.tsx
@@ -172,22 +172,26 @@ export const InAppWalletFormUI = (props: InAppWalletFormUIProps) => {
       }}
     >
       {config?.metadata?.image && (
-        <Img
-          loading="eager"
-          client={client}
-          style={{
-            maxHeight: "100px",
-            maxWidth: "300px",
-            margin: "auto",
-          }}
-          src={config.metadata.image.src}
-          alt={config.metadata.image.alt}
-          width={Math.min(config.metadata.image.width ?? 300, 300)?.toString()}
-          height={Math.min(
-            config.metadata.image.height ?? 100,
-            100,
-          )?.toString()}
-        />
+        <Container flex="row" center="both">
+          <Img
+            loading="eager"
+            client={client}
+            style={{
+              maxHeight: "100px",
+              maxWidth: "300px",
+            }}
+            src={config.metadata.image.src}
+            alt={config.metadata.image.alt}
+            width={Math.min(
+              config.metadata.image.width ?? 300,
+              300,
+            )?.toString()}
+            height={Math.min(
+              config.metadata.image.height ?? 100,
+              100,
+            )?.toString()}
+          />
+        </Container>
       )}
 
       {/* Social Login */}