From 9454ad28eae1b63c253f1bd9dd1ece1db4c936f7 Mon Sep 17 00:00:00 2001
From: Elijah <elijah.kuntz@gmail.com>
Date: Mon, 25 May 2026 10:07:04 -0700
Subject: [PATCH] Icon redesign and xlsx aspect ratio update

---
 backend/test.xlsx                        | Bin 0 -> 2221 bytes
 frontend/src/components/FileExplorer.tsx |  15 +++++++++------
 frontend/src/components/OfficeHome.tsx   |  18 +++++++++---------
 3 files changed, 18 insertions(+), 15 deletions(-)
 create mode 100644 backend/test.xlsx

diff --git a/backend/test.xlsx b/backend/test.xlsx
new file mode 100644
index 0000000000000000000000000000000000000000..3eb5c6e0e50ec9ae185908b6d8c599020068d28c
GIT binary patch
literal 2221
zcmd^AL2uJA6i!z<q;cTDgb=65Cj>NZIUrP;PJ#|;nt*DI6HLP-ZW}dmBHJ6CxJ+Dj
zMdHS7KVwJ4Z{WzkfIH82+caLgRfQX^+%$>b^XKpT-g9TWd}ZBHpSzv2w`X5ZKR;e^
z95rshvo}vuCMlEqyGI!nd)_dKn;Y=s9#Sr%l=-Oc)sRbBkcJWK`RMiTv+5({3Q1T<
z;*?Pz9Z`WcT5C<6!i8WaeAJgRYhWybK23=5(u^{A(@l9oB;4{I&PXsIJ&GUHY7cQ>
zU{s}ofm&;>+icS=If$jZIRt<P3#YL_?g+A4&POE6;wT^zu;N1&S_@T2i+B*J=ZJok
ziF<$q;dzUwm-E-iLtg?#JPN7XAzZ#734p=F7=K9l;C-476qOg`nSnL!cB6oXX>gE$
zBA&=NC86k3DwEjLS1%zEn?ip91U+A1eX0LrENY87@fb=IYwcT|g4gy=etGvxj-$pk
z@Y=qT4=X9e(jMEH)^SO%6}(`)Hl5bp3Vp=4!a8z|#V)t9QLa5w&N#ZT3NFro%!K!-
z^pR~CaAgxuqY)OVKfbR%zXOD-aUDpt5-d&Z*tUyvTJWdYv$7{L85(?%9#EuZ2609n
zV`f#b&=>TL%XGoLQq=)M>1Rqe_|F^BSU^+brU-;$cDzfA)Zg#QpQ=Ep8n+Fp#;oJ{
zs(}7a<4$Tl_w3|Rp}kz{+><XqpPT}@YTU}5YqXteRDWe*V-8Sju`_6%hxOT@bG3;i
zdTWzigLg_R>(2Z$751h-$Ka-!C#;>oZj>h6agIwd9Me;6(+;$oK_2+6e6BUv!M5r1
n;F}d4Jf{TgJhrZRo{y^&5a(3xY**l|<5b|g2}JE&Rd;^?gGs^>

literal 0
HcmV?d00001

diff --git a/frontend/src/components/FileExplorer.tsx b/frontend/src/components/FileExplorer.tsx
index 000a4f1..9acfcd3 100644
--- a/frontend/src/components/FileExplorer.tsx
+++ b/frontend/src/components/FileExplorer.tsx
@@ -8,7 +8,7 @@ import {
   MoreVertical, Star, Download, Pencil, Copy, Move,
   FolderPlus, ArrowUp, X, Check, RefreshCw, Info, Link as LinkIcon, Image as ImageIcon, Film as FilmIcon, Home,
   Sun, Moon, Music as MusicIcon, Code as CodeIcon, Archive as ArchiveIcon, CornerDownRight,
-  CheckCircle, AlertCircle, Menu, FileText, Presentation
+  CheckCircle, AlertCircle, Menu, FileText, Presentation, FileSpreadsheet
 } from 'lucide-react';
 import api from '@/lib/api';
 import { useIsMobile } from '@/hooks/useIsMobile';
@@ -1172,7 +1172,7 @@ export default function FileExplorer({ onLogout }: FileExplorerProps) {
     if (ext === 'docx' || ext === 'doc') {
       return (
         <div className={`${large ? 'w-20 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-[#2B579A]`}>
-          W
+          <FileText className={large ? "w-10 h-10 text-white" : "w-3 h-3 text-white"} />
         </div>
       );
     }
@@ -1180,15 +1180,15 @@ 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]`}>
-          P
+          <Presentation className={large ? "w-10 h-10 text-white" : "w-3 h-3 text-white"} />
         </div>
       );
     }
 
     if (ext === 'xlsx' || ext === 'xls') {
       return (
-        <div className={`${large ? 'w-20 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-[#107C41]`}>
-          X
+        <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-[#107C41]`}>
+          <FileSpreadsheet className={large ? "w-10 h-10 text-white" : "w-3 h-3 text-white"} />
         </div>
       );
     }
@@ -1951,7 +1951,10 @@ export default function FileExplorer({ onLogout }: FileExplorerProps) {
           <OfficeHome 
             type={appMode} 
             onFileSelect={(file) => setEditingFile(file)} 
-            onCreateBlank={(file) => setEditingFile(file)}
+            onCreateBlank={(file) => {
+              setEditingFile(file);
+              loadFiles();
+            }}
             onPinChange={() => setPinnedRefreshCounter(c => c + 1)}
           />
         ) : (
diff --git a/frontend/src/components/OfficeHome.tsx b/frontend/src/components/OfficeHome.tsx
index d7bf363..1066313 100644
--- a/frontend/src/components/OfficeHome.tsx
+++ b/frontend/src/components/OfficeHome.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { Plus, Pencil, Trash2, Pin } from 'lucide-react';
+import { Plus, Pencil, Trash2, Pin, FileText, Presentation, FileSpreadsheet } from 'lucide-react';
 import api from '@/lib/api';
 
 interface FileItem {
@@ -23,8 +23,8 @@ interface OfficeHomeProps {
 // Custom Word icon (blue)
 function WordIcon({ className }: { className?: string }) {
   return (
-    <div className={`flex items-center justify-center font-black tracking-tighter text-white bg-[#2B579A] rounded-lg ${className || ''}`}>
-      W
+    <div className={`flex items-center justify-center text-white bg-[#2B579A] rounded-lg ${className || ''}`}>
+      <FileText className="w-[55%] h-[55%]" />
     </div>
   );
 }
@@ -32,8 +32,8 @@ function WordIcon({ className }: { className?: string }) {
 // Custom PowerPoint icon (orange)
 function PptIcon({ className }: { className?: string }) {
   return (
-    <div className={`flex items-center justify-center font-black tracking-tighter text-white bg-[#D24726] rounded-lg ${className || ''}`}>
-      P
+    <div className={`flex items-center justify-center text-white bg-[#D24726] rounded-lg ${className || ''}`}>
+      <Presentation className="w-[55%] h-[55%]" />
     </div>
   );
 }
@@ -41,8 +41,8 @@ function PptIcon({ className }: { className?: string }) {
 // Custom Excel icon (green)
 function SheetIcon({ className }: { className?: string }) {
   return (
-    <div className={`flex items-center justify-center font-black tracking-tighter text-white bg-[#107C41] rounded-lg ${className || ''}`}>
-      X
+    <div className={`flex items-center justify-center text-white bg-[#107C41] rounded-lg ${className || ''}`}>
+      <FileSpreadsheet className="w-[55%] h-[55%]" />
     </div>
   );
 }
@@ -229,7 +229,7 @@ export default function OfficeHome({ type, onFileSelect, onCreateBlank, onPinCha
         <button 
           onClick={() => !isRenaming && onFileSelect(file)}
           onContextMenu={(e) => handleContextMenu(e, file)}
-          className={`w-full ${type === 'slides' ? 'aspect-[1.4/1]' : 'aspect-[1/1.4]'} rounded-lg border hover:border-blue-500 transition-colors flex items-center justify-center shadow-sm overflow-hidden relative`}
+          className={`w-full ${type === 'docs' ? 'aspect-[1/1.4]' : 'aspect-[1.4/1]'} rounded-lg border hover:border-blue-500 transition-colors flex items-center justify-center shadow-sm overflow-hidden relative`}
           style={{ backgroundColor: 'var(--color-bg-elevated)', borderColor: 'var(--color-border)' }}
         >
           <Icon className="w-16 h-16 text-3xl opacity-30 group-hover:opacity-60 transition-opacity" />
@@ -273,7 +273,7 @@ export default function OfficeHome({ type, onFileSelect, onCreateBlank, onPinCha
             <div className="flex flex-col gap-3">
               <button
                 onClick={handleCreateBlank}
-                className={`${type === 'slides' ? 'w-52 h-40' : 'w-40 h-52'} rounded-lg border hover:border-blue-500 transition-colors flex items-center justify-center shadow-sm group`}
+                className={`${type === 'docs' ? 'w-40 h-52' : 'w-52 h-40'} rounded-lg border hover:border-blue-500 transition-colors flex items-center justify-center shadow-sm group`}
                 style={{ backgroundColor: 'var(--color-bg-elevated)', borderColor: 'var(--color-border)' }}
               >
                 <Plus className="w-12 h-12 text-gray-300 group-hover:text-blue-500 transition-colors" />