From fa4592587d347e758bdd36fdaaab2bdf528c9c08 Mon Sep 17 00:00:00 2001 From: Bikash Date: Mon, 27 May 2024 18:59:54 +0530 Subject: [PATCH 01/44] updated for darkmode --- src/design-system/components/atoms/input.tsx | 71 ++++++++++--------- .../components/atoms/option-list.tsx | 2 +- src/design-system/components/css/index.scss | 31 +++++++- src/design-system/tailwind-base.js | 6 +- 4 files changed, 73 insertions(+), 37 deletions(-) diff --git a/src/design-system/components/atoms/input.tsx b/src/design-system/components/atoms/input.tsx index fdff96139..ed4c59dfc 100644 --- a/src/design-system/components/atoms/input.tsx +++ b/src/design-system/components/atoms/input.tsx @@ -72,6 +72,7 @@ interface ITextArea extends IInputRow { prefix?: ReactNode; prefixIcon?: JSX.Element; resize?: boolean; + cols?: string; } export interface ITextInputBase extends IInputRow { @@ -154,11 +155,11 @@ export const TextInputBase = forwardRef( className={cn( 'transition-all rounded border flex flex-row items-center relative ring-offset-1 dark:ring-offset-0 pulsable ring-border-focus dark:ring-border-darktheme-focus', { - 'text-text-critical bg-surface-critical-subdued border-border-critical': + 'text-text-critical bg-surface-critical-subdued border-border-critical dark:bg-surface-darktheme-critical-subdued dark:border-border-darktheme-critical': error, 'text-text-default dark:text-text-darktheme-default border-border-default dark:border-border-darktheme-default bg-surface-basic-input dark:bg-surface-darktheme-basic-input': !error, - 'text-text-disabled border-border-disabled bg-surface-basic-input': + 'text-text-disabled border-border-disabled bg-surface-basic-input dark:text-text-darktheme-disabled dark:border-border-darktheme-disabled dark:bg-surface-darktheme-basic-input': disabled, 'pr-0': component !== 'input', }, @@ -244,9 +245,11 @@ export const TextInputBase = forwardRef( {!!suffixIcon && (
{cloneElement(suffixIcon, { @@ -301,8 +304,8 @@ export const TextInputBase = forwardRef( className={cn( 'bodySm pulsable', { - 'text-text-critical': error, - 'text-text-default': !error, + 'text-text-critical dark:text-text-darktheme-critical': error, + 'text-text-default dark:text-text-darktheme-default': !error, }, 'pt-md' )} @@ -409,31 +412,35 @@ export const TextInput = forwardRef( } ); -export const TextArea = ({ - autoComplete = 'off', - onChange = (_) => {}, - resize = false, - rows = '3', - ...etc -}: ITextArea) => { - const ref = useRef(null); - const id = useId(); - return ( - - ); -}; +export const TextArea = forwardRef( + ( + { + autoComplete = 'off', + onChange = (_) => {}, + resize = false, + rows = '3', + ...etc + }, + ref + ) => { + const id = useId(); + return ( + + ); + } +); export const PasswordInput = (props: IInputRow) => { const ref = useRef(null); diff --git a/src/design-system/components/atoms/option-list.tsx b/src/design-system/components/atoms/option-list.tsx index 47336b7d9..c655e3af9 100644 --- a/src/design-system/components/atoms/option-list.tsx +++ b/src/design-system/components/atoms/option-list.tsx @@ -151,7 +151,7 @@ const OptionMenuContent = forwardRef< exit={{ opacity: 0, scale: 0.85 }} transition={{ duration: 0.3, ease: 'anticipate' }} className={cn( - 'z-50 border border-border-default dark:border-border-darktheme-default shadow-popover bg-surface-basic-default dark:bg-surface-darktheme-basic-default rounded min-w-[160px] overflow-hidden origin-top py-lg', + 'z-50 border border-border-default dark:border-border-darktheme-default shadow-popover dark:shadow-darktheme-popover bg-surface-basic-default dark:bg-surface-darktheme-basic-default rounded min-w-[160px] overflow-hidden origin-top py-lg', className )} > diff --git a/src/design-system/components/css/index.scss b/src/design-system/components/css/index.scss index eb2f76233..b3c9b666d 100644 --- a/src/design-system/components/css/index.scss +++ b/src/design-system/components/css/index.scss @@ -1202,6 +1202,10 @@ video { min-width: 3px; } +.max-w-8xl{ + max-width: 90rem; +} + .max-w-\[200px\]{ max-width: 200px; } @@ -1523,6 +1527,11 @@ video { border-color: rgb(220 38 38 / var(--tw-border-opacity)); } +.border-border-darktheme-critical{ + --tw-border-opacity: 1; + border-color: rgb(153 27 27 / var(--tw-border-opacity)); +} + .border-border-darktheme-default{ --tw-border-opacity: 1; border-color: rgb(39 39 42 / var(--tw-border-opacity)); @@ -2132,6 +2141,11 @@ video { color: rgb(161 161 170 / var(--tw-text-opacity)); } +.text-text-darktheme-strong{ + --tw-text-opacity: 1; + color: rgb(209 213 219 / var(--tw-text-opacity)); +} + .text-text-darktheme-success{ --tw-text-opacity: 1; color: rgb(34 197 94 / var(--tw-text-opacity)); @@ -2297,6 +2311,10 @@ video { transition-duration: 200ms; } +.\[pointer-events\:all\]{ + pointer-events: all; +} + input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, @@ -2488,7 +2506,7 @@ select{ } .focus-visible\:shadow-focus:focus-visible{ - --tw-shadow: 0px 0px 0px 2px #60A5FA;; + --tw-shadow: 0px 0px 0px 2px #60A5FA; --tw-shadow-colored: 0px 0px 0px 2px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } @@ -2901,6 +2919,11 @@ select{ color: rgb(161 161 170 / var(--tw-text-opacity)); } +:is(:where(.dark) .dark\:text-text-darktheme-strong){ + --tw-text-opacity: 1; + color: rgb(209 213 219 / var(--tw-text-opacity)); +} + :is(:where(.dark) .dark\:text-text-darktheme-success){ --tw-text-opacity: 1; color: rgb(34 197 94 / var(--tw-text-opacity)); @@ -2911,6 +2934,12 @@ select{ color: rgb(245 158 11 / var(--tw-text-opacity)); } +:is(:where(.dark) .dark\:shadow-darktheme-popover){ + --tw-shadow: 0px 0px 2px 0px rgba(250, 250, 250, 0.20), 0px 2px 10px 0px rgba(250, 250, 250, 0.10); + --tw-shadow-colored: 0px 0px 2px 0px var(--tw-shadow-color), 0px 2px 10px 0px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + :is(:where(.dark) .dark\:ring-border-darktheme-focus){ --tw-ring-opacity: 1; --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity)); diff --git a/src/design-system/tailwind-base.js b/src/design-system/tailwind-base.js index 825598da0..2634f80ec 100644 --- a/src/design-system/tailwind-base.js +++ b/src/design-system/tailwind-base.js @@ -262,7 +262,7 @@ const config = { ], deep: [ '0px 0px 0px 1px rgba(6, 44, 82, 0.1)', - '0px 2px 16px rgba(33, 43, 54, 0.08);', + '0px 2px 16px rgba(33, 43, 54, 0.08)', ], modal: [ '0px 0px 1px rgba(0, 0, 0, 0.2)', @@ -272,10 +272,10 @@ const config = { '0px 1px 3px rgba(63, 63, 68, 0.15)', '0px 0px 0px 1px rgba(63, 63, 68, 0.05)', ], - focus: '0px 0px 0px 2px #60A5FA;', + focus: '0px 0px 0px 2px #60A5FA', 'darktheme-popover': [ '0px 0px 2px 0px rgba(250, 250, 250, 0.20)', - '0px 2px 10px 0px rgba(250, 250, 250, 0.10);', + '0px 2px 10px 0px rgba(250, 250, 250, 0.10)', ], }, maxWidth: { ...width }, From 1511d57a05ff9c95880cb4e1df4cd08a330cbf92 Mon Sep 17 00:00:00 2001 From: Bikash Date: Mon, 27 May 2024 19:01:56 +0530 Subject: [PATCH 02/44] updated new design and added some docs --- src/apps/auth/components/container.tsx | 2 +- src/apps/auth/routes/_providers+/signup.tsx | 77 +- src/apps/devdoc/app/components/anchor.tsx | 24 +- src/apps/devdoc/app/components/footer.tsx | 2 +- .../devdoc/app/components/join-providers.tsx | 38 + src/apps/devdoc/app/components/nav-links.tsx | 4 +- src/apps/devdoc/app/components/nav-menu.tsx | 2 +- .../devdoc/app/components/page/contact-us.tsx | 116 ++- .../devdoc/app/components/page/index-new.tsx | 97 +- src/apps/devdoc/app/components/page/index.tsx | 2 +- .../devdoc/app/components/page/products.tsx | 2 +- src/apps/devdoc/app/components/toc.tsx | 5 +- .../website/home/keep-exploring.tsx | 14 +- .../website/home/kloudlite-development.tsx | 2 +- .../components/website/home/opensource.tsx | 9 +- .../app/components/website/home/partners.tsx | 5 +- .../website/home/secure-at-core.tsx | 71 +- .../components/website/home/supercharge.tsx | 27 +- .../website/horizontal-top-tab-home.tsx | 4 +- .../app/components/website/pagination.tsx | 1 - .../app/components/website/provider-ui.tsx | 164 +++ .../app/components/website/ready-to-ops.tsx | 2 +- src/apps/devdoc/app/components/writer.tsx | 26 +- src/apps/devdoc/app/layout/mdx-components.tsx | 17 +- src/apps/devdoc/app/layout/theme.tsx | 6 +- src/apps/devdoc/app/utils/config.tsx | 11 +- .../images/homeNew/integrate1440-dark.svg | 33 +- .../secure-at-core-1024-dark.svg | 222 ++-- .../secure-at-core/secure-at-core-1024.svg | 222 ++-- .../secure-at-core-1280-dark.svg | 227 ++--- .../secure-at-core/secure-at-core-1280.svg | 227 ++--- .../secure-at-core-1440-Dark.svg | 222 ++-- .../secure-at-core/secure-at-core-1440.svg | 222 ++-- .../secure-at-core-1920-dark.svg | 227 ++--- .../secure-at-core/secure-at-core-1920.svg | 227 ++--- .../secure-at-core-768-dark.svg | 227 ++--- .../secure-at-core/secure-at-core-768.svg | 227 ++--- .../secure-at-core-mobile-dark.svg | 325 ++---- .../secure-at-core/secure-at-core-mobile.svg | 325 ++---- src/apps/devdoc/package.json | 3 + ...common-misconceptions-about-containers.mdx | 2 + ...ent-workflows-an-introduction-to-deaas.mdx | 2 + src/apps/devdoc/pages/devops/_meta.json | 11 - src/apps/devdoc/pages/devops/index.mdx | 2 - src/apps/devdoc/pages/distribution/_meta.json | 11 - src/apps/devdoc/pages/distribution/index.mdx | 2 - src/apps/devdoc/pages/docs/_meta.json | 67 +- src/apps/devdoc/pages/docs/devops/_meta.json | 18 - .../pages/docs/devops/getting-started.mdx | 0 .../docs/devops/getting-started/_meta.json | 8 - .../getting-started/create-your-project.mdx | 1 - .../docs/devops/getting-started/test.mdx | 0 .../docs/devops/how-does-devops-work.mdx | 0 src/apps/devdoc/pages/docs/devops/index.mdx | 0 .../pages/docs/devops/what-is-devops.mdx | 0 .../devdoc/pages/docs/distribution/_meta.json | 5 - .../devdoc/pages/docs/distribution/index.mdx | 0 src/apps/devdoc/pages/docs/index.mdx | 33 + .../devdoc/pages/docs/infraops/_meta.json | 58 -- .../pages/docs/infraops/getting-started.md | 956 ------------------ .../docs/infraops/how-does-infraops-work.mdx | 0 .../devdoc/pages/docs/infraops/iac/_meta.json | 23 - src/apps/devdoc/pages/docs/infraops/index.mdx | 0 .../pages/docs/infraops/network/_meta.json | 8 - .../pages/docs/infraops/node-pools/_meta.json | 14 - .../docs/infraops/observability/_meta.json | 8 - .../pages/docs/infraops/storage/_meta.json | 11 - .../pages/docs/infraops/what-is-infraops.mdx | 0 src/apps/devdoc/pages/docs/why-kloudlite.mdx | 10 + .../pages/docs/work-in-progress/_meta.json | 14 + src/apps/devdoc/pages/infraops/_meta.json | 5 - src/apps/devdoc/pages/infraops/index.mdx | 3 - src/apps/devdoc/pages/product.mdx | 2 - src/apps/devdoc/pages/test.mdx | 0 src/apps/devdoc/pnpm-lock.yaml | 763 ++++++++------ src/apps/devdoc/public/app-intercept.png | Bin 0 -> 193122 bytes src/apps/devdoc/public/connected-env.png | Bin 0 -> 185499 bytes src/apps/devdoc/public/dev-hell.png | Bin 0 -> 382613 bytes src/apps/devdoc/style.css | 6 +- 79 files changed, 2134 insertions(+), 3575 deletions(-) create mode 100644 src/apps/devdoc/app/components/join-providers.tsx create mode 100644 src/apps/devdoc/app/components/website/provider-ui.tsx delete mode 100644 src/apps/devdoc/pages/devops/_meta.json delete mode 100644 src/apps/devdoc/pages/devops/index.mdx delete mode 100644 src/apps/devdoc/pages/distribution/_meta.json delete mode 100644 src/apps/devdoc/pages/distribution/index.mdx delete mode 100644 src/apps/devdoc/pages/docs/devops/_meta.json delete mode 100644 src/apps/devdoc/pages/docs/devops/getting-started.mdx delete mode 100644 src/apps/devdoc/pages/docs/devops/getting-started/_meta.json delete mode 100644 src/apps/devdoc/pages/docs/devops/getting-started/create-your-project.mdx delete mode 100644 src/apps/devdoc/pages/docs/devops/getting-started/test.mdx delete mode 100644 src/apps/devdoc/pages/docs/devops/how-does-devops-work.mdx delete mode 100644 src/apps/devdoc/pages/docs/devops/index.mdx delete mode 100644 src/apps/devdoc/pages/docs/devops/what-is-devops.mdx delete mode 100644 src/apps/devdoc/pages/docs/distribution/_meta.json delete mode 100644 src/apps/devdoc/pages/docs/distribution/index.mdx create mode 100644 src/apps/devdoc/pages/docs/index.mdx delete mode 100644 src/apps/devdoc/pages/docs/infraops/_meta.json delete mode 100644 src/apps/devdoc/pages/docs/infraops/getting-started.md delete mode 100644 src/apps/devdoc/pages/docs/infraops/how-does-infraops-work.mdx delete mode 100644 src/apps/devdoc/pages/docs/infraops/iac/_meta.json delete mode 100644 src/apps/devdoc/pages/docs/infraops/index.mdx delete mode 100644 src/apps/devdoc/pages/docs/infraops/network/_meta.json delete mode 100644 src/apps/devdoc/pages/docs/infraops/node-pools/_meta.json delete mode 100644 src/apps/devdoc/pages/docs/infraops/observability/_meta.json delete mode 100644 src/apps/devdoc/pages/docs/infraops/storage/_meta.json delete mode 100644 src/apps/devdoc/pages/docs/infraops/what-is-infraops.mdx create mode 100644 src/apps/devdoc/pages/docs/why-kloudlite.mdx create mode 100644 src/apps/devdoc/pages/docs/work-in-progress/_meta.json delete mode 100644 src/apps/devdoc/pages/infraops/_meta.json delete mode 100644 src/apps/devdoc/pages/infraops/index.mdx delete mode 100644 src/apps/devdoc/pages/product.mdx delete mode 100644 src/apps/devdoc/pages/test.mdx create mode 100644 src/apps/devdoc/public/app-intercept.png create mode 100644 src/apps/devdoc/public/connected-env.png create mode 100644 src/apps/devdoc/public/dev-hell.png diff --git a/src/apps/auth/components/container.tsx b/src/apps/auth/components/container.tsx index 3b8df3191..a887fa316 100644 --- a/src/apps/auth/components/container.tsx +++ b/src/apps/auth/components/container.tsx @@ -23,7 +23,7 @@ const Container = ({ children, footer }: ContainerProps) => { {children}
{footer && ( -
+
{footer?.message}
} - LinkComponent={Link} + linkComponent={Link} toLabel="href" to={to} variant="plain" diff --git a/src/apps/devdoc/app/components/join-providers.tsx b/src/apps/devdoc/app/components/join-providers.tsx new file mode 100644 index 000000000..40f02b73c --- /dev/null +++ b/src/apps/devdoc/app/components/join-providers.tsx @@ -0,0 +1,38 @@ +import { GithubLogoFill, GoogleLogoFill } from '@jengaicons/react'; +import { Button } from 'kl-design-system/atoms/button'; +import OptionList from 'kl-design-system/atoms/option-list'; +import { useState } from 'react'; + +const JoinProviders = () => { + const [open, setOpen] = useState(false); + return ( + + +