Skip to content

Commit ec333b2

Browse files
MildTomatoMildTomato
committed
first round of changes
1 parent f356a07 commit ec333b2

File tree

14 files changed

+344
-238
lines changed

14 files changed

+344
-238
lines changed

‎apps/postgres-new/app/globals.css

Lines changed: 73 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,64 @@
22
@tailwind components;
33
@tailwind utilities;
44

5-
:root {
5+
@layer base {
6+
:root {
7+
--background: 0 0% 100%;
8+
--foreground: 0 0% 3.9%;
9+
--card: 0 0% 100%;
10+
--card-foreground: 0 0% 3.9%;
11+
--popover: 0 0% 100%;
12+
--popover-foreground: 0 0% 3.9%;
13+
--primary: 0 0% 9%;
14+
--primary-foreground: 0 0% 98%;
15+
--secondary: 0 0% 96.1%;
16+
--secondary-foreground: 0 0% 9%;
17+
--muted: 0 0% 96.1%;
18+
--muted-foreground: 0 0% 45.1%;
19+
--accent: 0 0% 96.1%;
20+
--accent-foreground: 0 0% 9%;
21+
--destructive: 0 84.2% 60.2%;
22+
--destructive-foreground: 0 0% 98%;
23+
--border: 0 0% 89.8%;
24+
--input: 0 0% 89.8%;
25+
--ring: 0 0% 3.9%;
26+
--radius: 0.5rem;
27+
--chart-1: 12 76% 61%;
28+
--chart-2: 173 58% 39%;
29+
--chart-3: 197 37% 24%;
30+
--chart-4: 43 74% 66%;
31+
--chart-5: 27 87% 67%;
32+
}
33+
34+
.dark {
35+
--background: 0 0% 3.9%;
36+
--foreground: 0 0% 98%;
37+
--card: 0 0% 3.9%;
38+
--card-foreground: 0 0% 98%;
39+
--popover: 0 0% 3.9%;
40+
--popover-foreground: 0 0% 98%;
41+
--primary: 0 0% 98%;
42+
--primary-foreground: 0 0% 9%;
43+
--secondary: 0 0% 14.9%;
44+
--secondary-foreground: 0 0% 98%;
45+
--muted: 0 0% 14.9%;
46+
--muted-foreground: 0 0% 63.9%;
47+
--accent: 0 0% 14.9%;
48+
--accent-foreground: 0 0% 98%;
49+
--destructive: 0 62.8% 30.6%;
50+
--destructive-foreground: 0 0% 98%;
51+
--border: 0 0% 14.9%;
52+
--input: 0 0% 14.9%;
53+
--ring: 0 0% 83.1%;
54+
--chart-1: 220 70% 50%;
55+
--chart-2: 160 60% 45%;
56+
--chart-3: 30 80% 55%;
57+
--chart-4: 280 65% 60%;
58+
--chart-5: 340 75% 55%;
59+
}
60+
}
61+
62+
/* :root {
663
--colors-black: 0deg 0% 0%;
764
--colors-white: 0deg 0% 100%;
865
--colors-gray-dark-100: 0deg 0% 8.6%;
@@ -204,7 +261,6 @@
204261
--foreground-light: var(--colors-gray-dark-1100);
205262
--foreground-default: var(--colors-gray-dark-1200);
206263
}
207-
208264
[data-theme='light'],
209265
.light {
210266
--helpers-os-appearance: Light;
@@ -267,72 +323,7 @@
267323
--background-default: var(--colors-gray-light-100);
268324
--background-200: var(--colors-gray-light-200);
269325
--foreground-default: var(--colors-gray-light-1200);
270-
}
271-
272-
@font-face {
273-
font-family: 'circular';
274-
src:
275-
url(/fonts/custom/CustomFont-Book.woff2) format('woff2'),
276-
url(/fonts/custom/CustomFont-Book.woff) format('woff');
277-
font-weight: 400;
278-
font-style: normal;
279-
}
280-
@font-face {
281-
font-family: 'circular';
282-
src:
283-
url(/fonts/custom/CustomFont-BookItalic.woff2) format('woff2'),
284-
url(/fonts/custom/CustomFont-BookItalic.woff) format('woff');
285-
font-weight: 400;
286-
font-style: italic;
287-
}
288-
@font-face {
289-
font-family: 'circular';
290-
src:
291-
url(/fonts/custom/CustomFont-Medium.woff2) format('woff2'),
292-
url(/fonts/custom/CustomFont-Medium.woff) format('woff');
293-
font-weight: 500;
294-
font-style: normal;
295-
}
296-
@font-face {
297-
font-family: 'circular';
298-
src:
299-
url(/fonts/custom/CustomFont-MediumItalic.woff2) format('woff2'),
300-
url(/fonts/custom/CustomFont-MediumItalic.woff) format('woff');
301-
font-weight: 500;
302-
font-style: italic;
303-
}
304-
@font-face {
305-
font-family: 'circular';
306-
src:
307-
url(/fonts/custom/CustomFont-Bold.woff2) format('woff2'),
308-
url(/fonts/custom/CustomFont-Bold.woff) format('woff');
309-
font-weight: 700;
310-
font-style: 600;
311-
}
312-
@font-face {
313-
font-family: 'circular';
314-
src:
315-
url(/fonts/custom/CustomFont-BoldItalic.woff2) format('woff2'),
316-
url(/fonts/custom/CustomFont-BoldItalic.woff) format('woff');
317-
font-style: 600;
318-
font-style: italic;
319-
}
320-
@font-face {
321-
font-family: 'circular';
322-
src:
323-
url(/fonts/custom/CustomFont-Black.woff2) format('woff2'),
324-
url(/fonts/custom/CustomFont-Black.woff) format('woff');
325-
font-weight: 800;
326-
font-style: normal;
327-
}
328-
@font-face {
329-
font-family: 'circular';
330-
src:
331-
url(/fonts/custom/CustomFont-BlackItalic.woff2) format('woff2'),
332-
url(/fonts/custom/CustomFont-BlackItalic.woff) format('woff');
333-
font-weight: 800;
334-
font-style: italic;
335-
}
326+
} */
336327

337328
@font-face {
338329
font-family: 'source code pro';
@@ -347,6 +338,20 @@
347338
font-display: swap;
348339
}
349340

341+
@layer base {
342+
* {
343+
@apply border-border;
344+
}
345+
html {
346+
@apply scroll-smooth;
347+
}
348+
body {
349+
@apply bg-background text-foreground;
350+
font-synthesis-weight: none;
351+
text-rendering: optimizeLegibility;
352+
}
353+
}
354+
350355
html,
351356
body,
352357
main {

‎apps/postgres-new/app/layout.tsx

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
1-
import 'katex/dist/katex.min.css'
21
import './globals.css'
3-
2+
import 'katex/dist/katex.min.css'
43
import type { Metadata } from 'next'
5-
import { Inter } from 'next/font/google'
4+
import { Inter as FontSans } from 'next/font/google'
65
import Layout from '~/components/layout'
76
import Providers from '~/components/providers'
87
import { cn } from '~/lib/utils'
98

10-
const inter = Inter({ subsets: ['latin'] })
9+
const fontSans = FontSans({
10+
subsets: ['latin'],
11+
variable: '--font-sans',
12+
})
1113

1214
export const metadata: Metadata = {
1315
title: 'Postgres Sandbox',
@@ -21,7 +23,7 @@ export default function RootLayout({
2123
}>) {
2224
return (
2325
<html lang="en">
24-
<body className={cn(inter.className)}>
26+
<body className={cn('min-h-screen bg-background font-sans antialiased', fontSans.variable)}>
2527
<Providers>
2628
<Layout>{children}</Layout>
2729
</Providers>

‎apps/postgres-new/components/chat-message.tsx

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ function ChatMessage({ message, isLast }: ChatMessageProps) {
3939
x: 0,
4040
},
4141
}}
42-
className="self-end px-5 py-2.5 text-base rounded-3xl bg-neutral-100 whitespace-pre-wrap"
42+
className="self-end px-5 py-2.5 text-base rounded-3xl bg-foreground text-background whitespace-pre-wrap"
4343
>
4444
{message.content}
4545
</m.div>
@@ -50,7 +50,7 @@ function ChatMessage({ message, isLast }: ChatMessageProps) {
5050
remarkPlugins={[remarkGfm, [remarkMath, { singleDollarTextMath: false }]]}
5151
rehypePlugins={[[rehypeKatex, { output: 'html' }]]}
5252
components={{ ...markdownComponents, img: () => null }}
53-
className="prose [&_.katex-display>.katex]:text-left"
53+
className="prose prose-xs text-base [&_.katex-display>.katex]:text-left"
5454
>
5555
{message.content}
5656
</ReactMarkdown>
@@ -111,8 +111,13 @@ const NextImageHandler = (props: any) => {
111111
}
112112

113113
const markdownComponents = {
114-
mono: (props: any) => <code className="text-sm">{props.children}</code>,
114+
mono: (props: any) => <code className="text-sm not-prose">{props.children}</code>,
115115
code: (props: any) => <CodeBlock {...props} />,
116+
pre: (props: any) => (
117+
<pre className="not-prose">
118+
<CodeBlock {...props} />
119+
</pre>
120+
),
116121
img: (props: any) => NextImageHandler(props),
117122
Image: (props: any) => NextImageHandler(props),
118123
}

‎apps/postgres-new/components/code-accordion.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,14 +28,14 @@ export default function CodeAccordion({
2828
<AccordionItem
2929
value="item-1"
3030
className={cn(
31-
'border-2 border-neutral-100 bg-neutral-50 px-3 py-2 rounded-md',
32-
error ? 'bg-destructive-300' : undefined,
31+
'border bg-card px-3 py-2 rounded-md',
32+
error ? 'bg-destructive text-destructive-foreground' : undefined,
3333
className
3434
)}
3535
>
3636
<AccordionTrigger className="p-0 gap-2">
3737
<div className="flex gap-2 items-center font-normal text-lighter text-sm">
38-
<DatabaseZap size={14} />
38+
<DatabaseZap size={14} className="text-muted-foreground" />
3939
{title}
4040
</div>
4141
</AccordionTrigger>

‎apps/postgres-new/components/header.tsx

Lines changed: 26 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,52 @@
1+
'use client'
2+
3+
import { useTheme } from 'next-themes'
14
import { Button } from './ui/button'
25
import {
36
DropdownMenu,
47
DropdownMenuContent,
58
DropdownMenuItem,
69
DropdownMenuTrigger,
710
} from './ui/dropdown-menu'
11+
import { Moon, Sun } from 'lucide-react'
812

913
export default function Header() {
14+
const { setTheme } = useTheme()
15+
1016
return (
11-
<header className="flex items-center justify-between px-4 h-12 bg-gray-800 text-white">
12-
<div className="flex gap-2">
13-
<h1 className="text-base font-bold">postgres.new</h1>/<h2>Name of database</h2>
17+
<header className="flex items-center justify-between px-4 h-12 bg-background border-b">
18+
<div className="flex gap-2 items-center">
19+
<h1 className="text-sm">postgres.new</h1>
20+
<span className="text-lightgray">/</span>
21+
<span className="text-sm">Name of database</span>
1422
</div>
1523
<nav>
1624
<ul className="flex space-x-4">
1725
<li>
1826
<a href="" />
1927
</li>
2028
</ul>
21-
<DropdownMenu>
29+
{/* <DropdownMenu>
2230
<DropdownMenuTrigger>
2331
<Button>User</Button>
2432
</DropdownMenuTrigger>
2533
<DropdownMenuContent>
2634
<DropdownMenuItem>Something</DropdownMenuItem>
2735
</DropdownMenuContent>
36+
</DropdownMenu> */}
37+
<DropdownMenu>
38+
<DropdownMenuTrigger asChild>
39+
<Button variant="outline" size="icon">
40+
<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
41+
<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
42+
<span className="sr-only">Toggle theme</span>
43+
</Button>
44+
</DropdownMenuTrigger>
45+
<DropdownMenuContent align="end">
46+
<DropdownMenuItem onClick={() => setTheme('light')}>Light</DropdownMenuItem>
47+
<DropdownMenuItem onClick={() => setTheme('dark')}>Dark</DropdownMenuItem>
48+
<DropdownMenuItem onClick={() => setTheme('system')}>System</DropdownMenuItem>
49+
</DropdownMenuContent>
2850
</DropdownMenu>
2951
</nav>
3052
</header>

‎apps/postgres-new/components/providers.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
11
'use client'
22

33
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
4-
import { ThemeProvider } from 'next-themes'
4+
55
import { PropsWithChildren } from 'react'
66
import AppProvider from './app-provider'
7+
import { ThemeProvider } from './theme-provider'
78

89
const queryClient = new QueryClient()
910

1011
export default function Providers({ children }: PropsWithChildren) {
1112
return (
1213
// Force theme until we implement dark mode
13-
<ThemeProvider forcedTheme="light">
14+
<ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
1415
<QueryClientProvider client={queryClient}>
1516
<AppProvider>{children}</AppProvider>
1617
</QueryClientProvider>

0 commit comments

Comments
 (0)