fix(workspace): update workspace, me, and settings pages
This commit is contained in:
zhenyi
parent
879aafa3fa
commit
e1cbbc1e0f
@ -10,7 +10,6 @@ interface SuggestionCard {
|
||||
title: string;
|
||||
body: string;
|
||||
icon: React.ComponentType<{ className?: string }>;
|
||||
gradient: string;
|
||||
}
|
||||
|
||||
const SUGGESTIONS: SuggestionCard[] = [
|
||||
@ -18,25 +17,21 @@ const SUGGESTIONS: SuggestionCard[] = [
|
||||
title: "Code Review",
|
||||
body: "Review my pull request for bugs and improvements",
|
||||
icon: Code2,
|
||||
gradient: "from-emerald-500/10 to-emerald-500/[0.02]",
|
||||
},
|
||||
{
|
||||
title: "Debug Help",
|
||||
body: "Help me diagnose this failing test case",
|
||||
icon: Bug,
|
||||
gradient: "from-amber-500/10 to-amber-500/[0.02]",
|
||||
},
|
||||
{
|
||||
title: "Explain Code",
|
||||
body: "Explain how this algorithm works step by step",
|
||||
icon: Lightbulb,
|
||||
gradient: "from-violet-500/10 to-violet-500/[0.02]",
|
||||
},
|
||||
{
|
||||
title: "Refactor",
|
||||
body: "Suggest refactoring for better readability",
|
||||
icon: Wand2,
|
||||
gradient: "from-sky-500/10 to-sky-500/[0.02]",
|
||||
},
|
||||
];
|
||||
|
||||
@ -118,7 +113,7 @@ export default function MeChatListPage() {
|
||||
whileHover={{ scale: 1.02, transition: { duration: 0.15 } }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
type="button"
|
||||
className={`group cursor-pointer rounded-xl border border-border/40 bg-gradient-to-br ${suggestion.gradient} px-4 py-3.5 text-left transition-all duration-200 hover:border-border/80 hover:shadow-sm hover:ring-1 hover:ring-primary/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring`}
|
||||
className="group cursor-pointer rounded-xl border border-border/40 bg-card px-4 py-3.5 text-left transition-[background-color,border-color,box-shadow,transform] duration-200 hover:border-border/80 hover:bg-muted/30 hover:shadow-sm hover:ring-1 hover:ring-primary/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
||||
onClick={() => handleQuickStart(suggestion.title, suggestion.body)}
|
||||
aria-label={`${suggestion.title}: ${suggestion.body}`}
|
||||
>
|
||||
|
||||
@ -81,7 +81,7 @@ export function ActivityFeed({ relationCounts }: { relationCounts: { followers:
|
||||
{new Date(apply.updated_at).toLocaleDateString("en-US", { month: "short", day: "numeric" })}
|
||||
</p>
|
||||
</div>
|
||||
<span className="font-mono text-[10px] uppercase tracking-wider text-amber-600 rounded-md border border-amber-200 bg-amber-50 px-2 py-0.5">
|
||||
<span className="rounded-md border border-warning/20 bg-warning/10 px-2 py-0.5 font-mono text-[10px] uppercase tracking-wider text-warning">
|
||||
Pending
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@ -32,7 +32,7 @@ function TwoFactorSection() {
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Shield className="size-4 text-green-600" />
|
||||
<Shield className="size-4 text-success" />
|
||||
Two-factor authentication enabled
|
||||
</CardTitle>
|
||||
<CardDescription>Your account is protected with 2FA</CardDescription>
|
||||
@ -51,7 +51,7 @@ function TwoFactorSection() {
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<ShieldOff className="size-4 text-amber-600" />
|
||||
<ShieldOff className="size-4 text-warning" />
|
||||
Two-factor authentication
|
||||
</CardTitle>
|
||||
<CardDescription>Add an extra layer of security to your account</CardDescription>
|
||||
@ -138,7 +138,7 @@ function EmailSection() {
|
||||
</form>
|
||||
)}
|
||||
{changeEmail.isSuccess && (
|
||||
<p className="mt-4 text-sm text-green-600">Verification email sent. Check your inbox.</p>
|
||||
<p className="mt-4 text-sm text-success">Verification email sent. Check your inbox.</p>
|
||||
)}
|
||||
{changeEmail.isError && (
|
||||
<p className="mt-4 text-sm text-destructive">Failed to change email. Please try again.</p>
|
||||
|
||||
@ -68,10 +68,10 @@ export function CreateWorkspaceDialog({
|
||||
<DialogTrigger render={children as React.ReactElement} />
|
||||
<DialogContent className="sm:max-w-md p-6">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-lg font-semibold text-zinc-950">
|
||||
<DialogTitle className="text-lg font-semibold text-foreground">
|
||||
Create a new workspace
|
||||
</DialogTitle>
|
||||
<DialogDescription className="text-base text-zinc-500">
|
||||
<DialogDescription className="text-sm text-muted-foreground">
|
||||
Workspaces organize your projects, repositories, and team collaboration.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
@ -81,28 +81,30 @@ export function CreateWorkspaceDialog({
|
||||
onSubmit={(event) => void handleSubmit(event)}
|
||||
>
|
||||
<div className="space-y-2">
|
||||
<Label className="text-sm font-semibold text-zinc-950" htmlFor="wk-name">
|
||||
<Label className="text-sm font-semibold text-foreground" htmlFor="wk-name">
|
||||
Name
|
||||
</Label>
|
||||
<Input
|
||||
className="h-12 rounded-xl border-zinc-300 bg-zinc-50 text-base"
|
||||
autoComplete="off"
|
||||
className="h-11 rounded-xl border-input bg-background text-sm"
|
||||
id="wk-name"
|
||||
name="name"
|
||||
placeholder="e.g. my-project"
|
||||
required
|
||||
autoFocus
|
||||
/>
|
||||
<p className="text-sm text-zinc-400">
|
||||
<p className="text-xs text-muted-foreground/70">
|
||||
This will be used as your workspace URL. Use lowercase letters, numbers, and hyphens.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label className="text-sm font-semibold text-zinc-950" htmlFor="wk-description">
|
||||
<Label className="text-sm font-semibold text-foreground" htmlFor="wk-description">
|
||||
Description
|
||||
</Label>
|
||||
<Textarea
|
||||
className="min-h-24 rounded-xl border-zinc-300 bg-zinc-50 text-base"
|
||||
autoComplete="off"
|
||||
className="min-h-24 rounded-xl border-input bg-background text-sm"
|
||||
id="wk-description"
|
||||
name="description"
|
||||
placeholder="What is this workspace about?"
|
||||
@ -110,14 +112,14 @@ export function CreateWorkspaceDialog({
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<p className="rounded-xl bg-red-50 px-4 py-3 text-sm font-medium text-red-600">
|
||||
<p aria-live="polite" className="rounded-xl bg-destructive/10 px-4 py-3 text-sm font-medium text-destructive">
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<DialogFooter className="-mx-6 -mb-6 rounded-b-xl border-t border-zinc-200 bg-zinc-50 px-6 py-4 sm:flex-row sm:justify-end">
|
||||
<DialogFooter className="-mx-6 -mb-6 rounded-b-xl border-t border-border bg-muted/30 px-6 py-4 sm:flex-row sm:justify-end">
|
||||
<Button
|
||||
className="h-11 rounded-xl bg-zinc-950 px-5 text-base text-white shadow-inner shadow-white/10 hover:bg-zinc-800"
|
||||
className="h-10 rounded-xl px-5 text-sm"
|
||||
disabled={submitting}
|
||||
type="submit"
|
||||
>
|
||||
|
||||
@ -102,19 +102,20 @@ function RepoListView({
|
||||
<>
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="font-heading text-lg font-bold text-foreground">Repositories</h1>
|
||||
<Button className="h-8 rounded px-3 text-[13px]" onClick={onCreate}>
|
||||
<Button className="h-9 rounded-xl px-3 text-[13px]" onClick={onCreate}>
|
||||
<Plus className="size-3.5 mr-1" />
|
||||
New repo
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 rounded-md border border-border overflow-hidden">
|
||||
<div className="flex items-center gap-2 bg-muted/50 px-3 py-2 border-b border-border">
|
||||
<div className="mt-6 overflow-hidden rounded-xl border border-border bg-card shadow-sm">
|
||||
<div className="flex items-center gap-2 border-b border-border bg-muted/40 px-3 py-2">
|
||||
<span className="font-mono text-[11px] text-muted-foreground">{repos.length} repositories</span>
|
||||
<div className="ml-auto relative">
|
||||
<Search className="absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
className="h-7 w-52 rounded-sm border-border bg-card pl-7 text-[12px]"
|
||||
autoComplete="off"
|
||||
className="h-8 w-52 rounded-lg border-border bg-background pl-7 text-[12px]"
|
||||
placeholder="Filter repos..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
@ -250,11 +251,11 @@ function RepoCreateView({
|
||||
</p>
|
||||
|
||||
{/* Mode tabs */}
|
||||
<div className="mt-5 flex gap-1 rounded-lg bg-muted/50 p-1">
|
||||
<div className="mt-5 flex gap-1 rounded-xl bg-muted/50 p-1">
|
||||
{modeTabs.map((tab) => (
|
||||
<button
|
||||
className={cn(
|
||||
"flex flex-1 items-center justify-center gap-1.5 rounded-md px-3 py-1.5 text-[13px] font-medium transition-colors",
|
||||
"flex flex-1 items-center justify-center gap-1.5 rounded-lg px-3 py-1.5 text-[13px] font-medium transition-colors",
|
||||
mode === tab.key
|
||||
? "bg-background text-foreground shadow-sm"
|
||||
: "text-muted-foreground hover:text-foreground",
|
||||
@ -330,7 +331,7 @@ function RepoCreateView({
|
||||
].map((opt) => (
|
||||
<button
|
||||
className={cn(
|
||||
"flex items-start gap-2 rounded-md border p-3 text-left transition-colors",
|
||||
"flex items-start gap-2 rounded-xl border p-3 text-left transition-colors",
|
||||
visibility === opt.value
|
||||
? "border-primary bg-primary/5"
|
||||
: "border-border hover:border-muted-foreground/30",
|
||||
@ -398,7 +399,7 @@ function RepoCreateView({
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<p className="rounded-md bg-destructive/5 px-3 py-2 text-[12px] text-destructive">{error}</p>
|
||||
<p aria-live="polite" className="rounded-xl bg-destructive/10 px-3 py-2 text-[12px] text-destructive">{error}</p>
|
||||
)}
|
||||
|
||||
{/* Actions */}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user