Mirrors/Stirling-PDF
Mirrors/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Frooodle/Stirling-PDF.git synced 2025-12-18 20:04:17 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: update mobile header branding to display icon and text logos

Browse Source 
- Display both icon-only and text logos side by side in mobile header
- Use correct file paths: StirlingPDFLogoWhiteText/BlackText for text logos
- Add proper gap and sizing for both logo elements
- Remove single text span in favor of dual logo approach

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Anthony Stirling 2025-10-01 12:30:48 +01:00
parent f4b2f2d5b8
commit 0c32dd53b2
2 changed files with 14 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/src/pages/HomePage.css
View File

@ -25,20 +25,20 @@
.mobile-brand {
display: flex;
align-items: center;
gap: 0.4rem;
gap: 0.5rem;
min-width: 0;
}
.mobile-brand-mark {
height: 1.25rem;
.mobile-brand-icon {
height: 1.5rem;
width: auto;
flex-shrink: 0;
}
.mobile-brand-name {
font-size: 0.95rem;
font-weight: 600;
color: var(--text-primary);
line-height: 1.2;
.mobile-brand-text {
height: 1.5rem;
width: auto;
max-width: 100%;
}
.mobile-toggle-buttons {

10
frontend/src/pages/HomePage.tsx
View File

@ -38,11 +38,13 @@ export default function HomePage() {
const [activeMobileView, setActiveMobileView] = useState<MobileView>("tools");
const isProgrammaticScroll = useRef(false);
const brandName = t("home.mobile.brandName", "Stirling");
const brandAltText = t("home.mobile.brandAlt", "Stirling PDF logo");
const brandMarkSrc = `${BASE_PATH}/branding/StirlingPDFLogoNoText${
const brandIconSrc = `${BASE_PATH}/branding/StirlingPDFLogoNoText${
colorScheme === "dark" ? "Dark" : "Light"
}.svg`;
const brandTextSrc = `${BASE_PATH}/branding/StirlingPDFLogo${
colorScheme === "dark" ? "White" : "Black"
}Text.svg`;
const handleSelectMobileView = useCallback((view: MobileView) => {
setActiveMobileView(view);
@ -127,8 +129,8 @@ export default function HomePage() {
<div className="mobile-toggle">
<div className="mobile-header">
<div className="mobile-brand">
<img src={brandMarkSrc} alt={brandAltText} className="mobile-brand-mark" />
<span className="mobile-brand-name">{brandName}</span>
<img src={brandIconSrc} alt="" className="mobile-brand-icon" />
<img src={brandTextSrc} alt={brandAltText} className="mobile-brand-text" />
</div>
</div>
<div className="mobile-toggle-buttons" role="tablist" aria-label={t('home.mobile.viewSwitcher', 'Switch workspace view')}>