wip(lab): Migrated translation to next-i18next

packages/freesewing.shared/components/workbench/inputs/design-option-list.js

@@ -12,7 +12,6 @@ const DesignOptionList = props => {
   const [value, setValue] = useState(val)
 
   const handleChange = (newVal) => {
-    console.log('setting', newVal)
     if (newVal === dflt) reset()
     else {
       setValue(newVal)
@@ -47,7 +46,7 @@ const DesignOptionList = props => {
               `}>
                 <>&deg;</>
               </span>
-              {t(`options.${props.pattern.config.name}.${props.option}.options.${choice}`)}
+              {props.ot(`${props.option}.o.${choice}`)}
             </button>
           ))}
         </div>

packages/freesewing.shared/components/workbench/inputs/design-option-pct-deg.js

@@ -52,7 +52,7 @@ const DesignOptionPctDeg = props => {
   return (
     <div className="py-4 mx-6 border-l-2 pl-2">
       <p className="m-0 p-0 px-2 mb-2 text-neutral-content opacity-60 italic">
-        {t(`options:${props.pattern.config.name}.${props.option}.description`, props.app.locale)}
+        {props.ot(`${props.option}.d`)}
       </p>
       <div className="flex flex-row justify-between">
         {editOption

packages/freesewing.shared/components/workbench/inputs/measurement.js

@@ -12,7 +12,7 @@ import { useTranslation } from 'next-i18next'
 const MeasurementInput = ({ m, gist, app, updateMeasurements }) => {
   const { t } = useTranslation(['app', 'measurements'])
   const prefix = (app.site === 'org') ? '' : 'https://freesewing.org'
-  const title = t(m)
+  const title = t(`measurements:${m}`)
   const isValid = input => {
     if (input === '') return ''
     return !isNaN(input)
@@ -62,10 +62,23 @@ const MeasurementInput = ({ m, gist, app, updateMeasurements }) => {
             input input-lg input-bordered grow text-base-content
             ${valid === false && 'input-error'}
             ${valid === true && 'input-success'}
+            border-r-0
           `}
           value={val}
           onChange={update}
         />
+        <span role="img" className={`bg-transparent border-y
+          ${valid === false && 'border-error text-neutral-content'}
+          ${valid === true && 'border-success text-neutral-content'}
+          ${valid === '' && 'border-base-200 text-base-content'}
+       `}>
+          {valid === ''
+            ? ''
+            : valid
+            ? '👍'
+            : '🤔'
+          }
+        </span>
         <span className={`
           ${valid === false && 'bg-error text-neutral-content'}
           ${valid === true && 'bg-success text-neutral-content'}
@@ -74,17 +87,6 @@ const MeasurementInput = ({ m, gist, app, updateMeasurements }) => {
           cm
         </span>
       </label>
-      <label className="label">
-        <span className="label-text-alt">
-          {valid === ''
-            ? ''
-            : valid
-            ? 'Looks good'
-            : 'Invalid'
-          }
-          {val}
-        </span>
-      </label>
     </div>
   )
 }