UI: Onboarding UI updates

src/components/common/Onboarding/Wizard/DesktopWizardSidebar.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+
+import Heading3 from '~shared/Heading/Heading3.tsx';
+import Sidebar from '~v5/shared/Navigation/Sidebar/Sidebar.tsx';
+
+import { type WizardProps } from './types.ts';
+import WizardSidebarItem from './WizardSidebarItem.tsx';
+
+const displayName = 'common.Onboarding.Wizard.DesktopWizardSidebar';
+
+const DesktopWizardSidebar = ({
+  currentStep,
+  wizardSteps,
+  sidebarTitle,
+  sidebarTitleValues,
+  enableMobileAndDesktopLayoutBreakpoints,
+}: WizardProps) => (
+  <Sidebar
+    className="!w-[280px] sm:!flex"
+    colonySwitcherProps={{
+      isLogoButton: true,
+      offset: [-20, 226],
+      enableMobileAndDesktopLayoutBreakpoints,
+    }}
+  >
+    <div className="px-3 pt-10">
+      <Heading3
+        appearance={{ theme: 'dark' }}
+        className="mb-6 text-xl font-semibold text-base-white"
+        text={sidebarTitle}
+        textValues={sidebarTitleValues}
+      />
+      <div className="flex flex-1 flex-col content-between">
+        <div className="relative flex flex-1 gap-4">
+          <div className="-mt-1 flex flex-col gap-4">
+            {wizardSteps.map((step, index) => {
+              // To work out the current step we add all the previous
+              // subitems to the index (the current step count) minus one
+              // in order to account the for the containing index of the subitems
+              const previousStepSubItemsLength =
+                wizardSteps[index - 1]?.subItems?.length || 0;
+
+              const previousStepsCount = previousStepSubItemsLength
+                ? previousStepSubItemsLength - 1
+                : 0;
+
+              const id = index + previousStepsCount;
+
+              return (
+                <WizardSidebarItem
+                  text={step.text}
+                  subItems={step.subItems}
+                  currentStep={currentStep}
+                  key={`step-${step.text?.id}`}
+                  id={id}
+                  isLastItem={index + 1 === wizardSteps.length}
+                />
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </div>
+  </Sidebar>
+);
+
+DesktopWizardSidebar.displayName = displayName;
+
+export default DesktopWizardSidebar;

src/components/common/Onboarding/WizardSidebar/MobileWizardSidebar.tsx → src/components/common/Onboarding/Wizard/MobileWizardHeader.tsx

@@ -4,16 +4,11 @@ import { FormattedMessage } from 'react-intl';
 import Stepper from '~v5/shared/Stepper/Stepper.tsx';
 import { type StepperItem } from '~v5/shared/Stepper/types.ts';
 
-import { type WizardSidebarStep } from './WizardSidebar.tsx';
+import { type WizardProps } from './types.ts';
 
-const displayName = 'routes.WizardRoute.WizardSidebar.MobileWizardSidebar';
+const displayName = 'common.Onboarding.WizardSidebar.MobileWizardHeader';
 
-interface Props {
-  currentStep: number;
-  wizardSteps: WizardSidebarStep[];
-}
-
-const MobileWizardSidebar = ({ currentStep, wizardSteps }: Props) => {
+const MobileWizardHeader = ({ currentStep, wizardSteps }: WizardProps) => {
   const steps: StepperItem<number>[] = [];
   let stepsCount = 0;
 
@@ -62,6 +57,6 @@ const MobileWizardSidebar = ({ currentStep, wizardSteps }: Props) => {
   );
 };
 
-MobileWizardSidebar.displayName = displayName;
+MobileWizardHeader.displayName = displayName;
 
-export default MobileWizardSidebar;
+export default MobileWizardHeader;

src/components/common/Onboarding/WizardSidebar/WizardSidebarItem.tsx → src/components/common/Onboarding/Wizard/WizardSidebarItem.tsx

@@ -2,13 +2,13 @@ import clsx from 'clsx';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { type WizardSidebarStep } from './WizardSidebar.tsx';
+import { type WizardStep } from './types.ts';
 import WizardSidebarItemFlowLine from './WizardSidebarItemFlowLine.tsx';
 import WizardSidebarSubItem from './WizardSidebarSubItem.tsx';
 
 const displayName = 'routes.WizardRoute.WizardSidebar.WizardSidebarItem';
 
-interface Props extends WizardSidebarStep {
+interface Props extends WizardStep {
   currentStep: number;
   isLastItem: boolean;
 }
@@ -40,19 +40,13 @@ const WizardSidebarItem = ({
       <div className="relative flex items-center">
         <div
           className={clsx('h-2.5 w-2.5 rounded-full', {
-            'bg-gray-900': currentStep >= stepId && hasSubItems,
-            'border border-gray-900': currentStep < stepId,
-            'bg-blue-400': !hasSubItems && currentStep === stepId,
+            'bg-base-white':
+              (currentStep >= stepId && hasSubItems) ||
+              (!hasSubItems && currentStep === stepId),
+            'border border-base-white': currentStep < stepId,
           })}
         />
-        <span
-          className={clsx(
-            'ml-4 text-sm font-semibold',
-            currentStep === stepId && !hasSubItems
-              ? 'text-blue-400'
-              : 'text-gray-900',
-          )}
-        >
+        <span className="ml-4 text-sm font-semibold text-base-white">
           <FormattedMessage {...stepText} />
         </span>
       </div>

src/components/common/Onboarding/WizardSidebar/WizardSidebarItemFlowLine.tsx → src/components/common/Onboarding/Wizard/WizardSidebarItemFlowLine.tsx

@@ -22,7 +22,7 @@ const WizardSidebarItemFlowLine = ({
   return (
     <div className="absolute top-[13px] flex h-[calc(100%+8px)] w-2.5 flex-col items-center gap-2.5">
       <div
-        className={clsx('h-full w-px bg-gray-900', {
+        className={clsx('h-full w-px bg-base-white', {
           'h-6': currentStep < stepId || currentStep > lastSubid,
         })}
       />

src/components/common/Onboarding/WizardSidebar/WizardSidebarSubItem.tsx → src/components/common/Onboarding/Wizard/WizardSidebarSubItem.tsx

@@ -3,24 +3,21 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { type Optional } from 'utility-types';
 
-import { type WizardSidebarStep } from './WizardSidebar.tsx';
+import { type WizardStep } from './types.ts';
 
 const displayName =
   'routes.WizardRoute.WizardSidebar.WizardSidebarItem.WizardSidebarSubItem';
 
-export type WizardSidebarSubStep = Optional<
-  WizardSidebarStep,
-  'subItems' | 'text'
->;
+export type WizardSidebarSubStep = Optional<WizardStep, 'subItems' | 'text'>;
 
 interface Props extends Pick<WizardSidebarSubStep, 'text'> {
   isActive: boolean;
 }
 
 const WizardSidebarSubItem = ({ text: stepText, isActive }: Props) => (
   <span
-    className={clsx('ml-[26px] text-xs', {
-      'font-semibold text-blue-400': isActive,
+    className={clsx('ml-[26px] text-xs text-base-white', {
+      'font-semibold underline': isActive,
     })}
   >
     <FormattedMessage {...stepText} />

src/components/common/Onboarding/Wizard/types.ts

@@ -0,0 +1,19 @@
+import { type MessageDescriptor } from 'react-intl';
+
+import { type UniversalMessageValues } from '~types';
+
+import { type WizardSidebarSubStep } from './WizardSidebarSubItem.tsx';
+
+export interface WizardStep {
+  id: number;
+  text: MessageDescriptor;
+  subItems?: WizardSidebarSubStep[];
+}
+
+export interface WizardProps {
+  currentStep: number;
+  wizardSteps: WizardStep[];
+  sidebarTitle: MessageDescriptor;
+  sidebarTitleValues?: UniversalMessageValues;
+  enableMobileAndDesktopLayoutBreakpoints?: boolean;
+}