angel/mice
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: enhance layout and typography for Browse, Favorites, and Settings pages

Browse Source
This commit is contained in:
angel
2025-07-03 16:01:06 +00:00
committed by GitHub
parent 7b622cb1ec
commit 54a268f485
3 changed files with 38 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
app/settings/page.tsx
View File

@@ -303,9 +303,9 @@ const SettingsPage = () => {
};
return (
<div className="container mx-auto p-6 pb-24 max-w-2xl">
<div className="container mx-auto p-6 pb-24 max-w-none">
{!isClient ? (
<div className="space-y-6">
<div className="space-y-6 max-w-2xl mx-auto">
<div>
<h1 className="text-3xl font-semibold tracking-tight">Settings</h1>
<p className="text-muted-foreground">Loading...</p>
@@ -313,13 +313,15 @@ const SettingsPage = () => {
</div>
) : (
<div className="space-y-6">
<div>
<div className="text-left">
<h1 className="text-3xl font-semibold tracking-tight">Settings</h1>
<p className="text-muted-foreground">Customize your music experience</p>
</div>
<div className="columns-1 md:columns-2 xl:columns-3 gap-6 space-y-0">
{!hasEnvConfig && (
<Card>
<Card className="break-inside-avoid mb-6">
<CardHeader>
<CardTitle className="flex items-center gap-2">
<FaServer className="w-5 h-5" />
@@ -408,7 +410,7 @@ const SettingsPage = () => {
)}
{hasEnvConfig && (
<Card>
<Card className="break-inside-avoid mb-6">
<CardHeader>
<CardTitle className="flex items-center gap-2">
<FaServer className="w-5 h-5" />
@@ -435,7 +437,7 @@ const SettingsPage = () => {
</Card>
)}
<Card>
<Card className="break-inside-avoid mb-6">
<CardHeader>
<CardTitle className="flex items-center gap-2">
<FaLastfm className="w-5 h-5" />
@@ -513,7 +515,7 @@ const SettingsPage = () => {
</CardContent>
</Card> */}
<Card>
<Card className="break-inside-avoid mb-6">
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Settings className="w-5 h-5" />
@@ -548,7 +550,7 @@ const SettingsPage = () => {
</CardContent>
</Card>
<Card>
<Card className="break-inside-avoid mb-6">
<CardHeader>
<CardTitle className="flex items-center gap-2">
<FaLastfm className="w-5 h-5" />
@@ -643,7 +645,7 @@ const SettingsPage = () => {
</CardContent>
</Card>
<Card>
<Card className="break-inside-avoid mb-6">
<CardHeader>
<CardTitle>Appearance</CardTitle>
<CardDescription>
@@ -692,7 +694,7 @@ const SettingsPage = () => {
</Card>
{/* Theme Preview */}
<Card>
<Card className="break-inside-avoid mb-6">
<CardHeader>
<CardTitle>Preview</CardTitle>
<CardDescription>
@@ -721,6 +723,7 @@ const SettingsPage = () => {
</CardContent>
</Card>
</div>
</div>
)}
</div>
);