feat: implement global UI scaling for a bolder 'zoomed-in' look

app/dashboard/settings/account/page.tsx

@@ -19,13 +19,11 @@ async function AccountSettingsContent() {
     .single();
 
   const isConnected = !!profile?.unipile_account_id;
-  const accountId = profile?.unipile_account_id as string | null;
-  const status = profile?.unipile_account_status as string | null;
 
   return (
-    <div className="p-8 max-w-2xl mx-auto space-y-8">
+    <div className="p-8 max-w-3xl mx-auto space-y-8">
       <div>
-        <h1 className="text-2xl font-semibold mb-1 text-foreground">Account Settings</h1>
+        <h1 className="text-3xl font-semibold mb-1 text-foreground">Account Settings</h1>
         <p className="text-sm text-muted-foreground">
           Manage your personal account and integrations.
         </p>
@@ -33,8 +31,8 @@ async function AccountSettingsContent() {
 
       {/* LinkedIn Integration */}
       <div className="space-y-4">
-        <h2 className="text-lg font-medium text-foreground border-b border-border pb-2 flex items-center gap-2">
+        <h2 className="text-xl font-medium text-foreground border-b border-border pb-2 flex items-center gap-2">
-          <Linkedin className="h-5 w-5 text-[#0077B5]" />
+          <Linkedin className="h-6 w-6 text-[#0077B5]" />
           LinkedIn Integration
         </h2>
 
@@ -62,15 +60,7 @@ async function AccountSettingsContent() {
             )}
           </div>
 
-          {isConnected && (
+
-            <div className="bg-muted/50 rounded-md p-3 text-xs font-mono text-muted-foreground break-all">
-              <span className="text-foreground/60 mr-2">Account ID:</span>
-              {accountId}
-              {status && status !== "CONNECTED" && (
-                <span className="ml-2 text-amber-500">({status})</span>
-              )}
-            </div>
-          )}
 
           <div className="pt-2">
             {isConnected ? (
@@ -87,7 +77,7 @@ async function AccountSettingsContent() {
 
 function AccountSettingsSkeleton() {
   return (
-    <div className="p-8 max-w-2xl mx-auto space-y-8">
+    <div className="p-8 max-w-3xl mx-auto space-y-8">
       <div>
         <Skeleton className="h-8 w-48 mb-2" />
         <Skeleton className="h-4 w-72" />

app/globals.css

@@ -2,6 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
+html {
+  font-size: 110%;
+}
+
 @layer base {
   :root {
     --background: 0 0% 100%;

components/sidebar.tsx

@@ -70,7 +70,7 @@ export const Sidebar: FC = () => {
     <aside
       className={cn(
         "flex flex-col h-screen border-r border-border bg-background transition-all duration-300",
-        collapsed ? "w-16" : "w-64"
+        collapsed ? "w-16" : "w-72"
       )}
     >
       <div className="flex items-center justify-between p-4 border-b border-border h-16">
@@ -79,7 +79,7 @@ export const Sidebar: FC = () => {
           onClick={() => setCollapsed(!collapsed)}
           className={cn("p-1 rounded-md hover:bg-muted transition-colors flex-shrink-0", collapsed && "mx-auto")}
         >
-          {collapsed ? <ChevronRight size={18} /> : <ChevronLeft size={18} />}
+          {collapsed ? <ChevronRight size={20} /> : <ChevronLeft size={20} />}
         </button>
       </div>
 
@@ -98,7 +98,7 @@ export const Sidebar: FC = () => {
                 collapsed && "justify-center px-0"
               )}
             >
-              <Icon size={18} className="shrink-0" />
+              <Icon size={20} className="shrink-0" />
               {!collapsed && <span>{item.label}</span>}
             </Link>
           );
@@ -111,8 +111,8 @@ export const Sidebar: FC = () => {
             "flex items-center gap-3 w-full p-2 rounded-md hover:bg-muted text-sm transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring data-[state=open]:bg-muted",
             collapsed ? "justify-center px-0" : "px-3"
           )}>
-            <div className="flex items-center justify-center bg-accent text-accent-foreground rounded-full w-8 h-8 shrink-0 overflow-hidden">
+            <div className="flex items-center justify-center bg-accent text-accent-foreground rounded-full w-9 h-9 shrink-0 overflow-hidden">
-              <User size={16} />
+              <User size={18} />
             </div>
             {!collapsed && (
               <span className="truncate flex-1 text-left font-medium">