css

Author: gildesmarais

frontend/.astro/types.d.ts

@@ -1,2 +1,2 @@
 /// <reference types="astro/client" />
-/// <reference path="content.d.ts" />
+/// <reference path="content.d.ts" />

frontend/src/__tests__/App.contract.test.tsx

@@ -42,8 +42,10 @@ describe('App contract', () => {
     fireEvent.click(screen.getByRole('button', { name: 'Convert' }));
 
     await waitFor(() => {
-      expect(screen.getByText('Feed Generated Successfully!')).toBeInTheDocument();
-      expect(screen.getByText('Your RSS feed is ready to use')).toBeInTheDocument();
+      expect(screen.getByText('Your RSS feed is live!')).toBeInTheDocument();
+      expect(
+        screen.getByText('Drop it straight into your reader or explore the preview without leaving this page.')
+      ).toBeInTheDocument();
     });
   });
 });

frontend/src/__tests__/ResultDisplay.test.tsx

@@ -22,24 +22,24 @@ describe('ResultDisplay', () => {
     render(<ResultDisplay result={mockResult} onClose={mockOnClose} />);
 
     expect(screen.getByText('🎉')).toBeInTheDocument();
-    expect(screen.getByText('Feed Generated Successfully!')).toBeInTheDocument();
-    expect(screen.getByText('Your RSS feed is ready to use')).toBeInTheDocument();
+    expect(screen.getByText('Your RSS feed is live!')).toBeInTheDocument();
+    expect(screen.getByText('Drop it straight into your reader or explore the preview without leaving this page.')).toBeInTheDocument();
   });
 
-  it('should call onClose when close button is clicked', () => {
+  it('should call onClose when convert-another button is clicked', () => {
     render(<ResultDisplay result={mockResult} onClose={mockOnClose} />);
 
-    const closeButton = screen.getByText('Close');
-    fireEvent.click(closeButton);
+    const resetButton = screen.getByRole('button', { name: 'Convert another website' });
+    fireEvent.click(resetButton);
 
     expect(mockOnClose).toHaveBeenCalled();
   });
 
   it('should copy feed URL to clipboard when copy button is clicked', async () => {
     render(<ResultDisplay result={mockResult} onClose={mockOnClose} />);
 
-    const copyButton = screen.getByText('📋');
-    fireEvent.click(copyButton);
+    const copyLinkButton = screen.getByRole('button', { name: 'Copy feed link' });
+    fireEvent.click(copyLinkButton);
 
     await waitFor(() => {
       expect(navigator.clipboard.writeText).toHaveBeenCalledWith('feed:https://example.com/feed.xml');

frontend/src/components/App.module.css

@@ -0,0 +1,28 @@
+.loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  min-height: 40vh;
+  color: var(--sl-color-text);
+}
+
+.loadingSpinner {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 50%;
+  border: 3px solid var(--sl-color-hairline);
+  border-top-color: var(--sl-color-accent);
+  animation: app-spin 0.8s linear infinite;
+}
+
+@keyframes app-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}