From e96ad470c61e70c30932742b2ea9b2493e8df143 Mon Sep 17 00:00:00 2001 From: Felipe Forbeck Date: Tue, 26 Aug 2025 12:07:03 -0300 Subject: [PATCH 1/2] feat: console ui enhancements --- packages/console/src/app/globals.css | 26 +++++ packages/console/src/app/page.tsx | 53 +++++---- packages/console/src/app/space/layout.tsx | 9 +- packages/console/src/components/Nav.tsx | 36 +++--- .../console/src/components/SidebarLayout.tsx | 27 +++-- .../console/src/components/SpacesList.tsx | 97 ++++++++++++---- .../src/components/SpacesTabNavigation.tsx | 30 ++--- .../console/src/components/UpgradePrompt.tsx | 104 ++++++++++++------ 8 files changed, 255 insertions(+), 127 deletions(-) diff --git a/packages/console/src/app/globals.css b/packages/console/src/app/globals.css index 65d5eafc6..8499aeded 100644 --- a/packages/console/src/app/globals.css +++ b/packages/console/src/app/globals.css @@ -86,4 +86,30 @@ -webkit-background-clip: text; -webkit-text-fill-color: transparent; } + + /* Professional UI utilities */ + .card-shadow { + box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); + } + .card-shadow-lg { + box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + } + .card-shadow-hover { + box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + } + .transition-all-smooth { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + } + .bg-professional { + background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); + } + .bg-professional-branded { + background: linear-gradient(135deg, rgba(248, 250, 252, 0.9) 0%, rgba(241, 245, 249, 0.9) 100%), url("/racha-fire.png") bottom left; + background-size: 100% auto, 100% auto; + background-position: center, bottom; + background-repeat: no-repeat, no-repeat; + } + .sidebar-professional { + background: linear-gradient(180deg, #1e293b 0%, #334155 100%); + } } diff --git a/packages/console/src/app/page.tsx b/packages/console/src/app/page.tsx index 0f5f75463..32923d026 100644 --- a/packages/console/src/app/page.tsx +++ b/packages/console/src/app/page.tsx @@ -39,26 +39,41 @@ export function SpacePage() { } return ( - <> +
-

Spaces

- - {activeTab === 'public' && ( - - )} - {activeTab === 'private' && ( - canAccessPrivateSpaces ? ( - - ) : ( - - ) - )} - + + {/* Professional Header */} +
+

Your Spaces

+

+ Manage your storage spaces and organize your files with ease. +

+
+ + {/* Tab Navigation */} +
+ +
+ + {/* Content Area */} +
+ {activeTab === 'public' && ( + + )} + {activeTab === 'private' && ( + canAccessPrivateSpaces ? ( + + ) : ( + + ) + )} +
+
) } diff --git a/packages/console/src/app/space/layout.tsx b/packages/console/src/app/space/layout.tsx index 17b9c16b7..173d0eb2f 100644 --- a/packages/console/src/app/space/layout.tsx +++ b/packages/console/src/app/space/layout.tsx @@ -1,7 +1,7 @@ import { PropsWithChildren, ReactNode } from 'react' import { Nav, NavLink } from '@/components/Nav' import SidebarLayout from '@/components/SidebarLayout' -import { ArrowDownOnSquareStackIcon, QueueListIcon, FolderPlusIcon } from '@heroicons/react/24/outline' +import { ArrowDownOnSquareStackIcon, QueueListIcon, FolderPlusIcon, Cog8ToothIcon } from '@heroicons/react/24/outline' export const runtime = 'edge' @@ -25,9 +25,10 @@ export function SpacesNav () { return (
) diff --git a/packages/console/src/components/Nav.tsx b/packages/console/src/components/Nav.tsx index ee59be3ec..5986294aa 100644 --- a/packages/console/src/components/Nav.tsx +++ b/packages/console/src/components/Nav.tsx @@ -1,28 +1,26 @@ 'use client' -import { PropsWithChildren } from "react" import { usePathname } from "next/navigation" import Link from "next/link" -import { Cog8ToothIcon } from '@heroicons/react/24/outline' -export function Nav ({ children, ...rest}: PropsWithChildren & { className?: string }) { - return ( - - ) +export function Nav ({ children }: { children: React.ReactNode }) { + return } -export function NavLink ({ href, title, children }: PropsWithChildren & { href: string, title: string }) { +export function NavLink ({ href, children, className = '' }: { href: string, children: React.ReactNode, className?: string }) { const pathname = usePathname() - const active = href === pathname ? 'bg-hot-red text-white' : 'bg-white hover:bg-hot-red hover:text-white text-hot-red' - const cls = `inline-block px-4 py-2 font-epilogue text-sm sm:text-md uppercase focus:relative ${active} bg-clip-padding rounded-full whitespace-nowrap flex-shrink-0` - return ({children}) + const isActive = pathname === href || (href !== '/' && pathname.startsWith(href)) + + return ( + + {children} + + ) } diff --git a/packages/console/src/components/SidebarLayout.tsx b/packages/console/src/components/SidebarLayout.tsx index 37ade47cc..b7545be64 100644 --- a/packages/console/src/components/SidebarLayout.tsx +++ b/packages/console/src/components/SidebarLayout.tsx @@ -23,7 +23,6 @@ interface SidebarComponentProps { sidebar?: React.ReactNode } -const footerLinkClasses = 'text-xs block text-center mt-2 px-1' function Sidebar ({ sidebar =
}: SidebarComponentProps): JSX.Element { const [{ spaces }] = useW3() @@ -36,27 +35,27 @@ function Sidebar ({ sidebar =
}: SidebarComponentProps): JSX.Element router.push(`/space/${s.did()}`) } return ( -