zach
/
RA.Aid
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style

This commit is contained in:
AI Christianson 2025-03-13 16:48:29 -04:00
parent 4685550605
commit a9c7f92687
2 changed files with 41 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
frontend/common/src/styles/global.css
View File

@ -37,34 +37,33 @@
} }
.dark { .dark {
--background: 224 71% 4%; --background: 240 10% 3.9%;
--foreground: 213 31% 91%; --foreground: 0 0% 98%;
--muted: 223 47% 11%; --card: 240 10% 3.9%;
--muted-foreground: 215.4 16.3% 56.9%; --card-foreground: 0 0% 98%;
--popover: 224 71% 4%; --popover: 240 10% 3.9%;
--popover-foreground: 215 20.2% 65.1%; --popover-foreground: 0 0% 98%;
--card: 224 71% 4%; --primary: 0 0% 98%;
--card-foreground: 213 31% 91%; --primary-foreground: 240 5.9% 10%;
--border: 216 34% 17%; --secondary: 240 3.7% 15.9%;
--input: 216 34% 17%; --secondary-foreground: 0 0% 98%;
--primary: 210 40% 98%; --muted: 240 3.7% 15.9%;
--primary-foreground: 222.2 47.4% 1.2%; --muted-foreground: 240 5% 64.9%;
--secondary: 222.2 47.4% 11.2%; --accent: 240 3.7% 15.9%;
--secondary-foreground: 210 40% 98%; --accent-foreground: 0 0% 98%;
--accent: 216 34% 17%; --destructive: 0 62.8% 30.6%;
--accent-foreground: 210 40% 98%; --destructive-foreground: 0 0% 98%;
--destructive: 0 63% 31%; --border: 240 3.7% 15.9%;
--destructive-foreground: 210 40% 98%; --input: 240 3.7% 15.9%;
--ring: 240 4.9% 83.9%;
--ring: 216 34% 17%;
--radius: 0.5rem; --radius: 0.5rem;
} }

28
frontend/web/src/index.tsx
View File

@ -27,15 +27,15 @@ const App = () => {
}; };
return ( return (
<div className="min-h-screen bg-slate-950 text-slate-50"> <div className="min-h-screen bg-background text-foreground dark">
<div className="container mx-auto py-10 px-4"> <div className="container mx-auto py-10 px-4">
<header className="mb-10"> <header className="mb-10">
<h1 className="text-4xl font-bold mb-2 bg-gradient-to-r from-blue-400 to-purple-500 inline-block text-transparent bg-clip-text">shadcn/ui Components Demo</h1> <h1 className="text-4xl font-bold mb-2 bg-gradient-to-r from-blue-400 to-purple-500 inline-block text-transparent bg-clip-text">shadcn/ui Components Demo</h1>
<p className="text-slate-400">A showcase of UI components from the common package</p> <p className="text-muted-foreground">A showcase of UI components from the common package</p>
</header> </header>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<Card className="border border-slate-800 bg-slate-900"> <Card className="border-border bg-card">
<CardHeader> <CardHeader>
<CardTitle>Button Component</CardTitle> <CardTitle>Button Component</CardTitle>
<CardDescription>Various button variants from shadcn/ui</CardDescription> <CardDescription>Various button variants from shadcn/ui</CardDescription>
@ -69,7 +69,7 @@ const App = () => {
</CardContent> </CardContent>
</Card> </Card>
<Card className="border border-slate-800 bg-slate-900"> <Card className="border-border bg-card">
<CardHeader> <CardHeader>
<CardTitle>Input Component</CardTitle> <CardTitle>Input Component</CardTitle>
<CardDescription>Text input with various states</CardDescription> <CardDescription>Text input with various states</CardDescription>
@ -83,7 +83,7 @@ const App = () => {
onChange={(e) => setInputValue(e.target.value)} onChange={(e) => setInputValue(e.target.value)}
/> />
{inputValue && ( {inputValue && (
<p className="text-sm mt-1 text-slate-400">You typed: {inputValue}</p> <p className="text-sm mt-1 text-muted-foreground">You typed: {inputValue}</p>
)} )}
</div> </div>
<div> <div>
@ -95,7 +95,7 @@ const App = () => {
<div className="relative"> <div className="relative">
<Input placeholder="Search..." /> <Input placeholder="Search..." />
<div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none"> <div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-slate-400"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-muted-foreground">
<circle cx="11" cy="11" r="8"></circle> <circle cx="11" cy="11" r="8"></circle>
<path d="m21 21-4.3-4.3"></path> <path d="m21 21-4.3-4.3"></path>
</svg> </svg>
@ -105,7 +105,7 @@ const App = () => {
</CardContent> </CardContent>
</Card> </Card>
<Card className="border border-slate-800 bg-slate-900"> <Card className="border-border bg-card">
<CardHeader> <CardHeader>
<CardTitle>Switch Component</CardTitle> <CardTitle>Switch Component</CardTitle>
<CardDescription>Toggle switch with controlled state</CardDescription> <CardDescription>Toggle switch with controlled state</CardDescription>
@ -118,7 +118,7 @@ const App = () => {
onCheckedChange={setSwitchState} onCheckedChange={setSwitchState}
/> />
</div> </div>
<p className="text-sm text-slate-400"> <p className="text-sm text-muted-foreground">
Current theme: <span className="font-medium">{switchState ? 'Dark' : 'Light'}</span> Current theme: <span className="font-medium">{switchState ? 'Dark' : 'Light'}</span>
</p> </p>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
@ -127,18 +127,18 @@ const App = () => {
</div> </div>
</CardContent> </CardContent>
<CardFooter> <CardFooter>
<p className="text-xs text-slate-500">Click the switch to toggle its state</p> <p className="text-xs text-muted-foreground">Click the switch to toggle its state</p>
</CardFooter> </CardFooter>
</Card> </Card>
<Card className="border border-slate-800 bg-slate-900"> <Card className="border-border bg-card">
<CardHeader> <CardHeader>
<CardTitle>Card Component</CardTitle> <CardTitle>Card Component</CardTitle>
<CardDescription>Card with header, content, and footer sections</CardDescription> <CardDescription>Card with header, content, and footer sections</CardDescription>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<p className="text-slate-300">Cards are versatile containers that group related content and actions.</p> <p className="text-card-foreground">Cards are versatile containers that group related content and actions.</p>
<div className="mt-4 p-3 bg-slate-800 rounded-md"> <div className="mt-4 p-3 bg-muted rounded-md">
<code className="text-xs text-pink-400"> <code className="text-xs text-pink-400">
{'<Card>'}<br/> {'<Card>'}<br/>
{' <CardHeader>'}<br/> {' <CardHeader>'}<br/>
@ -151,14 +151,14 @@ const App = () => {
</code> </code>
</div> </div>
</CardContent> </CardContent>
<CardFooter className="flex justify-between border-t border-slate-800 pt-4"> <CardFooter className="flex justify-between border-t border-border pt-4">
<Button variant="outline" size="sm">Cancel</Button> <Button variant="outline" size="sm">Cancel</Button>
<Button size="sm">Save</Button> <Button size="sm">Save</Button>
</CardFooter> </CardFooter>
</Card> </Card>
</div> </div>
<footer className="mt-12 text-center text-slate-500 text-sm"> <footer className="mt-12 text-center text-muted-foreground text-sm">
<p>Built with shadcn/ui components from the RA-Aid common package</p> <p>Built with shadcn/ui components from the RA-Aid common package</p>
</footer> </footer>
</div> </div>