Skip to content

Commit 8915398

Browse files
Zeff01claude
Zeff01
and
claude
committed
feat: improve signup flow and fix UI issues
- Add Mobile Developer to position options in signup form - Improve post-signup messaging with clearer next steps - Fix JSX syntax error in MyTeamPage component - Add email verification template with step-by-step instructions 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
1 parent 39fff5b commit 8915398

3 files changed

Lines changed: 287 additions & 4 deletions

File tree

‎apps/codebility/app/auth/sign-up/page.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,9 @@ const POSITIONS = [
2828
{ id: 1, name: "Frontend Developer" },
2929
{ id: 2, name: "Backend Developer" },
3030
{ id: 3, name: "Full Stack Developer" },
31-
{ id: 4, name: "UI/UX Designer" },
32-
{ id: 5, name: "QA Engineer" },
31+
{ id: 4, name: "Mobile Developer" },
32+
{ id: 5, name: "UI/UX Designer" },
33+
{ id: 6, name: "QA Engineer" },
3334
];
3435

3536
// Validation schema
@@ -265,7 +266,7 @@ export default function SignUpForm() {
265266
localStorage.removeItem("ndaSignature");
266267
localStorage.removeItem("ndaDocument");
267268

268-
toast.success("Account created successfully! Please check your email to verify your account.");
269+
toast.success("Account created! Check your email to verify, then you'll receive assessment instructions.");
269270
toast.success("Redirecting to sign-in page...", { duration: 2000 });
270271

271272
setTimeout(() => {

‎apps/codebility/app/home/my-team/MyTeamPage.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -421,7 +421,6 @@ const MyTeamPage = ({ projectData }: MyTeamPageProps) => {
421421
<div
422422
key={project.id}
423423
className="rounded-xl bg-white/20 backdrop-blur-md dark:bg-white/10 border border-white/30 dark:border-white/20 p-3 sm:p-4 md:p-5 lg:p-6 shadow-lg transition-all duration-300 hover:shadow-xl hover:bg-white/30 dark:hover:bg-white/15 hover:border-white/40 dark:hover:border-white/30 h-full">
424-
>
425424
<div className="space-y-4 sm:space-y-5 md:space-y-6">
426425

427426
{/* Project Header */}

‎email-verification-template.html‎

Lines changed: 283 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,283 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Welcome to Codebility - Confirm Your Account</title>
7+
<style>
8+
body {
9+
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
10+
background: #f8fafc;
11+
margin: 0;
12+
padding: 0;
13+
color: #1a202c;
14+
line-height: 1.6;
15+
}
16+
17+
.container {
18+
max-width: 600px;
19+
margin: 0 auto;
20+
padding: 40px 20px;
21+
}
22+
23+
.email-card {
24+
background: #ffffff;
25+
border: 1px solid #e2e8f0;
26+
border-radius: 12px;
27+
padding: 40px;
28+
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
29+
}
30+
31+
.logo {
32+
text-align: center;
33+
margin-bottom: 30px;
34+
}
35+
36+
.logo h1 {
37+
font-size: 28px;
38+
font-weight: 700;
39+
margin: 0;
40+
color: #1a202c;
41+
letter-spacing: -0.02em;
42+
}
43+
44+
.logo .tagline {
45+
font-size: 14px;
46+
color: #64748b;
47+
margin-top: 8px;
48+
text-transform: uppercase;
49+
letter-spacing: 0.1em;
50+
}
51+
52+
.welcome-text {
53+
text-align: center;
54+
margin-bottom: 30px;
55+
}
56+
57+
.welcome-text h2 {
58+
font-size: 22px;
59+
font-weight: 600;
60+
margin: 0 0 16px 0;
61+
color: #1a202c;
62+
}
63+
64+
.welcome-text p {
65+
font-size: 16px;
66+
color: #4a5568;
67+
margin: 0;
68+
}
69+
70+
.confirmation-section {
71+
background: #f8fafc;
72+
border: 1px solid #e2e8f0;
73+
border-radius: 8px;
74+
padding: 24px;
75+
margin: 30px 0;
76+
text-align: center;
77+
}
78+
79+
.confirmation-section p {
80+
font-size: 15px;
81+
color: #374151;
82+
margin: 0 0 20px 0;
83+
}
84+
85+
.confirm-button {
86+
display: inline-block;
87+
padding: 14px 32px;
88+
background: #1f2937;
89+
color: #ffffff;
90+
text-decoration: none;
91+
border-radius: 6px;
92+
font-weight: 600;
93+
font-size: 16px;
94+
transition: all 0.2s ease;
95+
}
96+
97+
.confirm-button:hover {
98+
background: #111827;
99+
}
100+
101+
.next-steps {
102+
margin: 30px 0;
103+
}
104+
105+
.next-steps h3 {
106+
font-size: 18px;
107+
color: #1a202c;
108+
margin-bottom: 20px;
109+
text-align: center;
110+
font-weight: 600;
111+
}
112+
113+
.steps-grid {
114+
display: grid;
115+
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
116+
gap: 16px;
117+
margin-top: 20px;
118+
}
119+
120+
.step-item {
121+
background: #f8fafc;
122+
border: 1px solid #e2e8f0;
123+
border-radius: 8px;
124+
padding: 20px;
125+
text-align: left;
126+
}
127+
128+
.step-number {
129+
display: inline-flex;
130+
align-items: center;
131+
justify-content: center;
132+
width: 32px;
133+
height: 32px;
134+
background: #1f2937;
135+
color: white;
136+
border-radius: 50%;
137+
font-weight: 600;
138+
font-size: 14px;
139+
margin-bottom: 12px;
140+
}
141+
142+
.step-item h4 {
143+
font-size: 16px;
144+
color: #1a202c;
145+
margin: 0 0 8px 0;
146+
font-weight: 600;
147+
}
148+
149+
.step-item p {
150+
font-size: 14px;
151+
color: #64748b;
152+
margin: 0;
153+
line-height: 1.5;
154+
}
155+
156+
.timeline-note {
157+
background: #fef3c7;
158+
border: 1px solid #f59e0b;
159+
border-radius: 6px;
160+
padding: 16px;
161+
margin: 24px 0;
162+
text-align: center;
163+
}
164+
165+
.timeline-note p {
166+
font-size: 14px;
167+
color: #92400e;
168+
margin: 0;
169+
font-weight: 500;
170+
}
171+
172+
.footer {
173+
text-align: center;
174+
margin-top: 40px;
175+
padding-top: 20px;
176+
border-top: 1px solid #e2e8f0;
177+
}
178+
179+
.footer p {
180+
font-size: 14px;
181+
color: #64748b;
182+
margin: 8px 0;
183+
}
184+
185+
.footer a {
186+
color: #1f2937;
187+
text-decoration: none;
188+
}
189+
190+
.footer a:hover {
191+
text-decoration: underline;
192+
}
193+
194+
/* Email client compatibility */
195+
table {
196+
border-collapse: collapse;
197+
mso-table-lspace: 0pt;
198+
mso-table-rspace: 0pt;
199+
}
200+
201+
@media (max-width: 600px) {
202+
.container {
203+
padding: 20px 10px;
204+
}
205+
206+
.email-card {
207+
padding: 24px;
208+
}
209+
210+
.logo h1 {
211+
font-size: 24px;
212+
}
213+
214+
.welcome-text h2 {
215+
font-size: 20px;
216+
}
217+
218+
.steps-grid {
219+
grid-template-columns: 1fr;
220+
}
221+
}
222+
</style>
223+
</head>
224+
<body>
225+
<div class="container">
226+
<div class="email-card">
227+
<div class="logo">
228+
<h1>Codebility</h1>
229+
<div class="tagline">Developer Community</div>
230+
</div>
231+
232+
<div class="welcome-text">
233+
<h2>Welcome to Codebility!</h2>
234+
<p>Thank you for your interest in joining our developer community. Please confirm your email to continue your application.</p>
235+
</div>
236+
237+
<div class="confirmation-section">
238+
<p>Please confirm your email address to activate your account:</p>
239+
<a href="{{ .ConfirmationURL }}" class="confirm-button">Confirm Your Account</a>
240+
</div>
241+
242+
<div class="next-steps">
243+
<h3>What happens next:</h3>
244+
<div class="steps-grid">
245+
<div class="step-item">
246+
<div class="step-number">1</div>
247+
<h4>Email Verification</h4>
248+
<p>Click the button above to verify your email address and activate your account.</p>
249+
</div>
250+
<div class="step-item">
251+
<div class="step-number">2</div>
252+
<h4>Technical Assessment</h4>
253+
<p>You'll receive an email with coding challenges to showcase your technical skills and problem-solving abilities.</p>
254+
</div>
255+
<div class="step-item">
256+
<div class="step-number">3</div>
257+
<h4>Application Review</h4>
258+
<p>Our team will review your assessment and application materials to ensure a good fit.</p>
259+
</div>
260+
<div class="step-item">
261+
<div class="step-number">4</div>
262+
<h4>Welcome Aboard</h4>
263+
<p>Once approved, you'll gain access to our platform and can start collaborating with our community.</p>
264+
</div>
265+
</div>
266+
</div>
267+
268+
<div class="timeline-note">
269+
<p><strong>Timeline:</strong> Assessment typically takes 1-2 business days, followed by a 2-3 day review period.</p>
270+
</div>
271+
272+
<div class="footer">
273+
<p>Having trouble with the button? Copy and paste this link into your browser:</p>
274+
<p><a href="{{ .ConfirmationURL }}">{{ .ConfirmationURL }}</a></p>
275+
<p>This confirmation link expires in 24 hours for security.</p>
276+
<p>If you didn't create this account, please ignore this email.</p>
277+
<p>Questions? Contact us at <a href="mailto:support@codebility.tech">support@codebility.tech</a></p>
278+
<p>© 2025 Codebility. Built for developers.</p>
279+
</div>
280+
</div>
281+
</div>
282+
</body>
283+
</html>

0 commit comments

Comments
 (0)