Elijah/drive
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Icon redesign and xlsx aspect ratio update
All checks were successful
Automated Container Build / build-and-push (push) Successful in 1m13s
Details

Browse source
This commit is contained in:
Elijah 2026-05-25 10:07:04 -07:00
parent 709c13995c
commit 9454ad28ea
3 changed files with 18 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

18
frontend/src/components/OfficeHome.tsx
View file

@ -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" />