wip

bosonprotocol · Dec 17, 2024 · 1a5dd84 · 1a5dd84
1 parent 38c4d4e
commit 1a5dd84
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/packages/react-kit/src/components/widgets/roblox/components/ConnectRoblox.tsx b/packages/react-kit/src/components/widgets/roblox/components/ConnectRoblox.tsx
@@ -31,10 +31,15 @@ import { useRobloxExchanges } from "../../../../hooks/roblox/useRobloxExchanges"
 import { LoginWithRoblox } from "./LoginWithRoblox";
 import { AccountDrawerProps } from "../../../wallet2/accountDrawer";
 
-const Wrapper = styled(Grid)`
+const Wrapper = styled(Grid)<{
+  $backgroundColor: CSSProperties["backgroundColor"];
+}>`
   container-type: inline-size;
   display: flex;
   flex-direction: row;
+  ${({ $backgroundColor }) => css`
+    background-color: ${$backgroundColor};
+  `}
 `;
 
 const StyledPower = styled(Power)`
@@ -249,6 +254,7 @@ export type ConnectRobloxProps = {
   theme: {
     gapInPx?: number;
     backgroundColor: CSSProperties["backgroundColor"];
+    stepsBackgroundSides: CSSProperties["backgroundColor"];
     lineBetweenStepsColor: CSSProperties["backgroundColor"];
     robloxCard: CardThemeProps;
     walletCard: CardThemeProps;
@@ -400,7 +406,10 @@ export const ConnectRoblox = forwardRef<HTMLDivElement, ConnectRobloxProps>(
     }, [address, isRobloxLoggedIn]);
     const isConnectWalletStepActive = activeStep >= 1 || !!address;
     return (
-      <Wrapper justifyContent="center">
+      <Wrapper
+        justifyContent="center"
+        $backgroundColor={theme.stepsBackgroundSides}
+      >
         <Step
           ref={ref}
           name="roblox"

diff --git a/packages/react-kit/src/stories/widgets/Roblox.stories.tsx b/packages/react-kit/src/stories/widgets/Roblox.stories.tsx
@@ -126,8 +126,11 @@ export const Base = {
     connectProps: {
       brand: "GYMSHARK",
       theme: {
-        gapInPx: 24,
+        stepsBackgroundSides: "white",
+        backgroundColor: "white",
+        lineBetweenStepsColor: colors.lightGrey,
         robloxCard: {
+          padding: "24px",
           title: {
             color: colors.black
           },
@@ -159,6 +162,7 @@ export const Base = {
           }
         },
         walletCard: {
+          padding: "24px",
           title: {
             color: colors.black
           },
@@ -215,6 +219,7 @@ export const Base = {
           }
         },
         signUpCard: {
+          padding: "24px",
           title: {
             color: colors.black
           },