diff --git a/.github/workflows/e2e.yaml b/.github/workflows/e2e.yaml index 175576bc..38f1c4a9 100644 --- a/.github/workflows/e2e.yaml +++ b/.github/workflows/e2e.yaml @@ -49,7 +49,7 @@ jobs: uses: pnpm/action-setup@v6 with: cache: true - version: 11 + version: 11.11 run_install: false - name: Install Rust stable @@ -117,7 +117,7 @@ jobs: - name: Install pnpm uses: pnpm/action-setup@v6 with: - version: 11 + version: 11.11 run_install: false - name: Install e2e dependencies diff --git a/.github/workflows/lint.yaml b/.github/workflows/lint.yaml index f7bb499b..c7dba3f9 100644 --- a/.github/workflows/lint.yaml +++ b/.github/workflows/lint.yaml @@ -35,7 +35,7 @@ jobs: - uses: pnpm/action-setup@v6 with: cache: true - version: 11 + version: 11.11 run_install: false - name: Get pnpm store directory diff --git a/.github/workflows/release-macos.yaml b/.github/workflows/release-macos.yaml index 93aad792..8f84b16b 100644 --- a/.github/workflows/release-macos.yaml +++ b/.github/workflows/release-macos.yaml @@ -40,7 +40,7 @@ jobs: with: cache: true run_install: false - version: 11 + version: 11.11 - name: Install Node dependencies for New UI run: | diff --git a/.github/workflows/release.yaml b/.github/workflows/release.yaml index 1ffe2530..3d076b5a 100644 --- a/.github/workflows/release.yaml +++ b/.github/workflows/release.yaml @@ -70,7 +70,7 @@ jobs: uses: pnpm/action-setup@v6 with: cache: true - version: 11 + version: 11.11 run_install: false - name: Get pnpm store directory @@ -178,7 +178,7 @@ jobs: - uses: pnpm/action-setup@v6 with: cache: true - version: 11 + version: 11.11 run_install: false - name: Get pnpm store directory diff --git a/new-ui/package.json b/new-ui/package.json index 4ee6e500..71af3ebc 100644 --- a/new-ui/package.json +++ b/new-ui/package.json @@ -46,6 +46,7 @@ "react-markdown": "^10.1.0", "rehype-raw": "^7.0.0", "rehype-sanitize": "^6.0.0", + "remark-gfm": "^4.0.1", "rxjs": "^7.8.2", "sass": "^1.101.0", "zod": "^4.4.3", diff --git a/new-ui/pnpm-lock.yaml b/new-ui/pnpm-lock.yaml index dd88174f..198aa1a0 100644 --- a/new-ui/pnpm-lock.yaml +++ b/new-ui/pnpm-lock.yaml @@ -107,6 +107,9 @@ importers: rehype-sanitize: specifier: ^6.0.0 version: 6.0.0 + remark-gfm: + specifier: ^4.0.1 + version: 4.0.1 rxjs: specifier: ^7.8.2 version: 7.8.2 @@ -1160,6 +1163,10 @@ packages: resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==} engines: {node: '>=6'} + escape-string-regexp@5.0.0: + resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==} + engines: {node: '>=12'} + estree-util-is-identifier-name@3.0.0: resolution: {integrity: sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==} @@ -1505,12 +1512,36 @@ packages: magic-string@0.30.21: resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==} + markdown-table@3.0.4: + resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==} + mathml-tag-names@4.0.0: resolution: {integrity: sha512-aa6AU2Pcx0VP/XWnh8IGL0SYSgQHDT6Ucror2j2mXeFAlN3ahaNs8EZtG1YiticMkSLj3Gt6VPFfZogt7G5iFQ==} + mdast-util-find-and-replace@3.0.2: + resolution: {integrity: sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==} + mdast-util-from-markdown@2.0.3: resolution: {integrity: sha512-W4mAWTvSlKvf8L6J+VN9yLSqQ9AOAAvHuoDAmPkz4dHf553m5gVj2ejadHJhoJmcmxEnOv6Pa8XJhpxE93kb8Q==} + mdast-util-gfm-autolink-literal@2.0.1: + resolution: {integrity: sha512-5HVP2MKaP6L+G6YaxPNjuL0BPrq9orG3TsrZ9YXbA3vDw/ACI4MEsnoDpn6ZNm7GnZgtAcONJyPhOP8tNJQavQ==} + + mdast-util-gfm-footnote@2.1.0: + resolution: {integrity: sha512-sqpDWlsHn7Ac9GNZQMeUzPQSMzR6Wv0WKRNvQRg0KqHh02fpTz69Qc1QSseNX29bhz1ROIyNyxExfawVKTm1GQ==} + + mdast-util-gfm-strikethrough@2.0.0: + resolution: {integrity: sha512-mKKb915TF+OC5ptj5bJ7WFRPdYtuHv0yTRxK2tJvi+BDqbkiG7h7u/9SI89nRAYcmap2xHQL9D+QG/6wSrTtXg==} + + mdast-util-gfm-table@2.0.0: + resolution: {integrity: sha512-78UEvebzz/rJIxLvE7ZtDd/vIQ0RHv+3Mh5DR96p7cS7HsBhYIICDBCu8csTNWNO6tBWfqXPWekRuj2FNOGOZg==} + + mdast-util-gfm-task-list-item@2.0.0: + resolution: {integrity: sha512-IrtvNvjxC1o06taBAVJznEnkiHxLFTzgonUdy8hzFVeDun0uTjxxrRGVaNFqkU1wJR3RBPEfsxmU6jDWPofrTQ==} + + mdast-util-gfm@3.1.0: + resolution: {integrity: sha512-0ulfdQOM3ysHhCJ1p06l0b0VKlhU0wuQs3thxZQagjcjPrlFRqY215uZGHHJan9GEAXd9MbfPjFJz+qMkVR6zQ==} + mdast-util-mdx-expression@2.0.1: resolution: {integrity: sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ==} @@ -1546,6 +1577,27 @@ packages: micromark-core-commonmark@2.0.3: resolution: {integrity: sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==} + micromark-extension-gfm-autolink-literal@2.1.0: + resolution: {integrity: sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==} + + micromark-extension-gfm-footnote@2.1.0: + resolution: {integrity: sha512-/yPhxI1ntnDNsiHtzLKYnE3vf9JZ6cAisqVDauhp4CEHxlb4uoOTxOCJ+9s51bIB8U1N1FJ1RXOKTIlD5B/gqw==} + + micromark-extension-gfm-strikethrough@2.1.0: + resolution: {integrity: sha512-ADVjpOOkjz1hhkZLlBiYA9cR2Anf8F4HqZUO6e5eDcPQd0Txw5fxLzzxnEkSkfnD0wziSGiv7sYhk/ktvbf1uw==} + + micromark-extension-gfm-table@2.1.1: + resolution: {integrity: sha512-t2OU/dXXioARrC6yWfJ4hqB7rct14e8f7m0cbI5hUmDyyIlwv5vEtooptH8INkbLzOatzKuVbQmAYcbWoyz6Dg==} + + micromark-extension-gfm-tagfilter@2.0.0: + resolution: {integrity: sha512-xHlTOmuCSotIA8TW1mDIM6X2O1SiX5P9IuDtqGonFhEK0qgRI4yeC6vMxEV2dgyr2TiD+2PQ10o+cOhdVAcwfg==} + + micromark-extension-gfm-task-list-item@2.1.0: + resolution: {integrity: sha512-qIBZhqxqI6fjLDYFTBIa4eivDMnP+OZqsNwmQ3xNLE4Cxwc+zfQEfbs6tzAo2Hjq+bh6q5F+Z8/cksrLFYWQQw==} + + micromark-extension-gfm@3.0.0: + resolution: {integrity: sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==} + micromark-factory-destination@2.0.1: resolution: {integrity: sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==} @@ -1774,12 +1826,18 @@ packages: rehype-sanitize@6.0.0: resolution: {integrity: sha512-CsnhKNsyI8Tub6L4sm5ZFsme4puGfc6pYylvXo1AeqaGbjOYyzNv3qZPwvs0oMJ39eryyeOdmxwUIo94IpEhqg==} + remark-gfm@4.0.1: + resolution: {integrity: sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==} + remark-parse@11.0.0: resolution: {integrity: sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==} remark-rehype@11.1.2: resolution: {integrity: sha512-Dh7l57ianaEoIpzbp0PC9UKAdCSVklD8E5Rpw7ETfbTl3FqcOOgq5q2LVDhgGCkaBv7p24JXikPdvhhmHvKMsw==} + remark-stringify@11.0.0: + resolution: {integrity: sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==} + require-from-string@2.0.2: resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==} engines: {node: '>=0.10.0'} @@ -2995,6 +3053,8 @@ snapshots: escalade@3.2.0: {} + escape-string-regexp@5.0.0: {} + estree-util-is-identifier-name@3.0.0: {} extend@3.0.2: {} @@ -3317,8 +3377,17 @@ snapshots: dependencies: '@jridgewell/sourcemap-codec': 1.5.5 + markdown-table@3.0.4: {} + mathml-tag-names@4.0.0: {} + mdast-util-find-and-replace@3.0.2: + dependencies: + '@types/mdast': 4.0.4 + escape-string-regexp: 5.0.0 + unist-util-is: 6.0.1 + unist-util-visit-parents: 6.0.2 + mdast-util-from-markdown@2.0.3: dependencies: '@types/mdast': 4.0.4 @@ -3336,6 +3405,63 @@ snapshots: transitivePeerDependencies: - supports-color + mdast-util-gfm-autolink-literal@2.0.1: + dependencies: + '@types/mdast': 4.0.4 + ccount: 2.0.1 + devlop: 1.1.0 + mdast-util-find-and-replace: 3.0.2 + micromark-util-character: 2.1.1 + + mdast-util-gfm-footnote@2.1.0: + dependencies: + '@types/mdast': 4.0.4 + devlop: 1.1.0 + mdast-util-from-markdown: 2.0.3 + mdast-util-to-markdown: 2.1.2 + micromark-util-normalize-identifier: 2.0.1 + transitivePeerDependencies: + - supports-color + + mdast-util-gfm-strikethrough@2.0.0: + dependencies: + '@types/mdast': 4.0.4 + mdast-util-from-markdown: 2.0.3 + mdast-util-to-markdown: 2.1.2 + transitivePeerDependencies: + - supports-color + + mdast-util-gfm-table@2.0.0: + dependencies: + '@types/mdast': 4.0.4 + devlop: 1.1.0 + markdown-table: 3.0.4 + mdast-util-from-markdown: 2.0.3 + mdast-util-to-markdown: 2.1.2 + transitivePeerDependencies: + - supports-color + + mdast-util-gfm-task-list-item@2.0.0: + dependencies: + '@types/mdast': 4.0.4 + devlop: 1.1.0 + mdast-util-from-markdown: 2.0.3 + mdast-util-to-markdown: 2.1.2 + transitivePeerDependencies: + - supports-color + + mdast-util-gfm@3.1.0: + dependencies: + mdast-util-from-markdown: 2.0.3 + mdast-util-gfm-autolink-literal: 2.0.1 + mdast-util-gfm-footnote: 2.1.0 + mdast-util-gfm-strikethrough: 2.0.0 + mdast-util-gfm-table: 2.0.0 + mdast-util-gfm-task-list-item: 2.0.0 + mdast-util-to-markdown: 2.1.2 + transitivePeerDependencies: + - supports-color + mdast-util-mdx-expression@2.0.1: dependencies: '@types/estree-jsx': 1.0.5 @@ -3433,6 +3559,64 @@ snapshots: micromark-util-symbol: 2.0.1 micromark-util-types: 2.0.2 + micromark-extension-gfm-autolink-literal@2.1.0: + dependencies: + micromark-util-character: 2.1.1 + micromark-util-sanitize-uri: 2.0.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-extension-gfm-footnote@2.1.0: + dependencies: + devlop: 1.1.0 + micromark-core-commonmark: 2.0.3 + micromark-factory-space: 2.0.1 + micromark-util-character: 2.1.1 + micromark-util-normalize-identifier: 2.0.1 + micromark-util-sanitize-uri: 2.0.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-extension-gfm-strikethrough@2.1.0: + dependencies: + devlop: 1.1.0 + micromark-util-chunked: 2.0.1 + micromark-util-classify-character: 2.0.1 + micromark-util-resolve-all: 2.0.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-extension-gfm-table@2.1.1: + dependencies: + devlop: 1.1.0 + micromark-factory-space: 2.0.1 + micromark-util-character: 2.1.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-extension-gfm-tagfilter@2.0.0: + dependencies: + micromark-util-types: 2.0.2 + + micromark-extension-gfm-task-list-item@2.1.0: + dependencies: + devlop: 1.1.0 + micromark-factory-space: 2.0.1 + micromark-util-character: 2.1.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-extension-gfm@3.0.0: + dependencies: + micromark-extension-gfm-autolink-literal: 2.1.0 + micromark-extension-gfm-footnote: 2.1.0 + micromark-extension-gfm-strikethrough: 2.1.0 + micromark-extension-gfm-table: 2.1.1 + micromark-extension-gfm-tagfilter: 2.0.0 + micromark-extension-gfm-task-list-item: 2.1.0 + micromark-util-combine-extensions: 2.0.1 + micromark-util-types: 2.0.2 + micromark-factory-destination@2.0.1: dependencies: micromark-util-character: 2.1.1 @@ -3728,6 +3912,17 @@ snapshots: '@types/hast': 3.0.4 hast-util-sanitize: 5.0.2 + remark-gfm@4.0.1: + dependencies: + '@types/mdast': 4.0.4 + mdast-util-gfm: 3.1.0 + micromark-extension-gfm: 3.0.0 + remark-parse: 11.0.0 + remark-stringify: 11.0.0 + unified: 11.0.5 + transitivePeerDependencies: + - supports-color + remark-parse@11.0.0: dependencies: '@types/mdast': 4.0.4 @@ -3745,6 +3940,12 @@ snapshots: unified: 11.0.5 vfile: 6.0.3 + remark-stringify@11.0.0: + dependencies: + '@types/mdast': 4.0.4 + mdast-util-to-markdown: 2.1.2 + unified: 11.0.5 + require-from-string@2.0.2: {} resolve-from@4.0.0: {} diff --git a/new-ui/src/pages/full/EnrollmentPage/hooks/useEnrollmentStore.tsx b/new-ui/src/pages/full/EnrollmentPage/hooks/useEnrollmentStore.tsx index 5d8ce4f8..0f3cb086 100644 --- a/new-ui/src/pages/full/EnrollmentPage/hooks/useEnrollmentStore.tsx +++ b/new-ui/src/pages/full/EnrollmentPage/hooks/useEnrollmentStore.tsx @@ -142,7 +142,10 @@ export const useEnrollmentStore = create()( default: return; } - set({ activeStep: nextStep }); + set({ + activeStep: nextStep, + deadline: nextStep === EnrollmentStep.Finish ? null : get().deadline, + }); }, }), { diff --git a/new-ui/src/pages/full/EnrollmentPage/steps/FinishStep/FinishStep.tsx b/new-ui/src/pages/full/EnrollmentPage/steps/FinishStep/FinishStep.tsx index fbd8c014..f1a453d1 100644 --- a/new-ui/src/pages/full/EnrollmentPage/steps/FinishStep/FinishStep.tsx +++ b/new-ui/src/pages/full/EnrollmentPage/steps/FinishStep/FinishStep.tsx @@ -3,19 +3,28 @@ import { useNavigate } from '@tanstack/react-router'; import { Button } from '../../../../../shared/components/Button/Button'; import { ButtonVariant } from '../../../../../shared/components/Button/types'; import { Controls } from '../../../../../shared/components/Controls/Controls'; +import { RenderMarkdown } from '../../../../../shared/components/RenderMarkdown/RenderMarkdown'; +import { isPresent } from '../../../../../shared/utils/isPresent'; +import { useEnrollmentStore } from '../../hooks/useEnrollmentStore'; import bannerSrc from './assets/banner.png'; export const FinishStep = () => { const navigate = useNavigate(); + const response = useEnrollmentStore((s) => s.startResponse); + const markdownContent = response?.final_page_content; + const showMarkdown = isPresent(markdownContent) && markdownContent.length > 0; + return (
-
-

{`New Defguard instance added successfully`}

-

{`You can now connect this device, check its status and view statistics.`}

-
-
+ {!showMarkdown && ( +
+

{`New Defguard instance added successfully`}

+

{`You can now connect this device, check its status and view statistics.`}

+
+ )} + {showMarkdown && }
diff --git a/new-ui/src/pages/full/EnrollmentPage/steps/FinishStep/style.scss b/new-ui/src/pages/full/EnrollmentPage/steps/FinishStep/style.scss index 12380be9..8fcbe06c 100644 --- a/new-ui/src/pages/full/EnrollmentPage/steps/FinishStep/style.scss +++ b/new-ui/src/pages/full/EnrollmentPage/steps/FinishStep/style.scss @@ -20,4 +20,175 @@ } } } + + .controls { + padding-top: var(--spacing-2xl); + } +} + +// markdown +#finish-step .markdown-render { + font-family: var(--font-family-body); + + a { + font-size: 14px; + font-weight: 400; + line-height: 22px; + color: var(--fg-white-100); + text-decoration: underline dotted; + text-underline-offset: 3px; + text-decoration-color: var(--fg-white-100); + } + + p { + font-size: 14px; + font-weight: 400; + line-height: 22px; + margin: var(--spacing-sm) 0; + color: var(--fg-white-80); + + strong { + font-weight: 700; + } + } + + blockquote { + margin: var(--spacing-md) 0; + padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) var(--spacing-xl); + border-left: 2px solid var(--fg-white-50); + background-color: var(--bg-white-5); + + p { + margin: 0; + } + } + + h1 { + font-size: 32px; + font-weight: 600; + line-height: 44px; + padding: 0; + + &:not(:first-child) { + margin-top: var(--spacing-lg); + } + + margin-bottom: var(--spacing-lg); + } + + ul { + list-style: disc; + } + + ul, + ol { + margin-top: var(--spacing-sm); + margin-bottom: var(--spacing-sm); + padding-left: 16px; + + li { + font-size: 14px; + line-height: 24px; + font-weight: 400; + color: var(--fg-white-80); + + &::marker { + font: inherit; + } + + &:not(:last-child) { + margin-bottom: var(--spacing-xs); + } + } + } + + hr { + border: 1px solid var(--bg-white-20); + margin: var(--spacing-lg) 0; + width: 100%; + } + + h2, + h3, + h4, + h5, + h6 { + margin: var(--spacing-sm) 0; + padding: 0; + } + + h2 { + font-size: 28px; + font-weight: 600; + line-height: 40px; + } + + h3 { + font-size: 24px; + font-weight: 600; + line-height: 32px; + } + + h4 { + font-size: 20px; + font-weight: 600; + line-height: 28px; + } + + h5 { + font-size: 18px; + font-weight: 500; + line-height: 28px; + } + + h6 { + font-size: 16px; + font-weight: 600; + line-height: 24px; + } + + table { + width: 100%; + border-collapse: separate; + border-spacing: 0; + border: 1px solid var(--fg-white-40); + border-radius: 8px; + overflow: hidden; + margin-top: var(--spacing-2xl); + + &:not(:last-child) { + margin-bottom: var(--spacing-2xl); + } + + th, + td { + padding: var(--spacing-md); + text-align: left; + background-color: transparent; + } + + thead { + background-color: var(--bg-white-5); + + th { + min-height: 44px; + font-size: 12px; + font-weight: 500; + line-height: 20px; + border-bottom: 1px solid var(--fg-white-40); + } + } + + tbody { + td { + font-size: 14px; + font-weight: 400; + line-height: 24px; + } + + tr:not(:last-child) td { + border-bottom: 1px solid var(--fg-white-40); + } + } + } } diff --git a/new-ui/src/pages/full/SessionTimeoutPage/SessionTimeoutPage.tsx b/new-ui/src/pages/full/SessionTimeoutPage/SessionTimeoutPage.tsx index 90f416f2..23fe82ad 100644 --- a/new-ui/src/pages/full/SessionTimeoutPage/SessionTimeoutPage.tsx +++ b/new-ui/src/pages/full/SessionTimeoutPage/SessionTimeoutPage.tsx @@ -43,24 +43,24 @@ const ClockIcon = () => { height="47" rx="23.5" stroke="white" - stroke-opacity="0.4" - stroke-dasharray="2 2" + strokeOpacity="0.4" + strokeDasharray="2 2" /> diff --git a/new-ui/src/shared/components/RenderMarkdown/RenderMarkdown.tsx b/new-ui/src/shared/components/RenderMarkdown/RenderMarkdown.tsx index 272ee503..c16c17be 100644 --- a/new-ui/src/shared/components/RenderMarkdown/RenderMarkdown.tsx +++ b/new-ui/src/shared/components/RenderMarkdown/RenderMarkdown.tsx @@ -4,6 +4,7 @@ import clsx from 'clsx'; import ReactMarkdown from 'react-markdown'; import rehypeRaw from 'rehype-raw'; import rehypeSanitize, { defaultSchema } from 'rehype-sanitize'; +import remarkGfm from 'remark-gfm'; const sanitizeSchema = { ...defaultSchema, @@ -25,6 +26,7 @@ export const RenderMarkdown = ({ className={clsx('markdown-render', containerCustomClassName)} > , diff --git a/new-ui/src/shared/components/wizard/WizardPage/WizardPage.tsx b/new-ui/src/shared/components/wizard/WizardPage/WizardPage.tsx index 3e5537da..f8497dcb 100644 --- a/new-ui/src/shared/components/wizard/WizardPage/WizardPage.tsx +++ b/new-ui/src/shared/components/wizard/WizardPage/WizardPage.tsx @@ -48,9 +48,11 @@ export const WizardPage = ({
-

{title}

- - +
+

{title}

+ + +
{activeStepIndex !== visibleSteps.length - 1 && ( diff --git a/new-ui/src/shared/components/wizard/WizardPage/style.scss b/new-ui/src/shared/components/wizard/WizardPage/style.scss index 4d909fd7..24fc253f 100644 --- a/new-ui/src/shared/components/wizard/WizardPage/style.scss +++ b/new-ui/src/shared/components/wizard/WizardPage/style.scss @@ -11,12 +11,19 @@ height: 100%; & > .side { + position: relative; box-sizing: border-box; padding: var(--spacing-md) var(--spacing-lg); border-right: 1px solid var(--border-disabled); user-select: none; - > .title { + > .side-content { + position: sticky; + top: var(--spacing-md); + align-self: start; + } + + .title { font: var(--t-body-xs-500); color: var(--fg-white-100); } diff --git a/nix/package.nix b/nix/package.nix index 4441fa18..62e730a7 100644 --- a/nix/package.nix +++ b/nix/package.nix @@ -99,7 +99,7 @@ inherit version pnpm; src = ../new-ui; fetcherVersion = 3; - hash = "sha256-9xqPuHyPc3VdM+Hv6/k42c4XIR1wBkOQZ2khXx8PmqM="; + hash = "sha256-ZH0POBb7RMY7y/+5YHi+yhkoNfOZNQDeOilBs17Yd7s="; }; # Pre-build the new UI frontend so Tauri can serve it as WebviewUrl::App("compact/") and "full/".