From 653b1a0c908666291f5a9f90d6edcca50eb92bd9 Mon Sep 17 00:00:00 2001
From: Albert Folch <albertfolch@redeemeum.com>
Date: Mon, 11 Dec 2023 18:35:40 +0100
Subject: [PATCH 1/2] fix: responsiveness header redemption widget

---
 .../src/components/magicLink/Login.tsx        | 12 ++--
 .../Redeem/Confirmation/ConfirmationView.tsx  |  7 +--
 .../ContractualAgreementView.tsx              |  4 +-
 .../Redeem/ExchangePolicy/ExchangePolicy.tsx  |  2 +-
 .../ExchangeFullDescriptionView.tsx           |  4 +-
 .../Redeem/ExchangeView/ExchangeView.tsx      |  2 +-
 .../Redeem/ExchangeView/RedeemSuccess.tsx     |  7 +--
 .../cancellation/CancellationView.tsx         |  4 +-
 .../expireVoucher/ExpireVoucherView.tsx       |  7 ++-
 .../LicenseAgreementView.tsx                  |  4 +-
 .../components/Redeem/MyItems/MyItems.tsx     |  4 +-
 .../Redeem/RedeemForm/RedeemFormView.tsx      |  7 +--
 .../modal/components/Redeem/RedeemHeader.tsx  |  4 ++
 .../components/Redeem/RedeemNonModal.tsx      |  7 +--
 .../StepsOverview/PurchaseOverviewView.tsx    | 13 ++--
 .../Redeem/StepsOverview/StepsOverview.tsx    |  7 +--
 .../src/components/modal/nonModal/Header.tsx  | 59 +++++++++++++------
 .../src/components/wallet/ConnectButton.tsx   | 46 +++++++++------
 18 files changed, 112 insertions(+), 88 deletions(-)
 create mode 100644 packages/react-kit/src/components/modal/components/Redeem/RedeemHeader.tsx

diff --git a/packages/react-kit/src/components/magicLink/Login.tsx b/packages/react-kit/src/components/magicLink/Login.tsx
index c83cb8f60..d14c64af3 100644
--- a/packages/react-kit/src/components/magicLink/Login.tsx
+++ b/packages/react-kit/src/components/magicLink/Login.tsx
@@ -4,12 +4,10 @@ import { useUser } from "./UserContext";
 import { useMagic } from "../../hooks";
 import { Button } from "../buttons/Button";
 import { Spinner } from "../ui/loading/Spinner";
-
-type MagicLoginButtonProps = Omit<
-  Parameters<typeof Button>[0],
-  "onClick" | "disabled"
->;
-export const MagicLoginButton = (props: MagicLoginButtonProps) => {
+type MagicLoginButtonProps = {
+  buttonProps: Omit<Parameters<typeof Button>[0], "onClick" | "disabled">;
+};
+export const MagicLoginButton = ({ buttonProps }: MagicLoginButtonProps) => {
   const magic = useMagic();
   const { setUser } = useUser();
   const [disabled, setDisabled] = useState(false);
@@ -35,7 +33,7 @@ export const MagicLoginButton = (props: MagicLoginButtonProps) => {
   };
 
   return (
-    <Button {...props} onClick={connect} disabled={disabled}>
+    <Button {...buttonProps} onClick={connect} disabled={disabled}>
       {loading ? (
         <>
           Loading
diff --git a/packages/react-kit/src/components/modal/components/Redeem/Confirmation/ConfirmationView.tsx b/packages/react-kit/src/components/modal/components/Redeem/Confirmation/ConfirmationView.tsx
index 8d86ec8a9..694bc4cf6 100644
--- a/packages/react-kit/src/components/modal/components/Redeem/Confirmation/ConfirmationView.tsx
+++ b/packages/react-kit/src/components/modal/components/Redeem/Confirmation/ConfirmationView.tsx
@@ -6,6 +6,7 @@ import { NonModalProps, useNonModalContext } from "../../../nonModal/NonModal";
 import Typography from "../../../../ui/Typography";
 import { theme } from "../../../../../theme";
 import { useAccount } from "wagmi";
+import { RedeemHeader } from "../RedeemHeader";
 
 const colors = theme.colors.light;
 
@@ -34,11 +35,7 @@ export function ConfirmationView({
   useEffect(() => {
     dispatch({
       payload: {
-        headerComponent: (
-          <Typography tag="h3" $width="100%">
-            Redeem your item
-          </Typography>
-        ),
+        headerComponent: RedeemHeader,
         contentStyle: {
           background: colors.white
         }
diff --git a/packages/react-kit/src/components/modal/components/Redeem/ContractualAgreementView/ContractualAgreementView.tsx b/packages/react-kit/src/components/modal/components/Redeem/ContractualAgreementView/ContractualAgreementView.tsx
index 9d1841947..3f08e4ba8 100644
--- a/packages/react-kit/src/components/modal/components/Redeem/ContractualAgreementView/ContractualAgreementView.tsx
+++ b/packages/react-kit/src/components/modal/components/Redeem/ContractualAgreementView/ContractualAgreementView.tsx
@@ -21,13 +21,13 @@ export function ContractualAgreementView({ onBackClick, exchange }: Props) {
     dispatch({
       payload: {
         headerComponent: (
-          <Grid>
+          <Grid style={{ flex: "1" }}>
             <ArrowLeft
               onClick={onBackClick}
               size={32}
               style={{ cursor: "pointer" }}
             />
-            <Typography tag="h3">Contractual Agreement</Typography>
+            <h3 style={{ width: "100%", flex: 1 }}>Contractual Agreement</h3>
           </Grid>
         ),
         contentStyle: {
diff --git a/packages/react-kit/src/components/modal/components/Redeem/ExchangePolicy/ExchangePolicy.tsx b/packages/react-kit/src/components/modal/components/Redeem/ExchangePolicy/ExchangePolicy.tsx
index 0d7b698b1..3fc654df6 100644
--- a/packages/react-kit/src/components/modal/components/Redeem/ExchangePolicy/ExchangePolicy.tsx
+++ b/packages/react-kit/src/components/modal/components/Redeem/ExchangePolicy/ExchangePolicy.tsx
@@ -32,7 +32,7 @@ export function ExchangePolicy({
     dispatch({
       payload: {
         headerComponent: (
-          <Grid gap="1rem">
+          <Grid gap="1rem" style={{ flex: "1" }}>
             <ArrowLeft
               onClick={onBackClick}
               size={32}
diff --git a/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/ExchangeFullDescriptionView/ExchangeFullDescriptionView.tsx b/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/ExchangeFullDescriptionView/ExchangeFullDescriptionView.tsx
index 1b42c73e4..a5215507d 100644
--- a/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/ExchangeFullDescriptionView/ExchangeFullDescriptionView.tsx
+++ b/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/ExchangeFullDescriptionView/ExchangeFullDescriptionView.tsx
@@ -19,13 +19,13 @@ export function ExchangeFullDescriptionView({ onBackClick, exchange }: Props) {
     dispatch({
       payload: {
         headerComponent: (
-          <Grid>
+          <Grid style={{ flex: "1" }}>
             <ArrowLeft
               onClick={onBackClick}
               size={32}
               style={{ cursor: "pointer" }}
             />
-            <Typography tag="h3">
+            <Typography tag="h3" style={{flex: '1'}}>
               {exchange?.offer.metadata.name || ""}
             </Typography>
           </Grid>
diff --git a/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/ExchangeView.tsx b/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/ExchangeView.tsx
index 119e7186f..bbfafbfa5 100644
--- a/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/ExchangeView.tsx
+++ b/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/ExchangeView.tsx
@@ -127,7 +127,7 @@ export function ExchangeView({
     dispatch({
       payload: {
         headerComponent: (
-          <Grid gap="1rem">
+          <Grid gap="1rem" style={{ flex: "1" }}>
             <House
               onClick={onHouseClick}
               size={32}
diff --git a/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/RedeemSuccess.tsx b/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/RedeemSuccess.tsx
index b1f364bdd..7880a8d3d 100644
--- a/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/RedeemSuccess.tsx
+++ b/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/RedeemSuccess.tsx
@@ -16,6 +16,7 @@ import { Button } from "../../../../buttons/Button";
 import GridContainer from "../../../../ui/GridContainer";
 import { useRedemptionContext } from "../../../../widgets/redemption/provider/RedemptionContext";
 import { useNonModalContext } from "../../../nonModal/NonModal";
+import { RedeemHeader } from "../RedeemHeader";
 
 const colors = theme.colors.light;
 
@@ -61,15 +62,13 @@ export function RedeemSuccess({
     dispatch({
       payload: {
         headerComponent: (
-          <Grid>
+          <Grid style={{ flex: "1" }}>
             <House
               onClick={onHouseClick}
               size={32}
               style={{ cursor: "pointer", flexShrink: 0 }}
             />
-            <Typography tag="h3" $width="100%">
-              Redeem your item
-            </Typography>
+            {RedeemHeader}
           </Grid>
         ),
         contentStyle: {
diff --git a/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/cancellation/CancellationView.tsx b/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/cancellation/CancellationView.tsx
index 566797ba6..8e26494da 100644
--- a/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/cancellation/CancellationView.tsx
+++ b/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/cancellation/CancellationView.tsx
@@ -31,13 +31,13 @@ export const CancellationView: React.FC<CancellationViewProps> = ({
     dispatch({
       payload: {
         headerComponent: isCancelModeOnly ? (
-          <Grid gap="1rem">
+          <Grid gap="1rem" style={{ flex: "1" }}>
             <Typography tag="h3" style={{ flex: "1 1" }}>
               Cancel exchange
             </Typography>
           </Grid>
         ) : (
-          <Grid gap="1rem">
+          <Grid gap="1rem" style={{ flex: "1" }}>
             <ArrowLeft
               onClick={onBackClick}
               size={32}
diff --git a/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/expireVoucher/ExpireVoucherView.tsx b/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/expireVoucher/ExpireVoucherView.tsx
index e3077f3fe..43898b671 100644
--- a/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/expireVoucher/ExpireVoucherView.tsx
+++ b/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/expireVoucher/ExpireVoucherView.tsx
@@ -5,6 +5,7 @@ import { Exchange } from "../../../../../../types/exchange";
 import ExpireVoucher, { ExpireVoucherProps } from "./ExpireVoucher";
 import { useNonModalContext } from "../../../../nonModal/NonModal";
 import { theme } from "../../../../../../theme";
+import Grid from "../../../../../ui/Grid";
 
 const colors = theme.colors.light;
 export interface ExpireVoucherViewProps {
@@ -23,14 +24,14 @@ export const ExpireVoucherView: React.FC<ExpireVoucherViewProps> = ({
     dispatch({
       payload: {
         headerComponent: (
-          <>
+          <Grid style={{ flex: "1" }} gap="1rem">
             <ArrowLeft
               onClick={() => onBackClick()}
               size={32}
               style={{ cursor: "pointer" }}
             />
-            <Typography tag="h3">Expire voucher</Typography>
-          </>
+            <h3 style={{ width: "100%", flex: 1 }}>Expire voucher</h3>
+          </Grid>
         ),
         contentStyle: {
           background: colors.white
diff --git a/packages/react-kit/src/components/modal/components/Redeem/LicenseAgreementView/LicenseAgreementView.tsx b/packages/react-kit/src/components/modal/components/Redeem/LicenseAgreementView/LicenseAgreementView.tsx
index c9bdf9a20..ab251a24d 100644
--- a/packages/react-kit/src/components/modal/components/Redeem/LicenseAgreementView/LicenseAgreementView.tsx
+++ b/packages/react-kit/src/components/modal/components/Redeem/LicenseAgreementView/LicenseAgreementView.tsx
@@ -19,13 +19,13 @@ export function LicenseAgreementView({ onBackClick, exchange }: Props) {
     dispatch({
       payload: {
         headerComponent: (
-          <Grid>
+          <Grid style={{ flex: "1" }} gap="1rem">
             <ArrowLeft
               onClick={onBackClick}
               size={32}
               style={{ cursor: "pointer" }}
             />
-            <Typography tag="h3">License Agreement</Typography>
+            <h3 style={{ width: "100%", flex: 1 }}>License Agreement</h3>
           </Grid>
         ),
         contentStyle: {
diff --git a/packages/react-kit/src/components/modal/components/Redeem/MyItems/MyItems.tsx b/packages/react-kit/src/components/modal/components/Redeem/MyItems/MyItems.tsx
index adae75451..8718e23dd 100644
--- a/packages/react-kit/src/components/modal/components/Redeem/MyItems/MyItems.tsx
+++ b/packages/react-kit/src/components/modal/components/Redeem/MyItems/MyItems.tsx
@@ -47,9 +47,7 @@ export function MyItems({
     dispatch({
       payload: {
         headerComponent: (
-          <Typography tag="h3" $width="100%">
-            Manage your exchanges
-          </Typography>
+          <h3 style={{ width: "100%", flex: 1 }}>Manage your exchanges</h3>
         ),
         contentStyle: {
           background: colors.lightGrey
diff --git a/packages/react-kit/src/components/modal/components/Redeem/RedeemForm/RedeemFormView.tsx b/packages/react-kit/src/components/modal/components/Redeem/RedeemForm/RedeemFormView.tsx
index bca563f12..3ba6f0f6d 100644
--- a/packages/react-kit/src/components/modal/components/Redeem/RedeemForm/RedeemFormView.tsx
+++ b/packages/react-kit/src/components/modal/components/Redeem/RedeemForm/RedeemFormView.tsx
@@ -5,6 +5,7 @@ import { useNonModalContext } from "../../../nonModal/NonModal";
 import { Exchange } from "../../../../../types/exchange";
 import { theme } from "../../../../../theme";
 import { useAccount } from "../../../../../hooks/connection/connection";
+import { RedeemHeader } from "../RedeemHeader";
 
 const colors = theme.colors.light;
 
@@ -26,11 +27,7 @@ export default function RedeemFormView({
   useEffect(() => {
     dispatch({
       payload: {
-        headerComponent: (
-          <Typography tag="h3" $width="100%">
-            Redeem your item
-          </Typography>
-        ),
+        headerComponent: RedeemHeader,
         contentStyle: {
           background: colors.white
         }
diff --git a/packages/react-kit/src/components/modal/components/Redeem/RedeemHeader.tsx b/packages/react-kit/src/components/modal/components/Redeem/RedeemHeader.tsx
new file mode 100644
index 000000000..08ea2b3d0
--- /dev/null
+++ b/packages/react-kit/src/components/modal/components/Redeem/RedeemHeader.tsx
@@ -0,0 +1,4 @@
+import React from "react";
+export const RedeemHeader = (
+  <h3 style={{ width: "100%", flex: 1 }}>Redeem your item</h3>
+);
diff --git a/packages/react-kit/src/components/modal/components/Redeem/RedeemNonModal.tsx b/packages/react-kit/src/components/modal/components/Redeem/RedeemNonModal.tsx
index 12e0b67ae..e8c0ea954 100644
--- a/packages/react-kit/src/components/modal/components/Redeem/RedeemNonModal.tsx
+++ b/packages/react-kit/src/components/modal/components/Redeem/RedeemNonModal.tsx
@@ -48,6 +48,7 @@ import {
 import { BosonFooter } from "./BosonFooter";
 import { theme } from "../../../../theme";
 import { useAccount } from "../../../../hooks/connection/connection";
+import { RedeemHeader } from "./RedeemHeader";
 
 const colors = theme.colors.light;
 enum ActiveStep {
@@ -97,11 +98,7 @@ export default function RedeemWrapper({
     <NonModal
       props={{
         hideModal,
-        headerComponent: (
-          <Typography tag="h3" $width="100%">
-            Redeem your item
-          </Typography>
-        ),
+        headerComponent: RedeemHeader,
         footerComponent: <BosonFooter />,
         contentStyle: {
           background: colors.white
diff --git a/packages/react-kit/src/components/modal/components/Redeem/StepsOverview/PurchaseOverviewView.tsx b/packages/react-kit/src/components/modal/components/Redeem/StepsOverview/PurchaseOverviewView.tsx
index 174ce9705..968127243 100644
--- a/packages/react-kit/src/components/modal/components/Redeem/StepsOverview/PurchaseOverviewView.tsx
+++ b/packages/react-kit/src/components/modal/components/Redeem/StepsOverview/PurchaseOverviewView.tsx
@@ -3,6 +3,7 @@ import React, { useEffect } from "react";
 import PurchaseOverview from "./PurchaseOverview";
 import { useNonModalContext } from "../../../nonModal/NonModal";
 import { theme } from "../../../../../theme";
+import Grid from "../../../../ui/Grid";
 
 const colors = theme.colors.light;
 type Props = {
@@ -14,11 +15,13 @@ export function PurchaseOverviewView({ onBackClick }: Props) {
     dispatch({
       payload: {
         headerComponent: (
-          <ArrowLeft
-            onClick={onBackClick}
-            size={32}
-            style={{ cursor: "pointer", flexShrink: 0 }}
-          />
+          <Grid style={{ flex: "1" }}>
+            <ArrowLeft
+              onClick={onBackClick}
+              size={32}
+              style={{ cursor: "pointer" }}
+            />
+          </Grid>
         ),
         contentStyle: {
           background: colors.white
diff --git a/packages/react-kit/src/components/modal/components/Redeem/StepsOverview/StepsOverview.tsx b/packages/react-kit/src/components/modal/components/Redeem/StepsOverview/StepsOverview.tsx
index f9268a8cb..63afb54e6 100644
--- a/packages/react-kit/src/components/modal/components/Redeem/StepsOverview/StepsOverview.tsx
+++ b/packages/react-kit/src/components/modal/components/Redeem/StepsOverview/StepsOverview.tsx
@@ -9,6 +9,7 @@ import { breakpoint } from "../../../../../lib/ui/breakpoint";
 import { useNonModalContext } from "../../../nonModal/NonModal";
 import Typography from "../../../../ui/Typography";
 import { theme } from "../../../../../theme";
+import { RedeemHeader } from "../RedeemHeader";
 
 const colors = theme.colors.light;
 const CommitStepWrapper = styled.div`
@@ -50,11 +51,7 @@ export default function StepsOverview({ onNextClick }: Props) {
   useEffect(() => {
     dispatch({
       payload: {
-        headerComponent: (
-          <Typography tag="h3" $width="100%">
-            Redeem your item
-          </Typography>
-        ),
+        headerComponent: RedeemHeader,
         contentStyle: {
           background: colors.white
         }
diff --git a/packages/react-kit/src/components/modal/nonModal/Header.tsx b/packages/react-kit/src/components/modal/nonModal/Header.tsx
index 1d50749e0..d45f79707 100644
--- a/packages/react-kit/src/components/modal/nonModal/Header.tsx
+++ b/packages/react-kit/src/components/modal/nonModal/Header.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import React, { Fragment, ReactNode } from "react";
 import { theme } from "../../../theme";
 import styled from "styled-components";
 import { X } from "phosphor-react";
@@ -6,21 +6,33 @@ import Grid from "../../ui/Grid";
 import ConnectButton from "../../wallet/ConnectButton";
 import ThemedButton from "../../ui/ThemedButton";
 import Typography from "../../ui/Typography";
+import { useBreakpoints } from "../../../hooks/useBreakpoints";
 
 const colors = theme.colors.light;
-const Wrapper = styled(Typography)<{ $title?: string }>`
+const Wrapper = styled.div<{ $flexWrap: string }>`
+  container-type: inline-size;
   position: relative;
-
+  width: 100%;
   text-align: left;
-  padding: 1rem 2rem;
+  padding: 1rem 1rem 1rem 2rem;
   display: flex;
+  flex-wrap: ${({ $flexWrap }) => $flexWrap};
   border-bottom: 2px solid ${colors.border};
-  align-items: center;
+  align-items: flex-end;
   justify-content: space-between;
   gap: 0.5rem;
+
+  > * {
+    margin: 0;
+    align-self: center;
+  }
 `;
 
 const Close = styled(X)`
+  && {
+    stroke: unset;
+  }
+
   line {
     stroke: ${colors.darkGrey};
   }
@@ -37,22 +49,31 @@ const Header: React.FC<HeaderProps> = ({
   closable,
   handleOnClose
 }) => {
+  const { isLteXS } = useBreakpoints();
+  const InnerContainer = isLteXS ? Grid : Fragment;
   return (
-    <>
-      {HeaderComponent && (
-        <Wrapper tag="div" margin="0">
-          {HeaderComponent}
-          <Grid justifyContent="flex-end">
-            <ConnectButton showChangeWallet />
-            {closable && (
-              <ThemedButton data-close theme="blank" onClick={handleOnClose}>
-                <Close size={32} />
-              </ThemedButton>
-            )}
-          </Grid>
-        </Wrapper>
+    <Wrapper $flexWrap={isLteXS ? "wrap" : "nowrap"}>
+      <InnerContainer>
+        {HeaderComponent}
+        {!isLteXS && <ConnectButton showChangeWallet />}
+        {closable && (
+          <ThemedButton
+            data-close
+            theme="blank"
+            onClick={handleOnClose}
+            id="close"
+          >
+            <Close size={32} />
+          </ThemedButton>
+        )}
+      </InnerContainer>
+
+      {isLteXS && (
+        <Grid justifyContent="flex-end">
+          <ConnectButton showChangeWallet />
+        </Grid>
       )}
-    </>
+    </Wrapper>
   );
 };
 
diff --git a/packages/react-kit/src/components/wallet/ConnectButton.tsx b/packages/react-kit/src/components/wallet/ConnectButton.tsx
index f5d488922..c1c1f970c 100644
--- a/packages/react-kit/src/components/wallet/ConnectButton.tsx
+++ b/packages/react-kit/src/components/wallet/ConnectButton.tsx
@@ -9,7 +9,7 @@ import { Button } from "../buttons/Button";
 import ThemedButton from "../ui/ThemedButton";
 import { useBreakpoints } from "../../hooks/useBreakpoints";
 import { saveItemInStorage } from "../widgets/finance/storage/useLocalStorage";
-import { Wallet } from "phosphor-react";
+import { SignOut, Wallet } from "phosphor-react";
 import { useIsMagicLoggedIn } from "../../hooks";
 import { useAccount, useChainId } from "../../hooks/connection/connection";
 import { useDisconnect } from "../../hooks/connection/useDisconnect";
@@ -60,14 +60,19 @@ interface Props {
   showAddress?: boolean;
   showChangeWallet?: boolean;
 }
-
+const iconProps = {
+  size: 32,
+  style: {
+    cursor: "pointer"
+  } as const
+} as const;
 export default function ConnectButton({
   navigationBarPosition = "",
   showAddress = true,
   showChangeWallet,
   ...rest
 }: Props) {
-  const { isLteXS } = useBreakpoints();
+  const { isLteXS, isLteS } = useBreakpoints();
   const isSideBar = ["left", "right"].includes(navigationBarPosition);
   const buttonPadding = isSideBar ? "0.75rem 1rem" : "";
   const justifyContent = isSideBar ? "center" : "";
@@ -89,7 +94,7 @@ export default function ConnectButton({
         account && Sentry.setTag("wallet_address", account?.address);
 
         return (
-          <div style={{ display: "flex", gap: 12 }} {...rest}>
+          <div className="rainbow" style={{ display: "flex", gap: '12px' }} {...rest}>
             <InnerProvider>
               <InnerContext.Consumer>
                 {({ isMagicLoggedIn, chainId, globalAccount, disconnect }) => {
@@ -104,7 +109,12 @@ export default function ConnectButton({
 
                       return (
                         <>
-                          <MagicLoginButton />
+                          <MagicLoginButton
+                            buttonProps={{
+                              size: isLteXS ? "small" : "regular",
+                              variant: "primaryFill"
+                            }}
+                          />
                           <Button
                             onClick={() => {
                               saveItemInStorage(
@@ -149,6 +159,8 @@ export default function ConnectButton({
                         style={{
                           display: "flex",
                           gap: 12,
+                          flexWrap: "wrap",
+                          alignItems: "center",
                           ...(justifyContent && {
                             justifyContent
                           }),
@@ -157,11 +169,7 @@ export default function ConnectButton({
                       >
                         {showChangeWallet && !isMagicLoggedIn && (
                           <Wallet
-                            style={{
-                              cursor: "pointer",
-                              height: "100%"
-                            }}
-                            size={32}
+                            {...iconProps}
                             onClick={async () => {
                               try {
                                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -202,13 +210,17 @@ export default function ConnectButton({
                           )}
                           {showAddress && account?.displayName}
                         </ThemedButton>
-                        <ThemedButton
-                          theme="outline"
-                          size={isLteXS ? "small" : "regular"}
-                          onClick={disconnect}
-                        >
-                          Disconnect
-                        </ThemedButton>
+                        {isLteS ? (
+                          <SignOut {...iconProps} onClick={disconnect} />
+                        ) : (
+                          <ThemedButton
+                            theme="outline"
+                            size={isLteXS ? "small" : "regular"}
+                            onClick={disconnect}
+                          >
+                            Disconnect
+                          </ThemedButton>
+                        )}
                       </div>
                     );
                   })();

From e95bd50aa44a00bc81ee421bb47c256008fbd3b1 Mon Sep 17 00:00:00 2001
From: Albert Folch <albertfolch@redeemeum.com>
Date: Tue, 12 Dec 2023 17:55:03 +0100
Subject: [PATCH 2/2] fix: lint

---
 .../components/Redeem/Confirmation/ConfirmationView.tsx     | 1 -
 .../ContractualAgreementView/ContractualAgreementView.tsx   | 1 -
 .../ExchangeFullDescriptionView.tsx                         | 2 +-
 .../Redeem/LicenseAgreementView/LicenseAgreementView.tsx    | 1 -
 .../modal/components/Redeem/StepsOverview/StepsOverview.tsx | 1 -
 packages/react-kit/src/components/modal/nonModal/Header.tsx | 1 -
 packages/react-kit/src/components/wallet/ConnectButton.tsx  | 6 +++++-
 7 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/packages/react-kit/src/components/modal/components/Redeem/Confirmation/ConfirmationView.tsx b/packages/react-kit/src/components/modal/components/Redeem/Confirmation/ConfirmationView.tsx
index 694bc4cf6..036eab21a 100644
--- a/packages/react-kit/src/components/modal/components/Redeem/Confirmation/ConfirmationView.tsx
+++ b/packages/react-kit/src/components/modal/components/Redeem/Confirmation/ConfirmationView.tsx
@@ -3,7 +3,6 @@ import React, { useEffect } from "react";
 import { Exchange } from "../../../../../types/exchange";
 import Confirmation, { ConfirmationProps } from "./Confirmation";
 import { NonModalProps, useNonModalContext } from "../../../nonModal/NonModal";
-import Typography from "../../../../ui/Typography";
 import { theme } from "../../../../../theme";
 import { useAccount } from "wagmi";
 import { RedeemHeader } from "../RedeemHeader";
diff --git a/packages/react-kit/src/components/modal/components/Redeem/ContractualAgreementView/ContractualAgreementView.tsx b/packages/react-kit/src/components/modal/components/Redeem/ContractualAgreementView/ContractualAgreementView.tsx
index 3f08e4ba8..bd9ed4080 100644
--- a/packages/react-kit/src/components/modal/components/Redeem/ContractualAgreementView/ContractualAgreementView.tsx
+++ b/packages/react-kit/src/components/modal/components/Redeem/ContractualAgreementView/ContractualAgreementView.tsx
@@ -1,6 +1,5 @@
 import React, { useEffect } from "react";
 import Grid from "../../../../ui/Grid";
-import Typography from "../../../../ui/Typography";
 import { ArrowLeft } from "phosphor-react";
 import { Exchange } from "../../../../../types/exchange";
 import ContractualAgreement from "../../../../contractualAgreement/ContractualAgreement";
diff --git a/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/ExchangeFullDescriptionView/ExchangeFullDescriptionView.tsx b/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/ExchangeFullDescriptionView/ExchangeFullDescriptionView.tsx
index a5215507d..dccec5d8f 100644
--- a/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/ExchangeFullDescriptionView/ExchangeFullDescriptionView.tsx
+++ b/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/ExchangeFullDescriptionView/ExchangeFullDescriptionView.tsx
@@ -25,7 +25,7 @@ export function ExchangeFullDescriptionView({ onBackClick, exchange }: Props) {
               size={32}
               style={{ cursor: "pointer" }}
             />
-            <Typography tag="h3" style={{flex: '1'}}>
+            <Typography tag="h3" style={{ flex: "1" }}>
               {exchange?.offer.metadata.name || ""}
             </Typography>
           </Grid>
diff --git a/packages/react-kit/src/components/modal/components/Redeem/LicenseAgreementView/LicenseAgreementView.tsx b/packages/react-kit/src/components/modal/components/Redeem/LicenseAgreementView/LicenseAgreementView.tsx
index ab251a24d..0444214a6 100644
--- a/packages/react-kit/src/components/modal/components/Redeem/LicenseAgreementView/LicenseAgreementView.tsx
+++ b/packages/react-kit/src/components/modal/components/Redeem/LicenseAgreementView/LicenseAgreementView.tsx
@@ -1,6 +1,5 @@
 import React, { useEffect } from "react";
 import Grid from "../../../../ui/Grid";
-import Typography from "../../../../ui/Typography";
 import { ArrowLeft } from "phosphor-react";
 import { Exchange } from "../../../../../types/exchange";
 import License from "../../../../license/License";
diff --git a/packages/react-kit/src/components/modal/components/Redeem/StepsOverview/StepsOverview.tsx b/packages/react-kit/src/components/modal/components/Redeem/StepsOverview/StepsOverview.tsx
index 63afb54e6..c271bb192 100644
--- a/packages/react-kit/src/components/modal/components/Redeem/StepsOverview/StepsOverview.tsx
+++ b/packages/react-kit/src/components/modal/components/Redeem/StepsOverview/StepsOverview.tsx
@@ -7,7 +7,6 @@ import { CommitStep } from "./style";
 import Step from "../../../../ui/Step";
 import { breakpoint } from "../../../../../lib/ui/breakpoint";
 import { useNonModalContext } from "../../../nonModal/NonModal";
-import Typography from "../../../../ui/Typography";
 import { theme } from "../../../../../theme";
 import { RedeemHeader } from "../RedeemHeader";
 
diff --git a/packages/react-kit/src/components/modal/nonModal/Header.tsx b/packages/react-kit/src/components/modal/nonModal/Header.tsx
index d45f79707..dcbb6054f 100644
--- a/packages/react-kit/src/components/modal/nonModal/Header.tsx
+++ b/packages/react-kit/src/components/modal/nonModal/Header.tsx
@@ -5,7 +5,6 @@ import { X } from "phosphor-react";
 import Grid from "../../ui/Grid";
 import ConnectButton from "../../wallet/ConnectButton";
 import ThemedButton from "../../ui/ThemedButton";
-import Typography from "../../ui/Typography";
 import { useBreakpoints } from "../../../hooks/useBreakpoints";
 
 const colors = theme.colors.light;
diff --git a/packages/react-kit/src/components/wallet/ConnectButton.tsx b/packages/react-kit/src/components/wallet/ConnectButton.tsx
index c1c1f970c..7fd423a57 100644
--- a/packages/react-kit/src/components/wallet/ConnectButton.tsx
+++ b/packages/react-kit/src/components/wallet/ConnectButton.tsx
@@ -94,7 +94,11 @@ export default function ConnectButton({
         account && Sentry.setTag("wallet_address", account?.address);
 
         return (
-          <div className="rainbow" style={{ display: "flex", gap: '12px' }} {...rest}>
+          <div
+            className="rainbow"
+            style={{ display: "flex", gap: "12px" }}
+            {...rest}
+          >
             <InnerProvider>
               <InnerContext.Consumer>
                 {({ isMagicLoggedIn, chainId, globalAccount, disconnect }) => {