@stevederico/skateboard-ui 2.6.0 → 2.8.0

package/App.jsx

@@ -5,8 +5,10 @@ import {
   Route,
   Navigate,
   useLocation,
+  useNavigate,
 } from 'react-router-dom';
 import { useEffect } from 'react';
+import { getState } from './core/Context.jsx';
 import { ThemeProvider } from 'next-themes';
 import Layout from './layout/Layout.jsx';
 import LandingView from './views/LandingView.jsx';
@@ -24,6 +26,26 @@ import { ContextProvider } from './core/Context.jsx';
 import { Toaster } from './shadcn/ui/sonner.jsx';
 import AuthOverlay from './components/AuthOverlay.jsx';
 
+/**
+ * Redirect component for auth routes when authOverlay mode is enabled.
+ *
+ * Dispatches SHOW_AUTH_OVERLAY on mount and redirects to the previous page
+ * (from location state) or /app/home as fallback.
+ */
+function AuthRedirect() {
+  const { dispatch } = getState();
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  useEffect(() => {
+    dispatch({ type: 'SHOW_AUTH_OVERLAY' });
+    const returnTo = location.state?.from || '/app/home';
+    navigate(returnTo, { replace: true });
+  }, [dispatch, navigate, location.state]);
+
+  return null;
+}
+
 function App({ constants, appRoutes, defaultRoute, landingPage, overrides = {} }) {
   const location = useLocation();
 
@@ -36,11 +58,17 @@ function App({ constants, appRoutes, defaultRoute, landingPage, overrides = {} }
   const LayoutComponent = overrides.layout || Layout;
   const SettingsComponent = overrides.settings || SettingsView;
   const PaymentComponent = overrides.payment || PaymentView;
-  const SignInComponent = overrides.signIn || SignInView;
-  const SignUpComponent = overrides.signUp || SignUpView;
   const SignOutComponent = overrides.signOut || SignOutView;
   const NotFoundComponent = overrides.notFound || NotFound;
 
+  // When authOverlay is enabled, redirect /signin and /signup to show the overlay instead
+  const SignInComponent = constants.authOverlay
+    ? AuthRedirect
+    : (overrides.signIn || SignInView);
+  const SignUpComponent = constants.authOverlay
+    ? AuthRedirect
+    : (overrides.signUp || SignUpView);
+
   return (
     <Routes>
       <Route element={<LayoutComponent />}>

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # CHANGELOG
 
+2.8.0
+
+  Add content area border
+  Add SettingsView sign-in card
+
+2.7.0
+
+  Improve light mode sidebar contrast
+
 2.6.0
 
   Fix dark mode flash

package/layout/Layout.jsx

@@ -47,7 +47,7 @@ export default function Layout({ children }) {
           '--header-height': '3.5rem',
         }}>
         {showSidebar && <Sidebar variant="inset" />}
-        <SidebarInset className={constants.hideSidebarInsetRounding ? "md:peer-data-[variant=inset]:rounded-none" : ""}>
+        <SidebarInset className={`border border-border ${constants.hideSidebarInsetRounding ? "md:peer-data-[variant=inset]:rounded-none" : ""}`}>
           <Outlet />
         </SidebarInset>
       </SidebarProvider>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stevederico/skateboard-ui",
   "private": false,
-  "version": "2.6.0",
+  "version": "2.8.0",
   "type": "module",
   "exports": {
     "./Sidebar": {

package/styles.css

@@ -36,7 +36,7 @@
   --chart-4: oklch(0.828 0.189 84.429);
   --chart-5: oklch(0.769 0.188 70.08);
   --radius: 0.625rem;
-  --sidebar: oklch(0.985 0 0);
+  --sidebar: oklch(0.965 0 0);
   --sidebar-foreground: oklch(0.145 0 0);
   --sidebar-primary: oklch(0.205 0 0);
   --sidebar-primary-foreground: oklch(0.985 0 0);
@@ -64,8 +64,8 @@
   --accent-foreground: oklch(0.985 0 0);
   --destructive: oklch(0.396 0.141 25.723);
   --destructive-foreground: oklch(0.637 0.237 25.331);
-  --border: oklch(0.2 0 0);
-  --input: oklch(0.18 0 0);
+  --border: oklch(0.32 0 0);
+  --input: oklch(0.30 0 0);
   --ring: oklch(0.439 0 0);
   --chart-1: oklch(0.488 0.243 264.376);
   --chart-2: oklch(0.696 0.17 162.48);
@@ -78,7 +78,7 @@
   --sidebar-primary-foreground: oklch(0.985 0 0);
   --sidebar-accent: oklch(0.25 0 0);
   --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(0.27 0 0);
+  --sidebar-border: oklch(0.35 0 0);
   --sidebar-ring: oklch(0.439 0 0);
 }
 
@@ -101,8 +101,8 @@
     --accent-foreground: oklch(0.985 0 0);
     --destructive: oklch(0.396 0.141 25.723);
     --destructive-foreground: oklch(0.637 0.237 25.331);
-    --border: oklch(0.2 0 0);
-    --input: oklch(0.18 0 0);
+    --border: oklch(0.32 0 0);
+    --input: oklch(0.30 0 0);
     --ring: oklch(0.439 0 0);
     --chart-1: oklch(0.488 0.243 264.376);
     --chart-2: oklch(0.696 0.17 162.48);
@@ -115,7 +115,7 @@
     --sidebar-primary-foreground: oklch(0.985 0 0);
     --sidebar-accent: oklch(0.25 0 0);
     --sidebar-accent-foreground: oklch(0.985 0 0);
-    --sidebar-border: oklch(0.27 0 0);
+    --sidebar-border: oklch(0.35 0 0);
     --sidebar-ring: oklch(0.439 0 0);
   }
 }
@@ -234,7 +234,7 @@ button[data-sidebar="rail"]::after {
 
 @layer base {
   :root {
-    --sidebar-background: 0 0% 98%;
+    --sidebar-background: 0 0% 96%;
     --sidebar-foreground: 240 5.3% 26.1%;
     --sidebar-primary: 240 5.9% 10%;
     --sidebar-primary-foreground: 0 0% 98%;
@@ -251,7 +251,7 @@ button[data-sidebar="rail"]::after {
     --sidebar-primary-foreground: 0 0% 100%;
     --sidebar-accent: 240 3.7% 15.9%;
     --sidebar-accent-foreground: 240 4.8% 95.9%;
-    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-border: 240 3.7% 28%;
     --sidebar-ring: 217.2 91.2% 59.8%;
   }
 
@@ -264,7 +264,7 @@ button[data-sidebar="rail"]::after {
       --sidebar-primary-foreground: 0 0% 100%;
       --sidebar-accent: 240 3.7% 15.9%;
       --sidebar-accent-foreground: 240 4.8% 95.9%;
-      --sidebar-border: 240 3.7% 15.9%;
+      --sidebar-border: 240 3.7% 28%;
       --sidebar-ring: 217.2 91.2% 59.8%;
     }
   }

package/views/SettingsView.jsx

@@ -69,6 +69,31 @@ export default function SettingsView() {
 
       {/* Main content */}
       <div className="flex flex-col items-center p-4 gap-4">
+        {/* Sign In prompt (shown when not authenticated and auth is enabled) */}
+        {!user && constants.noLogin !== true && (
+          <Card className="w-full max-w-lg">
+            <CardHeader>
+              <CardTitle>Account</CardTitle>
+              <CardDescription>Sign in to access your account settings.</CardDescription>
+              <CardAction>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => {
+                    if (constants.authOverlay) {
+                      dispatch({ type: 'SHOW_AUTH_OVERLAY' });
+                    } else {
+                      navigate('/signin');
+                    }
+                  }}
+                >
+                  Sign In
+                </Button>
+              </CardAction>
+            </CardHeader>
+          </Card>
+        )}
+
         {/* Account */}
         {showAuth && (
           <Card className="w-full max-w-lg">