From d54a1663721c65fdcde376dbfc9edeb54267d39c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yago=20Pajari=C3=B1o?= <yagopajarino@outlook.com>
Date: Tue, 17 Dec 2024 16:58:18 -0300
Subject: [PATCH 1/3] refactor: make new group responsive

re #559
---
 apps/dashboard/src/components/group-card.tsx         |  2 --
 .../new-group-stepper/access-mode-step.tsx           | 12 ++++++++----
 .../new-group-stepper/final-preview-step.tsx         |  2 +-
 .../new-group-stepper/general-info-step.tsx          | 11 ++++++-----
 .../components/new-group-stepper/group-size-step.tsx |  6 +++++-
 .../src/components/new-group-stepper/stepper-nav.tsx |  9 ++++++++-
 .../components/new-group-stepper/stepper-preview.tsx |  3 ++-
 apps/dashboard/src/pages/new-group.tsx               | 11 ++++++++---
 8 files changed, 38 insertions(+), 18 deletions(-)

diff --git a/apps/dashboard/src/components/group-card.tsx b/apps/dashboard/src/components/group-card.tsx
index 45fd1305..8b8490c0 100644
--- a/apps/dashboard/src/components/group-card.tsx
+++ b/apps/dashboard/src/components/group-card.tsx
@@ -39,8 +39,6 @@ export default function GroupCard({
             justify="space-between"
             fontFamily="DM Sans, sans-serif"
             p="24px"
-            minW="330px"
-            maxW="370px"
             h="280px"
         >
             <Box>
diff --git a/apps/dashboard/src/components/new-group-stepper/access-mode-step.tsx b/apps/dashboard/src/components/new-group-stepper/access-mode-step.tsx
index 61282abd..2c1fab3b 100644
--- a/apps/dashboard/src/components/new-group-stepper/access-mode-step.tsx
+++ b/apps/dashboard/src/components/new-group-stepper/access-mode-step.tsx
@@ -77,7 +77,10 @@ export default function AccessModeStep({
 
     return (
         <>
-            <HStack>
+            <HStack
+                overflowX={{ base: "scroll" }}
+                width={{ base: "100%", md: "auto" }}
+            >
                 {accessModes.map((accessMode: any) => (
                     <VStack
                         borderColor={
@@ -88,12 +91,13 @@ export default function AccessModeStep({
                         borderWidth="2px"
                         borderRadius="8px"
                         w="260px"
-                        h="210px"
+                        h={{ base: "250px", lg: "210px" }}
                         align="left"
                         spacing="0"
                         cursor="pointer"
                         onClick={() => setAccessMode(accessMode)}
                         key={accessMode}
+                        minW="200px"
                     >
                         <HStack
                             bgColor={
@@ -106,7 +110,7 @@ export default function AccessModeStep({
                             borderTopRadius="8px"
                             justify="space-between"
                         >
-                            <HStack spacing="3">
+                            <HStack spacing="3" h="50px">
                                 <Icon
                                     color={
                                         _accessMode === accessMode
@@ -331,7 +335,7 @@ export default function AccessModeStep({
                 <>
                     <Text pb="20px">Choose credentials</Text>
 
-                    <SimpleGrid columns={2} spacing={10}>
+                    <SimpleGrid columns={2} spacing={10} minW="300px">
                         <VStack>
                             <Text>Credentials</Text>
                             <VStack>
diff --git a/apps/dashboard/src/components/new-group-stepper/final-preview-step.tsx b/apps/dashboard/src/components/new-group-stepper/final-preview-step.tsx
index 549added..bc0da32d 100644
--- a/apps/dashboard/src/components/new-group-stepper/final-preview-step.tsx
+++ b/apps/dashboard/src/components/new-group-stepper/final-preview-step.tsx
@@ -91,7 +91,7 @@ export default function FinalPreviewStep({
                     Group preview
                 </Heading>
 
-                <Box zIndex="1">
+                <Box zIndex="1" w="100%">
                     <GroupCard {...group} />
                 </Box>
             </VStack>
diff --git a/apps/dashboard/src/components/new-group-stepper/general-info-step.tsx b/apps/dashboard/src/components/new-group-stepper/general-info-step.tsx
index 8c5eccfb..f0d88b6a 100644
--- a/apps/dashboard/src/components/new-group-stepper/general-info-step.tsx
+++ b/apps/dashboard/src/components/new-group-stepper/general-info-step.tsx
@@ -16,7 +16,8 @@ import {
     Box,
     ChakraProvider,
     extendTheme,
-    Tooltip
+    Tooltip,
+    Stack
 } from "@chakra-ui/react"
 import { FiHardDrive, FiZap } from "react-icons/fi"
 import { FaInfoCircle } from "react-icons/fa"
@@ -72,7 +73,7 @@ export default function GeneralInfoStep({
         <>
             <Text>What type of group is this?</Text>
 
-            <HStack>
+            <Stack direction={{ base: "column", lg: "row" }}>
                 {groupTypes.map((groupType: any) => (
                     <VStack
                         borderColor={
@@ -82,8 +83,8 @@ export default function GeneralInfoStep({
                         }
                         borderWidth="2px"
                         borderRadius="8px"
-                        w="252px"
-                        h="210px"
+                        w={{ base: "100%", md: "252px" }}
+                        h={{ base: "auto", md: "210px" }}
                         align="left"
                         spacing="0"
                         cursor="pointer"
@@ -144,7 +145,7 @@ export default function GeneralInfoStep({
                         </Text>
                     </VStack>
                 ))}
-            </HStack>
+            </Stack>
 
             {group.type === "off-chain" && (
                 <>
diff --git a/apps/dashboard/src/components/new-group-stepper/group-size-step.tsx b/apps/dashboard/src/components/new-group-stepper/group-size-step.tsx
index 91f4d8d3..750e84c5 100644
--- a/apps/dashboard/src/components/new-group-stepper/group-size-step.tsx
+++ b/apps/dashboard/src/components/new-group-stepper/group-size-step.tsx
@@ -30,7 +30,11 @@ export default function GroupSizeStep({
         <>
             <Text>How big is your group?</Text>
 
-            <HStack w="764px" py="16px" overflowX="scroll">
+            <HStack
+                w={{ base: "100%", lg: "764px" }}
+                py="16px"
+                overflowX="scroll"
+            >
                 {groupSizes.map((groupSize) => (
                     <VStack
                         borderColor={
diff --git a/apps/dashboard/src/components/new-group-stepper/stepper-nav.tsx b/apps/dashboard/src/components/new-group-stepper/stepper-nav.tsx
index cdd174e1..36f0c0b7 100644
--- a/apps/dashboard/src/components/new-group-stepper/stepper-nav.tsx
+++ b/apps/dashboard/src/components/new-group-stepper/stepper-nav.tsx
@@ -35,7 +35,14 @@ export default function StepperNav({
                     >
                         {i + 1}
                     </Text>
-                    <Text>{step}</Text>
+                    <Text
+                        display={{
+                            base: i === index ? "block" : "none",
+                            md: "block"
+                        }}
+                    >
+                        {step}
+                    </Text>
                     {i !== steps.length - 1 && (
                         <Icon as={MdOutlineKeyboardArrowRight} boxSize={5} />
                     )}
diff --git a/apps/dashboard/src/components/new-group-stepper/stepper-preview.tsx b/apps/dashboard/src/components/new-group-stepper/stepper-preview.tsx
index 91bd1d0d..9cdba78f 100644
--- a/apps/dashboard/src/components/new-group-stepper/stepper-preview.tsx
+++ b/apps/dashboard/src/components/new-group-stepper/stepper-preview.tsx
@@ -13,10 +13,11 @@ export default function StepperPreview({
         <VStack
             align="left"
             position="relative"
-            w="374px"
+            w={{ base: "100%", md: "374px" }}
             h="483px"
             bgImg={`url(${image2})`}
             bgRepeat="no-repeat"
+            bgSize={{ base: "cover", md: "contain" }}
             p="20px"
             borderRadius="8px"
         >
diff --git a/apps/dashboard/src/pages/new-group.tsx b/apps/dashboard/src/pages/new-group.tsx
index 7ff55f64..70b7cb96 100644
--- a/apps/dashboard/src/pages/new-group.tsx
+++ b/apps/dashboard/src/pages/new-group.tsx
@@ -1,4 +1,4 @@
-import { Container, Heading, HStack, VStack } from "@chakra-ui/react"
+import { Container, Heading, HStack, VStack, Stack } from "@chakra-ui/react"
 import { useCallback, useState } from "react"
 import { useNavigate } from "react-router-dom"
 import AccessModeStep from "../components/new-group-stepper/access-mode-step"
@@ -61,7 +61,11 @@ export default function NewGroupPage(): JSX.Element {
                     }
                 />
 
-                <HStack w="100%" align="start">
+                <Stack
+                    w="100%"
+                    align="start"
+                    direction={{ base: "column-reverse", md: "row" }}
+                >
                     {(_group.type === "off-chain" && _currentStep !== 3) ||
                     (_group.type === "on-chain" && _currentStep !== 1) ? (
                         <>
@@ -74,6 +78,7 @@ export default function NewGroupPage(): JSX.Element {
                                 borderRadius="8px"
                                 flex="1"
                                 align="left"
+                                width={{ base: "100%", md: "50%" }}
                             >
                                 {_group.type === "off-chain" &&
                                     (_currentStep === 0 ? (
@@ -113,7 +118,7 @@ export default function NewGroupPage(): JSX.Element {
                             onBack={() => finalPreviewBack()}
                         />
                     )}
-                </HStack>
+                </Stack>
             </VStack>
         </Container>
     )

From d5a479e15c800cc89809b0eeaad293b21098f173 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yago=20Pajari=C3=B1o?= <yagopajarino@outlook.com>
Date: Tue, 17 Dec 2024 17:11:49 -0300
Subject: [PATCH 2/3] refactor: fix final preview card width

---
 .../src/components/new-group-stepper/final-preview-step.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/dashboard/src/components/new-group-stepper/final-preview-step.tsx b/apps/dashboard/src/components/new-group-stepper/final-preview-step.tsx
index bc0da32d..f56b3dbe 100644
--- a/apps/dashboard/src/components/new-group-stepper/final-preview-step.tsx
+++ b/apps/dashboard/src/components/new-group-stepper/final-preview-step.tsx
@@ -91,7 +91,7 @@ export default function FinalPreviewStep({
                     Group preview
                 </Heading>
 
-                <Box zIndex="1" w="100%">
+                <Box zIndex="1" w="350px">
                     <GroupCard {...group} />
                 </Box>
             </VStack>

From c1cae253810c6a2cf515b3e873a06972d7d13caf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yago=20Pajari=C3=B1o?= <yagopajarino@outlook.com>
Date: Fri, 27 Dec 2024 18:01:19 -0300
Subject: [PATCH 3/3] refactor: change w for xl screens

---
 .../src/components/new-group-stepper/group-size-step.tsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/dashboard/src/components/new-group-stepper/group-size-step.tsx b/apps/dashboard/src/components/new-group-stepper/group-size-step.tsx
index 750e84c5..9bfb48f0 100644
--- a/apps/dashboard/src/components/new-group-stepper/group-size-step.tsx
+++ b/apps/dashboard/src/components/new-group-stepper/group-size-step.tsx
@@ -31,7 +31,7 @@ export default function GroupSizeStep({
             <Text>How big is your group?</Text>
 
             <HStack
-                w={{ base: "100%", lg: "764px" }}
+                w={{ base: "100%", xl: "764px" }}
                 py="16px"
                 overflowX="scroll"
             >