Update application UI with a modern and streamlined design

Revamp the entire UI with a new theme, enhancing readability and modern aesthetics across all components, including AI chat, calendar, media uploads, and user management sections.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/nriKMjY

client/src/pages/dashboard.tsx

@@ -6,7 +6,7 @@ import MediaUpload from "@/components/media-upload";
 import CalendarView from "@/components/calendar-view";
 import ManagedPages from "@/components/managed-pages";
 import QuickActions from "@/components/quick-actions";
-import { Menu } from "lucide-react";
+import { PlusCircle } from "lucide-react";
 import { useState } from "react";
 
 export default function Dashboard() {
@@ -14,7 +14,6 @@ export default function Dashboard() {
 
   return (
     <div className="flex h-screen overflow-hidden bg-background">
-      {/* Mobile sidebar overlay */}
       {sidebarOpen && (
         <div 
           className="fixed inset-0 bg-black/50 z-40 lg:hidden"
@@ -22,7 +21,6 @@ export default function Dashboard() {
         />
       )}
       
-      {/* Sidebar */}
       <div className={`
         fixed lg:static inset-y-0 left-0 z-50 transform transition-transform duration-300 ease-in-out
         ${sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'}
@@ -30,34 +28,32 @@ export default function Dashboard() {
         <Sidebar />
       </div>
 
-      {/* Main content */}
       <main className="flex-1 overflow-y-auto">
         <TopBar onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
         
-        <div className="p-6 space-y-6">
+        <div className="p-8 space-y-8 max-w-[1600px] mx-auto">
           <StatsCards />
           
-          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-            <div className="lg:col-span-2">
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            <div className="lg:col-span-2 space-y-8">
               <AiChat />
+              <MediaUpload />
             </div>
-            <div>
+            <div className="space-y-8">
               <QuickActions />
             </div>
           </div>
 
-          <MediaUpload />
           <CalendarView />
           <ManagedPages />
         </div>
       </main>
 
-      {/* Floating action button for mobile */}
       <button 
-        className="fixed bottom-6 right-6 w-14 h-14 bg-primary rounded-full shadow-xl flex items-center justify-center text-primary-foreground lg:hidden hover:scale-110 transition-all z-30"
+        className="fixed bottom-8 right-8 w-16 h-16 bg-gradient-to-br from-primary to-secondary rounded-2xl shadow-2xl flex items-center justify-center text-white lg:hidden hover:scale-110 transition-all z-30"
         data-testid="button-new-post"
       >
-        <Menu className="w-6 h-6" />
+        <PlusCircle className="w-7 h-7" />
       </button>
     </div>
   );