ctas responsive

bosonprotocol · Jan 16, 2025 · 68fc691 · 68fc691
1 parent d8bbc08
commit 68fc691
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 9 deletions.
diff --git a/...ges/react-kit/src/components/modal/components/Commit/DetailView/InnerCommitDetailView.tsx b/...ges/react-kit/src/components/modal/components/Commit/DetailView/InnerCommitDetailView.tsx
@@ -128,13 +128,10 @@ export default function InnerCommitDetailView(
   const [exchangeId, setExchangeId] = useState<string | undefined>(
     externalExchangeId
   );
-  const handleSetExchangeId = useCallback(
-    (newExchangeId: string) => {
-      setStatus("success");
-      setExchangeId(newExchangeId);
-    },
-    [externalExchangeId]
-  );
+  const handleSetExchangeId = useCallback((newExchangeId: string) => {
+    setStatus("success");
+    setExchangeId(newExchangeId);
+  }, []);
   useEffect(() => {
     if (externalExchangeId) {
       handleSetExchangeId(externalExchangeId);

diff --git a/packages/react-kit/src/components/modal/components/Commit/DetailView/RedeemWhatsNext.tsx b/packages/react-kit/src/components/modal/components/Commit/DetailView/RedeemWhatsNext.tsx
@@ -41,11 +41,27 @@ const DividerWrapper = styled.div`
 `;
 
 const Wrapper = styled(Grid)`
+  container-type: inline-size;
   background-color: ${getCssVar("--background-accent-color")};
   box-shadow: 0px 4.318px 40px 0px rgba(21, 30, 52, 0.1);
   padding: 1rem;
   margin: 1rem 0;
 `;
+const containerBreakpoint = "400px";
+const CtaGrid = styled(Grid)`
+  flex-direction: column;
+  gap: 1rem;
+  > * {
+    width: 100%;
+  }
+  @container (width > ${containerBreakpoint}) {
+    flex-direction: row;
+    gap: 2rem;
+    > * {
+      flex: 1 1 100%;
+    }
+  }
+`;
 
 const InfoWrapper = styled(Grid)`
   background-color: ${getCssVar("--background-color")};
@@ -97,7 +113,7 @@ export const RedeemWhatsNext = ({
       <Typography fontWeight={600}>What's next?</Typography>
       {exchange && (
         <>
-          <Grid gap="2rem">
+          <CtaGrid>
             {requestShipmentProps && (
               <Button
                 style={{ flex: "1 1 50%" }}
@@ -131,7 +147,7 @@ export const RedeemWhatsNext = ({
                 Trade Physical NFT
               </ThemedButton>
             </a>
-          </Grid>
+          </CtaGrid>
           <DividerWrapper>
             <hr />
           </DividerWrapper>