fix: update icon colors for notes and published indicator

  - Change note icon color from blue to rose
  - Change globe (published) icon color from orange to amber

Author: rui-typelets

src/components/folders/constants.ts src/components/folders/constants.tsxsrc/components/folders/constants.ts renamed to src/components/folders/constants.tsx

@@ -1,7 +1,15 @@
-import { FileText, Star, Archive, Trash2, Globe } from 'lucide-react';
+/* eslint-disable react-refresh/only-export-components */
+import { Star, Archive, Trash2, Globe } from 'lucide-react';
+import { mdiNoteTextOutline } from '@mdi/js';
+import Icon from '@mdi/react';
 
 import type { ViewMode } from '@/types/note';
 
+// MDI icon wrapper component for consistent sizing
+const NoteIcon = ({ className }: { className?: string }) => (
+  <Icon path={mdiNoteTextOutline} size="1rem" className={className} />
+);
+
 export const FOLDER_COLORS = [
   '#ef4444',
   '#f97316',
@@ -21,7 +29,7 @@ export const SPECIAL_VIEWS = [
   {
     id: 'all' as ViewMode,
     label: 'All Files',
-    icon: FileText,
+    icon: NoteIcon,
   },
   {
     id: 'starred' as ViewMode,

src/components/layout/TabBar.tsx

@@ -1,6 +1,6 @@
 import { X, ChevronDown, Globe, SquareCode } from 'lucide-react';
 import Icon from '@mdi/react';
-import { mdiTextBoxOutline, mdiFileTableBoxOutline, mdiVectorSquare } from '@mdi/js';
+import { mdiNoteTextOutline, mdiFileTableBoxOutline, mdiVectorSquare } from '@mdi/js';
 import { Button } from '@/components/ui/button';
 import {
   DropdownMenu,
@@ -40,21 +40,21 @@ const TabIcon = ({ type, isPublished }: { type: Tab['type']; isPublished?: boole
         return <Icon path={mdiFileTableBoxOutline} style={{ width: iconSize, height: iconSize }} className="text-green-500" />;
       case 'note':
       default:
-        return <Icon path={mdiTextBoxOutline} style={{ width: iconSize, height: iconSize }} className="text-blue-500" />;
+        return <Icon path={mdiNoteTextOutline} style={{ width: iconSize, height: iconSize }} className="text-rose-500" />;
     }
   })();
 
   if (isPublished && typeIcon) {
     return (
       <div className="flex items-center gap-1">
         {typeIcon}
-        <Globe className="h-3 w-3 text-orange-500" />
+        <Globe className="h-3 w-3 text-amber-500" />
       </div>
     );
   }
 
   if (isPublished) {
-    return <Globe className="h-3.5 w-3.5 text-orange-500" />;
+    return <Globe className="h-3.5 w-3.5 text-amber-500" />;
   }
 
   return typeIcon;

src/components/notes/NotesPanel/NoteCard.tsx

@@ -1,7 +1,7 @@
 import { memo, useMemo } from 'react';
 import { Star, Paperclip, Codesandbox, Globe, SquareCode } from 'lucide-react';
 import Icon from '@mdi/react';
-import { mdiTextBoxOutline, mdiFileTableBoxOutline, mdiVectorSquare } from '@mdi/js';
+import { mdiNoteTextOutline, mdiFileTableBoxOutline, mdiVectorSquare } from '@mdi/js';
 import type { Note, Folder as FolderType } from '@/types/note.ts';
 
 interface NoteCardProps {
@@ -119,7 +119,7 @@ function NoteCard({
         return <Icon path={mdiFileTableBoxOutline} style={{ width: iconSize, height: iconSize }} className="text-green-500" />;
       case 'note':
       default:
-        return <Icon path={mdiTextBoxOutline} style={{ width: iconSize, height: iconSize }} className="text-blue-500" />;
+        return <Icon path={mdiNoteTextOutline} style={{ width: iconSize, height: iconSize }} className="text-rose-500" />;
     }
   };
 
@@ -161,7 +161,7 @@ function NoteCard({
                   className="flex items-center text-xs"
                   title="Published - publicly accessible"
                 >
-                  <Globe className="h-3.5 w-3.5 text-orange-500" />
+                  <Globe className="h-3.5 w-3.5 text-amber-500" />
                 </div>
               )}
               {hasExecutableCode && (

src/components/notes/NotesPanel/index.tsx

@@ -10,7 +10,7 @@ import {
   SquareCode,
 } from 'lucide-react';
 import Icon from '@mdi/react';
-import { mdiTextBoxOutline, mdiFileTableBoxOutline, mdiVectorSquare } from '@mdi/js';
+import { mdiNoteTextOutline, mdiFileTableBoxOutline, mdiVectorSquare } from '@mdi/js';
 import NotesList from '@/components/notes/NotesPanel/NotesList.tsx';
 import { Button } from '@/components/ui/button.tsx';
 import { ButtonGroup } from '@/components/ui/button-group';
@@ -501,7 +501,7 @@ export default function FilesPanel({
                   onClick={() => onCreateNote()}
                   className="flex items-center gap-2"
                 >
-                  <Icon path={mdiTextBoxOutline} style={{ width: "16px", height: "16px" }} className="text-blue-500" />
+                  <Icon path={mdiNoteTextOutline} style={{ width: "16px", height: "16px" }} className="text-rose-500" />
                   <span>Note</span>
                 </DropdownMenuItem>
 

src/components/settings/UsageSection.tsx

@@ -139,12 +139,12 @@ export function UsageSection({ className }: UsageSectionProps) {
           )}
         </div>
 
-        {/* Notes Count */}
+        {/* Files Count */}
         <div className="space-y-3 rounded-lg border p-4">
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-2">
               <FileText className="text-muted-foreground h-4 w-4" />
-              <span className="font-medium">Notes</span>
+              <span className="font-medium">Files</span>
             </div>
             <span className="text-muted-foreground text-sm">
               {usage.notes.count} / {usage.notes.limit}
@@ -159,7 +159,7 @@ export function UsageSection({ className }: UsageSectionProps) {
                 ? `${usage.notes.usagePercent.toFixed(2)}% used`
                 : `${usage.notes.usagePercent.toFixed(1)}% used`}
             </span>
-            <span>{usage.notes.limit - usage.notes.count} notes remaining</span>
+            <span>{usage.notes.limit - usage.notes.count} files remaining</span>
           </div>
 
           {usage.notes.usagePercent >= 80 && (
@@ -172,8 +172,8 @@ export function UsageSection({ className }: UsageSectionProps) {
               )}
             >
               {usage.notes.usagePercent >= 95
-                ? '⚠️ Note limit almost reached. Consider upgrading soon.'
-                : '📝 Approaching note limit.'}
+                ? '⚠️ File limit almost reached. Consider upgrading soon.'
+                : '📝 Approaching file limit.'}
             </div>
           )}
         </div>
@@ -187,7 +187,7 @@ export function UsageSection({ className }: UsageSectionProps) {
             usage.notes.usagePercent >= 80) && (
             <span>
               {' '}
-              Consider upgrading for more storage and unlimited notes.
+              Consider upgrading for more storage and unlimited files.
             </span>
           )}
         </p>