New Icon/Logo

2025-11-22 09:45:20 -08:00
parent 0c843eb37d
commit 05d472189c
11 changed files with 806 additions and 247 deletions
@@ -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>
+  );
+};
@@ -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>
@@ -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());