feat(branding): replace default Tauri icon with the Phokus aperture mark
- regenerate src-tauri/icons from the new branding/phokus-aperture.svg master - add reusable PhokusMark component (inline SVG, inherits currentColor) - use it for the titlebar app mark, retiring the placeholder
This commit is contained in:
@@ -0,0 +1,29 @@
|
||||
// Phokus brand mark — a camera iris, rendered inline so it inherits `currentColor`
|
||||
// and scales to any size. Drive color + dimensions from the className, e.g.
|
||||
// <PhokusMark className="h-4 w-4 text-gray-300" />
|
||||
// The full app-icon tile (filled iris on a dark rounded square) lives in
|
||||
// branding/phokus-aperture.svg and feeds `pnpm tauri icon`.
|
||||
const BLADE = "M0,-4.18 A10,10 0 0 1 6.43,-7.66";
|
||||
|
||||
export function PhokusMark({ className }: { className?: string }) {
|
||||
return (
|
||||
<svg viewBox="0 0 24 24" fill="none" className={className}>
|
||||
<g
|
||||
transform="translate(12 12)"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<circle r="10" />
|
||||
<path d="M0,-4.18 A4.73,4.73 0 0 0 3.62,-2.09 A4.73,4.73 0 0 0 3.62,2.09 A4.73,4.73 0 0 0 0,4.18 A4.73,4.73 0 0 0 -3.62,2.09 A4.73,4.73 0 0 0 -3.62,-2.09 A4.73,4.73 0 0 0 0,-4.18 Z" />
|
||||
<path d={BLADE} />
|
||||
<path d={BLADE} transform="rotate(60)" />
|
||||
<path d={BLADE} transform="rotate(120)" />
|
||||
<path d={BLADE} transform="rotate(180)" />
|
||||
<path d={BLADE} transform="rotate(240)" />
|
||||
<path d={BLADE} transform="rotate(300)" />
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { getCurrentWindow } from "@tauri-apps/api/window";
|
||||
import { useGalleryStore } from "../store";
|
||||
import { PhokusMark } from "./PhokusMark";
|
||||
|
||||
// SVG icons for window controls
|
||||
function MinimizeIcon() {
|
||||
@@ -69,12 +70,8 @@ export function TitleBar() {
|
||||
>
|
||||
{/* App icon + name — left side */}
|
||||
<div className="flex items-center gap-2 pl-3 pr-4">
|
||||
<div className="flex h-5 w-5 items-center justify-center rounded-md bg-white/8 overflow-hidden">
|
||||
{/* Phokus logo placeholder — replace with <img src={logo} /> if you have an SVG */}
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
|
||||
<circle cx="6" cy="6" r="4" stroke="#a78bfa" strokeWidth="1.5" />
|
||||
<circle cx="6" cy="6" r="1.5" fill="#a78bfa" />
|
||||
</svg>
|
||||
<div className="flex h-5 w-5 items-center justify-center rounded-md bg-white/8 overflow-hidden text-gray-300">
|
||||
<PhokusMark className="h-4 w-4" />
|
||||
</div>
|
||||
<span className="text-[11px] font-semibold text-gray-400 tracking-wide">Phokus</span>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user