Skip to content

Commit 6508d43

Browse files
hotlonghotlong
committed
refactor: simplify App component layout and update CSS variables for improved theming
1 parent ef3e0cc commit 6508d43

2 files changed

Lines changed: 78 additions & 94 deletions

File tree

‎examples/app-react-crud/src/App.tsx‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,7 @@ import { useState, useEffect } from 'react';
22
import { ObjectStackClient } from '@objectstack/client';
33
import { AppSidebar } from "./components/app-sidebar"
44
import { SiteHeader } from "@/components/site-header"
5-
import {
6-
SidebarInset,
7-
SidebarProvider,
8-
} from "@/components/ui/sidebar"
5+
import { SidebarProvider } from "@/components/ui/sidebar"
96
import { ObjectDataTable } from './components/ObjectDataTable';
107
import { ObjectDataForm } from './components/ObjectDataForm';
118
import { Toaster } from "@/components/ui/toaster"
@@ -154,12 +151,11 @@ export default function App() {
154151
return (
155152
<SidebarProvider>
156153
<AppSidebar
157-
variant="inset"
158154
client={client}
159155
selectedObject={selectedObject}
160156
onSelectObject={(name) => setSelectedObject(name || null)}
161157
/>
162-
<SidebarInset>
158+
<main className="flex flex-1 flex-col bg-background">
163159
<SiteHeader selectedObject={selectedObject} />
164160
<div className="flex flex-1 flex-col">
165161
{selectedObject ? (
@@ -176,7 +172,7 @@ export default function App() {
176172
<DashboardWelcome />
177173
)}
178174
</div>
179-
</SidebarInset>
175+
</main>
180176

181177
{/* Form Sheet */}
182178
{showForm && client && selectedObject && (

‎examples/app-react-crud/src/index.css‎

Lines changed: 75 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,36 @@
11
@import "tailwindcss";
22

3-
@theme {
4-
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
3+
@custom-variant dark (&:is(.dark *));
54

6-
--radius-lg: var(--radius);
7-
--radius-md: calc(var(--radius) - 2px);
5+
@theme inline {
86
--radius-sm: calc(var(--radius) - 4px);
9-
7+
--radius-md: calc(var(--radius) - 2px);
8+
--radius-lg: var(--radius);
9+
--radius-xl: calc(var(--radius) + 4px);
1010
--color-background: hsl(var(--background));
1111
--color-foreground: hsl(var(--foreground));
12-
1312
--color-card: hsl(var(--card));
1413
--color-card-foreground: hsl(var(--card-foreground));
15-
1614
--color-popover: hsl(var(--popover));
1715
--color-popover-foreground: hsl(var(--popover-foreground));
18-
1916
--color-primary: hsl(var(--primary));
2017
--color-primary-foreground: hsl(var(--primary-foreground));
21-
2218
--color-secondary: hsl(var(--secondary));
2319
--color-secondary-foreground: hsl(var(--secondary-foreground));
24-
2520
--color-muted: hsl(var(--muted));
2621
--color-muted-foreground: hsl(var(--muted-foreground));
27-
2822
--color-accent: hsl(var(--accent));
2923
--color-accent-foreground: hsl(var(--accent-foreground));
30-
3124
--color-destructive: hsl(var(--destructive));
3225
--color-destructive-foreground: hsl(var(--destructive-foreground));
33-
3426
--color-border: hsl(var(--border));
3527
--color-input: hsl(var(--input));
3628
--color-ring: hsl(var(--ring));
37-
3829
--color-chart-1: hsl(var(--chart-1));
3930
--color-chart-2: hsl(var(--chart-2));
4031
--color-chart-3: hsl(var(--chart-3));
4132
--color-chart-4: hsl(var(--chart-4));
4233
--color-chart-5: hsl(var(--chart-5));
43-
4434
--color-sidebar: hsl(var(--sidebar-background));
4535
--color-sidebar-foreground: hsl(var(--sidebar-foreground));
4636
--color-sidebar-primary: hsl(var(--sidebar-primary));
@@ -49,7 +39,6 @@
4939
--color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
5040
--color-sidebar-border: hsl(var(--sidebar-border));
5141
--color-sidebar-ring: hsl(var(--sidebar-ring));
52-
5342
--animate-accordion-down: accordion-down 0.2s ease-out;
5443
--animate-accordion-up: accordion-up 0.2s ease-out;
5544

@@ -61,6 +50,7 @@
6150
height: var(--radix-accordion-content-height);
6251
}
6352
}
53+
6454
@keyframes accordion-up {
6555
from {
6656
height: var(--radix-accordion-content-height);
@@ -71,76 +61,75 @@
7161
}
7262
}
7363

74-
@layer base {
75-
:root {
76-
--background: 0 0% 100%;
77-
--foreground: 222.2 84% 4.9%;
78-
--card: 0 0% 100%;
79-
--card-foreground: 222.2 84% 4.9%;
80-
--popover: 0 0% 100%;
81-
--popover-foreground: 222.2 84% 4.9%;
82-
--primary: 222.2 47.4% 11.2%;
83-
--primary-foreground: 210 40% 98%;
84-
--secondary: 210 40% 96.1%;
85-
--secondary-foreground: 222.2 47.4% 11.2%;
86-
--muted: 210 40% 96.1%;
87-
--muted-foreground: 215.4 16.3% 46.9%;
88-
--accent: 210 40% 96.1%;
89-
--accent-foreground: 222.2 47.4% 11.2%;
90-
--destructive: 0 84.2% 60.2%;
91-
--destructive-foreground: 210 40% 98%;
92-
--border: 214.3 31.8% 91.4%;
93-
--input: 214.3 31.8% 91.4%;
94-
--ring: 222.2 84% 4.9%;
95-
--chart-1: 12 76% 61%;
96-
--chart-2: 173 58% 39%;
97-
--chart-3: 197 37% 24%;
98-
--chart-4: 43 74% 66%;
99-
--chart-5: 27 87% 67%;
100-
--radius: 0.5rem;
101-
--sidebar-background: 0 0% 98%;
102-
--sidebar-foreground: 240 5.3% 26.1%;
103-
--sidebar-primary: 222.2 47.4% 11.2%;
104-
--sidebar-primary-foreground: 210 40% 98%;
105-
--sidebar-accent: 210 40% 96.1%;
106-
--sidebar-accent-foreground: 222.2 47.4% 11.2%;
107-
--sidebar-border: 220 13% 91%;
108-
--sidebar-ring: 217.2 91.2% 59.8%;
109-
}
110-
.dark {
111-
--background: 222.2 84% 4.9%;
112-
--foreground: 210 40% 98%;
113-
--card: 222.2 84% 4.9%;
114-
--card-foreground: 210 40% 98%;
115-
--popover: 222.2 84% 4.9%;
116-
--popover-foreground: 210 40% 98%;
117-
--primary: 210 40% 98%;
118-
--primary-foreground: 222.2 47.4% 11.2%;
119-
--secondary: 217.2 32.6% 17.5%;
120-
--secondary-foreground: 210 40% 98%;
121-
--muted: 217.2 32.6% 17.5%;
122-
--muted-foreground: 215 20.2% 65.1%;
123-
--accent: 217.2 32.6% 17.5%;
124-
--accent-foreground: 210 40% 98%;
125-
--destructive: 0 62.8% 30.6%;
126-
--destructive-foreground: 210 40% 98%;
127-
--border: 217.2 32.6% 17.5%;
128-
--input: 217.2 32.6% 17.5%;
129-
--ring: 212.7 26.8% 83.9%;
130-
--chart-1: 220 70% 50%;
131-
--chart-2: 160 60% 45%;
132-
--chart-3: 30 80% 55%;
133-
--chart-4: 280 65% 60%;
134-
--chart-5: 340 75% 55%;
135-
--sidebar-background: 222.2 84% 4.9%;
136-
--sidebar-foreground: 210 40% 98%;
137-
--sidebar-primary: 217.2 91.2% 59.8%;
138-
--sidebar-primary-foreground: 0 0% 100%;
139-
--sidebar-accent: 217.2 32.6% 17.5%;
140-
--sidebar-accent-foreground: 210 40% 98%;
141-
--sidebar-border: 217.2 32.6% 17.5%;
142-
--sidebar-ring: 217.2 91.2% 59.8%;
143-
}
64+
:root {
65+
--radius: 0.625rem;
66+
--background: 0 0% 100%;
67+
--foreground: 240 10% 3.9%;
68+
--card: 0 0% 100%;
69+
--card-foreground: 240 10% 3.9%;
70+
--popover: 0 0% 100%;
71+
--popover-foreground: 240 10% 3.9%;
72+
--primary: 240 5.9% 10%;
73+
--primary-foreground: 0 0% 98%;
74+
--secondary: 240 4.8% 95.9%;
75+
--secondary-foreground: 240 5.9% 10%;
76+
--muted: 240 4.8% 95.9%;
77+
--muted-foreground: 240 3.8% 46.1%;
78+
--accent: 240 4.8% 95.9%;
79+
--accent-foreground: 240 5.9% 10%;
80+
--destructive: 0 84.2% 60.2%;
81+
--destructive-foreground: 0 0% 98%;
82+
--border: 240 5.9% 90%;
83+
--input: 240 5.9% 90%;
84+
--ring: 240 5.9% 10%;
85+
--chart-1: 12 76% 61%;
86+
--chart-2: 173 58% 39%;
87+
--chart-3: 197 37% 24%;
88+
--chart-4: 43 74% 66%;
89+
--chart-5: 27 87% 67%;
90+
--sidebar-background: 0 0% 98%;
91+
--sidebar-foreground: 240 5.3% 26.1%;
92+
--sidebar-primary: 240 5.9% 10%;
93+
--sidebar-primary-foreground: 0 0% 98%;
94+
--sidebar-accent: 240 4.8% 95.9%;
95+
--sidebar-accent-foreground: 240 5.9% 10%;
96+
--sidebar-border: 220 13% 91%;
97+
--sidebar-ring: 240 5.9% 10%;
98+
}
99+
100+
.dark {
101+
--background: 240 10% 3.9%;
102+
--foreground: 0 0% 98%;
103+
--card: 240 10% 3.9%;
104+
--card-foreground: 0 0% 98%;
105+
--popover: 240 10% 3.9%;
106+
--popover-foreground: 0 0% 98%;
107+
--primary: 0 0% 98%;
108+
--primary-foreground: 240 5.9% 10%;
109+
--secondary: 240 3.7% 15.9%;
110+
--secondary-foreground: 0 0% 98%;
111+
--muted: 240 3.7% 15.9%;
112+
--muted-foreground: 240 5% 64.9%;
113+
--accent: 240 3.7% 15.9%;
114+
--accent-foreground: 0 0% 98%;
115+
--destructive: 0 62.8% 30.6%;
116+
--destructive-foreground: 0 0% 98%;
117+
--border: 240 3.7% 15.9%;
118+
--input: 240 3.7% 15.9%;
119+
--ring: 240 4.9% 83.9%;
120+
--chart-1: 220 70% 50%;
121+
--chart-2: 160 60% 45%;
122+
--chart-3: 30 80% 55%;
123+
--chart-4: 280 65% 60%;
124+
--chart-5: 340 75% 55%;
125+
--sidebar-background: 240 5.9% 10%;
126+
--sidebar-foreground: 240 4.8% 95.9%;
127+
--sidebar-primary: 224.3 76.3% 48%;
128+
--sidebar-primary-foreground: 0 0% 100%;
129+
--sidebar-accent: 240 3.7% 15.9%;
130+
--sidebar-accent-foreground: 240 4.8% 95.9%;
131+
--sidebar-border: 240 3.7% 15.9%;
132+
--sidebar-ring: 240 4.9% 83.9%;
144133
}
145134

146135
@layer base {
@@ -149,6 +138,5 @@
149138
}
150139
body {
151140
@apply bg-background text-foreground;
152-
font-feature-settings: "rlig" 1, "calt" 1;
153141
}
154142
}

0 commit comments

Comments
 (0)