Change the style for translation length warnings (#228)

3b1b · Feb 29, 2024 · f70b63c · f70b63c
1 parent c1437ff
commit f70b63c
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 36 deletions.
diff --git a/app/src/pages/edit/Row.module.css b/app/src/pages/edit/Row.module.css
@@ -14,10 +14,17 @@
 .actions {
   display: flex;
   flex-wrap: wrap;
-  align-items: center;
+  align-items: last baseline;
   gap: 20px;
 }
 
+.playWarningWrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 15px;
+}
+
 .edit {
   box-sizing: content-box;
   width: 50vw;
@@ -41,7 +48,13 @@
 
 .warning {
   border-style: dashed;
-  background: var(--error-light);
+  border-color: var(--error);
+  border-width: 2px;
+}
+
+.warningTriangle {
+  marginLeft: '8px';
+  color: var(--error);
 }
 
 .legacy {

diff --git a/app/src/pages/edit/Row.tsx b/app/src/pages/edit/Row.tsx
@@ -7,6 +7,7 @@ import {
   FaStop,
   FaThumbsUp,
 } from "react-icons/fa6";
+import { FaExclamationTriangle } from 'react-icons/fa';
 import { Link, useParams } from "react-router-dom";
 import classNames from "classnames";
 import { useAtom, useAtomValue } from "jotai";
@@ -108,30 +109,39 @@ function Row({ index, entries }: Props) {
           <span>{edited ? 1 : reviews + Number(upvoted)}</span>
         </button>
 
-        {start && end && (
-          <button
-            className={classes.action}
-            onClick={() => {
-              const header = document.querySelector("header")!;
-
-              if (getPlaying) {
-                stopVideo();
-                header.style.height = "";
-              } else {
-                // Add a little breathing room at the end
-                playSegment(start, end + 0.5);
-
-                /** expand header */
-                const expand = innerHeight / 3;
-                if (parseFloat(window.getComputedStyle(header).height) < expand)
-                  header.style.height = expand + "px";
-              }
-            }}
-            data-tooltip={`Play video at this timestamp<br/>(${formatTime(start)} - ${formatTime(end)})`}
-          >
-            {getPlaying ? <FaStop /> : <FaPlay />}
-          </button>
-        )}
+        <div className={classes.playWarningWrapper}>
+          {translationWarning && (
+            <FaExclamationTriangle 
+              className={classes.warningTriangle}
+              data-tooltip="This translation may be too long to fit in the time slot"
+            />
+          )}
+
+          {start && end && (
+            <button
+              className={classes.action}
+              onClick={() => {
+                const header = document.querySelector("header")!;
+
+                if (getPlaying) {
+                  stopVideo();
+                  header.style.height = "";
+                } else {
+                  // Add a little breathing room at the end
+                  playSegment(start, end + 0.5);
+
+                  /** expand header */
+                  const expand = innerHeight / 3;
+                  if (parseFloat(window.getComputedStyle(header).height) < expand)
+                    header.style.height = expand + "px";
+                }
+              }}
+              data-tooltip={`Play video at this timestamp<br/>(${formatTime(start)} - ${formatTime(end)})`}
+            >
+              {getPlaying ? <FaStop /> : <FaPlay />}
+            </button>
+          )}
+        </div>
       </div>
 
       {/* translation edit textbox */}
@@ -142,11 +152,7 @@ function Row({ index, entries }: Props) {
         )}
         value={currentTranslation}
         onChange={(value) => setEntry({ currentTranslation: value })}
-        data-tooltip={
-          translationWarning
-            ? "This translation is starting to become too long to fit in the time slot"
-            : "Edit translated text"
-        }
+        data-tooltip={"Edit translated text"}
       />
 
       {/* original english textbox */}
@@ -157,11 +163,7 @@ function Row({ index, entries }: Props) {
         )}
         value={entry.currentOriginal}
         onChange={(value) => setEntry({ currentOriginal: value })}
-        data-tooltip={
-          translationWarning
-            ? "This text is starting to become too long to fit in the time slot"
-            : "Original English text. If you see a significant problem, click to edit."
-        }
+        data-tooltip={"Original English text. If you see a significant problem, click to edit."}
       />
 
       {/* secondary actions */}