feat: onboarding pages darkmode (#867 )

docs: add Daniel15 as a contributor for bug, and code (#865 )
* docs: update README.md [skip ci] * docs: update .all-contributorsrc [skip ci] --------- Co-authored-by: allcontributors[bot] <46447321+allcontributors[bot]@users.noreply.github.com>
2026-02-10 09:52:00 +00:00 · 2025-12-03 16:04:46 +02:00 · 2025-12-02 01:42:54 +02:00 · 2025-12-02 01:41:04 +02:00
17 changed files with 397 additions and 289 deletions
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@@ -168,6 +168,16 @@
      "contributions": [
        "bug"
      ]
+    },
+    {
+      "login": "Daniel15",
+      "name": "Daniel Lo Nigro",
+      "avatar_url": "https://avatars.githubusercontent.com/u/91933?v=4",
+      "profile": "https://d.sb/",
+      "contributions": [
+        "bug",
+        "code"
+      ]
    }
  ],
  "contributorsPerLine": 7,
--- a/README.md
+++ b/README.md
@@ -135,6 +135,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
      <td align="center" valign="top" width="14.28%"><a href="https://myself.vercel.app/"><img src="https://avatars.githubusercontent.com/u/42431274?v=4?s=100" width="100px;" alt="Sachin Mittal"/><br /><sub><b>Sachin Mittal</b></sub></a><br /><a href="https://github.com/bigcapitalhq/bigcapital/issues?q=author%3Amittalsam98" title="Bug reports">🐛</a></td>
      <td align="center" valign="top" width="14.28%"><a href="https://www.camilooviedo.com/"><img src="https://avatars.githubusercontent.com/u/64604272?v=4?s=100" width="100px;" alt="Camilo Oviedo"/><br /><sub><b>Camilo Oviedo</b></sub></a><br /><a href="https://github.com/bigcapitalhq/bigcapital/commits?author=Champetaman" title="Code">💻</a></td>
      <td align="center" valign="top" width="14.28%"><a href="https://nklmantey.com/"><img src="https://avatars.githubusercontent.com/u/90279429?v=4?s=100" width="100px;" alt="Mantey"/><br /><sub><b>Mantey</b></sub></a><br /><a href="https://github.com/bigcapitalhq/bigcapital/issues?q=author%3Anklmantey" title="Bug reports">🐛</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://d.sb/"><img src="https://avatars.githubusercontent.com/u/91933?v=4?s=100" width="100px;" alt="Daniel Lo Nigro"/><br /><sub><b>Daniel Lo Nigro</b></sub></a><br /><a href="https://github.com/bigcapitalhq/bigcapital/issues?q=author%3ADaniel15" title="Bug reports">🐛</a> <a href="https://github.com/bigcapitalhq/bigcapital/commits?author=Daniel15" title="Code">💻</a></td>
    </tr>
  </tbody>
 </table>
--- a/packages/webapp/package.json
+++ b/packages/webapp/package.json
@@ -7,11 +7,12 @@
    "@bigcapital/pdf-templates": "*",
    "@bigcapital/utils": "*",
    "@blueprintjs-formik/core": "^0.3.7",
-    "@blueprintjs-formik/datetime": "^0.3.7",
+    "@blueprintjs-formik/datetime": "^0.4.0",
    "@blueprintjs-formik/select": "^0.3.5",
    "@blueprintjs/colors": "4.1.19",
    "@blueprintjs/core": "^4.20.2",
    "@blueprintjs/datetime": "^4.4.37",
+    "@blueprintjs/datetime2": "^3.0.10",
    "@blueprintjs/popover2": "^1.14.11",
    "@blueprintjs/select": "^4.9.24",
    "@blueprintjs/table": "^4.10.12",
@@ -108,11 +109,11 @@
    "react-use": "^13.26.1",
    "react-use-context-menu": "^0.1.4",
    "react-virtualized": "^9.22.3",
-    "regenerator-runtime": "^0.14.1",
    "redux": "^4.2.1",
    "redux-devtools": "^3.5.0",
    "redux-persist": "^6.0.0",
    "redux-thunk": "^2.4.2",
+    "regenerator-runtime": "^0.14.1",
    "reselect": "4.1.7",
    "rtl-detect": "^1.0.3",
    "sass": "^1.68.0",
@@ -126,8 +127,8 @@
    "yup": "^0.28.1"
  },
  "devDependencies": {
-    "@vitejs/plugin-react": "^4.3.4",
    "@vitejs/plugin-legacy": "^5.4.2",
+    "@vitejs/plugin-react": "^4.3.4",
    "eslint-config-react-app": "^7.0.1",
    "vite": "^5.1.6"
  },
--- a/packages/webapp/src/components/Forms/BlueprintFormik.tsx
+++ b/packages/webapp/src/components/Forms/BlueprintFormik.tsx
@@ -1,4 +1,3 @@
-// @ts-nocheck
 import React from 'react';
 import {
  FormGroup,
@@ -12,7 +11,7 @@ import {
  HTMLSelect,
 } from '@blueprintjs-formik/core';
 import { MultiSelect, SuggestField } from '@blueprintjs-formik/select';
-import { DateInput } from '@blueprintjs-formik/datetime';
+import { DateInput, TimezoneSelect } from '@blueprintjs-formik/datetime';
 import { FSelect } from './Select';

 export {
@@ -29,4 +28,5 @@ export {
  TextArea as FTextArea,
  DateInput as FDateInput,
  HTMLSelect as FHTMLSelect,
+  TimezoneSelect as FTimezoneSelect,
 };
--- a/packages/webapp/src/components/Stepper/StepperStep.tsx
+++ b/packages/webapp/src/components/Stepper/StepperStep.tsx
@@ -28,10 +28,11 @@ export function StepperStep({
          isCompleted={state === StepperStepState.Completed}
          isActive={state === StepperStepState.Progress}
        >
-          {state === StepperStepState.Completed && (
+          {state === StepperStepState.Completed ? (
            <Icon icon={'done'} iconSize={24} />
+          ) : (
+            <StepIconText>{step}</StepIconText>
          )}
-          <StepIconText>{step}</StepIconText>
        </StepIcon>
      </StepIconWrap>

--- a/packages/webapp/src/containers/Setup/SetupCongratsPage.tsx
+++ b/packages/webapp/src/containers/Setup/SetupCongratsPage.tsx
@@ -1,6 +1,9 @@
 // @ts-nocheck
 import React from 'react';
 import { Button, Intent } from '@blueprintjs/core';
+import { x } from '@xstyled/emotion';
+import { css } from '@emotion/css';
+import { useIsDarkMode } from '@/hooks/useDarkMode';

 import WorkflowIcon from './WorkflowIcon';
 import { FormattedMessage as T } from '@/components';
@@ -8,13 +11,12 @@ import { FormattedMessage as T } from '@/components';
 import withOrganizationActions from '@/containers/Organization/withOrganizationActions';
 import { compose } from '@/utils';

-import '@/style/pages/Setup/Congrats.scss';
-
 /**
 * Setup congrats page.
 */
 function SetupCongratsPage({ setOrganizationSetupCompleted }) {
  const [isReloading, setIsReloading] = React.useState(false);
+  const isDarkMode = useIsDarkMode();

  const handleBtnClick = () => {
    setIsReloading(true);
@@ -22,30 +24,55 @@ function SetupCongratsPage({ setOrganizationSetupCompleted }) {
  };

  return (
-    <div class="setup-congrats">
-      <div class="setup-congrats__workflow-pic">
+    <x.div
+      w={'500px'}
+      mx="auto"
+      textAlign="center"
+      pt={'80px'}
+    >
+      <x.div>
        <WorkflowIcon width="280" height="330" />
-      </div>
+      </x.div>

-      <div class="setup-congrats__text">
-        <h1>
-          <T id={'setup.congrats.title'} />
-        </h1>
-
-        <p class="paragraph">
-          <T id={'setup.congrats.description'} />
-        </p>
-
-        <Button
-          intent={Intent.PRIMARY}
-          type="submit"
-          loading={isReloading}
-          onClick={handleBtnClick}
+      <x.div mt={30}>
+        <x.h2
+          color={isDarkMode ? 'rgba(255, 255, 255, 0.85)' : '#2d2b43'}
+          mb={'12px'}
        >
-          <T id={'setup.congrats.go_to_dashboard'} />
-        </Button>
-      </div>
-    </div>
+          <T id={'setup.congrats.title'} />
+        </x.h2>
+
+        <x.p
+          fontSize={'16px'}
+          opacity={0.85}
+          mb={'14px'}
+          color={isDarkMode ? 'rgba(255, 255, 255, 0.7)' : undefined}
+        >
+          <T id={'setup.congrats.description'} />
+        </x.p>
+
+        <x.div
+          className={css`
+            .bp4-button {
+              height: 38px;
+              padding-left: 25px;
+              padding-right: 25px;
+              font-size: 15px;
+              margin-top: 12px;
+            }
+          `}
+        >
+          <Button
+            intent={Intent.PRIMARY}
+            type="submit"
+            loading={isReloading}
+            onClick={handleBtnClick}
+          >
+            <T id={'setup.congrats.go_to_dashboard'} />
+          </Button>
+        </x.div>
+      </x.div>
+    </x.div>
  );
 }

--- a/packages/webapp/src/containers/Setup/SetupInitializingForm.tsx
+++ b/packages/webapp/src/containers/Setup/SetupInitializingForm.tsx
@@ -2,6 +2,9 @@
 import React from 'react';
 import { ProgressBar, Intent } from '@blueprintjs/core';
 import * as R from 'ramda';
+import { x } from '@xstyled/emotion';
+import { css } from '@emotion/css';
+import { useIsDarkMode } from '@/hooks/useDarkMode';

 import { useJob, useCurrentOrganization } from '@/hooks/query';
 import { FormattedMessage as T } from '@/components';
@@ -10,8 +13,6 @@ import withOrganizationActions from '@/containers/Organization/withOrganizationA
 import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
 import withOrganization from '../Organization/withOrganization';

-import '@/style/pages/Setup/Initializing.scss';
-
 /**
 * Setup initializing step form.
 */
@@ -47,7 +48,7 @@ function SetupInitializingForm({
  }, [setOrganizationSetupCompleted, isJobDone, isSuccess]);

  return (
-    <div class="setup-initializing-form">
+    <x.div w="95%" mx="auto" pt="16%">
      {isFailed ? (
        <SetupInitializingFailed />
      ) : isRunning || isWaiting || isJobFetching ? (
@@ -57,7 +58,7 @@ function SetupInitializingForm({
      ) : (
        <SetupInitializingFailed />
      )}
-    </div>
+    </x.div>
  );
 }

@@ -73,17 +74,29 @@ export default R.compose(
 * State initializing failed state.
 */
 function SetupInitializingFailed() {
+  const isDarkMode = useIsDarkMode();
+
  return (
-    <div class="setup-initializing__content">
-      <div className={'setup-initializing-form__title'}>
-        <h1>
+    <x.div>
+      <x.div textAlign="center" mt={35}>
+        <x.h1
+          fontSize={'22px'}
+          fontWeight={500}
+          color={isDarkMode ? 'rgba(255, 255, 255, 0.75)' : '#454c59'}
+          mt={0}
+          mb={'14px'}
+        >
          <T id={'setup.initializing.something_went_wrong'} />
-        </h1>
-        <p class="paragraph">
+        </x.h1>
+        <x.p
+          w="70%"
+          mx="auto"
+          color={isDarkMode ? 'rgba(255, 255, 255, 0.7)' : '#2e4266'}
+        >
          <T id={'setup.initializing.please_refresh_the_page'} />
-        </p>
-      </div>
-    </div>
+        </x.p>
+      </x.div>
+    </x.div>
  );
 }

@@ -91,19 +104,49 @@ function SetupInitializingFailed() {
 * Setup initializing running state.
 */
 function SetupInitializingRunning() {
-  return (
-    <div class="setup-initializing__content">
-      <ProgressBar intent={Intent.PRIMARY} value={null} />
+  const isDarkMode = useIsDarkMode();

-      <div className={'setup-initializing-form__title'}>
-        <h1>
+  const progressBarStyles = css`
+    .bp4-progress-bar {
+      border-radius: 40px;
+      display: block;
+      height: 6px;
+      overflow: hidden;
+      position: relative;
+      width: 80%;
+      margin: 0 auto;
+
+      .bp4-progress-meter {
+        background-color: #809cb3;
+      }
+    }
+  `;
+
+  return (
+    <x.div>
+      <x.div className={progressBarStyles}>
+        <ProgressBar intent={Intent.NONE} value={null} />
+      </x.div>
+
+      <x.div textAlign="center" mt={35}>
+        <x.h1
+          fontSize={'22px'}
+          fontWeight={500}
+          color={isDarkMode ? 'rgba(255, 255, 255, 0.85)' : '#454c59'}
+          mt={0}
+          mb={'14px'}
+        >
          <T id={'setup.initializing.title'} />
-        </h1>
-        <p className={'paragraph'}>
+        </x.h1>
+        <x.p
+          w="70%"
+          mx="auto"
+          color={isDarkMode ? 'rgba(255, 255, 255, 0.7)' : '#2e4266'}
+        >
          <T id={'setup.initializing.description'} />
-        </p>
-      </div>
-    </div>
+        </x.p>
+      </x.div>
+    </x.div>
  );
 }

@@ -111,18 +154,30 @@ function SetupInitializingRunning() {
 * Setup initializing completed state.
 */
 function SetupInitializingCompleted() {
+  const isDarkMode = useIsDarkMode();
+
  return (
-    <div class="setup-initializing__content">
-      <div className={'setup-initializing-form__title'}>
-        <h1>
+    <x.div>
+      <x.div textAlign="center" mt={35}>
+        <x.h1
+          fontSize={'22px'}
+          fontWeight={600}
+          color={isDarkMode ? 'rgba(255, 255, 255, 0.85)' : '#454c59'}
+          mt={0}
+          mb={'14px'}
+        >
          <T id={'setup.initializing.waiting_to_redirect'} />
-        </h1>
-        <p class="paragraph">
+        </x.h1>
+        <x.p
+          w="70%"
+          mx="auto"
+          color={isDarkMode ? 'rgba(255, 255, 255, 0.7)' : '#2e4266'}
+        >
          <T
            id={'setup.initializing.refresh_the_page_if_redirect_not_worked'}
          />
-        </p>
-      </div>
-    </div>
+        </x.p>
+      </x.div>
+    </x.div>
  );
 }
--- a/packages/webapp/src/containers/Setup/SetupOrganizationForm.tsx
+++ b/packages/webapp/src/containers/Setup/SetupOrganizationForm.tsx
@@ -5,15 +5,18 @@ import { Button, Intent, FormGroup, Classes } from '@blueprintjs/core';
 import classNames from 'classnames';
 import { TimezonePicker } from '@blueprintjs/timezone';
 import { getAllCountries } from '@bigcapital/utils';
+import { x } from '@xstyled/emotion';
 import {
  FFormGroup,
  FInputGroup,
  FSelect,
+  FTimezoneSelect,
  FormattedMessage as T,
 } from '@/components';

 import { Col, Row } from '@/components';
 import { inputIntent } from '@/utils';
+import { useIsDarkMode } from '@/hooks/useDarkMode';

 import { getFiscalYear } from '@/constants/fiscalYearOptions';
 import { getLanguages } from '@/constants/languagesOptions';
@@ -28,19 +31,24 @@ export default function SetupOrganizationForm({ isSubmitting, values }) {
  const FiscalYear = getFiscalYear();
  const Languages = getLanguages();
  const currencies = getAllCurrenciesOptions();
+  const isDarkMode = useIsDarkMode();

  return (
    <Form>
-      <h3>
+      <x.h3
+        color={isDarkMode ? 'rgba(255, 255, 255, 0.5)' : '#868f9f'}
+        mb="2rem"
+        fontWeight={600}
+      >
        <T id={'organization_details'} />
-      </h3>
+      </x.h3>
      {/* ---------- Organization name ----------  */}
      <FFormGroup
        name={'name'}
        label={<T id={'legal_organization_name'} />}
-        fastField={true}
+        fastField
      >
-        <FInputGroup name={'name'} fastField={true} />
+        <FInputGroup name={'name'} large fastField />
      </FFormGroup>

      {/* ---------- Location ---------- */}
@@ -56,7 +64,8 @@ export default function SetupOrganizationForm({ isSubmitting, values }) {
          textAccessor={'name'}
          placeholder={<T id={'select_business_location'} />}
          popoverProps={{ minimal: true }}
-          fastField={true}
+          buttonProps={{ large: true }}
+          fastField
        />
      </FFormGroup>

@@ -75,18 +84,15 @@ export default function SetupOrganizationForm({ isSubmitting, values }) {
              valueAccessor={'key'}
              textAccessor={'name'}
              placeholder={<T id={'select_base_currency'} />}
-              fastField={true}
+              buttonProps={{ large: true }}
+              fastField
            />
          </FFormGroup>
        </Col>

        {/* ---------- Language ---------- */}
        <Col xs={6}>
-          <FFormGroup
-            name={'language'}
-            label={<T id={'language'} />}
-            fastField={true}
-          >
+          <FFormGroup name={'language'} label={<T id={'language'} />} fastField>
            <FSelect
              name={'language'}
              items={Languages}
@@ -94,7 +100,8 @@ export default function SetupOrganizationForm({ isSubmitting, values }) {
              textAccessor={'name'}
              placeholder={<T id={'select_language'} />}
              popoverProps={{ minimal: true }}
-              fastField={true}
+              buttonProps={{ large: true }}
+              fastField
            />
          </FFormGroup>
        </Col>
@@ -104,7 +111,7 @@ export default function SetupOrganizationForm({ isSubmitting, values }) {
      <FFormGroup
        name={'fiscalYear'}
        label={<T id={'fiscal_year'} />}
-        fastField={true}
+        fastField
      >
        <FSelect
          name={'fiscalYear'}
@@ -113,50 +120,48 @@ export default function SetupOrganizationForm({ isSubmitting, values }) {
          textAccessor={'name'}
          placeholder={<T id={'select_fiscal_year'} />}
          popoverProps={{ minimal: true }}
-          fastField={true}
+          buttonProps={{ large: true }}
+          fastField
        />
      </FFormGroup>

      {/* ----------  Time zone ----------  */}
-      <FastField name={'timezone'}>
-        {({
-          form: { setFieldValue },
-          field: { value },
-          meta: { error, touched },
-        }) => (
-          <FormGroup
-            label={<T id={'time_zone'} />}
-            className={classNames(
-              'form-group--time-zone',
-              'form-group--select-list',
-              Classes.FILL,
-            )}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'timezone'} />}
-          >
-            <TimezonePicker
-              value={value}
-              onChange={(item) => {
-                setFieldValue('timezone', item);
-              }}
-              valueDisplayFormat="composite"
-              showLocalTimezone={true}
-              placeholder={<T id={'select_time_zone'} />}
-              popoverProps={{ minimal: true }}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup name={'timezone'} label={<T id={'time_zone'} />}>
+        <FTimezoneSelect
+          name={'timezone'}
+          valueDisplayFormat="composite"
+          showLocalTimezone={true}
+          placeholder={<T id={'select_time_zone'} />}
+          popoverProps={{ minimal: true }}
+          buttonProps={{
+            alignText: 'left',
+            fill: true,
+            large: true,
+          }}
+        />
+      </FFormGroup>

-      <p className={'register-org-note'}>
+      <x.p
+        fontSize={14}
+        lineHeight="2.7rem"
+        mb={6}
+        borderBottom={`1px solid ${isDarkMode ? 'rgba(255, 255, 255, 0.1)' : '#f5f5f5'}`}
+        className={Classes.TEXT_MUTED}
+      >
        <T id={'setup.organization.note_you_can_change_your_preferences'} />
-      </p>
+      </x.p>

-      <div className={'register-org-button'}>
-        <Button intent={Intent.PRIMARY} loading={isSubmitting} type="submit">
+      <x.div>
+        <Button
+          intent={Intent.PRIMARY}
+          loading={isSubmitting}
+          fill
+          large
+          type="submit"
+        >
          <T id={'save_continue'} />
        </Button>
-      </div>
+      </x.div>
    </Form>
  );
 }
--- a/packages/webapp/src/containers/Setup/SetupOrganizationPage.tsx
+++ b/packages/webapp/src/containers/Setup/SetupOrganizationPage.tsx
@@ -2,16 +2,15 @@
 import React from 'react';
 import { Formik } from 'formik';
 import { FormattedMessage as T } from '@/components';
-
-import '@/style/pages/Setup/Organization.scss';
+import { x } from '@xstyled/emotion';

 import SetupOrganizationForm from './SetupOrganizationForm';

 import { useOrganizationSetup } from '@/hooks/query';
 import withSettingsActions from '@/containers/Settings/withSettingsActions';

-import { setCookie, compose, transfromToSnakeCase } from '@/utils';
 import { getSetupOrganizationValidation } from './SetupOrganization.schema';
+import { setCookie, compose, transfromToSnakeCase } from '@/utils';

 // Initial values.
 const defaultValues = {
@@ -53,17 +52,22 @@ function SetupOrganizationPage({ wizard }) {
  };

  return (
-    <div className={'setup-organization'}>
+    <x.div
+      maxWidth={'600px'}
+      w="100%"
+      mx="auto"
+      pt={'45px'}
+      pb={'20px'}
+      px={'25px'}
+    >
      <Formik
        validationSchema={validationSchema}
        initialValues={initialValues}
        component={SetupOrganizationForm}
        onSubmit={handleSubmit}
      />
-    </div>
+    </x.div>
  );
 }

-export default compose(
-  withSettingsActions,
-)(SetupOrganizationPage);
+export default compose(withSettingsActions)(SetupOrganizationPage);
--- a/packages/webapp/src/containers/Setup/SetupRightSection.tsx
+++ b/packages/webapp/src/containers/Setup/SetupRightSection.tsx
@@ -1,5 +1,6 @@
 // @ts-nocheck
 import React from 'react';
+import { x } from '@xstyled/emotion';

 import SetupWizardContent from './SetupWizardContent';

@@ -27,9 +28,9 @@ function SetupRightSection({
  isSubscriptionActive,
 }) {
  return (
-    <section className={'setup-page__right-section'}>
+    <x.section w="100%" overflow="auto">
      <SetupWizardContent stepId={setupStepId} stepIndex={setupStepIndex} />
-    </section>
+    </x.section>
  );
 }

--- a/packages/webapp/src/containers/Setup/SetupWizardContent.module.scss
+++ b/packages/webapp/src/containers/Setup/SetupWizardContent.module.scss
@@ -1,3 +0,0 @@
-.items {
-  padding: 40px 40px 20px;
-}
--- a/packages/webapp/src/containers/Setup/SetupWizardContent.tsx
+++ b/packages/webapp/src/containers/Setup/SetupWizardContent.tsx
@@ -1,18 +1,23 @@
 // @ts-nocheck
 import React from 'react';
+import { x } from '@xstyled/emotion';
+import { css } from '@emotion/css';

 import SetupSubscription from './SetupSubscription/SetupSubscription';
 import SetupOrganizationPage from './SetupOrganizationPage';
 import SetupInitializingForm from './SetupInitializingForm';
 import SetupCongratsPage from './SetupCongratsPage';
 import { Stepper } from '@/components/Stepper';
-import styles from './SetupWizardContent.module.scss';

 interface SetupWizardContentProps {
  stepIndex: number;
  stepId: string;
 }

+const itemsClassName = css`
+  padding: 40px 40px 20px;
+`;
+
 /**
 * Setup wizard content.
 */
@@ -21,12 +26,11 @@ export default function SetupWizardContent({
  stepId,
 }: SetupWizardContentProps) {
  return (
-    <div class="setup-page__content">
+    <x.div w="100%" overflow="auto">
      <Stepper
        active={stepIndex}
        classNames={{
-          content: styles.content,
-          items: styles.items,
+          items: itemsClassName,
        }}
      >
        <Stepper.Step label={'Subscription'}>
@@ -45,6 +49,6 @@ export default function SetupWizardContent({
          <SetupCongratsPage id="congrats" />
        </Stepper.Step>
      </Stepper>
-    </div>
+    </x.div>
  );
 }
--- a/packages/webapp/src/style/pages/Setup/Congrats.scss
+++ b/packages/webapp/src/style/pages/Setup/Congrats.scss
@@ -1,30 +0,0 @@
-.setup-congrats {
-  width: 500px;
-  margin: 0 auto;
-  text-align: center;
-  padding-top: 80px;
-
-  &__page {
-  }
-
-  &__text {
-    margin-top: 30px;
-
-    h1 {
-      color: #2d2b43;
-      margin-bottom: 12px;
-    }
-    .paragraph {
-      font-size: 16px;
-      opacity: 0.85;
-      margin-bottom: 14px;
-    }
-    .bp4-button {
-      height: 38px;
-      padding-left: 25px;
-      padding-right: 25px;
-      font-size: 15px;
-      margin-top: 12px;
-    }
-  }
-}
--- a/packages/webapp/src/style/pages/Setup/Initializing.scss
+++ b/packages/webapp/src/style/pages/Setup/Initializing.scss
@@ -1,41 +0,0 @@
-
-// Setup initializing form
-.setup-initializing-form {
-  width: 95%;
-  margin: 0 auto;
-  padding: 16% 0 0;
-
-  .bp4-progress-bar {
-    background: rgba(92, 112, 128, 0.2);
-    border-radius: 40px;
-    display: block;
-    height: 6px;
-    overflow: hidden;
-    position: relative;
-    width: 80%;
-    margin: 0 auto;
-
-    .bp4-progress-meter {
-      background-color: #809cb3;
-    }
-  }
-
-  &__title {
-    text-align: center;
-    margin-top: 35px;
-
-    h1 {
-      font-size: 22px;
-      font-weight: 600;
-      color: #454c59;
-      margin-top: 0;
-      margin-bottom: 14px;
-    }
-
-    .paragraph {
-      width: 70%;
-      margin: 0 auto;
-      color: #2e4266;
-    }
-  }
-}
--- a/packages/webapp/src/style/pages/Setup/Organization.scss
+++ b/packages/webapp/src/style/pages/Setup/Organization.scss
@@ -1,65 +1 @@

-.setup-organization {
-  max-width: 600px;
-  width: 100%;
-  margin: 0 auto;
-  padding: 45px 25px 20px;
-
-  form {
-    h3 {
-      color: #868f9f;
-      margin-bottom: 2rem;
-      font-weight: 600;
-    }
-  }
-  .bp4-form-group {
-    margin-bottom: 24px;
-
-    .bp4-input-group {
-      .bp4-input {
-        height: 38px;
-      }
-
-    }
-    .bp4-input,
-    .form-group--select-list .bp4-button{
-      font-size: 15px;
-    }
-  }
-
-  label.bp4-label{
-    color: #20242e;
-  }
-
-  .bp4-button:not([class*='bp4-intent-']):not(.bp4-minimal) {
-    width: 100%;
-    height: 38px;
-    padding: 8px;
-  }
-
-  .bp4-text-muted {
-    color: #000000;
-  }
-
-  .register-org-note {
-    font-size: 13px;
-    padding-bottom: 10px;
-    border-bottom: 1px solid #e1e1e1;
-    margin-bottom: 1.75rem;
-    color: #666;
-  }
-
-  .register-org-button {
-    .bp4-button {
-      background-color: #1c2448;
-      height: 40px;
-      font-size: 15px;
-      width: 100%;
-
-      &:disabled,
-      &.bp4-loading{
-        background-color: rgba(28, 36, 72, 0.5);
-      }
-    }
-  }
-}
--- a/packages/webapp/src/style/pages/Setup/SetupPage.scss
+++ b/packages/webapp/src/style/pages/Setup/SetupPage.scss
@@ -13,30 +13,13 @@
    grid-template-columns: 26% 74%;
  }

-  &__right-section {
-    width: 100%;
-    overflow: auto;
-
-    h1 {
-      font-size: 22px;
-    }
-    h1,
-    h3 {
-      font-weight: 500;
-      color: #6b7382;
-    }
-  }
-
-  &__content {
-    width: 100%;
-    padding-bottom: 80px;
-  }
-
  &__left-section {
    background-color: #2f3d6f;
-    z-index: 1;
    width: 100%;

+    .bp4-dark & {
+      background-color: #2f343c;
+    }
    .content {
      display: flex;
      flex-direction: column;
@@ -173,9 +156,7 @@
      &::before {
        background-color: #75859c;
      }
-
      ~li {
-
        &:before,
        &:after {
          background: #e0e0e0;
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -410,8 +410,8 @@ importers:
        specifier: ^0.3.7
        version: 0.3.7(@babel/core@7.28.5)(@blueprintjs/core@4.20.2)(@blueprintjs/select@4.9.24)(formik@2.4.6)(react-dom@18.3.1)(react-is@18.3.1)(react@18.3.1)
      '@blueprintjs-formik/datetime':
-        specifier: ^0.3.7
-        version: 0.3.7(@babel/core@7.28.5)(@blueprintjs-formik/core@0.3.7)(@blueprintjs/core@4.20.2)(@blueprintjs/select@4.9.24)(formik@2.4.6)(react-dom@18.3.1)(react-is@18.3.1)(react@18.3.1)
+        specifier: ^0.4.0
+        version: 0.4.0(@babel/core@7.28.5)(@blueprintjs-formik/core@0.3.7)(@blueprintjs/core@4.20.2)(@blueprintjs/datetime2@3.0.10)(@blueprintjs/datetime@4.4.37)(@blueprintjs/select@4.9.24)(formik@2.4.6)(react-dom@18.3.1)(react-is@18.3.1)(react@18.3.1)
      '@blueprintjs-formik/select':
        specifier: ^0.3.5
        version: 0.3.5(@blueprintjs/core@4.20.2)(@blueprintjs/select@4.9.24)(formik@2.4.6)(react-dom@18.3.1)(react@18.3.1)
@@ -424,6 +424,9 @@ importers:
      '@blueprintjs/datetime':
        specifier: ^4.4.37
        version: 4.4.37(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1)
+      '@blueprintjs/datetime2':
+        specifier: ^3.0.10
+        version: 3.0.10(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1)
      '@blueprintjs/popover2':
        specifier: ^1.14.11
        version: 1.14.11(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1)
@@ -5413,18 +5416,22 @@ packages:
      - react-is
    dev: false

-  /@blueprintjs-formik/datetime@0.3.7(@babel/core@7.28.5)(@blueprintjs-formik/core@0.3.7)(@blueprintjs/core@4.20.2)(@blueprintjs/select@4.9.24)(formik@2.4.6)(react-dom@18.3.1)(react-is@18.3.1)(react@18.3.1):
-    resolution: {integrity: sha512-AZCxM0at6n0kuQaufp5oMYID9tHwz5UlsSGW58j6gNdbJSwQBkeOt5DWPMj6oD7kJGaMXeKxW5/7rLahDX3BPQ==}
+  /@blueprintjs-formik/datetime@0.4.0(@babel/core@7.28.5)(@blueprintjs-formik/core@0.3.7)(@blueprintjs/core@4.20.2)(@blueprintjs/datetime2@3.0.10)(@blueprintjs/datetime@4.4.37)(@blueprintjs/select@4.9.24)(formik@2.4.6)(react-dom@18.3.1)(react-is@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-51RW41DSM96seIgOGz2gw2DX1SfH8+Ydi9JBCNmLaFZRqyKZgRX+qpxmltgbS97lk2IOfCEyKSxoGGfz4XlnPg==}
    peerDependencies:
      '@blueprintjs-formik/core': ^0.3.2 || 4 || 5
      '@blueprintjs/core': ^3.52.0 || 4 || 5
+      '@blueprintjs/datetime': ^3.21.0 || 4 || 5
+      '@blueprintjs/datetime2': ^0.9.0
      '@blueprintjs/select': ^3.18.12 || 4 || 5
      formik: ^2.2.9
-      react: 16 || ^17.0.2 || 18
-      react-dom: 16 || ^17.0.2 || 18
+      react: 16 || ^17.0.2 || ^18.2.0
+      react-dom: 16 || ^17.0.2 || ^18.2.0
    dependencies:
      '@blueprintjs-formik/core': 0.3.7(@babel/core@7.28.5)(@blueprintjs/core@4.20.2)(@blueprintjs/select@4.9.24)(formik@2.4.6)(react-dom@18.3.1)(react-is@18.3.1)(react@18.3.1)
      '@blueprintjs/core': 4.20.2(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1)
+      '@blueprintjs/datetime': 4.4.37(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1)
+      '@blueprintjs/datetime2': 3.0.10(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1)
      '@blueprintjs/select': 4.9.24(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1)
      formik: 2.4.6(react@18.3.1)
      lodash.get: 4.4.2
@@ -5467,6 +5474,12 @@ packages:
      tslib: 2.5.3
    dev: false

+  /@blueprintjs/colors@5.1.12:
+    resolution: {integrity: sha512-7GQWUQ82eLE1te++DC8fRO2B31bsSwia82NLamZfKgjHY9V4zxafMT1DK5gKlmmy0nCjpdcCc+df4aVZMHGLww==}
+    dependencies:
+      tslib: 2.6.2
+    dev: false
+
  /@blueprintjs/core@4.20.2(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1):
    resolution: {integrity: sha512-5v4Nr0jozfAjiOkjY4zvt1XSpt4ldnrSaxtwo506S2cxJYfwFeMTmDshXNPFcc8L1fjZMxi0IWI2WABXzZXS6w==}
    hasBin: true
@@ -5494,6 +5507,53 @@ packages:
      tslib: 2.5.3
    dev: false

+  /@blueprintjs/core@6.4.1(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-JSA8seGiZ2dpmugO7Cea4bh0XEkTioDyzM1Z/0piFsziVv4OeV3jrmMXMegtCdHqpwpWYj8reGuPzFKHGemXXw==}
+    hasBin: true
+    peerDependencies:
+      '@types/react': '18'
+      react: '18'
+      react-dom: '18'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@blueprintjs/colors': 5.1.12
+      '@blueprintjs/icons': 6.3.2(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1)
+      '@popperjs/core': 2.11.8
+      '@types/react': 18.3.4
+      classnames: 2.5.1
+      normalize.css: 8.0.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-popper: 2.3.0(@popperjs/core@2.11.8)(react-dom@18.3.1)(react@18.3.1)
+      react-transition-group: 4.4.5(react-dom@18.3.1)(react@18.3.1)
+      tslib: 2.6.2
+      use-sync-external-store: 1.6.0(react@18.3.1)
+    dev: false
+
+  /@blueprintjs/datetime2@3.0.10(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-pli0hkv93aH2Ou3inZ2KIdNBLj5dYW8XVu21Rr3fSoh5b9aUsThAVDmb51LjlfNiPVi1i+y2omGuDRTKV+zUgw==}
+    peerDependencies:
+      '@types/react': '18'
+      react: '18'
+      react-dom: '18'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@blueprintjs/colors': 5.1.12
+      '@blueprintjs/core': 6.4.1(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1)
+      '@blueprintjs/datetime': 6.0.10(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1)
+      '@blueprintjs/icons': 6.3.2(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1)
+      '@types/react': 18.3.4
+      date-fns: 2.30.0
+      react: 18.3.1
+      react-day-picker: 8.10.1(date-fns@2.30.0)(react@18.3.1)
+      react-dom: 18.3.1(react@18.3.1)
+      tslib: 2.6.2
+    dev: false
+
  /@blueprintjs/datetime@4.4.37(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1):
    resolution: {integrity: sha512-YJiWzUH1eefCMvvvdsLimrLZNk5XW1yTMK4OmX6BP+gAt/u7cNKyv+42XO4tlymeWRqT0K7HbQOPP4ybt/xzEw==}
    peerDependencies:
@@ -5513,6 +5573,30 @@ packages:
      tslib: 2.5.3
    dev: false

+  /@blueprintjs/datetime@6.0.10(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-8i8P12OwCe0JGTkX20EtHvembEjwfqkf1pQcec3lMdPDDeEpPmV3vzPWxwCS+NSc6vUGl/2aAFs+Ro7qDW1msw==}
+    peerDependencies:
+      '@types/react': '18'
+      react: '18'
+      react-dom: '18'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@blueprintjs/core': 6.4.1(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1)
+      '@blueprintjs/icons': 6.3.2(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1)
+      '@blueprintjs/select': 6.0.10(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1)
+      '@types/react': 18.3.4
+      classnames: 2.5.1
+      date-fns: 2.30.0
+      date-fns-tz: 2.0.1(date-fns@2.30.0)
+      react: 18.3.1
+      react-day-picker: 8.10.1(date-fns@2.30.0)(react@18.3.1)
+      react-dom: 18.3.1(react@18.3.1)
+      react-innertext: 1.1.5(@types/react@18.3.4)(react@18.3.1)
+      tslib: 2.6.2
+    dev: false
+
  /@blueprintjs/icons@4.16.0:
    resolution: {integrity: sha512-cyfgjUZcZCtQrXWUV8FwqYTFEzduV4a0N7yhOU38jY+cBRCLu/sDrD0Osvfk4DGRvNe4YjY7pohVLFSxpg68Uw==}
    dependencies:
@@ -5521,6 +5605,24 @@ packages:
      tslib: 2.5.3
    dev: false

+  /@blueprintjs/icons@6.3.2(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-rOdSg7yPmjtqy3e+wD66tXCrzt57M59htVOikwunTaCyQ61+bsF0PyqLfNlhsw1mXqZm8uxSINs1bhnwXhQCiw==}
+    peerDependencies:
+      '@types/react': '18'
+      react: '18'
+      react-dom: '18'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.3.4
+      change-case: 4.1.2
+      classnames: 2.5.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      tslib: 2.6.2
+    dev: false
+
  /@blueprintjs/popover2@1.14.11(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1):
    resolution: {integrity: sha512-5XAjeb2mlWjYXC0pqrNDLzHSsX85Zaiv8jixxUN9abarMUUFKGATgGF8MRsWTLAW94Gli6CB1lzVkrYkRHHf6Q==}
    peerDependencies:
@@ -5562,6 +5664,26 @@ packages:
      tslib: 2.5.3
    dev: false

+  /@blueprintjs/select@6.0.10(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-RjDuomn4KhluiN7tVofLLX6S+b+un0mLehvmOSETpqk1C8lHXCxReIXxFiWqTB+YiIgkqQ6aRNjQs35cJBbrfg==}
+    peerDependencies:
+      '@types/react': '18'
+      react: '18'
+      react-dom: '18'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@blueprintjs/colors': 5.1.12
+      '@blueprintjs/core': 6.4.1(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1)
+      '@blueprintjs/icons': 6.3.2(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1)
+      '@types/react': 18.3.4
+      classnames: 2.5.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      tslib: 2.6.2
+    dev: false
+
  /@blueprintjs/table@4.10.12(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1):
    resolution: {integrity: sha512-f5NbjuHQ/1vb5hkT+WsCnjIU3Vp2OCWdyDUopVmgj4qHIgzgX38vP2sLS8aUFlbsEQr/xAU9mfkpp4FT+65mXA==}
    peerDependencies:
@@ -15705,6 +15827,21 @@ packages:
      is-data-view: 1.0.1
    dev: true

+  /date-fns-tz@2.0.1(date-fns@2.30.0):
+    resolution: {integrity: sha512-fJCG3Pwx8HUoLhkepdsP7Z5RsucUi+ZBOxyM5d0ZZ6c4SdYustq0VMmOu6Wf7bli+yS/Jwp91TOCqn9jMcVrUA==}
+    peerDependencies:
+      date-fns: 2.x
+    dependencies:
+      date-fns: 2.30.0
+    dev: false
+
+  /date-fns@2.30.0:
+    resolution: {integrity: sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==}
+    engines: {node: '>=0.11'}
+    dependencies:
+      '@babel/runtime': 7.24.5
+    dev: false
+
  /dateformat@3.0.3:
    resolution: {integrity: sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==}
    dev: true
@@ -20379,6 +20516,7 @@ packages:

  /lodash.get@4.4.2:
    resolution: {integrity: sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==}
+    deprecated: This package is deprecated. Use the optional chaining (?.) operator instead.
    dev: false

  /lodash.includes@4.3.0:
@@ -23212,6 +23350,16 @@ packages:
      react: 18.3.1
    dev: false

+  /react-day-picker@8.10.1(date-fns@2.30.0)(react@18.3.1):
+    resolution: {integrity: sha512-TMx7fNbhLk15eqcMt+7Z7S2KF7mfTId/XJDjKE8f+IUcFn0l08/kI4FiYTL/0yuOLmEcbR4Fwe3GJf/NiiMnPA==}
+    peerDependencies:
+      date-fns: ^2.28.0 || ^3.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      date-fns: 2.30.0
+      react: 18.3.1
+    dev: false
+
  /react-docgen-typescript@2.2.2(typescript@5.6.3):
    resolution: {integrity: sha512-tvg2ZtOpOi6QDwsb3GZhOjDkkX0h8Z2gipvTg6OVMUyoYoURhEiRNePT8NZItTVCDh39JJHnLdfCOkzoLbFnTg==}
    peerDependencies:
@@ -26552,6 +26700,14 @@ packages:
      tslib: 2.8.1
    dev: true

+  /use-sync-external-store@1.6.0(react@18.3.1):
+    resolution: {integrity: sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    dependencies:
+      react: 18.3.1
+    dev: false
+
  /util-deprecate@1.0.2:
    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
Author	SHA1	Message	Date
Ahmed Bouhuolia	32d74b0413	feat: onboarding pages darkmode (#867 )	2025-12-03 16:04:46 +02:00
allcontributors[bot]	71b1206f8a	docs: add Daniel15 as a contributor for bug, and code (#865 ) * docs: update README.md [skip ci] * docs: update .all-contributorsrc [skip ci] --------- Co-authored-by: allcontributors[bot] <46447321+allcontributors[bot]@users.noreply.github.com>	2025-12-02 01:42:54 +02:00
Ahmed Bouhuolia	cb1bcaae77	Merge pull request #864 from Daniel15/patch-3 fix: Stripe integration	2025-12-02 01:41:04 +02:00