Refine app update prompt copy

Author: coder13

src/components/AppUpdatePrompt/AppUpdatePrompt.test.tsx

@@ -14,10 +14,9 @@ describe('AppUpdatePrompt', () => {
     const onUpdate = jest.fn();
 
     const messages: Record<string, string> = {
-      'appUpdate.title': 'Update available',
-      'appUpdate.description':
-        'A new version of the app is ready. Update to load the latest cached files.',
-      'appUpdate.action': 'Update app',
+      'appUpdate.title': 'New version ready',
+      'appUpdate.description': 'Refresh to get the latest fixes and schedule updates.',
+      'appUpdate.action': 'Refresh now',
     };
 
     jest.mocked(useTranslation).mockReturnValue({
@@ -28,9 +27,9 @@ describe('AppUpdatePrompt', () => {
 
     render(<AppUpdatePrompt onUpdate={onUpdate} />);
 
-    expect(screen.getByRole('heading', { name: /update available/i })).toBeVisible();
+    expect(screen.getByRole('heading', { name: /new version ready/i })).toBeVisible();
 
-    await user.click(screen.getByRole('button', { name: /update app/i }));
+    await user.click(screen.getByRole('button', { name: /refresh now/i }));
 
     expect(onUpdate).toHaveBeenCalledTimes(1);
   });

src/components/AppUpdatePrompt/AppUpdatePrompt.tsx

@@ -11,11 +11,11 @@ export function AppUpdatePrompt({ onUpdate }: AppUpdatePromptProps) {
   return (
     <div className="pointer-events-none fixed inset-x-0 bottom-4 z-50 flex justify-center px-4">
       <section className="pointer-events-auto w-full max-w-sm rounded-md border border-primary bg-panel p-4 shadow-lg">
-        <div className="space-y-2">
-          <h2 className="type-subheading">{t('appUpdate.title')}</h2>
-          <p className="type-body-sm text-subtle">{t('appUpdate.description')}</p>
-        </div>
-        <div className="mt-4 flex">
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <h2 className="type-subheading">{t('appUpdate.title')}</h2>
+            <p className="type-body-sm text-subtle">{t('appUpdate.description')}</p>
+          </div>
           <Button className="w-full justify-center" onClick={onUpdate}>
             {t('appUpdate.action')}
           </Button>

src/i18n/en/translation.yaml

@@ -132,9 +132,9 @@ common:
   stage: Stage
   login: 'Login'
 appUpdate:
-  title: 'Update available'
-  description: 'A new version of the app is ready. Update to load the latest cached files.'
-  action: 'Update app'
+  title: 'New version ready'
+  description: 'Refresh to get the latest fixes and schedule updates.'
+  action: 'Refresh now'
 header:
   login: $t(common.login)
   logout: 'Logout'