Merge pull request #115 from kloudlite/design

Design
kloudlite · Mar 4, 2024 · a762f71 · a762f71
2 parents 745c7c1 + 83b7ff7
commit a762f71
Show file tree

Hide file tree

Showing 17 changed files with 285 additions and 414 deletions.
diff --git a/Taskfile.yaml b/Taskfile.yaml
@@ -35,7 +35,7 @@ tasks:
 
         case $(whoami) in
           "bikash")
-            URL_SUFFIX="-bikash"
+            URL_SUFFIX="1"
             ;;
 
           "vision")

diff --git a/src/apps/console/components/icons.tsx b/src/apps/console/components/icons.tsx
@@ -4,9 +4,15 @@ import {
   Plus,
   Trash,
   PencilLine,
+  Check,
   GithubLogoFill,
   GitBranchFill,
   GitlabLogoFill,
+  Users,
+  ChevronLeft,
+  ChevronRight,
+  X,
+  SmileySad,
 } from '@jengaicons/react';
 
 export {
@@ -18,4 +24,10 @@ export {
   GithubLogoFill,
   GitlabLogoFill,
   GitBranchFill,
+  Users,
+  Check,
+  ChevronLeft,
+  ChevronRight,
+  X,
+  SmileySad,
 };
diff --git a/src/apps/console/page-components/new-cluster.tsx b/src/apps/console/page-components/new-cluster.tsx
@@ -1,7 +1,5 @@
-import { ArrowRight } from '@jengaicons/react';
 import { useNavigate, useParams } from '@remix-run/react';
 import { useMemo, useState } from 'react';
-import { Button } from '~/components/atoms/button';
 import Select from '~/components/atoms/select';
 import { toast } from '~/components/molecule/toast';
 import { mapper, useMapper } from '~/components/utils';
@@ -28,7 +26,8 @@ import MultiStepProgress, {
 } from '../components/multi-step-progress';
 import MultiStepProgressWrapper from '../components/multi-step-progress-wrapper';
 import { TitleBox } from '../components/raw-wrapper';
-import { ReviewComponent } from '../components/commons';
+import { BottomNavigation, ReviewComponent } from '../components/commons';
+import { ArrowRight } from '../components/icons';
 
 type props =
   | {
@@ -87,10 +86,6 @@ export const NewCluster = ({ providerSecrets, cloudProvider }: props) => {
     (typeof awsRegions)[number]
   >(awsRegions[0]);
 
-  const [selectedAvailabilityMode, setSelectedAvailabilityMode] = useState<
-    (typeof constDatas.availabilityModes)[number] | undefined
-  >();
-
   const { values, errors, handleSubmit, handleChange, isLoading } = useForm({
     initialValues: {
       name: '',
@@ -242,26 +237,14 @@ export const NewCluster = ({ providerSecrets, cloudProvider }: props) => {
             />
           </div>
         </div>
-        {isOnboarding ? (
-          <div className="flex flex-row gap-xl justify-start">
-            <Button
-              variant="primary"
-              content="Create"
-              suffix={<ArrowRight />}
-              type="submit"
-              loading={isLoading}
-            />
-          </div>
-        ) : (
-          <div className="flex flex-row justify-start">
-            <Button
-              variant="primary"
-              content="Continue"
-              suffix={<ArrowRight />}
-              type="submit"
-            />
-          </div>
-        )}
+        <BottomNavigation
+          primaryButton={{
+            loading: isLoading,
+            variant: 'primary',
+            content: isOnboarding ? 'Create' : 'Next',
+            type: 'submit',
+          }}
+        />
       </div>
     );
   };
@@ -344,15 +327,14 @@ export const NewCluster = ({ providerSecrets, cloudProvider }: props) => {
                     </div>
                   </div>
                 </ReviewComponent>
-                <div className="flex flex-row justify-start">
-                  <Button
-                    loading={isLoading}
-                    variant="primary"
-                    content="Create"
-                    suffix={<ArrowRight />}
-                    type="submit"
-                  />
-                </div>
+                <BottomNavigation
+                  primaryButton={{
+                    loading: isLoading,
+                    variant: 'primary',
+                    content: 'Create',
+                    type: 'submit',
+                  }}
+                />
               </MultiStepProgress.Step>
             </>
           ) : (

diff --git a/src/apps/console/page-components/new-project.tsx b/src/apps/console/page-components/new-project.tsx
@@ -1,7 +1,5 @@
 /* eslint-disable no-nested-ternary */
-import { ArrowRight } from '@jengaicons/react';
 import { useLoaderData, useNavigate, useParams } from '@remix-run/react';
-import { Button } from '~/components/atoms/button';
 import { toast } from '~/components/molecule/toast';
 import useForm, { dummyEvent } from '~/root/lib/client/hooks/use-form';
 import Yup from '~/root/lib/server/helpers/yup';
@@ -23,7 +21,7 @@ import MultiStepProgress, {
 } from '../components/multi-step-progress';
 import MultiStepProgressWrapper from '../components/multi-step-progress-wrapper';
 import { TitleBox } from '../components/raw-wrapper';
-import { ReviewComponent } from '../components/commons';
+import { BottomNavigation, ReviewComponent } from '../components/commons';
 
 const statusRender = (item: ExtractNodeType<IClusters>) => {
   return listStatus({
@@ -157,8 +155,6 @@ const NewProject = () => {
                               </div>
                             </div>
                           ) : (
-                            // parseStatus({ item: clster }) === 'syncing' ||
-                            // parseStatus({ item: clster }) === 'notready' ?
                             <div className="flex text-text-disabled">
                               <div className="flex-grow">
                                 <div className="flex flex-col">
@@ -184,14 +180,13 @@ const NewProject = () => {
                     handleChange('clusterName')(dummyEvent(v.value));
                 }}
               />
-              <div className="flex flex-row justify-start">
-                <Button
-                  variant="primary"
-                  content="Next"
-                  suffix={<ArrowRight />}
-                  type="submit"
-                />
-              </div>
+              <BottomNavigation
+                primaryButton={{
+                  variant: 'primary',
+                  content: 'Next',
+                  type: 'submit',
+                }}
+              />
             </div>
           </MultiStepProgress.Step>
           <MultiStepProgress.Step step={2} label="Review">
@@ -218,15 +213,14 @@ const NewProject = () => {
                 </div>
               </div>
             </ReviewComponent>
-            <div className="flex flex-row justify-start">
-              <Button
-                loading={isLoading}
-                variant="primary"
-                content="Create"
-                suffix={<ArrowRight />}
-                type="submit"
-              />
-            </div>
+            <BottomNavigation
+              primaryButton={{
+                loading: isLoading,
+                variant: 'primary',
+                content: 'Create',
+                type: 'submit',
+              }}
+            />
           </MultiStepProgress.Step>
         </MultiStepProgress.Root>
       </MultiStepProgressWrapper>

diff --git a/src/apps/console/routes/_a+/new-team.tsx b/src/apps/console/routes/_a+/new-team.tsx
@@ -1,6 +1,4 @@
-import { ArrowRight } from '@jengaicons/react';
 import { useNavigate } from '@remix-run/react';
-import { Button } from '~/components/atoms/button';
 import { toast } from '~/components/molecule/toast';
 import { useDataFromMatches } from '~/root/lib/client/hooks/use-custom-matches';
 import useForm from '~/root/lib/client/hooks/use-form';
@@ -13,6 +11,7 @@ import MultiStepProgressWrapper from '~/console/components/multi-step-progress-w
 import MultiStepProgress, {
   useMultiStepProgress,
 } from '~/console/components/multi-step-progress';
+import { BottomNavigation } from '~/console/components/commons';
 
 const NewAccount = () => {
   const api = useConsoleApi();
@@ -77,16 +76,14 @@ const NewAccount = () => {
                 handleChange={handleChange}
                 nameErrorLabel="isNameError"
               />
-              <div className="flex flex-row gap-xl justify-start">
-                <Button
-                  variant="primary"
-                  content="Continue"
-                  suffix={<ArrowRight />}
-                  size="md"
-                  loading={isLoading}
-                  type="submit"
-                />
-              </div>
+              <BottomNavigation
+                primaryButton={{
+                  variant: 'primary',
+                  content: 'Next',
+                  loading: isLoading,
+                  type: 'submit',
+                }}
+              />
             </div>
           </MultiStepProgress.Step>
           <MultiStepProgress.Step step={2} label="Add your cloud provider" />

diff --git a/src/apps/console/routes/_a+/onboarding+/$a+/$cloudprovider+/validate-cp.tsx b/src/apps/console/routes/_a+/onboarding+/$a+/$cloudprovider+/validate-cp.tsx
@@ -1,11 +1,9 @@
 /* eslint-disable react/no-unescaped-entities */
 /* eslint-disable no-nested-ternary */
 import { IRemixCtx } from '~/root/lib/types/common';
-import { ArrowRight, Check } from '@jengaicons/react';
 import { useLoaderData, useNavigate, useOutletContext } from '@remix-run/react';
 import { defer } from '@remix-run/node';
 import { useState } from 'react';
-import { Button } from '~/components/atoms/button';
 import { toast } from '~/components/molecule/toast';
 import { handleError } from '~/root/lib/utils/common';
 import useCustomSwr from '~/root/lib/client/hooks/use-custom-swr';
@@ -18,11 +16,12 @@ import { parseName } from '~/console/server/r-utils/common';
 import { LoadingPlaceHolder } from '~/console/components/loading';
 import CodeView from '~/console/components/code-view';
 import { asyncPopupWindow } from '~/console/utils/commons';
-import ProgressWrapper from '~/console/components/progress-wrapper';
 import MultiStepProgressWrapper from '~/console/components/multi-step-progress-wrapper';
 import MultiStepProgress, {
   useMultiStepProgress,
 } from '~/console/components/multi-step-progress';
+import { Check } from '~/console/components/icons';
+import { BottomNavigation } from '~/console/components/commons';
 import { IAccountContext } from '../../../../_main+/$account+/_layout';
 
 export const loader = async (ctx: IRemixCtx) => {
@@ -164,20 +163,19 @@ const Validator = ({ cloudProvider }: { cloudProvider: any }) => {
                   </div>
                 </div>
               )}
-              <div className="flex flex-row gap-xl justify-start">
-                <Button
-                  variant="primary"
-                  content={data?.result ? 'Next' : 'Skip'}
-                  suffix={<ArrowRight />}
-                  onClick={() => {
+              <BottomNavigation
+                primaryButton={{
+                  variant: 'primary',
+                  content: data?.result ? 'Next' : 'Skip',
+                  onClick: () => {
                     navigate(
                       `/onboarding/${parseName(account)}/${parseName(
                         cloudProvider
                       )}/new-cluster`
                     );
-                  }}
-                />
-              </div>
+                  },
+                }}
+              />
             </div>
           </MultiStepProgress.Step>
           <MultiStepProgress.Step step={4} label="Setup first cluster" />

diff --git a/src/apps/console/routes/_a+/onboarding+/$a+/new-cloud-provider.tsx b/src/apps/console/routes/_a+/onboarding+/$a+/new-cloud-provider.tsx
@@ -1,6 +1,4 @@
-import { ArrowRight } from '@jengaicons/react';
 import { useNavigate, useParams } from '@remix-run/react';
-import { Button } from '~/components/atoms/button';
 import { TextInput } from '~/components/atoms/input';
 import Select from '~/components/atoms/select';
 import { toast } from '~/components/molecule/toast';
@@ -15,6 +13,7 @@ import MultiStepProgressWrapper from '~/console/components/multi-step-progress-w
 import MultiStepProgress, {
   useMultiStepProgress,
 } from '~/console/components/multi-step-progress';
+import { BottomNavigation } from '~/console/components/commons';
 
 const NewCloudProvider = () => {
   const { a: accountName } = useParams();
@@ -147,15 +146,14 @@ const NewCloudProvider = () => {
                   )}
                 </div>
               </div>
-              <div className="flex flex-row gap-xl justify-start">
-                <Button
-                  loading={isLoading}
-                  type="submit"
-                  variant="primary"
-                  content="Continue"
-                  suffix={<ArrowRight />}
-                />
-              </div>
+              <BottomNavigation
+                primaryButton={{
+                  variant: 'primary',
+                  content: 'Next',
+                  loading: isLoading,
+                  type: 'submit',
+                }}
+              />
             </div>
           </MultiStepProgress.Step>
           <MultiStepProgress.Step step={3} label="Validate cloud provider" />

diff --git a/src/apps/console/routes/_a+/teams.tsx b/src/apps/console/routes/_a+/teams.tsx
@@ -1,4 +1,3 @@
-import { ArrowRight, Users } from '@jengaicons/react';
 import { redirect } from '@remix-run/node';
 import {
   Link,
@@ -24,6 +23,7 @@ import DynamicPagination from '~/console/components/dynamic-pagination';
 import List from '~/console/components/list';
 import { parseName } from '~/console/server/r-utils/common';
 import ConsoleAvatar from '~/console/components/console-avatar';
+import { ArrowRight, Users } from '~/console/components/icons';
 
 export const loader = async (ctx: IRemixCtx) => {
   let accounts;