pretty button
This commit is contained in:
Thomas G. Lopes
parent
93b8ba9c3b
commit
872b4b3cba
4 changed files with 110 additions and 21 deletions
|
|
@ -68,6 +68,10 @@
|
|||
"@fontsource-variable/fraunces": "^5.2.7",
|
||||
"@fontsource-variable/geist-mono": "^5.2.6",
|
||||
"@fontsource-variable/inter": "^5.2.6",
|
||||
"@fontsource-variable/inter-tight": "^5.2.6",
|
||||
"@fontsource-variable/montserrat": "^5.2.6",
|
||||
"@fontsource-variable/nunito-sans": "^5.2.6",
|
||||
"@fontsource-variable/open-sans": "^5.2.6",
|
||||
"better-auth": "^1.2.9",
|
||||
"convex-helpers": "^0.1.94",
|
||||
"openai": "^5.3.0",
|
||||
|
|
|
|||
32
pnpm-lock.yaml
generated
32
pnpm-lock.yaml
generated
|
|
@ -20,6 +20,18 @@ importers:
|
|||
'@fontsource-variable/inter':
|
||||
specifier: ^5.2.6
|
||||
version: 5.2.6
|
||||
'@fontsource-variable/inter-tight':
|
||||
specifier: ^5.2.6
|
||||
version: 5.2.6
|
||||
'@fontsource-variable/montserrat':
|
||||
specifier: ^5.2.6
|
||||
version: 5.2.6
|
||||
'@fontsource-variable/nunito-sans':
|
||||
specifier: ^5.2.6
|
||||
version: 5.2.6
|
||||
'@fontsource-variable/open-sans':
|
||||
specifier: ^5.2.6
|
||||
version: 5.2.6
|
||||
better-auth:
|
||||
specifier: ^1.2.9
|
||||
version: 1.2.9
|
||||
|
|
@ -588,9 +600,21 @@ packages:
|
|||
'@fontsource-variable/geist-mono@5.2.6':
|
||||
resolution: {integrity: sha512-vw6T9JGTrYJ980bn7W8iTPhe2jVK5ifunVs7xh9dfTVArjDSkJs03JjeZrH5LKEpGABLXSlSlNU57HRm4tmFMg==}
|
||||
|
||||
'@fontsource-variable/inter-tight@5.2.6':
|
||||
resolution: {integrity: sha512-umb36PJO+bwzqvpKkikmIEDs0YF3P5vUBQe+UEBgPSDffzDZyKVIU07M4/1cWcsZgU1PaXjyheUYKwlsJteopA==}
|
||||
|
||||
'@fontsource-variable/inter@5.2.6':
|
||||
resolution: {integrity: sha512-jks/bficUPQ9nn7GvXvHtlQIPudW7Wx8CrlZoY8bhxgeobNxlQan8DclUJuYF2loYRrGpfrhCIZZspXYysiVGg==}
|
||||
|
||||
'@fontsource-variable/montserrat@5.2.6':
|
||||
resolution: {integrity: sha512-1eHefcz9ZXSMjZPckKCWSYd8rLjUpmzQIsNO8DuyU0IdPvsqletPvSIJmztr0sCU6sX4EFKsSHxJWawjmROp2A==}
|
||||
|
||||
'@fontsource-variable/nunito-sans@5.2.6':
|
||||
resolution: {integrity: sha512-lDToEZdfmhp+W62yZxDY64+tOzIBF7phjyTcIG+nh8utXMJo8IgS9iqVoOI18LyS/FMJO9Dx3kCsJEDQaf3s9g==}
|
||||
|
||||
'@fontsource-variable/open-sans@5.2.6':
|
||||
resolution: {integrity: sha512-O596UvQZ7KkR8yDJWIP8UZZoqs0DHpYsrL0Szml0/EkrJ35HcMIM3bJ3sSAIAjWsBSqKgzV2HJEIuhvxBd1iog==}
|
||||
|
||||
'@hexagon/base64@1.1.28':
|
||||
resolution: {integrity: sha512-lhqDEAvWixy3bZ+UOYbPwUbBkwBq5C1LAJ/xPC8Oi+lL54oyakv/npbA0aU2hgCsx/1NUd4IBvV03+aUBWxerw==}
|
||||
|
||||
|
|
@ -2806,8 +2830,16 @@ snapshots:
|
|||
|
||||
'@fontsource-variable/geist-mono@5.2.6': {}
|
||||
|
||||
'@fontsource-variable/inter-tight@5.2.6': {}
|
||||
|
||||
'@fontsource-variable/inter@5.2.6': {}
|
||||
|
||||
'@fontsource-variable/montserrat@5.2.6': {}
|
||||
|
||||
'@fontsource-variable/nunito-sans@5.2.6': {}
|
||||
|
||||
'@fontsource-variable/open-sans@5.2.6': {}
|
||||
|
||||
'@hexagon/base64@1.1.28': {}
|
||||
|
||||
'@humanfs/core@0.19.1': {}
|
||||
|
|
|
|||
85
src/app.css
85
src/app.css
|
|
@ -2,6 +2,8 @@
|
|||
@import '@fontsource-variable/inter';
|
||||
@import '@fontsource-variable/geist-mono';
|
||||
@import '@fontsource-variable/fraunces';
|
||||
@import '@fontsource-variable/inter-tight';
|
||||
@import '@fontsource-variable/nunito-sans';
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
|
|
@ -38,14 +40,6 @@
|
|||
--sidebar-accent-foreground: oklch(0.3963 0.0251 285.1962);
|
||||
--sidebar-border: oklch(0.9383 0.0026 48.7178);
|
||||
--sidebar-ring: oklch(0.5916 0.218 0.5844);
|
||||
--font-sans:
|
||||
ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
|
||||
'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
|
||||
'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
--font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
|
||||
--font-mono:
|
||||
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
|
||||
monospace;
|
||||
--radius: 0.5rem;
|
||||
--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
|
||||
--shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
|
||||
|
|
@ -90,14 +84,6 @@
|
|||
--sidebar-accent-foreground: oklch(0.9674 0.0013 286.3752);
|
||||
--sidebar-border: oklch(0 0 0);
|
||||
--sidebar-ring: oklch(0.5797 0.1194 237.7893);
|
||||
--font-sans:
|
||||
ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
|
||||
'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
|
||||
'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
--font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
|
||||
--font-mono:
|
||||
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
|
||||
monospace;
|
||||
--radius: 0.5rem;
|
||||
--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
|
||||
--shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
|
||||
|
|
@ -143,10 +129,6 @@
|
|||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
|
||||
--font-sans: var(--font-sans);
|
||||
--font-mono: var(--font-mono);
|
||||
--font-serif: var(--font-serif);
|
||||
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
|
|
@ -200,6 +182,10 @@
|
|||
'Inter Variable', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
|
||||
Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
|
||||
'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
--font-fake-proxima:
|
||||
'Nunito Sans Variable', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
|
||||
Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
|
||||
'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
--font-serif: 'Fraunces Variable', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
|
||||
--font-mono:
|
||||
'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
|
||||
|
|
@ -403,4 +389,63 @@
|
|||
--modal-br: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Border reflect from t3 */
|
||||
.button-reflect {
|
||||
/* Derived from dark primary: oklch(0.5797 0.1194 237.7893) */
|
||||
--min: oklch(0.5797 0.1194 237.7893 / 0.25) !important; /* Lighter, more transparent */
|
||||
--max: oklch(0.5797 0.1194 237.7893 / 0.7) !important; /* Slightly more saturated */
|
||||
--start: #000000d9 !important;
|
||||
}
|
||||
.border-reflect {
|
||||
/* Derived from dark primary: oklch(0.5797 0.1194 237.7893) */
|
||||
--c: 237.7893 11.94% 57.97%; /* Using the hue, chroma, and lightness from dark primary */
|
||||
--min: hsl(from var(--primary) h c l / 0.2);
|
||||
--max: hsl(from var(--primary) h c l / 1);
|
||||
--gradientBorder-gradient:
|
||||
linear-gradient(180deg, var(--min), var(--max), var(--min)),
|
||||
linear-gradient(15deg, var(--min) 50%, var(--max));
|
||||
--opacity: 1;
|
||||
--start: rgba(0, 0, 0, 0.85);
|
||||
position: relative;
|
||||
}
|
||||
.boring-dark .border-reflect,
|
||||
.dark .border-reflect {
|
||||
/* Derived from dark primary: oklch(0.5797 0.1194 237.7893) */
|
||||
--gradientBorder-gradient:
|
||||
linear-gradient(
|
||||
180deg,
|
||||
oklch(0.5797 0.1194 237.7893 / 0),
|
||||
oklch(0.5797 0.1194 237.7893 / 0.74),
|
||||
oklch(0.5797 0.1194 237.7893 / 0.09)
|
||||
),
|
||||
linear-gradient(
|
||||
15deg,
|
||||
oklch(0.5797 0.1194 237.7893 / 0.12),
|
||||
oklch(0.5797 0.1194 237.7893 / 0.74)
|
||||
);
|
||||
--start: rgba(0, 0, 0, 0.92);
|
||||
}
|
||||
.border-reflect:before {
|
||||
content: '';
|
||||
pointer-events: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
padding: var(--gradientBorder-size, 1px);
|
||||
background: var(--gradientBorder-gradient);
|
||||
-webkit-mask:
|
||||
linear-gradient(var(--start), #000) content-box,
|
||||
linear-gradient(var(--start), #000);
|
||||
mask:
|
||||
linear-gradient(var(--start), #000) content-box,
|
||||
linear-gradient(var(--start), #000);
|
||||
-webkit-mask-composite: xor;
|
||||
mask-composite: exclude;
|
||||
opacity: var(--opacity, 1);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -59,7 +59,15 @@
|
|||
<div class="flex place-items-center justify-center py-2">
|
||||
<span class="text-center font-serif text-lg">Thom.chat</span>
|
||||
</div>
|
||||
<Button href="/chat" class="w-full">New Chat</Button>
|
||||
<div class="mt-1 flex w-full px-2">
|
||||
<a
|
||||
href="/chat"
|
||||
class="border-reflect button-reflect bg-primary/20 hover:bg-primary/50 font-fake-proxima w-full rounded-lg px-4 py-2 text-center text-sm tracking-[-0.005em] duration-200"
|
||||
style="font-variation-settings: 'wght' 750"
|
||||
>
|
||||
New Chat
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex flex-1 flex-col overflow-y-auto py-2">
|
||||
{#each conversationsQuery.data ?? [] as conversation (conversation._id)}
|
||||
<a href={`/chat/${conversation._id}`} class="group py-0.5 pr-2.5 text-left text-sm">
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue