membership

app/components/RadioStack.tsx

@@ -13,9 +13,10 @@ import React, {useEffect} from 'react';
 export default function RadioStack(props: {
   children: Array<React.ReactElement<RadioStackTabProps> | boolean>;
   onChangeEffect?: (value: string) => void;
+  autoFocus?: boolean;
 }) {
   const {id} = useFormControlContext();
-  const [field] = useField({name: id});
+  const [field] = useField({name: id, autoFocus: props.autoFocus});
   const {getRootProps} = useRadioGroup(field);
 
   useEffect(() => {

app/components/Steps.tsx

@@ -0,0 +1,55 @@
+import {CheckIcon} from '@chakra-ui/icons';
+import {Box, Flex, Stack, StackProps} from '@chakra-ui/react';
+import {Fragment} from 'react';
+
+export default function Steps({
+  steps,
+  currentStep,
+  ...props
+}: {steps: string[]; currentStep: number} & StackProps) {
+  return (
+    <Stack
+      align={['flex-start', 'center']}
+      direction={['column', 'row']}
+      spacing={['1', '3']}
+      w="100%"
+      {...props}
+    >
+      {steps.map((step, index) => {
+        return (
+          <Fragment key={index}>
+            <Flex justifyContent="center" alignItems="center" fontWeight="bold">
+              <Flex
+                w="40px"
+                h="40px"
+                borderRadius="50%"
+                justifyContent="center"
+                alignItems="center"
+                flexShrink={0}
+                bg={index < currentStep ? 'brand.900' : 'offwhite.300'}
+                color={index < currentStep ? 'white' : undefined}
+                mr="3"
+                borderWidth="2px"
+                borderColor={
+                  index <= currentStep ? 'brand.900' : 'offwhite.300'
+                }
+              >
+                {index < currentStep ? <CheckIcon /> : index + 1}
+              </Flex>
+              {step}
+            </Flex>
+            {index < steps.length - 1 && (
+              <Box
+                flexGrow={1}
+                ml={['19px', 'auto']}
+                h={['10px', '2px']}
+                w={['2px', 'auto']}
+                bg={index < currentStep ? 'brand.900' : 'offwhite.300'}
+              />
+            )}
+          </Fragment>
+        );
+      })}
+    </Stack>
+  );
+}

app/components/booking/Step2.tsx

@@ -26,6 +26,7 @@ import {useCombobox} from 'downshift';
 import {useRef, useState} from 'react';
 import DropdownMenu from '../DropdownMenu';
 import {FaSpotify} from 'react-icons/fa6';
+import Steps from '../Steps';
 
 gql`
   query SpotifyArtistSearch($query: String!, $limit: Int = 5) {

app/routes/booking.$applicationType._index.tsx

@@ -12,7 +12,6 @@ import {
   Heading,
 } from '@chakra-ui/react';
 import {useNavigate, useNavigation, useParams} from '@remix-run/react';
-import {Steps, Step} from 'chakra-ui-steps';
 import type {Routes} from 'remix-routes';
 import {$path} from 'remix-routes';
 import {Formik, Form} from 'formik';
@@ -32,6 +31,7 @@ import {useUtmSource} from './booking._index';
 import type {loader as rootLoader} from '~/root';
 import {useTypedRouteLoaderData} from 'remix-typedjson';
 import {loader} from './booking';
+import Steps from '~/components/Steps';
 
 const STEPS = [Step1, Step2, Step3] as const;
 export type FormikContextT = Partial<CreateBandApplicationInput> & {
@@ -77,32 +77,12 @@ export default function () {
       </Heading>
 
       <Steps
-        activeStep={currentStep}
-        responsive={false}
-        trackColor="offwhite.300"
+        mt="5"
+        mb="5"
+        currentStep={currentStep}
         display={['none', 'flex']}
-        sx={{
-          '& .cui-steps__step-icon-container': {
-            bg: 'offwhite.300',
-            borderColor: 'offwhite.300',
-            '&[aria-current=step]': {
-              borderColor: 'brand.900',
-            },
-            '&[data-highlighted]': {
-              borderColor: 'brand.900',
-              bg: 'brand.900',
-            },
-          },
-          '& .cui-steps__horizontal-step[data-highlighted]:not(:last-child):after':
-            {
-              bg: 'brand.900',
-            },
-        }}
-      >
-        <Step label="Infos" />
-        <Step label="Musik" />
-        <Step label="Kontakt" />
-      </Steps>
+        steps={['Infos', 'Musik', 'Kontakt']}
+      />
 
       <Formik<FormikContextT>
         initialValues={{