feat: onboarding pages darkmode (#867)

* docs: update README.md [skip ci]

* docs: update .all-contributorsrc [skip ci]

---------

Co-authored-by: allcontributors[bot] <46447321+allcontributors[bot]@users.noreply.github.com>

.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,

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>

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"
   },

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,
 };

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>
 

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">
+    <x.div
-      <div class="setup-congrats__workflow-pic">
+      w={'500px'}
+      mx="auto"
+      textAlign="center"
+      pt={'80px'}
+    >
+      <x.div>
         <WorkflowIcon width="280" height="330" />
-      </div>
+      </x.div>
 
-      <div class="setup-congrats__text">
+      <x.div mt={30}>
-        <h1>
+        <x.h2
-          <T id={'setup.congrats.title'} />
+          color={isDarkMode ? 'rgba(255, 255, 255, 0.85)' : '#2d2b43'}
-        </h1>
+          mb={'12px'}
-
-        <p class="paragraph">
-          <T id={'setup.congrats.description'} />
-        </p>
-
-        <Button
-          intent={Intent.PRIMARY}
-          type="submit"
-          loading={isReloading}
-          onClick={handleBtnClick}
         >
-          <T id={'setup.congrats.go_to_dashboard'} />
+          <T id={'setup.congrats.title'} />
-        </Button>
+        </x.h2>
-      </div>
+
-    </div>
+        <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>
   );
 }
 

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">
+    <x.div>
-      <div className={'setup-initializing-form__title'}>
+      <x.div textAlign="center" mt={35}>
-        <h1>
+        <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>
+        </x.h1>
-        <p class="paragraph">
+        <x.p
+          w="70%"
+          mx="auto"
+          color={isDarkMode ? 'rgba(255, 255, 255, 0.7)' : '#2e4266'}
+        >
           <T id={'setup.initializing.please_refresh_the_page'} />
-        </p>
+        </x.p>
-      </div>
+      </x.div>
-    </div>
+    </x.div>
   );
 }
 
@@ -91,19 +104,49 @@ function SetupInitializingFailed() {
  * Setup initializing running state.
  */
 function SetupInitializingRunning() {
-  return (
+  const isDarkMode = useIsDarkMode();
-    <div class="setup-initializing__content">
-      <ProgressBar intent={Intent.PRIMARY} value={null} />
 
-      <div className={'setup-initializing-form__title'}>
+  const progressBarStyles = css`
-        <h1>
+    .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>
+        </x.h1>
-        <p className={'paragraph'}>
+        <x.p
+          w="70%"
+          mx="auto"
+          color={isDarkMode ? 'rgba(255, 255, 255, 0.7)' : '#2e4266'}
+        >
           <T id={'setup.initializing.description'} />
-        </p>
+        </x.p>
-      </div>
+      </x.div>
-    </div>
+    </x.div>
   );
 }
 
@@ -111,18 +154,30 @@ function SetupInitializingRunning() {
  * Setup initializing completed state.
  */
 function SetupInitializingCompleted() {
+  const isDarkMode = useIsDarkMode();
+
   return (
-    <div class="setup-initializing__content">
+    <x.div>
-      <div className={'setup-initializing-form__title'}>
+      <x.div textAlign="center" mt={35}>
-        <h1>
+        <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>
+        </x.h1>
-        <p class="paragraph">
+        <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>
+        </x.p>
-      </div>
+      </x.div>
-    </div>
+    </x.div>
   );
 }

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
+          <FFormGroup name={'language'} label={<T id={'language'} />} fastField>
-            name={'language'}
-            label={<T id={'language'} />}
-            fastField={true}
-          >
             <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'}>
+      <FFormGroup name={'timezone'} label={<T id={'time_zone'} />}>
-        {({
+        <FTimezoneSelect
-          form: { setFieldValue },
+          name={'timezone'}
-          field: { value },
+          valueDisplayFormat="composite"
-          meta: { error, touched },
+          showLocalTimezone={true}
-        }) => (
+          placeholder={<T id={'select_time_zone'} />}
-          <FormGroup
+          popoverProps={{ minimal: true }}
-            label={<T id={'time_zone'} />}
+          buttonProps={{
-            className={classNames(
+            alignText: 'left',
-              'form-group--time-zone',
+            fill: true,
-              'form-group--select-list',
+            large: true,
-              Classes.FILL,
+          }}
-            )}
+        />
-            intent={inputIntent({ error, touched })}
+      </FFormGroup>
-            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>
 
-      <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'}>
+      <x.div>
-        <Button intent={Intent.PRIMARY} loading={isSubmitting} type="submit">
+        <Button
+          intent={Intent.PRIMARY}
+          loading={isSubmitting}
+          fill
+          large
+          type="submit"
+        >
           <T id={'save_continue'} />
         </Button>
-      </div>
+      </x.div>
     </Form>
   );
 }

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 { x } from '@xstyled/emotion';
-import '@/style/pages/Setup/Organization.scss';
 
 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(
+export default compose(withSettingsActions)(SetupOrganizationPage);
-  withSettingsActions,
-)(SetupOrganizationPage);

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>
   );
 }
 

packages/webapp/src/containers/Setup/SetupWizardContent.module.scss

@@ -1,3 +0,0 @@
-.items {
-  padding: 40px 40px 20px;
-}

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: itemsClassName,
-          items: styles.items,
         }}
       >
         <Stepper.Step label={'Subscription'}>
@@ -45,6 +49,6 @@ export default function SetupWizardContent({
           <SetupCongratsPage id="congrats" />
         </Stepper.Step>
       </Stepper>
-    </div>
+    </x.div>
   );
 }

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;
-    }
-  }
-}

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;
-    }
-  }
-}

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);
-      }
-    }
-  }
-}

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;

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
+        specifier: ^0.4.0
-        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)
+        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):
+  /@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-AZCxM0at6n0kuQaufp5oMYID9tHwz5UlsSGW58j6gNdbJSwQBkeOt5DWPMj6oD7kJGaMXeKxW5/7rLahDX3BPQ==}
+    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: 16 || ^17.0.2 || ^18.2.0
-      react-dom: 16 || ^17.0.2 || 18
+      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==}