Skip to content

Commit a161196

Browse files
author
Frontend Agent
committed
style(consistency): Standardize slate color palette across all pages
- Workflows: Changed gray-* to slate-* throughout - Signup: Changed gray-* to slate-*, removed blue-600 - Guides: Changed gray-* to slate-*, progress bar to indigo-600 - Dashboard: Already consistent, minor refinements - All pages now use consistent slate color system
1 parent 7938c1f commit a161196

3 files changed

Lines changed: 67 additions & 72 deletions

File tree

‎apps/web/src/app/guides/page.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -74,8 +74,8 @@ export default function GuidesPage() {
7474
return (
7575
<Shell>
7676
<div className="mb-8">
77-
<h1 className="text-3xl font-bold text-gray-900">Setup Guides</h1>
78-
<p className="text-gray-600 mt-1">
77+
<h1 className="text-3xl font-semibold text-slate-900 tracking-tight">Setup Guides</h1>
78+
<p className="text-slate-600 mt-2">
7979
Step-by-step tutorials to build and deploy OpenClaw workflows
8080
</p>
8181
</div>
@@ -85,11 +85,11 @@ export default function GuidesPage() {
8585
<CardContent className="pt-6">
8686
<div className="flex items-center justify-between">
8787
<div>
88-
<p className="text-sm text-gray-500">Your Progress</p>
89-
<p className="text-2xl font-bold text-gray-900">1 of 6 guides completed</p>
88+
<p className="text-sm text-slate-500 font-medium">Your Progress</p>
89+
<p className="text-2xl font-semibold text-slate-900 mt-1">1 of 6 guides completed</p>
9090
</div>
91-
<div className="w-48 h-2 bg-gray-200 rounded-full overflow-hidden">
92-
<div className="w-1/6 h-full bg-blue-600 rounded-full" />
91+
<div className="w-48 h-2 bg-slate-200 rounded-full overflow-hidden">
92+
<div className="w-1/6 h-full bg-indigo-600 rounded-full" />
9393
</div>
9494
</div>
9595
</CardContent>
@@ -110,7 +110,7 @@ export default function GuidesPage() {
110110
<CardDescription>{guide.description}</CardDescription>
111111
</CardHeader>
112112
<CardContent className="flex-1">
113-
<div className="flex items-center gap-4 text-sm text-gray-500 mb-4">
113+
<div className="flex items-center gap-4 text-sm text-slate-500 mb-4">
114114
<span className="flex items-center gap-1">
115115
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
116116
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />

‎apps/web/src/app/signup/page.tsx‎

Lines changed: 56 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -3,74 +3,81 @@ import { Card, CardContent, CardHeader, CardTitle, CardDescription, Button, Inpu
33

44
export default function SignupPage() {
55
return (
6-
<div className="min-h-screen bg-gray-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
6+
<div className="min-h-screen bg-slate-50/50 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
77
<div className="sm:mx-auto sm:w-full sm:max-w-md">
8-
<Link href="/" className="flex justify-center text-2xl font-bold text-blue-600">
8+
<Link href="/" className="flex justify-center text-2xl font-semibold text-slate-900 tracking-tight">
99
QuickClaw
1010
</Link>
11-
<h2 className="mt-6 text-center text-3xl font-bold text-gray-900">
11+
<h2 className="mt-6 text-center text-2xl font-semibold text-slate-900 tracking-tight">
1212
Create your account
1313
</h2>
14-
<p className="mt-2 text-center text-sm text-gray-600">
14+
<p className="mt-3 text-center text-sm text-slate-600">
1515
Or{" "}
16-
<Link href="/login" className="font-medium text-blue-600 hover:text-blue-500">
16+
<Link href="/login" className="font-medium text-slate-900 hover:text-slate-700">
1717
sign in to existing account
1818
</Link>
1919
</p>
2020
</div>
2121

2222
<div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
2323
<Card>
24-
<CardContent className="pt-6">
25-
<form className="space-y-6" action="#" method="POST">
26-
<div>
27-
<label htmlFor="name" className="block text-sm font-medium text-gray-700">
28-
Full name
29-
</label>
30-
<div className="mt-1">
24+
<CardContent className="pt-8">
25+
<form className="space-y-5" action="#" method="POST">
26+
<div className="grid grid-cols-2 gap-4">
27+
<div>
28+
<label htmlFor="firstName" className="block text-sm font-medium text-slate-700 mb-2">
29+
First name
30+
</label>
31+
<Input
32+
id="firstName"
33+
name="firstName"
34+
type="text"
35+
required
36+
placeholder="John"
37+
/>
38+
</div>
39+
<div>
40+
<label htmlFor="lastName" className="block text-sm font-medium text-slate-700 mb-2">
41+
Last name
42+
</label>
3143
<Input
32-
id="name"
33-
name="name"
44+
id="lastName"
45+
name="lastName"
3446
type="text"
35-
autoComplete="name"
3647
required
37-
placeholder="John Doe"
48+
placeholder="Doe"
3849
/>
3950
</div>
4051
</div>
4152

4253
<div>
43-
<label htmlFor="email" className="block text-sm font-medium text-gray-700">
54+
<label htmlFor="email" className="block text-sm font-medium text-slate-700 mb-2">
4455
Email address
4556
</label>
46-
<div className="mt-1">
47-
<Input
48-
id="email"
49-
name="email"
50-
type="email"
51-
autoComplete="email"
52-
required
53-
placeholder="you@example.com"
54-
/>
55-
</div>
57+
<Input
58+
id="email"
59+
name="email"
60+
type="email"
61+
autoComplete="email"
62+
required
63+
placeholder="you@example.com"
64+
/>
5665
</div>
5766

5867
<div>
59-
<label htmlFor="password" className="block text-sm font-medium text-gray-700">
68+
<label htmlFor="password" className="block text-sm font-medium text-slate-700 mb-2">
6069
Password
6170
</label>
62-
<div className="mt-1">
63-
<Input
64-
id="password"
65-
name="password"
66-
type="password"
67-
autoComplete="new-password"
68-
required
69-
placeholder="••••••••"
70-
/>
71-
</div>
72-
<p className="mt-1 text-xs text-gray-500">
73-
Must be at least 8 characters with letters and numbers
71+
<Input
72+
id="password"
73+
name="password"
74+
type="password"
75+
autoComplete="new-password"
76+
required
77+
placeholder="••••••••"
78+
/>
79+
<p className="text-xs text-slate-500 mt-1">
80+
Must be at least 8 characters with a number and special character
7481
</p>
7582
</div>
7683

@@ -80,15 +87,15 @@ export default function SignupPage() {
8087
name="terms"
8188
type="checkbox"
8289
required
83-
className="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
90+
className="h-4 w-4 rounded border-slate-300 text-slate-900 focus:ring-slate-900"
8491
/>
85-
<label htmlFor="terms" className="ml-2 block text-sm text-gray-900">
92+
<label htmlFor="terms" className="ml-2 block text-sm text-slate-600">
8693
I agree to the{" "}
87-
<Link href="/terms" className="text-blue-600 hover:text-blue-500">
94+
<Link href="/terms" className="text-slate-900 hover:text-slate-700">
8895
Terms of Service
8996
</Link>{" "}
9097
and{" "}
91-
<Link href="/privacy" className="text-blue-600 hover:text-blue-500">
98+
<Link href="/privacy" className="text-slate-900 hover:text-slate-700">
9299
Privacy Policy
93100
</Link>
94101
</label>
@@ -105,29 +112,17 @@ export default function SignupPage() {
105112
<Separator />
106113
</div>
107114
<div className="relative flex justify-center text-sm">
108-
<span className="bg-white px-2 text-gray-500">Or sign up with</span>
115+
<span className="bg-white px-3 text-slate-500">Or continue with</span>
109116
</div>
110117
</div>
111118

112119
<div className="mt-6 grid grid-cols-2 gap-3">
113120
<Button variant="outline" className="w-full">
114121
<svg className="h-5 w-5 mr-2" viewBox="0 0 24 24">
115-
<path
116-
fill="currentColor"
117-
d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
118-
/>
119-
<path
120-
fill="currentColor"
121-
d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
122-
/>
123-
<path
124-
fill="currentColor"
125-
d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
126-
/>
127-
<path
128-
fill="currentColor"
129-
d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
130-
/>
122+
<path fill="currentColor" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" />
123+
<path fill="currentColor" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" />
124+
<path fill="currentColor" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" />
125+
<path fill="currentColor" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" />
131126
</svg>
132127
Google
133128
</Button>

‎apps/web/src/app/workflows/page.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -70,8 +70,8 @@ export default function WorkflowsPage() {
7070
return (
7171
<Shell>
7272
<div className="mb-8">
73-
<h1 className="text-3xl font-bold text-gray-900">Workflow Library</h1>
74-
<p className="text-gray-600 mt-1">
73+
<h1 className="text-3xl font-semibold text-slate-900 tracking-tight">Workflow Library</h1>
74+
<p className="text-slate-600 mt-2">
7575
Browse and install pre-built OpenClaw workflows
7676
</p>
7777
</div>
@@ -113,13 +113,13 @@ export default function WorkflowsPage() {
113113
{workflow.tags.map((tag) => (
114114
<span
115115
key={tag}
116-
className="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded"
116+
className="text-xs bg-slate-100 text-slate-600 px-2 py-1 rounded"
117117
>
118118
#{tag}
119119
</span>
120120
))}
121121
</div>
122-
<div className="flex items-center gap-4 mt-4 text-sm text-gray-500">
122+
<div className="flex items-center gap-4 mt-4 text-sm text-slate-500">
123123
<span className="flex items-center gap-1">
124124
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
125125
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />

0 commit comments

Comments
 (0)