feat(feedback): stars rating, optional improvements, optional email (#31)

- Replace smiley rating with 1-5 star rating (yellow in light/dark mode)
- Allow skipping step 2 (improvements optional; multi-select unchanged)
- Add optional email field after additional feedback for follow-up
- Improvement chips: mint green focus ring
- Types: FeedbackRequest.email; API: message + Web3Forms email payload
- Tests updated for stars and email; all 23 tests pass

Made-with: Cursor

Author: ewalid

frontend/src/api/client.test.ts

@@ -171,6 +171,24 @@ describe('API Client', () => {
       expect(body.message).toContain('None provided');
     });
 
+    it('includes optional email in message and payload when provided', async () => {
+      vi.mocked(global.fetch).mockResolvedValueOnce({
+        ok: true,
+        json: () => Promise.resolve({ success: true }),
+      } as Response);
+
+      await submitFeedback({
+        rating: 4,
+        improvements: ['Documentation'],
+        email: 'user@example.com',
+      });
+
+      const fetchCall = vi.mocked(global.fetch).mock.calls[0];
+      const body = JSON.parse(fetchCall[1]?.body as string);
+      expect(body.message).toContain('Email: user@example.com');
+      expect(body.email).toBe('user@example.com');
+    });
+
     it('returns success even on Web3Forms error', async () => {
       vi.mocked(global.fetch).mockResolvedValueOnce({
         ok: true,

frontend/src/api/client.ts

@@ -164,7 +164,9 @@ export async function submitFeedback(request: FeedbackRequest): Promise<Feedback
 
 Areas for Improvement: ${improvementsText}
 
-Additional Feedback: ${request.additionalFeedback || 'None provided'}`;
+Additional Feedback: ${request.additionalFeedback || 'None provided'}
+
+Email: ${request.email || 'Not provided'}`;
 
   try {
     const response = await fetch(WEB3FORMS_URL, {
@@ -177,6 +179,7 @@ Additional Feedback: ${request.additionalFeedback || 'None provided'}`;
         subject: `Rosetta Feedback - Rating ${request.rating}/5 (${ratingLabel})`,
         from_name: 'Rosetta Feedback',
         message,
+        ...(request.email && { email: request.email }),
       }),
     });
 

frontend/src/components/features/feedback/Feedback.css

@@ -109,50 +109,44 @@
   color: var(--color-neutral-400);
 }
 
-/* Rating emojis */
-.feedback-rating {
+/* Star rating */
+.feedback-stars {
   display: flex;
   justify-content: center;
-  gap: 0.75rem;
+  align-items: center;
+  gap: 0.5rem;
   margin-top: 1.5rem;
 }
 
-.feedback-emoji {
+.feedback-star {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 3.5rem;
-  height: 3.5rem;
-  background: var(--color-neutral-100);
-  border: 2px solid transparent;
-  border-radius: 50%;
+  padding: 0.25rem;
+  background: transparent;
+  border: none;
+  border-radius: 0.5rem;
   cursor: pointer;
-  transition: all 0.2s;
+  color: #ca8a04;
+  transition: color 0.2s, transform 0.2s;
 }
 
-:root.dark .feedback-emoji {
-  background: var(--color-neutral-700);
+:root.dark .feedback-star {
+  color: #a16207;
 }
 
-.feedback-emoji:hover {
-  transform: scale(1.15);
-  border-color: var(--color-accent-300);
+.feedback-star:hover {
+  color: #eab308;
+  transform: scale(1.1);
 }
 
-.feedback-emoji.selected {
-  border-color: var(--color-accent-500);
-  background: var(--color-accent-100);
-  transform: scale(1.2);
-}
-
-:root.dark .feedback-emoji.selected {
-  background: rgba(16, 185, 129, 0.2);
-  border-color: var(--color-accent-400);
+.feedback-star.filled {
+  color: #eab308;
 }
 
-.feedback-emoji-icon {
-  font-size: 1.75rem;
-  line-height: 1;
+:root.dark .feedback-star:hover,
+:root.dark .feedback-star.filled {
+  color: #facc15;
 }
 
 /* Improvement chips */
@@ -185,6 +179,12 @@
   border-color: var(--color-accent-300);
 }
 
+.feedback-chip:focus {
+  outline: none;
+  border-color: #10b981;
+  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25);
+}
+
 .feedback-chip.selected {
   background: var(--color-accent-100);
   border-color: var(--color-accent-500);
@@ -232,6 +232,58 @@
   box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
 }
 
+/* Optional email field */
+.feedback-email-label {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-neutral-700);
+  margin-bottom: 0.25rem;
+}
+
+:root.dark .feedback-email-label {
+  color: var(--color-neutral-300);
+}
+
+.feedback-email-hint {
+  margin-bottom: 0.5rem;
+  text-align: left;
+  font-size: 0.8125rem;
+}
+
+.feedback-email {
+  width: 100%;
+  padding: 0.75rem 1rem;
+  background: var(--color-neutral-100);
+  border: 1px solid #10b981;
+  border-radius: 0.75rem;
+  font-size: 0.9375rem;
+  font-family: inherit;
+  color: var(--color-neutral-900);
+  margin-bottom: 1.5rem;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+:root.dark .feedback-email {
+  background: rgba(15, 23, 42, 0.5);
+  border: 1px solid #10b981;
+  color: white;
+}
+
+.feedback-email::placeholder {
+  color: var(--color-neutral-400);
+}
+
+:root.dark .feedback-email::placeholder {
+  color: var(--color-neutral-500);
+}
+
+.feedback-email:focus {
+  outline: none;
+  border-color: var(--color-accent-500);
+  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
+}
+
 /* Navigation */
 .feedback-nav {
   display: flex;

frontend/src/components/features/feedback/FeedbackModal.test.tsx

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { FeedbackModal } from './FeedbackModal';
 
@@ -25,25 +25,25 @@ describe('FeedbackModal', () => {
     expect(screen.queryByText('How satisfied are you with Rosetta?')).not.toBeInTheDocument();
   });
 
-  it('shows rating emojis on step 1', () => {
+  it('shows star rating on step 1', () => {
     render(<FeedbackModal isOpen={true} onClose={() => {}} />);
 
-    // Check for emoji buttons (5 ratings)
-    const emojiButtons = screen.getAllByRole('button').filter(
-      btn => btn.classList.contains('feedback-emoji')
+    // Check for star buttons (5 stars)
+    const starButtons = screen.getAllByRole('button').filter(
+      btn => btn.classList.contains('feedback-star')
     );
-    expect(emojiButtons).toHaveLength(5);
+    expect(starButtons).toHaveLength(5);
   });
 
   it('advances to step 2 when rating is selected', async () => {
     const user = userEvent.setup();
     render(<FeedbackModal isOpen={true} onClose={() => {}} />);
 
-    // Click the "Very Satisfied" emoji (last one)
-    const emojiButtons = screen.getAllByRole('button').filter(
-      btn => btn.classList.contains('feedback-emoji')
+    // Click the 5th star (5 out of 5)
+    const starButtons = screen.getAllByRole('button').filter(
+      btn => btn.classList.contains('feedback-star')
     );
-    await user.click(emojiButtons[4]);
+    await user.click(starButtons[4]);
 
     // Wait for step 2 to appear
     await waitFor(() => {
@@ -55,11 +55,11 @@ describe('FeedbackModal', () => {
     const user = userEvent.setup();
     render(<FeedbackModal isOpen={true} onClose={() => {}} />);
 
-    // Select a rating to advance
-    const emojiButtons = screen.getAllByRole('button').filter(
-      btn => btn.classList.contains('feedback-emoji')
+    // Select a rating to advance (3rd star)
+    const starButtons = screen.getAllByRole('button').filter(
+      btn => btn.classList.contains('feedback-star')
     );
-    await user.click(emojiButtons[2]);
+    await user.click(starButtons[2]);
 
     await waitFor(() => {
       expect(screen.getByText('Translation quality')).toBeInTheDocument();
@@ -72,11 +72,11 @@ describe('FeedbackModal', () => {
     const user = userEvent.setup();
     render(<FeedbackModal isOpen={true} onClose={() => {}} />);
 
-    // Select rating
-    const emojiButtons = screen.getAllByRole('button').filter(
-      btn => btn.classList.contains('feedback-emoji')
+    // Select rating (4th star)
+    const starButtons = screen.getAllByRole('button').filter(
+      btn => btn.classList.contains('feedback-star')
     );
-    await user.click(emojiButtons[3]);
+    await user.click(starButtons[3]);
 
     await waitFor(() => {
       expect(screen.getByText('What could we improve?')).toBeInTheDocument();
@@ -96,8 +96,9 @@ describe('FeedbackModal', () => {
     const user = userEvent.setup();
     render(<FeedbackModal isOpen={true} onClose={onClose} />);
 
-    const closeButton = screen.getByRole('button', { name: '' }); // X button has no text
-    await user.click(closeButton);
+    const closeButton = document.querySelector('.feedback-close');
+    expect(closeButton).toBeInTheDocument();
+    await user.click(closeButton!);
 
     expect(onClose).toHaveBeenCalled();
   });
@@ -109,11 +110,11 @@ describe('FeedbackModal', () => {
 
     render(<FeedbackModal isOpen={true} onClose={onClose} />);
 
-    // Step 1: Select rating
-    const emojiButtons = screen.getAllByRole('button').filter(
-      btn => btn.classList.contains('feedback-emoji')
+    // Step 1: Select rating (5th star)
+    const starButtons = screen.getAllByRole('button').filter(
+      btn => btn.classList.contains('feedback-star')
     );
-    await user.click(emojiButtons[4]);
+    await user.click(starButtons[4]);
 
     // Step 2: Select improvements
     await waitFor(() => {
@@ -137,21 +138,46 @@ describe('FeedbackModal', () => {
         rating: 5,
         improvements: ['Translation quality'],
         additionalFeedback: 'Great tool!',
+        email: undefined,
       });
     });
   });
 
+  it('submits feedback with optional email when provided', async () => {
+    const user = userEvent.setup();
+    vi.mocked(submitFeedback).mockResolvedValueOnce({ success: true });
+
+    render(<FeedbackModal isOpen={true} onClose={() => {}} />);
+
+    const starButtons = screen.getAllByRole('button').filter(
+      btn => btn.classList.contains('feedback-star')
+    );
+    await user.click(starButtons[4]);
+    await waitFor(() => screen.getByText('What could we improve?'));
+    await user.click(screen.getByText('Next'));
+    await waitFor(() => screen.getByText('Any additional feedback?'));
+    const emailInput = screen.getByLabelText(/email \(optional\)/i);
+    await user.type(emailInput, 'user@example.com');
+    await user.click(screen.getByText('Submit'));
+
+    await waitFor(() => {
+      expect(submitFeedback).toHaveBeenCalledWith(
+        expect.objectContaining({ email: 'user@example.com' })
+      );
+    });
+  });
+
   it('shows success message after submission', async () => {
     const user = userEvent.setup();
     vi.mocked(submitFeedback).mockResolvedValueOnce({ success: true });
 
     render(<FeedbackModal isOpen={true} onClose={() => {}} />);
 
     // Complete the flow
-    const emojiButtons = screen.getAllByRole('button').filter(
-      btn => btn.classList.contains('feedback-emoji')
+    const starButtons = screen.getAllByRole('button').filter(
+      btn => btn.classList.contains('feedback-star')
     );
-    await user.click(emojiButtons[4]);
+    await user.click(starButtons[4]);
 
     await waitFor(() => screen.getByText('What could we improve?'));
     await user.click(screen.getByText('Speed/Performance'));
@@ -169,11 +195,11 @@ describe('FeedbackModal', () => {
     const user = userEvent.setup();
     render(<FeedbackModal isOpen={true} onClose={() => {}} />);
 
-    // Go to step 2
-    const emojiButtons = screen.getAllByRole('button').filter(
-      btn => btn.classList.contains('feedback-emoji')
+    // Go to step 2 (3rd star)
+    const starButtons = screen.getAllByRole('button').filter(
+      btn => btn.classList.contains('feedback-star')
     );
-    await user.click(emojiButtons[2]);
+    await user.click(starButtons[2]);
 
     await waitFor(() => screen.getByText('What could we improve?'));
     await user.click(screen.getByText('User interface'));