External/SnapOtter
1
0
Fork 0
mirror of https://github.com/snapotter-hq/SnapOtter.git synced 2026-08-03 07:46:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor(branding): extract GemLogo to shared component and add to About section

Browse Source
This commit is contained in:
Siddharth Kumar Sah
2026-03-27 13:50:03 +08:00
parent 26cc18342f
commit fadf0a8a22
3 changed files with 36 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/common/gem-logo.tsx
+33
View File
@@ -0,0 +1,33 @@
export function GemLogo({ className = "h-6 w-6" }: { className?: string }) {
return (
<svg
className={className}
viewBox="0 0 140 140"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<polygon points="70,16 100,48 70,60 40,48" fill="currentColor" opacity="1" />
<polygon points="40,48 70,60 70,124 22,60" fill="currentColor" opacity="0.7" />
<polygon points="100,48 70,60 70,124 118,60" fill="currentColor" opacity="0.5" />
<polygon points="70,16 40,48 22,60" fill="currentColor" opacity="0.85" />
<polygon points="70,16 100,48 118,60" fill="currentColor" opacity="0.65" />
<polygon
points="70,16 118,60 70,124 22,60"
fill="none"
stroke="currentColor"
strokeWidth="2.5"
strokeLinejoin="round"
/>
<line
x1="40"
y1="48"
x2="100"
y2="48"
stroke="currentColor"
strokeWidth="1.5"
opacity="0.4"
/>
</svg>
);
}
apps/web/src/components/layout/app-layout.tsx
+1 -34
View File
@@ -5,46 +5,13 @@ import { useMobile } from "@/hooks/use-mobile";
import { apiGet } from "@/lib/api";
import { cn } from "@/lib/utils";
import { Dropzone } from "../common/dropzone";
import { GemLogo } from "../common/gem-logo";
import { HelpDialog } from "../help/help-dialog";
import { SettingsDialog } from "../settings/settings-dialog";
import { Footer } from "./footer";
import { Sidebar } from "./sidebar";
import { ToolPanel } from "./tool-panel";
function GemLogo({ className = "h-6 w-6" }: { className?: string }) {
return (
<svg
className={className}
viewBox="0 0 140 140"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<polygon points="70,16 100,48 70,60 40,48" fill="currentColor" opacity="1" />
<polygon points="40,48 70,60 70,124 22,60" fill="currentColor" opacity="0.7" />
<polygon points="100,48 70,60 70,124 118,60" fill="currentColor" opacity="0.5" />
<polygon points="70,16 40,48 22,60" fill="currentColor" opacity="0.85" />
<polygon points="70,16 100,48 118,60" fill="currentColor" opacity="0.65" />
<polygon
points="70,16 118,60 70,124 22,60"
fill="none"
stroke="currentColor"
strokeWidth="2.5"
strokeLinejoin="round"
/>
<line
x1="40"
y1="48"
x2="100"
y2="48"
stroke="currentColor"
strokeWidth="1.5"
opacity="0.4"
/>
</svg>
);
}
interface AppLayoutProps {
children?: React.ReactNode;
showToolPanel?: boolean;
apps/web/src/components/settings/settings-dialog.tsx
+2
View File
@@ -25,6 +25,7 @@ import {
import { useCallback, useEffect, useMemo, useState } from "react";
import { apiDelete, apiGet, apiPost, apiPut, clearToken } from "@/lib/api";
import { cn } from "@/lib/utils";
import { GemLogo } from "../common/gem-logo";
interface SettingsDialogProps {
open: boolean;
@@ -1729,6 +1730,7 @@ function AboutSection() {
<div className="p-4 rounded-lg border border-border bg-muted/20 space-y-3">
<div className="flex items-center gap-3">
<GemLogo className="h-8 w-8 text-primary" />
<div className="text-2xl font-bold text-foreground">
Stirling <span className="text-primary">Image</span>
</div>