From 1a5dd846a024d0f80ffa255b6ac2256c64e7dcd1 Mon Sep 17 00:00:00 2001
From: Albert Folch <albertfolch@redeemeum.com>
Date: Tue, 17 Dec 2024 16:51:20 +0100
Subject: [PATCH] wip

---
 .../widgets/roblox/components/ConnectRoblox.tsx     | 13 +++++++++++--
 .../src/stories/widgets/Roblox.stories.tsx          |  7 ++++++-
 2 files changed, 17 insertions(+), 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
index 70d971d6c..8416dd202 100644
--- 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
index c012adc4b..0dfd5c7a7 100644
--- 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
           },