major ui tweaks and refactoring

src/components/Settings.tsx

@@ -0,0 +1,31 @@
+export function SettingsContainer({ children }: { children: React.ReactNode }) {
+    return <div className="space-y-4">{children}</div>
+}
+
+export function SettingsSection({ children }: { children: React.ReactNode }) {
+    return <div className="border rounded-md bg-card p-4">{children}</div>
+}
+
+export function SettingsSectionHeader({ children }: { children: React.ReactNode }) {
+    return <div className="space-y-0.5 pb-8">{children}</div>
+}
+
+export function SettingsSectionForm({ children }: { children: React.ReactNode }) {
+    return <div className="max-w-xl">{children}</div>
+}
+
+export function SettingsSectionTitle({ children }: { children: React.ReactNode }) {
+    return <h2 className="text-1xl font-bold tracking-tight flex items-center gap-2">{children}</h2>
+}
+
+export function SettingsSectionDescription({ children }: { children: React.ReactNode }) {
+    return <p className="text-muted-foreground">{children}</p>
+}
+
+export function SettingsSectionBody({ children }: { children: React.ReactNode }) {
+    return <div className="space-y-5">{children}</div>
+}
+
+export function SettingsSectionFooter({ children }: { children: React.ReactNode }) {
+    return <div className="flex justify-end space-x-4 mt-8">{children}</div>
+}