fix(branding): use Wordmark SVG in FileSidebar and LandingPage

Replaces plain-text "Stirling PDF" renders with the <Wordmark>
component so brand surfaces stay consistent with AddFileCard.tsx.
This commit is contained in:
Reece
2026-05-12 17:34:37 +01:00
parent 2e4bfc3a5b
commit a1fb7c71c4
4 changed files with 18 additions and 20 deletions
@@ -50,12 +50,9 @@
}
.file-sidebar-brand-text {
font-family: "Alumni Sans", sans-serif;
font-weight: 700;
font-size: 18px;
letter-spacing: 0.3px;
color: var(--text-secondary);
white-space: nowrap;
height: 22px;
width: auto;
flex-shrink: 0;
}
/* ---- Search row ---- */
@@ -21,6 +21,7 @@ import { useFileHandler } from "@app/hooks/useFileHandler";
import { useIndexedDB } from "@app/contexts/IndexedDBContext";
import { accountService } from "@app/services/accountService";
import { GoogleDriveIcon } from "@app/components/shared/CloudStorageIcons";
import { Wordmark } from "@app/components/shared/Wordmark";
import type { StirlingFileStub } from "@app/types/fileContext";
import MenuIcon from "@mui/icons-material/Menu";
import SearchIcon from "@mui/icons-material/Search";
@@ -334,9 +335,10 @@ const FileSidebar = forwardRef<HTMLDivElement, FileSidebarProps>(
>
<MenuIcon className="file-sidebar-menu-icon" />
{!collapsed && (
<span className="file-sidebar-brand-text sidebar-content-fade">
Stirling PDF
</span>
<Wordmark
alt="Stirling PDF"
className="file-sidebar-brand-text sidebar-content-fade"
/>
)}
</div>
@@ -5,14 +5,11 @@
/* ── Hero text ───────────────────────────────────────────── */
.landing-title {
margin: 0;
margin-top: 1.75rem;
margin-bottom: 0.5rem;
text-align: center;
font-size: 2.125rem;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--text-primary);
display: block;
margin: 1.75rem auto 0.5rem;
height: 3rem;
width: auto;
max-width: 100%;
}
.landing-subtitle {
@@ -8,6 +8,7 @@ import MobileUploadModal from "@app/components/shared/MobileUploadModal";
import { openFilesFromDisk } from "@app/services/openFilesFromDisk";
import { LandingDocumentStack } from "@app/components/shared/LandingDocumentStack";
import { LandingActions } from "@app/components/shared/LandingActions";
import { Wordmark } from "@app/components/shared/Wordmark";
import "@app/components/shared/LandingPage.css";
const LandingPage = () => {
@@ -79,9 +80,10 @@ const LandingPage = () => {
>
<LandingDocumentStack />
<h1 className="landing-title">
{t("landing.heroTitle", "Stirling PDF")}
</h1>
<Wordmark
alt={t("landing.heroTitle", "Stirling PDF")}
className="landing-title"
/>
<p className="landing-subtitle">
{t(
"landing.heroSubtitle",