Merge pull request #646 from yagopajarino/fix/559

refactor: make new group responsive
bandada-infra · Jan 9, 2025 · 0c30d3c · 0c30d3c
2 parents 5ea14b4 + c1cae25
commit 0c30d3c
Show file tree

Hide file tree

Showing 8 changed files with 38 additions and 18 deletions.
diff --git 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
@@ -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
@@ -91,7 +91,7 @@ export default function FinalPreviewStep({
                     Group preview
                 </Heading>
 
-                <Box zIndex="1">
+                <Box zIndex="1" w="350px">
                     <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
@@ -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
@@ -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%", xl: "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
@@ -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
@@ -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
@@ -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>
     )