From e1622cdf56512bb60c2eaf6e02ee06d5c1c4720e Mon Sep 17 00:00:00 2001
From: Liam Mulhall <liammulh@gmail.com>
Date: Fri, 3 Feb 2023 12:25:26 -0700
Subject: [PATCH] feat: make inputs textarea, align copy value button

For https://github.com/phetsims/rosetta/issues/349. The original mission
for this commit was to make the inputs for long English strings be text
areas, but I think making them all text areas is a more elegant
solution.

I also aligned the copy value button and the text area using Flexbox
since it looked even weirder with the old styling and the textareas.
---
 src/client/components/TranslationFormRow.jsx | 21 +++++++--------
 src/client/styles/translation-form.css       | 28 ++++++++++++++++++++
 2 files changed, 38 insertions(+), 11 deletions(-)
 create mode 100644 src/client/styles/translation-form.css

diff --git a/src/client/components/TranslationFormRow.jsx b/src/client/components/TranslationFormRow.jsx
index 1d972829..972f9c8b 100644
--- a/src/client/components/TranslationFormRow.jsx
+++ b/src/client/components/TranslationFormRow.jsx
@@ -6,13 +6,16 @@
  * @author Liam Mulhall <liammulh@gmail.com>
  */
 
+// Disable this rule so we can import stylesheets.
+/* eslint-disable bad-text */
+
 import { useField, useFormikContext } from 'formik';
 import React, { useContext } from 'react';
 import InputErrorMessage from './InputErrorMessage.jsx';
 import { LocaleInfoContext } from './RosettaRoutes.jsx';
 import boxArrowInRight from '../img/box-arrow-in-right.svg';
-// eslint-disable-next-line bad-text
 import '../styles/table.css';
+import '../styles/translation-form.css';
 
 /**
  * This component is a row in the translation table. It has the string key, the English string, and an input for
@@ -39,12 +42,6 @@ const TranslationFormRow = props => {
     setFieldValue( field.name, props.englishString );
   };
 
-  const buttonStyle = {
-    border: '0.5px solid',
-    marginRight: '6px',
-    padding: '1px 3px 1px 2px'
-  };
-
   return (
     <tr>
       <td>{props.stringKey}</td>
@@ -52,10 +49,12 @@ const TranslationFormRow = props => {
 
       {/* Use the spread operator to give the input each of the props in the field object. */}
       <td>
-        <button style={buttonStyle} className='btn btn-light' type='button' onClick={handleCopyButtonClick}>
-          <img src={boxArrowInRight} alt='copy English value to input icon'/>
-        </button>
-        <input {...field} style={inputStyle} dir={direction}/>
+        <div className='copy-value-and-input-container'>
+          <button className='copy-value-button btn btn-light' type='button' onClick={handleCopyButtonClick}>
+            <img src={boxArrowInRight} alt='copy English value to input icon'/>
+          </button>
+          <textarea {...field} style={inputStyle} dir={direction}/>
+        </div>
         <InputErrorMessage fieldKey={props.keyWithoutDots}/>
       </td>
     </tr>
diff --git a/src/client/styles/translation-form.css b/src/client/styles/translation-form.css
new file mode 100644
index 00000000..647b6954
--- /dev/null
+++ b/src/client/styles/translation-form.css
@@ -0,0 +1,28 @@
+:root {
+  --default-height: 2em;
+}
+
+textarea {
+  min-height: var(--default-height);
+  height: var(--default-height);
+}
+
+.copy-value-button {
+  border: 1px solid;
+  min-height: var(--default-height);
+  height: var(--default-height);
+}
+
+.copy-value-button:hover {
+
+  /* By default Bootstrap makes the border disappear on hover,
+  so we fix that here. */
+  border: 1px solid;
+}
+
+.copy-value-and-input-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 1em;
+}
\ No newline at end of file