diff --git a/app/src/pages/edit/Row.module.css b/app/src/pages/edit/Row.module.css index 1a11994d1..7c014677d 100644 --- 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 index 8760d3a4f..2413aac71 100644 --- 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) { {edited ? 1 : reviews + Number(upvoted)} - {start && end && ( - - )} +
+ {translationWarning && ( + + )} + + {start && end && ( + + )} +
{/* 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 */}