fix: responsiveness header redemption widget

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

packages/react-kit/src/components/magicLink/MagicContext.tsx

@@ -56,6 +56,7 @@ export const InnerMagicProvider = ({
       .catch(() => console.info("magic link could not be preloaded"));
     return {
       magic: magic as typeof magic & { uuid: string },
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       magicProvider: new ethers.providers.Web3Provider(magic.rpcProvider as any)
     }; // return magic provider too
   }, [chainId, magicLinkKey, rpcUrls]);

packages/react-kit/src/components/modal/components/Redeem/Confirmation/ConfirmationView.tsx

@@ -3,8 +3,8 @@ 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 { RedeemHeader } from "../RedeemHeader";
 import { useAccount } from "../../../../../hooks/connection/connection";
 
 const colors = theme.colors.light;
@@ -34,11 +34,7 @@ export function ConfirmationView({
   useEffect(() => {
     dispatch({
       payload: {
-        headerComponent: (
-          <Typography tag="h3" $width="100%">
-            Redeem your item
-          </Typography>
-        ),
+        headerComponent: RedeemHeader,
         contentStyle: {
           background: colors.white
         }

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";
@@ -21,13 +20,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: {

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}

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>

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}

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: {

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}

packages/react-kit/src/components/modal/components/Redeem/ExchangeView/expireVoucher/ExpireVoucherView.tsx

@@ -1,10 +1,10 @@
 import React, { useEffect } from "react";
-import Typography from "../../../../../ui/Typography";
 import { ArrowLeft } from "phosphor-react";
 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 +23,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

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";
@@ -19,13 +18,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: {

packages/react-kit/src/components/modal/components/Redeem/MyItems/MyItems.tsx

@@ -3,7 +3,6 @@ import React, { useEffect } from "react";
 import { useBuyers } from "../../../../../hooks/useBuyers";
 import { Checkbox } from "../../../../form";
 import Loading from "../../../../ui/loading/Loading";
-import Typography from "../../../../ui/Typography";
 import Exchanges from "./Exchanges";
 import { ExchangesStates, WithExchangesData } from "./WithExchangesData";
 import { Exchange } from "../../../../../types/exchange";
@@ -47,9 +46,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

packages/react-kit/src/components/modal/components/Redeem/RedeemForm/RedeemFormView.tsx

@@ -1,10 +1,10 @@
 import React, { useEffect } from "react";
-import Typography from "../../../../ui/Typography";
 import RedeemForm from "./RedeemForm";
 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 +26,7 @@ export default function RedeemFormView({
   useEffect(() => {
     dispatch({
       payload: {
-        headerComponent: (
-          <Typography tag="h3" $width="100%">
-            Redeem your item
-          </Typography>
-        ),
+        headerComponent: RedeemHeader,
         contentStyle: {
           background: colors.white
         }

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>
+);

packages/react-kit/src/components/modal/components/Redeem/RedeemNonModal.tsx

@@ -39,7 +39,6 @@ import { ContactPreference } from "./const";
 import useCheckExchangePolicy from "../../../../hooks/useCheckExchangePolicy";
 import { useConvertionRate } from "../../../widgets/finance/convertion-rate/useConvertionRate";
 import NonModal, { NonModalProps } from "../../nonModal/NonModal";
-import Typography from "../../../ui/Typography";
 import { useConfigContext } from "../../../config/ConfigContext";
 import {
   RedemptionWidgetAction,
@@ -48,6 +47,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 {
@@ -98,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

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

packages/react-kit/src/components/modal/components/Redeem/StepsOverview/StepsOverview.tsx

@@ -7,8 +7,8 @@ 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";
 
 const colors = theme.colors.light;
 const CommitStepWrapper = styled.div`
@@ -50,11 +50,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
         }