mirror of
https://github.com/supermemoryai/supermemory.git
synced 2026-09-07 08:26:15 +00:00
style(mcp): solidify widget form surfaces
This commit is contained in:
ishaanxgupta
ved015
parent
dd5451e361
commit
c7739fa75a
9 changed files with 105 additions and 99 deletions
|
|
@ -309,9 +309,12 @@
|
|||
--bg-muted: #131b28;
|
||||
--bg-elevated: #1b1f24;
|
||||
--bg-overlay: rgba(13, 18, 26, 0.78);
|
||||
--bg-control: #0d121a;
|
||||
--bg-control-hover: #111923;
|
||||
|
||||
--border: rgba(255, 255, 255, 0.12);
|
||||
--border-muted: rgba(255, 255, 255, 0.07);
|
||||
--border-control: rgba(255, 255, 255, 0.14);
|
||||
--border-accent: rgba(34, 97, 202, 0.45);
|
||||
|
||||
--text-primary: #fafafa;
|
||||
|
|
|
|||
|
|
@ -25,9 +25,9 @@ const buttonVariants = cva(
|
|||
"hover:bg-[var(--accent-hover)] hover:shadow-[0_12px_32px_rgba(75,160,250,0.32)]",
|
||||
].join(" "),
|
||||
secondary: [
|
||||
"bg-[var(--bg-overlay)] text-[var(--text-primary)]",
|
||||
"border border-[var(--border)]",
|
||||
"hover:bg-[var(--bg-muted)] hover:border-[var(--border-accent)]",
|
||||
"bg-[var(--bg-control)] text-[var(--text-primary)]",
|
||||
"border border-[var(--border-control)]",
|
||||
"hover:bg-[var(--bg-control-hover)] hover:border-[var(--border-accent)]",
|
||||
].join(" "),
|
||||
ghost: [
|
||||
"text-[var(--text-primary)]",
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@ import { cn } from "../lib/cn"
|
|||
|
||||
const cardStyles = cva(
|
||||
[
|
||||
"text-left bg-bg-elevated/90 border border-border rounded-lg p-4",
|
||||
"shadow-md backdrop-blur transition-colors duration-150",
|
||||
"text-left bg-bg-elevated border border-border rounded-lg p-4",
|
||||
"shadow-md transition-colors duration-150",
|
||||
].join(" "),
|
||||
{
|
||||
variants: {
|
||||
|
|
|
|||
|
|
@ -58,10 +58,10 @@ export function FileUpload({
|
|||
"flex min-h-[180px] flex-col items-center justify-center gap-(--space-3)",
|
||||
"py-(--space-12) px-(--space-6)",
|
||||
"border-2 border-dashed rounded-(--radius-lg)",
|
||||
"bg-[var(--bg-overlay)] cursor-pointer shadow-md backdrop-blur transition-colors",
|
||||
"bg-[var(--bg-control)] cursor-pointer shadow-md transition-colors",
|
||||
dragOver
|
||||
? "border-accent bg-accent-muted"
|
||||
: "border-border hover:bg-bg-muted/80",
|
||||
: "border-[var(--border-control)] hover:bg-[var(--bg-control-hover)]",
|
||||
disabled && "pointer-events-none opacity-50",
|
||||
className,
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -2,17 +2,17 @@ import { cva, type VariantProps } from "class-variance-authority"
|
|||
import { forwardRef, type InputHTMLAttributes } from "react"
|
||||
import { cn } from "../lib/cn"
|
||||
|
||||
// Mirrors console-v2's Input: transparent surface, soft hover tint,
|
||||
// focus shadow, aria-invalid styling. Sizes sm/md/lg match component heights.
|
||||
// Mirrors console-v2's Input with a solid widget surface so the Nova grid stays
|
||||
// behind the form instead of bleeding through controls.
|
||||
const inputVariants = cva(
|
||||
[
|
||||
"flex w-full",
|
||||
"bg-[var(--bg-overlay)] text-[var(--text-primary)]",
|
||||
"border border-[var(--border)]",
|
||||
"bg-[var(--bg-control)] text-[var(--text-primary)]",
|
||||
"border border-[var(--border-control)]",
|
||||
"rounded-[var(--radius-lg)]",
|
||||
"placeholder:text-[var(--text-muted)]",
|
||||
"transition-colors",
|
||||
"hover:bg-[var(--bg-muted)]",
|
||||
"hover:bg-[var(--bg-control-hover)]",
|
||||
"focus-visible:outline-none focus-visible:border-[var(--border-accent)] focus-visible:shadow-[0_0_0_1px_var(--border-accent)]",
|
||||
"disabled:cursor-not-allowed disabled:opacity-50",
|
||||
"aria-invalid:border-[var(--error)] aria-invalid:ring-[var(--error)]",
|
||||
|
|
|
|||
|
|
@ -16,9 +16,9 @@ const PopoverContent = forwardRef<
|
|||
align={align}
|
||||
className={cn(
|
||||
"z-50 w-72 p-(--space-4)",
|
||||
"bg-bg-elevated/95 border border-border",
|
||||
"bg-bg-elevated border border-border",
|
||||
"rounded-(--radius-lg)",
|
||||
"shadow-lg backdrop-blur",
|
||||
"shadow-lg",
|
||||
"data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
|
||||
"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
|
||||
className,
|
||||
|
|
|
|||
|
|
@ -1,19 +1,18 @@
|
|||
import { forwardRef, type TextareaHTMLAttributes } from "react"
|
||||
import { cn } from "../lib/cn"
|
||||
|
||||
// Multi-line counterpart to Input. Same surface treatment (transparent,
|
||||
// soft hover, focus shadow, aria-invalid). No height variants — caller
|
||||
// controls min-height via className.
|
||||
// Multi-line counterpart to Input. Solid surface keeps host/product background
|
||||
// treatments from showing through text entry areas.
|
||||
const textAreaClass = [
|
||||
"flex w-full",
|
||||
"bg-[var(--bg-overlay)] text-[var(--text-primary)]",
|
||||
"border border-[var(--border)]",
|
||||
"bg-[var(--bg-control)] text-[var(--text-primary)]",
|
||||
"border border-[var(--border-control)]",
|
||||
"rounded-[var(--radius-lg)]",
|
||||
"px-[var(--space-3)] py-[var(--space-2)]",
|
||||
"text-[length:var(--text-sm)] leading-normal font-sans",
|
||||
"placeholder:text-[var(--text-muted)]",
|
||||
"transition-colors resize-y",
|
||||
"hover:bg-[var(--bg-muted)]",
|
||||
"hover:bg-[var(--bg-control-hover)]",
|
||||
"focus-visible:outline-none focus-visible:border-[var(--border-accent)] focus-visible:shadow-[0_0_0_1px_var(--border-accent)]",
|
||||
"disabled:cursor-not-allowed disabled:opacity-50",
|
||||
"aria-invalid:border-[var(--error)] aria-invalid:ring-[var(--error)]",
|
||||
|
|
|
|||
|
|
@ -73,39 +73,41 @@ export function Save({
|
|||
title="Add Memory"
|
||||
/>
|
||||
<div className="px-(--page-header-px) pb-(--space-6)">
|
||||
<Stack gap="lg">
|
||||
<Field label="Memory">
|
||||
<TextArea
|
||||
className="min-h-40"
|
||||
onChange={(e) => setContent(e.target.value)}
|
||||
placeholder="Enter content to save as a memory…"
|
||||
value={content}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
{writableTags.length > 0 ? (
|
||||
<Field label="Workspace">
|
||||
<WorkspaceSelect
|
||||
onValueChange={setSelectedTag}
|
||||
options={options}
|
||||
value={selectedTag}
|
||||
<div className="rounded-(--radius-lg) border border-border bg-bg-elevated p-(--space-4) shadow-lg">
|
||||
<Stack gap="lg">
|
||||
<Field label="Memory">
|
||||
<TextArea
|
||||
className="min-h-40"
|
||||
onChange={(e) => setContent(e.target.value)}
|
||||
placeholder="Enter content to save as a memory…"
|
||||
value={content}
|
||||
/>
|
||||
</Field>
|
||||
) : null}
|
||||
|
||||
<div className="flex justify-end border-t border-border-muted pt-(--space-4)">
|
||||
<ActionGroup>
|
||||
<Button
|
||||
disabled={!canSave}
|
||||
loading={saving}
|
||||
onClick={handleSave}
|
||||
variant="primary"
|
||||
>
|
||||
{saving ? "Saving" : "Save memory"}
|
||||
</Button>
|
||||
</ActionGroup>
|
||||
</div>
|
||||
</Stack>
|
||||
{writableTags.length > 0 ? (
|
||||
<Field label="Workspace">
|
||||
<WorkspaceSelect
|
||||
onValueChange={setSelectedTag}
|
||||
options={options}
|
||||
value={selectedTag}
|
||||
/>
|
||||
</Field>
|
||||
) : null}
|
||||
|
||||
<div className="flex justify-end pt-(--space-2)">
|
||||
<ActionGroup>
|
||||
<Button
|
||||
disabled={!canSave}
|
||||
loading={saving}
|
||||
onClick={handleSave}
|
||||
variant="primary"
|
||||
>
|
||||
{saving ? "Saving" : "Save memory"}
|
||||
</Button>
|
||||
</ActionGroup>
|
||||
</div>
|
||||
</Stack>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -78,59 +78,61 @@ export function Upload({ activeTag, writableTags, onAdvance, onError }: Props) {
|
|||
title="Upload File"
|
||||
/>
|
||||
<div className="px-(--page-header-px) pb-(--space-6)">
|
||||
<Stack gap="lg">
|
||||
{file ? (
|
||||
<div className="flex items-center justify-between gap-(--space-3) rounded-(--radius-lg) border border-border bg-bg-elevated p-(--space-3)">
|
||||
<div className="flex min-w-0 items-center gap-(--space-3)">
|
||||
<FileText className="size-5 shrink-0 text-text-secondary" />
|
||||
<div className="flex min-w-0 flex-col">
|
||||
<span className="truncate text-(length:--text-sm) font-medium text-text-primary">
|
||||
{file.name}
|
||||
</span>
|
||||
<span className="text-(length:--text-xs) font-mono text-text-muted">
|
||||
{formatFileSize(file.size)}
|
||||
</span>
|
||||
<div className="rounded-(--radius-lg) border border-border bg-bg-elevated p-(--space-4) shadow-lg">
|
||||
<Stack gap="lg">
|
||||
{file ? (
|
||||
<div className="flex items-center justify-between gap-(--space-3) rounded-(--radius-lg) border border-[var(--border-control)] bg-[var(--bg-control)] p-(--space-3)">
|
||||
<div className="flex min-w-0 items-center gap-(--space-3)">
|
||||
<FileText className="size-5 shrink-0 text-text-secondary" />
|
||||
<div className="flex min-w-0 flex-col">
|
||||
<span className="truncate text-(length:--text-sm) font-medium text-text-primary">
|
||||
{file.name}
|
||||
</span>
|
||||
<span className="text-(length:--text-xs) font-mono text-text-muted">
|
||||
{formatFileSize(file.size)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
aria-label="Remove file"
|
||||
iconLeft={<X className="size-4" />}
|
||||
onClick={() => setFile(null)}
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
aria-label="Remove file"
|
||||
iconLeft={<X className="size-4" />}
|
||||
onClick={() => setFile(null)}
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
) : (
|
||||
<FileUpload
|
||||
accept={ACCEPT}
|
||||
description="Supports TXT, PDF, PNG, JPG, MP4"
|
||||
onFile={setFile}
|
||||
/>
|
||||
)}
|
||||
|
||||
{writableTags.length > 0 ? (
|
||||
<Field label="Workspace">
|
||||
<WorkspaceSelect
|
||||
onValueChange={setSelectedTag}
|
||||
options={options}
|
||||
value={selectedTag}
|
||||
/>
|
||||
</Field>
|
||||
) : null}
|
||||
|
||||
<div className="flex justify-end pt-(--space-2)">
|
||||
<ActionGroup>
|
||||
<Button
|
||||
disabled={!canUpload}
|
||||
loading={uploading}
|
||||
onClick={handleUpload}
|
||||
variant="primary"
|
||||
>
|
||||
{uploading ? "Uploading" : "Upload file"}
|
||||
</Button>
|
||||
</ActionGroup>
|
||||
</div>
|
||||
) : (
|
||||
<FileUpload
|
||||
accept={ACCEPT}
|
||||
description="Supports TXT, PDF, PNG, JPG, MP4"
|
||||
onFile={setFile}
|
||||
/>
|
||||
)}
|
||||
|
||||
{writableTags.length > 0 ? (
|
||||
<Field label="Workspace">
|
||||
<WorkspaceSelect
|
||||
onValueChange={setSelectedTag}
|
||||
options={options}
|
||||
value={selectedTag}
|
||||
/>
|
||||
</Field>
|
||||
) : null}
|
||||
|
||||
<div className="flex justify-end border-t border-border-muted pt-(--space-4)">
|
||||
<ActionGroup>
|
||||
<Button
|
||||
disabled={!canUpload}
|
||||
loading={uploading}
|
||||
onClick={handleUpload}
|
||||
variant="primary"
|
||||
>
|
||||
{uploading ? "Uploading" : "Upload file"}
|
||||
</Button>
|
||||
</ActionGroup>
|
||||
</div>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue