Merge pull request #29 from Open-Earth-Foundation/fix/onboarding-ui

fix: years and margins in onboarding UI
Open-Earth-Foundation · Aug 17, 2023 · 6ebadb9 · 6ebadb9
2 parents e09fb7d + 7d48f42
commit 6ebadb9
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 14 deletions.
diff --git a/app/src/app/[lng]/onboarding/done/[cityId]/page.tsx b/app/src/app/[lng]/onboarding/done/[cityId]/page.tsx
@@ -15,7 +15,7 @@ export default function OnboardingDone({ params: { lng } }: { params: { lng: str
   const year = '2023';
 
   return (
-    <div className="pt-[148px] w-[1024px] max-w-full mx-auto px-4 flex flex-col items-center">
+    <div className="pt-[148px] w-[1024px] max-w-full mx-auto px-4 pb-12 flex flex-col items-center">
       <Image src="/assets/check-circle.svg" width={64} height={64} alt="Checkmark" />
       <Heading size="xl" mt={12} mb={20}>
         <Trans t={t}>done-heading</Trans>

diff --git a/app/src/app/[lng]/onboarding/layout.tsx b/app/src/app/[lng]/onboarding/layout.tsx
@@ -12,7 +12,7 @@ export default function AuthLayout({
   return (
     <main className="h-screen flex flex-col">
       <NavigationBar lng={lng} />
-      <div className="w-full h-full bg-city bg-left-bottom bg-no-repeat">
+      <div className="w-full h-full bg-city bg-left-bottom bg-no-repeat px-8">
         {children}
       </div>
     </main>

diff --git a/app/src/app/[lng]/onboarding/setup/page.tsx b/app/src/app/[lng]/onboarding/setup/page.tsx
@@ -19,7 +19,8 @@ type Inputs = {
 }
 
 function SetupStep({ errors, register, t }: { errors: FieldErrors<Inputs>, register: UseFormRegister<Inputs>, t: TFunction }) {
-  const years = Array.from({ length: 10 }, (_x, i) => 2020 + i);
+  const currentYear = new Date().getFullYear();
+  const years = Array.from({ length: 7 }, (_x, i) => currentYear - i);
   return (
     <>
       <div>
@@ -152,7 +153,7 @@ export default function OnboardingSetup({ params: { lng } }: { params: { lng: st
 
   return (
     <>
-      <div className="pt-[64px] w-[1090px] max-w-full mx-auto px-8">
+      <div className="pt-16 w-[1090px] max-w-full mx-auto">
         <Button
           variant="ghost"
           leftIcon={<ArrowBackIcon boxSize={6} />}
@@ -168,7 +169,7 @@ export default function OnboardingSetup({ params: { lng } }: { params: { lng: st
             />
           </div>
         </div>
-        <div className="flex flex-col md:flex-row md:space-x-12 md:space-y-0 space-y-12 align-top mb-24 mt-[112px]">
+        <div className="flex flex-col md:flex-row md:space-x-12 md:space-y-0 space-y-12 align-top mt-8 md:mt-16 mb-48">
           {activeStep === 0 && <SetupStep errors={errors} register={register} t={t} />}
           {activeStep === 1 && <ConfirmStep cityName={getValues('city')} t={t} />}
         </div>

diff --git a/app/src/components/wizard-steps.tsx b/app/src/components/wizard-steps.tsx
@@ -1,4 +1,15 @@
-import { Box, Step, StepIcon, StepIndicator, StepNumber, StepSeparator, StepStatus, StepTitle, Stepper, useSteps } from "@chakra-ui/react"
+import {
+  Box,
+  Step,
+  StepIcon,
+  StepIndicator,
+  StepNumber,
+  StepSeparator,
+  StepStatus,
+  StepTitle,
+  Stepper,
+  useBreakpointValue,
+} from "@chakra-ui/react";
 
 interface WizardStep {
   title: string;
@@ -9,12 +20,29 @@ export default function WizardSteps({
   currentStep,
   onSelect = () => {},
 }: {
-  steps: WizardStep[],
-  currentStep: number,
-  onSelect?: (selectedStep: number) => void,
+  steps: WizardStep[];
+  currentStep: number;
+  onSelect?: (selectedStep: number) => void;
 }) {
+  const orientation: "horizontal" | "vertical" | undefined = useBreakpointValue(
+    { base: "vertical", md: "horizontal" },
+    { fallback: "md" }
+  );
+  const gap: "0" | undefined = useBreakpointValue(
+    { base: "0", md: undefined },
+    { fallback: "md" }
+  );
+
   return (
-    <Stepper index={currentStep} my={8} colorScheme="brandScheme" size="lg">
+    <Stepper
+      index={currentStep}
+      my={8}
+      colorScheme="brandScheme"
+      size="lg"
+      height="120px"
+      orientation={orientation}
+      gap={gap}
+    >
       {steps.map((step, index) => (
         <Step key={index} onClick={() => onSelect(index)}>
           <StepIndicator>
@@ -25,14 +53,13 @@ export default function WizardSteps({
             />
           </StepIndicator>
 
-          <Box flexShrink='0'>
+          <Box flexShrink="0">
             <StepTitle>{step.title}</StepTitle>
           </Box>
 
           <StepSeparator />
         </Step>
       ))}
     </Stepper>
-  )
+  );
 }
-
diff --git a/app/tailwind.config.cjs b/app/tailwind.config.cjs
@@ -1,7 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
     './src/components/**/*.{js,ts,jsx,tsx,mdx}',
     './src/app/**/*.{js,ts,jsx,tsx,mdx}',
     './src/stories/**/*.{js,ts,jsx,tsx,mdx}'