From 41d2aa81748a2744dfb6b2f1731b4a259ed57801 Mon Sep 17 00:00:00 2001 From: EthanHealy01 <80844253+EthanHealy01@users.noreply.github.com> Date: Thu, 11 Jun 2026 20:43:33 +0100 Subject: [PATCH] UI ux/move footer links to settings (#6606) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Screenshot 2026-06-11 at 2 15
34 PM Screenshot 2026-06-11 at 2 15
43 PM --- .../public/css/cookieconsentCustomisation.css | 101 ++++++++-- .../public/locales/en-GB/translation.toml | 20 +- .../src/core/components/layout/Workbench.tsx | 15 +- .../core/components/shared/AppConfigModal.tsx | 2 + .../src/core/components/shared/Footer.tsx | 9 - .../shared/config/configNavSections.tsx | 12 ++ .../config/configSections/LegalSection.tsx | 143 +++++++++++++++ .../core/components/shared/config/types.ts | 1 + .../editor/src/core/hooks/useCookieConsent.ts | 31 +++- frontend/editor/src/core/styles/zIndex.ts | 5 + .../tests/stubbed/cookie-preferences.spec.ts | 172 +++++++++--------- .../core/tests/stubbed/main-dashboard.spec.ts | 39 ++-- .../shared/config/configNavSections.tsx | 8 +- .../proprietary/components/chat/ChatFAB.css | 2 +- .../proprietary/components/chat/ChatFAB.tsx | 3 +- .../saas/components/shared/AppConfigModal.tsx | 2 + .../shared/config/saasConfigNavSections.tsx | 33 ++++ 17 files changed, 448 insertions(+), 150 deletions(-) create mode 100644 frontend/editor/src/core/components/shared/config/configSections/LegalSection.tsx diff --git a/frontend/editor/public/css/cookieconsentCustomisation.css b/frontend/editor/public/css/cookieconsentCustomisation.css index fd1a8ff35..25ec0fd52 100644 --- a/frontend/editor/public/css/cookieconsentCustomisation.css +++ b/frontend/editor/public/css/cookieconsentCustomisation.css @@ -20,17 +20,18 @@ --cc-separator-border-color: #e0e0e0; - --cc-toggle-on-bg: #007bff; - --cc-toggle-off-bg: #667481; - --cc-toggle-on-knob-bg: #ffffff; - --cc-toggle-off-knob-bg: #ffffff; + /* Toggle colors mirror Mantine Switch (light scheme) */ + --cc-toggle-on-bg: var(--mantine-primary-color-filled, #007bff); + --cc-toggle-off-bg: var(--mantine-color-gray-3, #dee2e6); + --cc-toggle-on-knob-bg: var(--mantine-color-white, #ffffff); + --cc-toggle-off-knob-bg: var(--mantine-color-white, #ffffff); --cc-toggle-enabled-icon-color: #ffffff; --cc-toggle-disabled-icon-color: #ffffff; - --cc-toggle-readonly-bg: #f1f3f4; - --cc-toggle-readonly-knob-bg: #79747e; - --cc-toggle-readonly-knob-icon-color: #f1f3f4; + --cc-toggle-readonly-bg: var(--mantine-color-disabled, #f1f3f4); + --cc-toggle-readonly-knob-bg: var(--mantine-color-gray-0, #f8f9fa); + --cc-toggle-readonly-knob-icon-color: transparent; --cc-section-category-border: #e0e0e0; @@ -69,17 +70,18 @@ --cc-separator-border-color: #555555; - --cc-toggle-on-bg: #4dabf7; - --cc-toggle-off-bg: #667481; - --cc-toggle-on-knob-bg: #2d2d2d; - --cc-toggle-off-knob-bg: #2d2d2d; + /* Toggle colors mirror Mantine Switch (dark scheme) */ + --cc-toggle-on-bg: var(--mantine-primary-color-filled, #4dabf7); + --cc-toggle-off-bg: var(--mantine-color-dark-5, #555555); + --cc-toggle-on-knob-bg: var(--mantine-color-white, #ffffff); + --cc-toggle-off-knob-bg: var(--mantine-color-white, #ffffff); --cc-toggle-enabled-icon-color: #2d2d2d; --cc-toggle-disabled-icon-color: #2d2d2d; - --cc-toggle-readonly-bg: #555555; - --cc-toggle-readonly-knob-bg: #8e8e8e; - --cc-toggle-readonly-knob-icon-color: #555555; + --cc-toggle-readonly-bg: var(--mantine-color-disabled, #555555); + --cc-toggle-readonly-knob-bg: var(--mantine-color-dark-3, #8e8e8e); + --cc-toggle-readonly-knob-icon-color: transparent; --cc-section-category-border: #555555; @@ -176,9 +178,16 @@ color: var(--cc-primary-color) !important; } -/* Lower z-index so cookie banner appears behind onboarding modals */ +/* Banner sits above the chat FAB but behind all modals and onboarding; value + is Z_INDEX_COOKIE_CONSENT_BANNER, set as this variable by useCookieConsent */ #cc-main { - z-index: 100 !important; + z-index: var(--z-index-cookie-consent) !important; +} + +/* Preferences dialog sits above the settings modal it opens from; value is + Z_INDEX_COOKIE_PREFERENCES_MODAL, set as this variable by useCookieConsent */ +.show--preferences #cc-main { + z-index: var(--z-index-cookie-preferences) !important; } /* Ensure consent modal text is visible in both themes */ @@ -203,3 +212,63 @@ #cc-main .cm__link { color: var(--cc-primary-color) !important; } + +/* ── Category toggles restyled to match Mantine Switch (size sm) ────────── + Mantine sm metrics: 38×20 track, 14px plain thumb, 2.5px inline padding, + 150ms ease transitions, no icon inside the thumb. Colors come from the + --cc-toggle-* variables above, which point at the Mantine palette. */ +#cc-main .section__toggle, +#cc-main .section__toggle-wrapper, +#cc-main .toggle__icon, +#cc-main .toggle__label { + width: 38px !important; + height: 20px !important; + border-radius: 1000px !important; +} + +/* Track: flat fill, no outline ring or border */ +#cc-main .toggle__icon { + border: none !important; + box-shadow: none !important; + transition: background-color 150ms ease !important; +} + +#cc-main .section__toggle:checked ~ .toggle__icon { + border: none !important; + box-shadow: none !important; +} + +/* Always-enabled categories = Mantine disabled switch (must out-prioritise + the !important checked-track rule above) */ +#cc-main .section__toggle:checked:disabled ~ .toggle__icon { + background: var(--cc-toggle-readonly-bg) !important; + border: none !important; + box-shadow: none !important; +} + +#cc-main .section__toggle:disabled { + cursor: not-allowed !important; +} + +/* Thumb: small plain circle, vertically centred, no drop shadow */ +#cc-main .toggle__icon-circle { + width: 14px !important; + height: 14px !important; + top: 3px !important; + left: 2.5px !important; + box-shadow: none !important; + transition: + transform 150ms ease, + background-color 150ms ease !important; +} + +/* Checked thumb travel: 38 − 14 − 2.5 = 21.5px end position */ +#cc-main .section__toggle:checked ~ .toggle__icon .toggle__icon-circle { + transform: translateX(19px) !important; +} + +/* Mantine switches have no check/cross glyph inside the thumb */ +#cc-main .toggle__icon-on, +#cc-main .toggle__icon-off { + display: none !important; +} diff --git a/frontend/editor/public/locales/en-GB/translation.toml b/frontend/editor/public/locales/en-GB/translation.toml index c4889e0b9..5e3325072 100644 --- a/frontend/editor/public/locales/en-GB/translation.toml +++ b/frontend/editor/public/locales/en-GB/translation.toml @@ -5860,6 +5860,10 @@ subscribeToPro = "Subscribe to Pro" deleteConfirmBody = "This removes the policy and its workflow. Documents already processed are not affected." deleteConfirmTitle = "Delete {{label}} policy?" +[policies] +deleteConfirmBody = "This removes the policy and its workflow. Documents already processed are not affected." +deleteConfirmTitle = "Delete {{label}} policy?" + [printFile] title = "Print File" @@ -6803,6 +6807,18 @@ title = "Keyboard Shortcuts" mac = "Include ⌘ (Command), ⌥ (Option), or another modifier in your shortcut." windows = "Include Ctrl, Alt, or another modifier in your shortcut." +[settings.legal] +label = "Legal" +title = "Legal" + +[settings.legal.cookiePreferences] +description = "Review or change your cookie consent choices." +manage = "Manage" + +[settings.legal.documents] +description = "Policies and legal information for this service." +title = "Legal Documents" + [settings.licensingAnalytics] audit = "Audit" plan = "Plan" @@ -7490,10 +7506,6 @@ title = "Upload to Server" updateButton = "Update on Server" uploadButton = "Upload to Server" -[survey] -nav = "Survey" -title = "Stirling-PDF Survey" - [swagger] tags = "api,documentation,swagger,endpoints,development" title = "API Documentation" diff --git a/frontend/editor/src/core/components/layout/Workbench.tsx b/frontend/editor/src/core/components/layout/Workbench.tsx index a37d3e164..086e7de3d 100644 --- a/frontend/editor/src/core/components/layout/Workbench.tsx +++ b/frontend/editor/src/core/components/layout/Workbench.tsx @@ -11,11 +11,11 @@ import { import { isBaseWorkbench } from "@app/types/workbench"; import { VIEWER_SUPPORTED_EXTENSIONS } from "@app/utils/fileUtils"; import { useAppConfig } from "@app/contexts/AppConfigContext"; +import { useCookieConsent } from "@app/hooks/useCookieConsent"; import styles from "@app/components/layout/Workbench.module.css"; import WorkbenchBar from "@app/components/shared/WorkbenchBar"; import LandingPage from "@app/components/shared/LandingPage"; -import Footer from "@app/components/shared/Footer"; import DismissAllErrorsButton from "@app/components/shared/DismissAllErrorsButton"; import { ChatFAB } from "@app/components/chat/ChatFAB"; @@ -37,6 +37,10 @@ export default function Workbench() { const { isRainbowMode } = useRainbowThemeContext(); const { config } = useAppConfig(); + // The consent banner used to be initialised by the footer; the legal links + // now live in Settings → Legal, so the workbench owns the banner lifecycle. + useCookieConsent({ analyticsEnabled: config?.enableAnalytics === true }); + // Use context-based hooks to eliminate all prop drilling const { selectors } = useFileState(); const { workbench: currentView } = useNavigationState(); @@ -252,15 +256,6 @@ export default function Workbench() { {renderMainContent()} - -