mkl/my-fullstack-ai-platform
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Marc Klose 2026-04-06 02:50:03 +03:00
parent 3012c11b42
commit d283b15341
3 changed files with 15 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
app/dashboard/settings/account/page.tsx
View file

@ -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">
<Linkedin className="h-5 w-5 text-[#0077B5]" />
<h2 className="text-xl font-medium text-foreground border-b border-border pb-2 flex items-center gap-2">
<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" />

4
app/globals.css
View file

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

10
components/sidebar.tsx
View file

@ -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">
<User size={16} />
<div className="flex items-center justify-center bg-accent text-accent-foreground rounded-full w-9 h-9 shrink-0 overflow-hidden">
<User size={18} />
</div>
{!collapsed && (
<span className="truncate flex-1 text-left font-medium">