From a1b1f974a033126bf7dd20332d9e54b350e935f5 Mon Sep 17 00:00:00 2001
From: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>
Date: Thu, 23 Jul 2026 11:22:46 +0000
Subject: [PATCH] Show brand mark and Stirling name in processor sidebar
(#7125)
# Description of Changes
Change logo in top left
---
## Checklist
### General
- [ ] 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)
- [ ] I have performed a self-review of my own code
- [ ] 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)
- [ ] 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
- [ ] 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.
---
.../brand/modern-logo/StirlingLogoBlackText.svg | 1 +
.../brand/modern-logo/StirlingLogoWhiteText.svg | 1 +
.../modern-logo/StirlingProcessorLogoNoText.svg | 4 ++++
frontend/editor/src/portal/components/Sidebar.css | 14 +++++++++++---
frontend/editor/src/portal/components/Sidebar.tsx | 15 +++++++++++----
5 files changed, 28 insertions(+), 7 deletions(-)
create mode 100644 frontend/editor/src/core/assets/brand/modern-logo/StirlingLogoBlackText.svg
create mode 100644 frontend/editor/src/core/assets/brand/modern-logo/StirlingLogoWhiteText.svg
create mode 100644 frontend/editor/src/core/assets/brand/modern-logo/StirlingProcessorLogoNoText.svg
diff --git a/frontend/editor/src/core/assets/brand/modern-logo/StirlingLogoBlackText.svg b/frontend/editor/src/core/assets/brand/modern-logo/StirlingLogoBlackText.svg
new file mode 100644
index 0000000000..6b22c535a5
--- /dev/null
+++ b/frontend/editor/src/core/assets/brand/modern-logo/StirlingLogoBlackText.svg
@@ -0,0 +1 @@
+
diff --git a/frontend/editor/src/core/assets/brand/modern-logo/StirlingLogoWhiteText.svg b/frontend/editor/src/core/assets/brand/modern-logo/StirlingLogoWhiteText.svg
new file mode 100644
index 0000000000..5cdd32f18d
--- /dev/null
+++ b/frontend/editor/src/core/assets/brand/modern-logo/StirlingLogoWhiteText.svg
@@ -0,0 +1 @@
+
diff --git a/frontend/editor/src/core/assets/brand/modern-logo/StirlingProcessorLogoNoText.svg b/frontend/editor/src/core/assets/brand/modern-logo/StirlingProcessorLogoNoText.svg
new file mode 100644
index 0000000000..ac9fa92de5
--- /dev/null
+++ b/frontend/editor/src/core/assets/brand/modern-logo/StirlingProcessorLogoNoText.svg
@@ -0,0 +1,4 @@
+
diff --git a/frontend/editor/src/portal/components/Sidebar.css b/frontend/editor/src/portal/components/Sidebar.css
index c9dfa871ee..40e1fd25f5 100644
--- a/frontend/editor/src/portal/components/Sidebar.css
+++ b/frontend/editor/src/portal/components/Sidebar.css
@@ -54,12 +54,20 @@
padding: 0 0.875rem;
display: flex;
align-items: center;
- gap: 0.5rem;
+ gap: 0.4375rem;
border-bottom: 1px solid var(--c-border-subtle);
}
-/* Stirling Processor wordmark (theme-switched in Sidebar.tsx); matches the
- editor's 22px wordmark so the two apps read as one brand. */
+/* Brand mark (parallelogram icon) leading the wordmark; same in both themes. */
+.portal-sidebar__mark {
+ height: 1.5rem;
+ width: auto;
+ display: block;
+ flex-shrink: 0;
+}
+
+/* Stirling wordmark (theme-switched in Sidebar.tsx); matches the editor's
+ 22px wordmark so the two apps read as one brand. */
.portal-sidebar__wordmark {
height: 1.375rem;
width: auto;
diff --git a/frontend/editor/src/portal/components/Sidebar.tsx b/frontend/editor/src/portal/components/Sidebar.tsx
index b4f5300d16..a6f2a97a01 100644
--- a/frontend/editor/src/portal/components/Sidebar.tsx
+++ b/frontend/editor/src/portal/components/Sidebar.tsx
@@ -8,8 +8,9 @@ import { useTheme } from "@portal/contexts/ThemeContext";
import { useUI } from "@portal/contexts/UIContext";
import { LinkAccountFooterItem } from "@portal/components/LinkAccountFooterItem";
import { EDITOR_URL, EDITOR_IS_SAME_APP } from "@portal/auth/editorUrl";
-import wordmarkLight from "@app/assets/brand/modern-logo/StirlingProcessorLogoBlackText.svg";
-import wordmarkDark from "@app/assets/brand/modern-logo/StirlingProcessorLogoWhiteText.svg";
+import mark from "@app/assets/brand/modern-logo/StirlingProcessorLogoNoText.svg";
+import wordmarkLight from "@app/assets/brand/modern-logo/StirlingLogoBlackText.svg";
+import wordmarkDark from "@app/assets/brand/modern-logo/StirlingLogoWhiteText.svg";
import { CloseIcon, SettingsIcon } from "@portal/components/icons";
import {
GROUP_PROCESSOR,
@@ -80,18 +81,24 @@ export function Sidebar() {
inert={isMobile && !mobileNavOpen}
>
+
{/* Both wordmarks render; CSS shows the right one per the actual color
scheme (data-mantine-color-scheme), so it tracks the rendered theme
rather than the portal's separate theme state. */}