yoinkkk/ExcaliDash
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

New Icon/Logo

Browse Source
This commit is contained in:
Zimeng Xiong
2025-11-22 09:45:20 -08:00
parent 0c843eb37d
commit 05d472189c
11 changed files with 806 additions and 247 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/public/favicon-dark.svg
+66
View File
@@ -0,0 +1,66 @@
<svg width="100%" height="100%" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
<style>
.stroke-main { stroke: #E2E8F0; }
.fill-teal { fill: #134E4A; } /* teal-900 */
.stroke-teal { stroke: #2DD4BF; } /* teal-400 */
.fill-orange { fill: #7C2D12; } /* orange-900 */
.stroke-orange { stroke: #FB923C; } /* orange-400 */
.fill-purple { fill: #581C87; } /* purple-900 */
.stroke-purple { stroke: #A78BFA; } /* purple-400 */
.stroke-red { stroke: #F87171; } /* red-400 */
.fill-pencil-body { fill: #FACC15; } /* yellow-400 */
.fill-pencil-eraser { fill: #F472B6; } /* pink-400 */
.fill-pencil-collar { fill: #475569; } /* slate-600 */
.fill-pencil-tip { fill: #E2E8F0; }
</style>
<defs>
<filter id="softShadow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceAlpha" stdDeviation="8"></feGaussianBlur>
<feOffset dx="4" dy="8" result="offsetblur"></feOffset>
<feComponentTransfer>
<feFuncA type="linear" slope="0.2"></feFuncA>
</feComponentTransfer>
<feMerge>
<feMergeNode></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</defs>
<!-- Group: The Dashboard Grid (2x2) -->
<g class="stroke-main" stroke-width="32" stroke-linecap="round" stroke-linejoin="round">
<!-- Top Left: Bar Chart -->
<rect class="fill-teal" x="40" y="40" width="200" height="200" rx="32" stroke-width="24"></rect>
<path class="stroke-teal" d="M100 180 V 140"></path>
<path class="stroke-teal" d="M140 180 V 100"></path>
<path class="stroke-teal" d="M180 180 V 160"></path>
<!-- Top Right: Pie Chart -->
<rect class="fill-orange" x="272" y="40" width="200" height="200" rx="32" stroke-width="24"></rect>
<circle class="stroke-orange" cx="372" cy="140" r="50" stroke-width="24"></circle>
<!-- Slice -->
<path class="stroke-orange" d="M372 140 L 405 105" stroke-width="12"></path>
<!-- Bottom Left: List/Text -->
<rect class="fill-purple" x="40" y="272" width="200" height="200" rx="32" stroke-width="24"></rect>
<line class="stroke-purple" x1="80" y1="332" x2="200" y2="332"></line>
<line class="stroke-purple" x1="80" y1="372" x2="160" y2="372"></line>
<line class="stroke-purple" x1="80" y1="412" x2="180" y2="412"></line>
<!-- Bottom Right: The "Creation" Zone -->
<!-- Dashed placeholder for the item being created -->
<rect class="stroke-red" x="272" y="272" width="200" height="200" rx="32" fill="none"
stroke-width="24" stroke-dasharray="30 30"></rect>
</g>
<!-- The Pencil (Floating over the bottom right) -->
<g transform="translate(380, 380) rotate(-45)" filter="url(#softShadow)">
<!-- Body -->
<path class="fill-pencil-body stroke-main" d="M-25 -100 L-25 80 L0 120 L25 80 L25 -100 Z"
stroke-width="24" stroke-linejoin="round"></path>
<!-- Eraser -->
<path class="fill-pencil-eraser stroke-main"
d="M-25 -100 L-25 -130 C-25 -150, 25 -150, 25 -130 L25 -100 Z" stroke-width="24"
stroke-linejoin="round"></path>
<!-- Collar -->
<rect class="fill-pencil-collar stroke-main" x="-25" y="-100" width="50" height="30"
stroke-width="24" stroke-linejoin="round"></rect>
<!-- Tip Lead -->
<path class="fill-pencil-tip" d="M-8 108 L0 120 L8 108 Z"></path>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

frontend/public/favicon-light.svg
+66
View File
@@ -0,0 +1,66 @@
<svg width="100%" height="100%" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
<style>
.stroke-main { stroke: #2D3748; }
.fill-teal { fill: #E6FFFA; }
.stroke-teal { stroke: #38B2AC; }
.fill-orange { fill: #FFFAF0; }
.stroke-orange { stroke: #DD6B20; }
.fill-purple { fill: #FAF5FF; }
.stroke-purple { stroke: #805AD5; }
.stroke-red { stroke: #E53E3E; }
.fill-pencil-body { fill: #F6E05E; }
.fill-pencil-eraser { fill: #F687B3; }
.fill-pencil-collar { fill: #CBD5E0; }
.fill-pencil-tip { fill: #2D3748; }
</style>
<defs>
<filter id="softShadow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceAlpha" stdDeviation="8"></feGaussianBlur>
<feOffset dx="4" dy="8" result="offsetblur"></feOffset>
<feComponentTransfer>
<feFuncA type="linear" slope="0.2"></feFuncA>
</feComponentTransfer>
<feMerge>
<feMergeNode></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</defs>
<!-- Group: The Dashboard Grid (2x2) -->
<g class="stroke-main" stroke-width="32" stroke-linecap="round" stroke-linejoin="round">
<!-- Top Left: Bar Chart -->
<rect class="fill-teal" x="40" y="40" width="200" height="200" rx="32" stroke-width="24"></rect>
<path class="stroke-teal" d="M100 180 V 140"></path>
<path class="stroke-teal" d="M140 180 V 100"></path>
<path class="stroke-teal" d="M180 180 V 160"></path>
<!-- Top Right: Pie Chart -->
<rect class="fill-orange" x="272" y="40" width="200" height="200" rx="32" stroke-width="24"></rect>
<circle class="stroke-orange" cx="372" cy="140" r="50" stroke-width="24"></circle>
<!-- Slice -->
<path class="stroke-orange" d="M372 140 L 405 105" stroke-width="12"></path>
<!-- Bottom Left: List/Text -->
<rect class="fill-purple" x="40" y="272" width="200" height="200" rx="32" stroke-width="24"></rect>
<line class="stroke-purple" x1="80" y1="332" x2="200" y2="332"></line>
<line class="stroke-purple" x1="80" y1="372" x2="160" y2="372"></line>
<line class="stroke-purple" x1="80" y1="412" x2="180" y2="412"></line>
<!-- Bottom Right: The "Creation" Zone -->
<!-- Dashed placeholder for the item being created -->
<rect class="stroke-red" x="272" y="272" width="200" height="200" rx="32" fill="none"
stroke-width="24" stroke-dasharray="30 30"></rect>
</g>
<!-- The Pencil (Floating over the bottom right) -->
<g transform="translate(380, 380) rotate(-45)" filter="url(#softShadow)">
<!-- Body -->
<path class="fill-pencil-body stroke-main" d="M-25 -100 L-25 80 L0 120 L25 80 L25 -100 Z"
stroke-width="24" stroke-linejoin="round"></path>
<!-- Eraser -->
<path class="fill-pencil-eraser stroke-main"
d="M-25 -100 L-25 -130 C-25 -150, 25 -150, 25 -130 L25 -100 Z" stroke-width="24"
stroke-linejoin="round"></path>
<!-- Collar -->
<rect class="fill-pencil-collar stroke-main" x="-25" y="-100" width="50" height="30"
stroke-width="24" stroke-linejoin="round"></rect>
<!-- Tip Lead -->
<path class="fill-pencil-tip" d="M-8 108 L0 120 L8 108 Z"></path>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

frontend/public/favicon.svg
+80 -19
View File
@@ -1,20 +1,81 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<style>
.shadow { fill: black; }
.box { fill: #4f46e5; stroke: black; }
@media (prefers-color-scheme: dark) {
.shadow { fill: rgba(255, 255, 255, 0.2); }
.box { fill: #262626; stroke: #404040; }
}
</style>
<rect class="shadow" x="4" y="4" width="26" height="26" rx="6"/>
<rect class="box" x="2" y="2" width="26" height="26" rx="6" stroke-width="2"/>
<g transform="translate(7, 7)">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<rect width="7" height="7" x="3" y="3" rx="1" />
<rect width="7" height="7" x="14" y="3" rx="1" />
<rect width="7" height="7" x="14" y="14" rx="1" />
<rect width="7" height="7" x="3" y="14" rx="1" />
</svg>
</g>
<svg width="100%" height="100%" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
<style>
.stroke-main { stroke: #2D3748; }
.fill-teal { fill: #E6FFFA; }
.stroke-teal { stroke: #38B2AC; }
.fill-orange { fill: #FFFAF0; }
.stroke-orange { stroke: #DD6B20; }
.fill-purple { fill: #FAF5FF; }
.stroke-purple { stroke: #805AD5; }
.stroke-red { stroke: #E53E3E; }
.fill-pencil-body { fill: #F6E05E; }
.fill-pencil-eraser { fill: #F687B3; }
.fill-pencil-collar { fill: #CBD5E0; }
.fill-pencil-tip { fill: #2D3748; }
@media (prefers-color-scheme: dark) {
.stroke-main { stroke: #E2E8F0; }
.fill-teal { fill: #134E4A; } /* teal-900 */
.stroke-teal { stroke: #2DD4BF; } /* teal-400 */
.fill-orange { fill: #7C2D12; } /* orange-900 */
.stroke-orange { stroke: #FB923C; } /* orange-400 */
.fill-purple { fill: #581C87; } /* purple-900 */
.stroke-purple { stroke: #A78BFA; } /* purple-400 */
.stroke-red { stroke: #F87171; } /* red-400 */
.fill-pencil-body { fill: #FACC15; } /* yellow-400 */
.fill-pencil-eraser { fill: #F472B6; } /* pink-400 */
.fill-pencil-collar { fill: #475569; } /* slate-600 */
.fill-pencil-tip { fill: #E2E8F0; }
}
</style>
<defs>
<filter id="softShadow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceAlpha" stdDeviation="8"></feGaussianBlur>
<feOffset dx="4" dy="8" result="offsetblur"></feOffset>
<feComponentTransfer>
<feFuncA type="linear" slope="0.2"></feFuncA>
</feComponentTransfer>
<feMerge>
<feMergeNode></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</defs>
<!-- Group: The Dashboard Grid (2x2) -->
<g class="stroke-main" stroke-width="32" stroke-linecap="round" stroke-linejoin="round">
<!-- Top Left: Bar Chart -->
<rect class="fill-teal" x="40" y="40" width="200" height="200" rx="32" stroke-width="24"></rect>
<path class="stroke-teal" d="M100 180 V 140"></path>
<path class="stroke-teal" d="M140 180 V 100"></path>
<path class="stroke-teal" d="M180 180 V 160"></path>
<!-- Top Right: Pie Chart -->
<rect class="fill-orange" x="272" y="40" width="200" height="200" rx="32" stroke-width="24"></rect>
<circle class="stroke-orange" cx="372" cy="140" r="50" stroke-width="24"></circle>
<!-- Slice -->
<path class="stroke-orange" d="M372 140 L 405 105" stroke-width="12"></path>
<!-- Bottom Left: List/Text -->
<rect class="fill-purple" x="40" y="272" width="200" height="200" rx="32" stroke-width="24"></rect>
<line class="stroke-purple" x1="80" y1="332" x2="200" y2="332"></line>
<line class="stroke-purple" x1="80" y1="372" x2="160" y2="372"></line>
<line class="stroke-purple" x1="80" y1="412" x2="180" y2="412"></line>
<!-- Bottom Right: The "Creation" Zone -->
<!-- Dashed placeholder for the item being created -->
<rect class="stroke-red" x="272" y="272" width="200" height="200" rx="32" fill="none"
stroke-width="24" stroke-dasharray="30 30"></rect>
</g>
<!-- The Pencil (Floating over the bottom right) -->
<g transform="translate(380, 380) rotate(-45)" filter="url(#softShadow)">
<!-- Body -->
<path class="fill-pencil-body stroke-main" d="M-25 -100 L-25 80 L0 120 L25 80 L25 -100 Z"
stroke-width="24" stroke-linejoin="round"></path>
<!-- Eraser -->
<path class="fill-pencil-eraser stroke-main"
d="M-25 -100 L-25 -130 C-25 -150, 25 -150, 25 -130 L25 -100 Z" stroke-width="24"
stroke-linejoin="round"></path>
<!-- Collar -->
<rect class="fill-pencil-collar stroke-main" x="-25" y="-100" width="50" height="30"
stroke-width="24" stroke-linejoin="round"></rect>
<!-- Tip Lead -->
<path class="fill-pencil-tip" d="M-8 108 L0 120 L8 108 Z"></path>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 910 B

After

Width:  |  Height:  |  Size: 4.1 KiB

frontend/src/components/Logo.tsx
+155
View File
@@ -0,0 +1,155 @@
import React from 'react';
export const Logo: React.FC<{ className?: string }> = ({ className }) => {
return (
<svg
viewBox="0 0 512 512"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={className}
>
<defs>
<filter id="softShadow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceAlpha" stdDeviation="8"></feGaussianBlur>
<feOffset dx="4" dy="8" result="offsetblur"></feOffset>
<feComponentTransfer>
<feFuncA type="linear" slope="0.2"></feFuncA>
</feComponentTransfer>
<feMerge>
<feMergeNode></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</defs>
{/* Group: The Dashboard Grid (2x2) */}
<g
strokeWidth="32"
strokeLinecap="round"
strokeLinejoin="round"
className="stroke-[#2D3748] dark:stroke-[#E2E8F0]"
>
{/* Top Left: Bar Chart */}
<rect
x="40"
y="40"
width="200"
height="200"
rx="32"
strokeWidth="24"
className="fill-[#E6FFFA] dark:fill-[#134E4A]"
></rect>
<path
d="M100 180 V 140"
className="stroke-[#38B2AC] dark:stroke-[#2DD4BF]"
></path>
<path
d="M140 180 V 100"
className="stroke-[#38B2AC] dark:stroke-[#2DD4BF]"
></path>
<path
d="M180 180 V 160"
className="stroke-[#38B2AC] dark:stroke-[#2DD4BF]"
></path>
{/* Top Right: Pie Chart */}
<rect
x="272"
y="40"
width="200"
height="200"
rx="32"
strokeWidth="24"
className="fill-[#FFFAF0] dark:fill-[#7C2D12]"
></rect>
<circle
cx="372"
cy="140"
r="50"
strokeWidth="24"
className="stroke-[#DD6B20] dark:stroke-[#FB923C]"
></circle>
{/* Slice */}
<path
d="M372 140 L 405 105"
strokeWidth="12"
className="stroke-[#DD6B20] dark:stroke-[#FB923C]"
></path>
{/* Bottom Left: List/Text */}
<rect
x="40"
y="272"
width="200"
height="200"
rx="32"
strokeWidth="24"
className="fill-[#FAF5FF] dark:fill-[#581C87]"
></rect>
<line
x1="80"
y1="332"
x2="200"
y2="332"
className="stroke-[#805AD5] dark:stroke-[#A78BFA]"
></line>
<line
x1="80"
y1="372"
x2="160"
y2="372"
className="stroke-[#805AD5] dark:stroke-[#A78BFA]"
></line>
<line
x1="80"
y1="412"
x2="180"
y2="412"
className="stroke-[#805AD5] dark:stroke-[#A78BFA]"
></line>
{/* Bottom Right: The "Creation" Zone */}
{/* Dashed placeholder for the item being created */}
<rect
x="272"
y="272"
width="200"
height="200"
rx="32"
fill="none"
strokeWidth="24"
strokeDasharray="30 30"
className="stroke-[#E53E3E] dark:stroke-[#F87171]"
></rect>
</g>
{/* The Pencil (Floating over the bottom right) */}
<g transform="translate(380, 380) rotate(-45)" filter="url(#softShadow)">
{/* Body */}
<path
d="M-25 -100 L-25 80 L0 120 L25 80 L25 -100 Z"
strokeWidth="24"
strokeLinejoin="round"
className="fill-[#F6E05E] dark:fill-[#FACC15] stroke-[#2D3748] dark:stroke-[#E2E8F0]"
></path>
{/* Eraser */}
<path
d="M-25 -100 L-25 -130 C-25 -150, 25 -150, 25 -130 L25 -100 Z"
strokeWidth="24"
strokeLinejoin="round"
className="fill-[#F687B3] dark:fill-[#F472B6] stroke-[#2D3748] dark:stroke-[#E2E8F0]"
></path>
{/* Collar */}
<rect
x="-25"
y="-100"
width="50"
height="30"
strokeWidth="24"
strokeLinejoin="round"
className="fill-[#CBD5E0] dark:fill-[#475569] stroke-[#2D3748] dark:stroke-[#E2E8F0]"
></rect>
{/* Tip Lead */}
<path
d="M-8 108 L0 120 L8 108 Z"
className="fill-[#2D3748] dark:fill-[#E2E8F0]"
></path>
</g>
</svg>
);
};
frontend/src/components/Sidebar.tsx
+2 -4
View File
@@ -1,10 +1,10 @@
import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { LayoutGrid, Folder, Plus, Trash2, Edit2, Archive, FolderOpen, Settings as SettingsIcon } from 'lucide-react';
import type { Collection } from '../types';
import clsx from 'clsx';
import { ConfirmModal } from './ConfirmModal';
import { Logo } from './Logo';
interface SidebarProps {
collections: Collection[];
@@ -169,9 +169,7 @@ export const Sidebar: React.FC<SidebarProps> = ({
<div className="w-[260px] flex flex-col h-full bg-transparent">
<div className="p-5 pb-2">
<h1 className="text-2xl text-slate-900 dark:text-white flex items-center gap-3 tracking-tight" style={{ fontFamily: 'Excalifont' }}>
<div className="w-8 h-8 bg-indigo-600 dark:bg-neutral-800 rounded-lg flex items-center justify-center text-white border-2 border-black dark:border-neutral-700 shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] dark:shadow-[2px_2px_0px_0px_rgba(255,255,255,0.2)]">
<LayoutGrid size={18} strokeWidth={2.5} />
</div>
<Logo className="w-10 h-10" />
<span className="mt-1">ExcaliDash</span>
</h1>
</div>
frontend/src/context/ThemeContext.tsx
+7
View File
@@ -18,6 +18,13 @@ export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ childre
useEffect(() => {
console.log('Theme changed to:', theme);
localStorage.setItem('theme', theme);
// Update favicon
const link = document.querySelector("link[rel~='icon']") as HTMLLinkElement;
if (link) {
link.href = theme === 'dark' ? '/favicon-dark.svg' : '/favicon-light.svg';
}
if (theme === 'dark') {
document.documentElement.classList.add('dark');
console.log('Added dark class, classList:', document.documentElement.classList.toString());