From d2c8bbfcb2321c3e974b54d4ad5534b9e1f72093 Mon Sep 17 00:00:00 2001 From: Anthony Stirling <77850077+Frooodle@users.noreply.github.com> Date: Wed, 15 Jul 2026 15:49:21 +0100 Subject: [PATCH] Portal Sources: consistent SVG source icons (#6995) # Description of Changes Replaces the odd glyph icons in the Sources connect flow with centred stroke SVGs, and fixes the connect-modal type-tile alignment and the inconsistent Folder chip width. Part of a portal (processor) UI-consistency pass, split into small focused PRs. ## Before / after before-sources-light after-connect-modal after-sources-light before-connect-modal --- ## Checklist ### General - [x] I have read the [Contribution Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md) - [ ] I have read the [Stirling-PDF Developer Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md) (if applicable) - [ ] I have read the [How to add new languages to Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md) (if applicable) - [x] I have performed a self-review of my own code - [x] My changes generate no new warnings ### Documentation - [ ] I have updated relevant docs on [Stirling-PDF's doc repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/) (if functionality has heavily changed) - [ ] I have read the section [Add New Translation Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags) (for new translation tags only) ### Translations (if applicable) - [ ] I ran [`scripts/counter_translation.py`](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/docs/counter_translation.md) ### UI Changes (if applicable) - [x] Screenshots or videos demonstrating the UI changes are attached (e.g., as comments or direct attachments in the PR) ### Testing (if applicable) - [ ] I have run `task check` to verify linters, typechecks, and tests pass - [x] I have tested my changes locally. Refer to the [Testing Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md#7-testing) for more details. --- .../components/sources/SourceTypeIcon.tsx | 34 +++++++++++++++++ .../components/sources/SourcesTable.tsx | 3 +- frontend/editor/src/portal/views/Sources.css | 38 +++++++++++++++++-- 3 files changed, 71 insertions(+), 4 deletions(-) create mode 100644 frontend/editor/src/portal/components/sources/SourceTypeIcon.tsx diff --git a/frontend/editor/src/portal/components/sources/SourceTypeIcon.tsx b/frontend/editor/src/portal/components/sources/SourceTypeIcon.tsx new file mode 100644 index 0000000000..606fe45b1e --- /dev/null +++ b/frontend/editor/src/portal/components/sources/SourceTypeIcon.tsx @@ -0,0 +1,34 @@ +/** + * Stroke-SVG icons for source types, replacing the black Unicode glyphs + * (⛁ ☁ ✏ ◇) that rendered off-style and mis-centred inside the type tiles and + * table badges. Keyed by the backend source `type`; unknown types fall back to + * a neutral document mark. + */ + +const PATHS: Record = { + folder: "M3 7h6l2 2h10v9a1 1 0 01-1 1H4a1 1 0 01-1-1V7z", + s3: "M7 18a4 4 0 010-8 5 5 0 019.6-1.3A3.5 3.5 0 0117 18H7z", + editor: "M4 20h16M14 4l6 6-9 9H5v-6l9-9z", + _default: + "M14 3H7a1 1 0 00-1 1v16a1 1 0 001 1h10a1 1 0 001-1V7l-4-4zM14 3v4h4", +}; + +export function SourceTypeIcon({ type }: { type: string }) { + const d = PATHS[type] ?? PATHS._default; + return ( + + + + ); +} diff --git a/frontend/editor/src/portal/components/sources/SourcesTable.tsx b/frontend/editor/src/portal/components/sources/SourcesTable.tsx index 2c4a1e826a..ad0a17c81e 100644 --- a/frontend/editor/src/portal/components/sources/SourcesTable.tsx +++ b/frontend/editor/src/portal/components/sources/SourcesTable.tsx @@ -13,6 +13,7 @@ import { EDITOR_SOURCE_TYPE, sourceTypeMeta, } from "@portal/components/sources/sourceTypes"; +import { SourceTypeIcon } from "@portal/components/sources/SourceTypeIcon"; import "@portal/views/Sources.css"; const STATUS_TONE: Record = { @@ -45,7 +46,7 @@ export function SourcesTable({ sources, onRowClick }: SourcesTableProps) { className={`portal-sources__type-dot portal-sources__type-dot--${meta.accent}`} aria-hidden > - {meta.icon} +
{isEditor ? t(meta.labelKey) : s.name} diff --git a/frontend/editor/src/portal/views/Sources.css b/frontend/editor/src/portal/views/Sources.css index 54d8906be9..b0966c3151 100644 --- a/frontend/editor/src/portal/views/Sources.css +++ b/frontend/editor/src/portal/views/Sources.css @@ -49,6 +49,7 @@ .portal-sources__name-text { display: flex; flex-direction: column; + align-items: flex-start; gap: 0.25rem; min-width: 0; } @@ -366,7 +367,7 @@ .portal-sources__type-grid { display: grid; - grid-template-columns: repeat(4, 1fr); + grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.625rem; } @@ -376,6 +377,17 @@ } } +/* The shared Button lays its children out in a flex-row label; force the type + tile back to a centred icon-over-label column so the SVG sits above the name + with real spacing (not jammed against it). */ +.portal-sources__type-card .mantine-Button-label { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.5rem; + width: 100%; +} + .portal-sources__type-card { display: flex; flex-direction: column; @@ -402,9 +414,29 @@ box-shadow: 0 0 0 1px var(--color-blue) inset; } +/* Icon inside the type picker: a plain stroke icon above the label (no badge + box — the tinted box read as an extra bordered chip floating on the tile). */ .portal-sources__type-icon { - font-size: 1.25rem; - color: var(--color-text-2); + display: inline-flex; + align-items: center; + justify-content: center; + color: var(--color-text-3); +} + +.portal-sources__type-card.is-selected .portal-sources__type-icon { + color: var(--color-blue); +} + +.portal-sources__type-icon .portal-sources__type-svg { + width: 1.6rem; + height: 1.6rem; +} + +/* Sized to sit centred inside the 1.875rem table badge / picker dot. */ +.portal-sources__type-svg { + width: 1.05rem; + height: 1.05rem; + display: block; } .portal-sources__type-name {