Merge pull request #26 from upayanmazumder-DevLabs/dev

Fix Settings, Scrollbar and Docs

Author: upayanmazumder

app/src/app/docs/layout.tsx

@@ -8,12 +8,14 @@ export default function DocsLayout({ children }: { children: React.ReactNode })
     <div className="min-h-screen">
       {/* Main content */}
       <div className="mr-64 overflow-y-auto min-h-screen">
-        <div className="p-8 my-2">{children}</div>
+        <div className="p-8 my-2 docs-theme">
+          <div className="max-w-5xl mx-auto">{children}</div>
+        </div>
       </div>
 
       {/* Sidebar */}
       <aside
-        className="w-64 fixed right-0 top-0 h-screen overflow-y-auto px-6 py-10"
+        className="w-64 fixed right-0 top-16 h-[calc(100vh-64px)] overflow-y-auto px-6 py-10"
         style={{
           backgroundColor: 'var(--card-background)',
           borderLeft: '1px solid #3a4152',
@@ -36,7 +38,7 @@ export default function DocsLayout({ children }: { children: React.ReactNode })
                         textDecoration: 'none',
                       }}
                       onMouseEnter={(e) => {
-                        e.currentTarget.style.color = 'var(--theme-blue)';
+                        e.currentTarget.style.color = 'var(--text-link-hover-color)';
                       }}
                       onMouseLeave={(e) => {
                         e.currentTarget.style.color = '#a0aec0';

app/src/app/globals.css

@@ -351,26 +351,85 @@ section table {
 }
 
 ::-webkit-scrollbar-track {
-  background: var(--background);
+  background: #181b26;
   border-radius: var(--border-radius-medium);
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: #3c445a;
-  border: 4px solid var(--background);
+  background-color: #2b3244;
+  border: 3px solid #181b26;
   border-radius: var(--border-radius-medium);
   transition: background-color var(--transition-fast);
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background-color: #4e5a76;
+  background-color: #40485c;
 }
 
 ::-webkit-scrollbar-corner {
-  background: var(--background);
+  background: #181b26;
 }
 
 * {
-  scrollbar-width: auto;
-  scrollbar-color: #3c445a var(--background);
+  scrollbar-width: thin;
+  scrollbar-color: #2b3244 #181b26;
+}
+
+/* Docs theme overrides to align docs with site UI */
+.docs-theme {
+  color: var(--foreground);
+}
+/* Neutralize bright background utilities inside docs to use app cards */
+.docs-theme .border,
+.docs-theme [class*="border-"] {
+  border-color: #3a4152 !important;
+}
+.docs-theme [class*="bg-gradient-to-"],
+.docs-theme .bg-white,
+.docs-theme .bg-gray-50,
+.docs-theme .bg-gray-100,
+.docs-theme .bg-blue-50,
+.docs-theme .bg-green-50,
+.docs-theme .bg-purple-50,
+.docs-theme .bg-emerald-100,
+.docs-theme .bg-yellow-50 {
+  background: var(--card-background) !important;
+}
+.docs-theme .text-gray-900,
+.docs-theme .text-gray-800,
+.docs-theme .text-gray-700,
+.docs-theme .text-gray-600,
+.docs-theme .text-gray-500,
+.docs-theme .text-gray-400,
+.docs-theme .text-blue-900,
+.docs-theme .text-blue-800,
+.docs-theme .text-green-900,
+.docs-theme .text-green-800,
+.docs-theme .text-purple-900,
+.docs-theme .text-purple-800 {
+  color: var(--foreground) !important;
+}
+.docs-theme .prose {
+  max-width: 100%;
+}
+.docs-theme pre {
+  background: #23283a !important;
+  color: #e0e6f0;
+  border: 1px solid #3a4152;
+}
+.docs-theme pre code {
+  background: transparent !important;
+  color: inherit;
+}
+.docs-theme code {
+  background: #23283a;
+  color: #e0e6f0;
+}
+
+/* Ensure links in docs retain themed link colors over utility overrides */
+.docs-theme a {
+  color: var(--text-link-color) !important;
+}
+.docs-theme a:hover {
+  color: var(--text-link-hover-color) !important;
 }

app/src/components/Settings/Settings.tsx

@@ -38,7 +38,7 @@ const Settings: React.FC = () => {
 
   return (
     <div className="px-2 sm:px-6 flex flex-col md:flex-row md:items-start md:gap-2 items-stretch gap-4">
-      <Card className="flex flex-col items-center md:items-start gap-4 w-full md:w-1/3 min-w-[220px] max-w-full md:max-w-xs p-6">
+      <Card className="flex flex-col justify-between md:items-start gap-4 w-full md:w-1/3 min-w-[220px] max-w-full md:max-w-xs p-6" style={{ height: "-webkit-fill-available" }}>
         <Profile
           user={user}
           imageError={imageError}

app/src/components/ui/Card/Card.tsx

@@ -6,6 +6,7 @@ import { motion, Easing } from 'framer-motion';
 interface CardProps {
   children: ReactNode;
   className?: string;
+  style?: React.CSSProperties;
   hoverable?: boolean;
   onClick?: () => void;
   disabled?: boolean;
@@ -27,6 +28,7 @@ const elevationMap = {
 const Card = ({
   children,
   className = '',
+  style = {},
   hoverable = false,
   onClick,
   disabled = false,
@@ -65,7 +67,7 @@ const Card = ({
       tabIndex={onClick && !disabled ? 0 : undefined}
       role={onClick && !disabled ? 'button' : undefined}
       aria-label={ariaLabel}
-      style={{ outline: 'none', maxWidth: '-webkit-fill-available' }}
+      style={{ outline: 'none', maxWidth: '-webkit-fill-available', ...style }}
       onKeyDown={handleKeyDown}
     >
       {children}