UX and wording improvements (#10)

* Auto reload ProceedingLandingPage while analysis is running * Improve send notice form * Explain why 'The developer has not responded' cannot be chosen yet * AskComplaintType: Swap buttons * Restructure ReadyToSend slightly to make it clearer * Wording improvements * Explanation texts by Caro
tweaselORG · Oct 17, 2024 · d7ee0c2 · d7ee0c2
1 parent 6f62735
commit d7ee0c2
Show file tree

Hide file tree

Showing 14 changed files with 195 additions and 117 deletions.
diff --git a/src/components/ComplaintLandingPage/AskComplaintType.astro b/src/components/ComplaintLandingPage/AskComplaintType.astro
@@ -24,7 +24,7 @@ const { token } = Astro.props;
     <div class="col66 col100-mobile">
         <div class="radio-group radio-group-vertical radio-group-padded">
             {
-                (['informal', 'formal'] as const).map((type) => (
+                (['formal', 'informal'] as const).map((type) => (
                     <form class="radio-wrapper" method="POST" action={absUrl(`/p/${token}/complain/askComplaintType`)}>
                         <input type="hidden" name="answer" value={type} />
                         <button type="submit" class="radio-label">

diff --git a/src/components/ComplaintLandingPage/AskUserNetworkActivity.astro b/src/components/ComplaintLandingPage/AskUserNetworkActivity.astro
@@ -20,6 +20,8 @@ const { token, platform } = Astro.props;
     <form action={absUrl(`/p/${token}/complain/askUserNetworkActivity`)} enctype="multipart/form-data" method="post">
         <label for="upload" class="sr-only">{t('complaint-landing-askUserNetworkActivity', 'choose-file')}</label>
         <input type="file" id="upload" name="upload" accept={platform === 'android' ? '.csv' : '.ndjson'} required />
-        <button type="submit">{t('complaint-landing-askUserNetworkActivity', 'upload')}</button>
+        <button class="button button-primary button-small" type="submit">
+            {t('complaint-landing-askUserNetworkActivity', 'upload')}
+        </button>
     </form>
 </Base>
diff --git a/src/components/ComplaintLandingPage/ReadyToSend.astro b/src/components/ComplaintLandingPage/ReadyToSend.astro
@@ -60,11 +60,11 @@ const userNetworkActivityJwt = await makeAttachmentJwt({
         </div>
 
         <fieldset class="label-only-fieldset" style="margin-bottom: 1em;">
-            <legend>{t('complaint-landing-readyToSend', 'agree-to-unencrypted-communication')}</legend>
+            <legend><TextRaw scope="complaint-landing-readyToSend" id="agree-to-unencrypted-communication" /></legend>
 
             <div class="radio-group">
                 {
-                    (['yes', 'no'] as const).map((a) => (
+                    (['yes', 'no-letter'] as const).map((a) => (
                         <div class="radio-wrapper">
                             <input
                                 id={`agree-to-unencrypted-communication-${a}`}
@@ -75,7 +75,7 @@ const userNetworkActivityJwt = await makeAttachmentJwt({
                                 required
                             />
                             <label class="radio-label" for={`agree-to-unencrypted-communication-${a}`}>
-                                {t('common', a)}
+                                {t('complaint-landing-readyToSend', a)}
                             </label>
                         </div>
                     ))
@@ -93,35 +93,9 @@ const userNetworkActivityJwt = await makeAttachmentJwt({
 
     <hr />
 
-    <p><TextRaw scope="complaint-landing-readyToSend" id="send-explanation" /></p>
-
-    <h2>{t('complaint-landing-readyToSend', 'attachments')}</h2>
-
-    <ul>
-        <li>
-            <a href={absUrl(`/p/${token}/attachment/second-report`)}>
-                {t('complaint-landing-readyToSend', 'technical-report')}
-            </a>
-        </li>
-        <li>
-            <a href={absUrl(`/p/${token}/attachment/second-har`)}>
-                {t('complaint-landing-readyToSend', 'traffic-recording')}
-            </a>
-        </li>
-        <li>
-            <a href={absUrl(`/p/${token}/attachment/developer-communication`, { jwt: devCommunicationJwt })}>
-                {t('complaint-landing-readyToSend', 'developer-communication')}
-            </a>
-        </li>
-        <li>
-            <a href={absUrl(`/p/${token}/attachment/user-network-activity`, { jwt: userNetworkActivityJwt })}>
-                {t('complaint-landing-readyToSend', `user-network-activity-${platform}`)}
-            </a>
-        </li>
-    </ul>
+    <p>{t('complaint-landing-readyToSend', 'send-explanation')}</p>
 
     <h2>{t('complaint-landing-readyToSend', 'dpa-contact-details')}</h2>
-
     <p>{t('complaint-landing-readyToSend', 'dpa-contact-details-explanation')}</p>
 
     <div class="col40 col100-mobile">
@@ -161,6 +135,33 @@ const userNetworkActivityJwt = await makeAttachmentJwt({
     </div>
     <div class="clearfix"></div>
 
+    <h2>{t('complaint-landing-readyToSend', 'attachments')}</h2>
+
+    <div class="box box-warning">{t('complaint-landing-readyToSend', 'attachment-note')}</div>
+
+    <ul>
+        <li>
+            <a href={absUrl(`/p/${token}/attachment/second-report`)}>
+                {t('complaint-landing-readyToSend', 'technical-report')}
+            </a>
+        </li>
+        <li>
+            <a href={absUrl(`/p/${token}/attachment/second-har`)}>
+                {t('complaint-landing-readyToSend', 'traffic-recording')}
+            </a>
+        </li>
+        <li>
+            <a href={absUrl(`/p/${token}/attachment/developer-communication`, { jwt: devCommunicationJwt })}>
+                {t('complaint-landing-readyToSend', 'developer-communication')}
+            </a>
+        </li>
+        <li>
+            <a href={absUrl(`/p/${token}/attachment/user-network-activity`, { jwt: userNetworkActivityJwt })}>
+                {t('complaint-landing-readyToSend', `user-network-activity-${platform}`)}
+            </a>
+        </li>
+    </ul>
+
     <form class="radio-wrapper" method="POST" action={absUrl(`/p/${token}/complain/sent`)} style="margin-top: 1em;">
         <button type="submit" class="button button-primary">
             {t('complaint-landing-readyToSend', 'complaint-sent')}

diff --git a/src/components/MessageUploader.astro b/src/components/MessageUploader.astro
@@ -10,5 +10,5 @@ interface Props {
 <form action={absUrl(`/p/${Astro.props.token}/upload`)} enctype="multipart/form-data" method="post">
     <label for="upload" class="sr-only">{t('send-notice', 'choose-file')}</label>
     <input type="file" id="upload" name="upload" accept=".pdf,.eml" required />
-    <button type="submit">{t('send-notice', 'upload')}</button>
+    <button class="button button-primary button-small" type="submit">{t('send-notice', 'upload')}</button>
 </form>
diff --git a/src/components/ProceedingLandingPage/ComplaintSent.astro b/src/components/ProceedingLandingPage/ComplaintSent.astro
@@ -1,6 +1,7 @@
 ---
 import { t } from '../../i18n/server';
 import Base from '../../layouts/base.astro';
+import TextRaw from '../TextRaw.astro';
 
 interface Props {
     complaintType: 'formal' | 'informal';
@@ -10,5 +11,5 @@ const { complaintType } = Astro.props;
 ---
 
 <Base title={t('proceeding-landing-complaintSent', 'heading')}>
-    {t('proceeding-landing-complaintSent', `explanation-${complaintType}`)}
+    <TextRaw scope="proceeding-landing-complaintSent" id={`explanation-${complaintType}`} />
 </Base>
diff --git a/src/components/ProceedingLandingPage/InitialAnalysisFoundNothing.astro b/src/components/ProceedingLandingPage/InitialAnalysisFoundNothing.astro
@@ -32,7 +32,5 @@ if (!proceeding) throw new Error('This should never happen.');
 
     <h2>{t('proceeding-landing-initialAnalysisFoundNothing', `what-heading`)}</h2>
 
-    <p>
-        {t('proceeding-landing-initialAnalysisFoundNothing', `what-explanation`)}
-    </p>
+    <TextRaw scope="proceeding-landing-initialAnalysisFoundNothing" id="what-explanation" />
 </Base>
diff --git a/src/components/ProceedingLandingPage/NeedsInitialAnalysis.astro b/src/components/ProceedingLandingPage/NeedsInitialAnalysis.astro
@@ -15,6 +15,8 @@ const tokenUrl = `/p/${token}`;
 ---
 
 <Base title={t('proceeding-landing-needsInitialAnalysis', `heading`)}>
+    <meta slot="head" http-equiv="refresh" content="60" />
+
     <LoadingIndicator shown={true} style="margin: 50px 0;" />
 
     <TextRaw scope="proceeding-landing-needsInitialAnalysis" id="explanation" />

diff --git a/src/components/ProceedingLandingPage/NeedsSecondAnalysis.astro b/src/components/ProceedingLandingPage/NeedsSecondAnalysis.astro
@@ -15,6 +15,8 @@ const tokenUrl = `/p/${token}`;
 ---
 
 <Base title={t('proceeding-landing-needsSecondAnalysis', `heading`)}>
+    <meta slot="head" http-equiv="refresh" content="60" />
+
     <LoadingIndicator shown={true} style="margin: 50px 0;" />
 
     <TextRaw scope="proceeding-landing-needsSecondAnalysis" id="explanation" />