fix: slight adjustment of confirm form to better convey message on wh…

…at is reviewed and what not (#517)
common-voice · Nov 1, 2021 · 96afece · 96afece
1 parent e83dc4e
commit 96afece
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 45 deletions.
diff --git a/web/locales/en/sentence-collector.ftl b/web/locales/en/sentence-collector.ftl
@@ -198,17 +198,17 @@ sc-confirm-sentences-found =
 sc-confirm-rejected-by-you = { $countOfInvalidated } rejected by you
 sc-confirm-already-reviewed =
     {$countOfReviewed ->
-        [0] -- No sentence is already reviewed.
-        [one] -- 1 sentence is already reviewed. Great job!
-        *[other] -- {$countOfReviewed} sentences are already reviewed. Great job!
+        [0] No sentence is already reviewed.
+        [one] 1 sentence is already reviewed. Great job!
+        *[other] {$countOfReviewed} sentences are already reviewed. Great job!
     }
 sc-confirm-ready =
     {$readyCount ->
-        [0] -- No sentence ready for submission!
-        [one] -- 1 sentence ready for submission!
-        *[other] -- {$readyCount} sentences ready for submission!
+        [0] No sentence ready for submission!
+        [one] 1 sentence ready for submission!
+        *[other] {$readyCount} sentences ready for submission!
     }
-sc-confirm-unreviewed = -- { $countOfUnreviewed } of these sentences are unreviewed.
+sc-confirm-unreviewed = { $countOfUnreviewed } sentences are unreviewed.
     If you want, you can also review your sentences now before submitting them.
 sc-confirm-button-text = Confirm
 sc-confirm-uploading = Sentences are being uploaded. This can take several minutes depending on the number of sentences added. Please do not close this website.
@@ -237,13 +237,13 @@ sc-lang-info-validated =
     {$validatedSentences ->
         [0] No validated sentences.
         [one] 1 validated sentence.
-        *[other] -- {$validatedSentences} validated sentences.
+        *[other] {$validatedSentences} validated sentences.
     }
 sc-lang-info-rejected =
     {$rejectedSentences ->
         [0] No rejected sentences.
         [one] 1 rejected sentence.
-        *[other] -- {$rejectedSentences} rejected sentences.
+        *[other] {$rejectedSentences} rejected sentences.
     }
 
 sc-login-err-failed = Login failed

diff --git a/web/src/components/add.test.tsx b/web/src/components/add.test.tsx
@@ -55,7 +55,7 @@ test('should submit sentences including review', async () => {
     await userEvent.click(screen.getByText('Submit'));
   });
 
-  expect(screen.getByText(/3 of these sentences are unreviewed/)).toBeTruthy();
+  expect(screen.getByText(/3 sentences are unreviewed/)).toBeTruthy();
   await userEvent.click(screen.getByText('Review'));
 
   await waitFor(() => {
@@ -113,7 +113,7 @@ test('should submit sentences including review - with errors', async () => {
     await userEvent.click(screen.getByText('Submit'));
   });
 
-  expect(screen.getByText(/3 of these sentences are unreviewed/)).toBeTruthy();
+  expect(screen.getByText(/3 sentences are unreviewed/)).toBeTruthy();
   await userEvent.click(screen.getByText('Review'));
 
   await waitFor(() => {
@@ -164,7 +164,7 @@ test('should submit sentences including review - with unexpected server response
     await userEvent.click(screen.getByText('Submit'));
   });
 
-  expect(screen.getByText(/3 of these sentences are unreviewed/)).toBeTruthy();
+  expect(screen.getByText(/3 sentences are unreviewed/)).toBeTruthy();
   await userEvent.click(screen.getByText('Review'));
 
   await waitFor(() => {

diff --git a/web/src/components/confirm-form.test.tsx b/web/src/components/confirm-form.test.tsx
@@ -28,9 +28,9 @@ test('should render full form', () => {
   expect(screen.getByText('Confirm New Sentences')).toBeTruthy();
   expect(screen.getByText('3 sentences found.')).toBeTruthy();
   expect(screen.getByText('1 rejected by you')).toBeTruthy();
-  expect(screen.getByText(/-- 2 sentences are already reviewed/)).toBeTruthy(); // already reviewed
+  expect(screen.getByText(/2 sentences are already reviewed/)).toBeTruthy(); // already reviewed
   expect(screen.getByText('2 sentences ready for submission!')).toBeTruthy();
-  expect(screen.getByText(/1 of these sentences are unreviewed/)).toBeTruthy();
+  expect(screen.getByText(/1 sentences are unreviewed/)).toBeTruthy();
   expect(screen.getByText('Confirm')).toBeTruthy();
 });
 
@@ -47,7 +47,7 @@ test('should not render review if none to review', () => {
     />
   );
 
-  expect(screen.queryByText(/of these sentences are unreviewed/)).toBeNull();
+  expect(screen.queryByText(/sentences are unreviewed/)).toBeNull();
 });
 
 test('should not render invalidated if there are none', () => {

diff --git a/web/src/components/confirm-form.tsx b/web/src/components/confirm-form.tsx
@@ -42,40 +42,40 @@ export default function ConfirmForm(props: Props) {
         <p>{`${submitted.length} sentences found.`}</p>
       </Localized>
 
-      {invalidated.length > 0 && (
-        <Localized
-          id="sc-confirm-rejected-by-you"
-          vars={{ countOfInvalidated: invalidated.length }}
-        >
-          <p style={{ color: 'red' }}>{`${invalidated.length} rejected by you`}</p>
-        </Localized>
-      )}
-
-      {validated.length + invalidated.length > 0 && (
-        <Localized id="sc-confirm-already-reviewed" vars={{ countOfReviewed }}>
-          <p>
-            {`-- ${
-              validated.length + invalidated.length
-            } sentences are already reviewed. Great job!`}
-          </p>
-        </Localized>
-      )}
-
       <Localized id="sc-confirm-ready" vars={{ readyCount }}>
-        <p>
-          <strong>{`${readyCount} sentences ready for submission!`}</strong>
-        </p>
+        <strong>{`${readyCount} sentences ready for submission!`}</strong>
       </Localized>
 
-      {unreviewed.length > 0 && (
-        <p>
-          <Localized id="sc-confirm-unreviewed" vars={{ countOfUnreviewed: unreviewed.length }}>
-            {`-- ${unreviewed.length} of these sentences are unreviewed. If you want, you can also review your sentences now before submitting them.`}
+      <ul>
+        {invalidated.length > 0 && (
+          <Localized
+            id="sc-confirm-rejected-by-you"
+            vars={{ countOfInvalidated: invalidated.length }}
+          >
+            <li style={{ color: 'red' }}>{`${invalidated.length} rejected by you`}</li>
+          </Localized>
+        )}
+
+        {validated.length + invalidated.length > 0 && (
+          <Localized id="sc-confirm-already-reviewed" vars={{ countOfReviewed }}>
+            <li>
+              {`${
+                validated.length + invalidated.length
+              } sentences are already reviewed. Great job!`}
+            </li>
           </Localized>
-          &nbsp;
-          <ReviewLink onReview={onReview} sentences={unreviewed} />
-        </p>
-      )}
+        )}
+
+        {unreviewed.length > 0 && (
+          <li>
+            <Localized id="sc-confirm-unreviewed" vars={{ countOfUnreviewed: unreviewed.length }}>
+              {`${unreviewed.length} sentences are unreviewed. If you want, you can also review your sentences now before submitting them.`}
+            </Localized>
+            &nbsp;
+            <ReviewLink onReview={onReview} sentences={unreviewed} />
+          </li>
+        )}
+      </ul>
 
       <section>
         {isUploadingSentences ? (