From d7b0aa70740c6cfeae9697c51c8d1f5719f1b8fa Mon Sep 17 00:00:00 2001
From: Elijah <elijah.kuntz@gmail.com>
Date: Mon, 25 May 2026 19:29:49 -0700
Subject: [PATCH] UI: ensure all PowerPoint/Slides icons use the same
 yellow-orange accent color

---
 frontend/src/components/FileExplorer.tsx |  2 +-
 frontend/src/components/OfficeHome.tsx   | 18 +++++++++---------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/FileExplorer.tsx b/frontend/src/components/FileExplorer.tsx
index af8d921..9218449 100644
--- a/frontend/src/components/FileExplorer.tsx
+++ b/frontend/src/components/FileExplorer.tsx
@@ -1195,7 +1195,7 @@ export default function FileExplorer({ onLogout }: FileExplorerProps) {
 
       if (ext === 'pptx' || ext === 'ppt') {
         return (
-          <div className={`${large ? 'w-28 h-20 rounded-2xl text-2xl' : 'w-5 h-5 rounded text-[6px] flex-shrink-0 aspect-square'} flex items-center justify-center font-black tracking-tighter shadow-sm text-white bg-[#D24726]`}>
+          <div className={`${large ? 'w-28 h-20 rounded-2xl text-2xl' : 'w-5 h-5 rounded text-[6px] flex-shrink-0 aspect-square'} flex items-center justify-center font-black tracking-tighter shadow-sm text-white bg-[#f59e0b]`}>
             <LayoutTemplate className={large ? "w-10 h-10 text-white" : "w-3 h-3 text-white"} />
           </div>
         );
diff --git a/frontend/src/components/OfficeHome.tsx b/frontend/src/components/OfficeHome.tsx
index 9569b96..5cd012d 100644
--- a/frontend/src/components/OfficeHome.tsx
+++ b/frontend/src/components/OfficeHome.tsx
@@ -32,13 +32,11 @@ function WordIcon({ className }: { className?: string }) {
 }
 
 // Custom PowerPoint icon (orange)
-function PptIcon({ className }: { className?: string }) {
-  return (
-    <div className={`flex items-center justify-center text-white bg-[#D24726] rounded-lg ${className || ''}`}>
-      <LayoutTemplate className="w-[55%] h-[55%]" />
-    </div>
-  );
-}
+const SlidesIcon = ({ className }: { className?: string }) => (
+  <div className={`flex items-center justify-center text-white bg-[#f59e0b] rounded-lg ${className || ''}`}>
+    <LayoutTemplate className="w-[60%] h-[60%]" />
+  </div>
+);
 
 // Custom Excel icon (green)
 function SheetIcon({ className }: { className?: string }) {
@@ -226,8 +224,10 @@ export default function OfficeHome({ type, onFileSelect, onCreateBlank, onPinCha
   };
 
   const title = type === 'docs' ? 'Documents' : type === 'slides' ? 'Presentations' : 'Spreadsheets';
-  const Icon = type === 'docs' ? WordIcon : type === 'slides' ? PptIcon : SheetIcon;
-  const accentColor = type === 'docs' ? '#2B579A' : type === 'slides' ? '#D24726' : '#107C41';
+  const Icon = type === 'docs' ? WordIcon : type === 'slides' ? SlidesIcon : SheetIcon;
+  const bgClass = type === 'docs' ? 'from-blue-600 to-blue-800' : type === 'slides' ? 'from-[#f59e0b] to-[#d97706]' : 'from-green-600 to-green-800';
+  const accentColor = type === 'docs' ? '#2B579A' : type === 'slides' ? '#f59e0b' : '#107C41';
+  const appName = type === 'docs' ? 'Docs' : type === 'slides' ? 'Slides' : 'Sheets';
 
   const renderFileCard = (file: FileItem) => {
     const isRenaming = renaming === file.path;