From b9ead1c402e87537523825a08a9d037870eed84b Mon Sep 17 00:00:00 2001
From: Evangeline Ireland <eireland@concord.org>
Date: Thu, 11 Jul 2024 08:33:34 -0700
Subject: [PATCH] 187810830 edit attr prop modal tuneup (#1336)

* Updates modals to have a gray background and inputs have white background.

* Capitalizes edit atrribute form labels

* Tunes up edit attribute properties modal styling

* Adds default button color

* Adds attribute icon to eidt attribute modal

* Tunes up formula modal styling

* Closes the edit attribute modal and applies the changes when user types "Enter" in the inputs or text area.

* Makes input fields more responsive

* Handle Escape key down
---
 v3/src/assets/icons/attribute-icon.svg        |  10 ++
 .../attribute-menu/attribute-menu.scss        |  27 ++++
 .../edit-attribute-properties-modal.tsx       | 140 ++++++++++--------
 .../attribute-menu/edit-formula-modal.tsx     |  32 ++--
 v3/src/components/codap-modal.scss            |  21 ++-
 v3/src/utilities/translation/lang/en-US.json5 |  14 +-
 v3/src/utilities/translation/lang/es.json     |  14 +-
 v3/src/utilities/translation/lang/nb.json     |  16 +-
 v3/src/utilities/translation/lang/nn.json     |  16 +-
 v3/src/utilities/translation/lang/pt-BR.json  |  16 +-
 v3/src/utilities/translation/lang/tr.json     |  16 +-
 11 files changed, 202 insertions(+), 120 deletions(-)
 create mode 100644 v3/src/assets/icons/attribute-icon.svg
 create mode 100644 v3/src/components/case-table/attribute-menu/attribute-menu.scss

diff --git a/v3/src/assets/icons/attribute-icon.svg b/v3/src/assets/icons/attribute-icon.svg
new file mode 100644
index 0000000000..0cf49c3455
--- /dev/null
+++ b/v3/src/assets/icons/attribute-icon.svg
@@ -0,0 +1,10 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="22" height="23" viewBox="0, 0, 108, 83">
+  <g id="Layer_1" transform="translate(-323, -463)">
+    <path d="M333.5,468.5 L421.5,468.5 C424.261,468.5 426.5,470.739 426.5,473.5 L426.5,536.5 C426.5,539.261 424.261,541.5 421.5,541.5 L333.5,541.5 C330.739,541.5 328.5,539.261 328.5,536.5 L328.5,473.5 C328.5,470.739 330.739,468.5 333.5,468.5 z" fill-opacity="0" stroke="#ffffff" stroke-width="5"/>
+    <g>
+      <path d="M426.5,468.5 L426.5,495.167 L398.5,468.5 z" fill="#ffffff"/>
+      <path d="M426.5,468.5 L426.5,495.167 L398.5,468.5 z" fill-opacity="0" stroke="#ffffff" stroke-width="5"/>
+    </g>
+    <path d="M339.167,503.5 C351.389,522.356 363.611,484.644 375.833,503.5 C388.056,522.356 400.278,484.644 412.5,503.5" fill-opacity="0" stroke="#ffffff" stroke-width="5"/>
+  </g>
+</svg>
diff --git a/v3/src/components/case-table/attribute-menu/attribute-menu.scss b/v3/src/components/case-table/attribute-menu/attribute-menu.scss
new file mode 100644
index 0000000000..075167de06
--- /dev/null
+++ b/v3/src/components/case-table/attribute-menu/attribute-menu.scss
@@ -0,0 +1,27 @@
+// Edit Attribute Modal Styles
+.edit-attribute-form-row {
+  display: flex !important;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+
+  input, .chakra-select__wrapper {
+    margin-left: 10px;
+  }
+  input {
+    padding: 0 8px;
+  }
+}
+.edit-attribute-form-row.editable {
+  justify-content: flex-start;
+  .chakra-radio-group {
+    margin-left: 10px;
+  }
+}
+
+// Formula Editor Styles
+.formula-form-control {
+  input {
+    max-width: 270px;
+  }
+}
diff --git a/v3/src/components/case-table/attribute-menu/edit-attribute-properties-modal.tsx b/v3/src/components/case-table/attribute-menu/edit-attribute-properties-modal.tsx
index de1adde7a7..23122de3af 100644
--- a/v3/src/components/case-table/attribute-menu/edit-attribute-properties-modal.tsx
+++ b/v3/src/components/case-table/attribute-menu/edit-attribute-properties-modal.tsx
@@ -7,6 +7,9 @@ import { updateAttributesNotification } from "../../../models/data/data-set-noti
 import { uniqueName } from "../../../utilities/js-utils"
 import { t } from "../../../utilities/translation/translate"
 import { CodapModal } from "../../codap-modal"
+import AttributeIcon from "../../../assets/icons/attribute-icon.svg"
+
+import "./attribute-menu.scss"
 
 // for use in menus of attribute types
 const selectableAttributeTypes = ["none", ...attributeTypes] as const
@@ -78,90 +81,105 @@ export const EditAttributePropertiesModal = ({ attributeId, isOpen, onClose }: I
     onClose()
   }
 
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    e.stopPropagation()
+    if (e.key === "Escape") {
+      closeModal()
+    }
+    if (e.key === "Enter") {
+      applyChanges()
+    }
+  }
+
   const buttons = [
     {
       label: t("DG.AttrFormView.cancelBtnTitle"), tooltip: t("DG.AttrFormView.cancelBtnTooltip"), onClick: closeModal
     },
-    { label: t("DG.AttrFormView.applyBtnTitle"), onClick: applyChanges }
+    { label: t("DG.AttrFormView.applyBtnTitle"), onClick: applyChanges, default: true }
   ]
 
   return (
     <CodapModal
       isOpen={isOpen}
       onClose={closeModal}
-      modalWidth={"350px"}
+      modalWidth={"265px"}
+      modalHeight={"300px"}
     >
       <ModalHeader h="30" className="codap-modal-header" fontSize="md" data-testid="codap-modal-header">
-        <div className="codap-modal-icon-container" />
+        <div className="codap-modal-icon-container">
+          <AttributeIcon className="codap-modal-icon" />
+        </div>
         <div className="codap-header-title">{t("DG.TableController.attributeEditor.title")}</div>
         <ModalCloseButton onClick={closeModal} data-testid="modal-close-button"/>
       </ModalHeader>
       <ModalBody>
-      <FormControl display="flex" flexDirection="column">
-        <FormLabel display="flex" flexDirection="row">{t("DG.CaseTable.attributeEditor.name")}
-          <Input size="xs" ml={5} placeholder="attribute" value={attributeName} onFocus={(e) => e.target.select()}
-                onChange={event => setAttributeName(event.target.value)} data-testid="attr-name-input"
-                onKeyDown={(e) => e.stopPropagation()}
-          />
-        </FormLabel>
-        <FormLabel>{t("DG.CaseTable.attributeEditor.description")}
-          <Textarea size="xs" placeholder="Describe the attribute" value={description}
-            onFocus={(e) => e.target.select()} onKeyDown={(e) => e.stopPropagation()}
-            onChange={event => setDescription(event.target.value)} data-testid="attr-description-input"
-          />
-        </FormLabel>
-        <FormLabel display="flex" flexDirection="row" mr={5}>{t("DG.CaseTable.attributeEditor.type")}
-          <Select size="xs" ml={5} value={userType} data-testid="attr-type-select"
-              onChange={(e) => setUserType(e.target.value as AttributeType)}>
-            {selectableAttributeTypes.map(aType => {
-              return (<option key={aType} value={aType} data-testid="attr-type-option">
-                        {t(`DG.CaseTable.attribute.type.${aType}`)}
-                      </option>)
-            })}
-          </Select>
-        </FormLabel>
-        <FormLabel display="flex" flexDirection="row">{t("DG.CaseTable.attributeEditor.unit")}
-          <Input size="xs" placeholder="unit" ml={5} value={units} onFocus={(e) => e.target.select()}
-            onChange={event => setUnits(event.target.value)} data-testid="attr-unit-input"
-            onKeyDown={(e) => e.stopPropagation()}
-          />
-        </FormLabel>
-        <FormLabel display="flex" flexDirection="row" mr={5}>{t("DG.CaseTable.attributeEditor.precision")}
-          <Select size="xs" ml={5} value={precision} data-testid="attr-precision-select"
-              onChange={(e) => setPrecision(e.target.value)}>
-            <option value={""}></option>
-            <option value={"0"} data-testid="attr-precision-option">0</option>
-            <option value={"1"} data-testid="attr-precision-option">1</option>
-            <option value={"2"} data-testid="attr-precision-option">2</option>
-            <option value={"3"} data-testid="attr-precision-option">3</option>
-            <option value={"4"} data-testid="attr-precision-option">4</option>
-            <option value={"5"} data-testid="attr-precision-option">5</option>
-            <option value={"6"} data-testid="attr-precision-option">6</option>
-            <option value={"7"} data-testid="attr-precision-option">7</option>
-            <option value={"8"} data-testid="attr-precision-option">8</option>
-            <option value={"9"} data-testid="attr-precision-option">9</option>
-          </Select>
-        </FormLabel>
-        <FormLabel display="flex" flexDirection="row">{t("DG.CaseTable.attributeEditor.editable")}
-          <RadioGroup value={editable} ml={5} data-testid="attr-editable-radio"
-            onChange={(value) => setEditable(value as YesNoValue)}
-            onKeyDown={(e) => e.stopPropagation()}>
-            <HStack>
-              <Radio value="yes">{t("V3.general.yes")}</Radio>
-              <Radio value="no">{t("V3.general.no")}</Radio>
-            </HStack>
-          </RadioGroup>
-        </FormLabel>
-      </FormControl>
+        <FormControl display="flex" flexDirection="column">
+          <FormLabel className="edit-attribute-form-row">
+            {t("DG.CaseTable.attributeEditor.name")}
+            <Input size="xs" ml={5} placeholder="attribute" value={attributeName} onFocus={(e) => e.target.select()}
+                  onChange={event => setAttributeName(event.target.value)} data-testid="attr-name-input"
+                  onKeyDown={handleKeyDown}
+            />
+          </FormLabel>
+          <FormLabel>{t("DG.CaseTable.attributeEditor.description")}
+            <Textarea size="xs" placeholder="Describe the attribute" value={description}
+              onFocus={(e) => e.target.select()} onKeyDown={handleKeyDown}
+              onChange={event => setDescription(event.target.value)} data-testid="attr-description-input"
+            />
+          </FormLabel>
+          <FormLabel mr={5} className="edit-attribute-form-row">{t("DG.CaseTable.attributeEditor.type")}
+            <Select size="xs" ml={5} value={userType} data-testid="attr-type-select"
+                onChange={(e) => setUserType(e.target.value as AttributeType)}>
+              {selectableAttributeTypes.map(aType => {
+                return (<option key={aType} value={aType} data-testid="attr-type-option">
+                          {t(`DG.CaseTable.attribute.type.${aType}`)}
+                        </option>)
+              })}
+            </Select>
+          </FormLabel>
+          <FormLabel className="edit-attribute-form-row">{t("DG.CaseTable.attributeEditor.unit")}
+            <Input size="xs" placeholder="unit" ml={5} value={units} onFocus={(e) => e.target.select()}
+              onChange={event => setUnits(event.target.value)} data-testid="attr-unit-input"
+              onKeyDown={handleKeyDown}
+            />
+          </FormLabel>
+          <FormLabel className="edit-attribute-form-row" mr={5}>{t("DG.CaseTable.attributeEditor.precision")}
+            <Select size="xs" ml={5} value={precision} data-testid="attr-precision-select"
+                onChange={(e) => setPrecision(e.target.value)}>
+              <option value={""}></option>
+              <option value={"0"} data-testid="attr-precision-option">0</option>
+              <option value={"1"} data-testid="attr-precision-option">1</option>
+              <option value={"2"} data-testid="attr-precision-option">2</option>
+              <option value={"3"} data-testid="attr-precision-option">3</option>
+              <option value={"4"} data-testid="attr-precision-option">4</option>
+              <option value={"5"} data-testid="attr-precision-option">5</option>
+              <option value={"6"} data-testid="attr-precision-option">6</option>
+              <option value={"7"} data-testid="attr-precision-option">7</option>
+              <option value={"8"} data-testid="attr-precision-option">8</option>
+              <option value={"9"} data-testid="attr-precision-option">9</option>
+            </Select>
+          </FormLabel>
+          <FormLabel className="edit-attribute-form-row editable">{t("DG.CaseTable.attributeEditor.editable")}
+            <RadioGroup value={editable} ml={5} data-testid="attr-editable-radio"
+              onChange={(value) => setEditable(value as YesNoValue)}
+              onKeyDown={handleKeyDown}>
+              <HStack>
+                <Radio value="yes">{t("V3.general.yes")}</Radio>
+                <Radio value="no">{t("V3.general.no")}</Radio>
+              </HStack>
+            </RadioGroup>
+          </FormLabel>
+        </FormControl>
       </ModalBody>
       <ModalFooter mt="-5">
         {buttons.map((b: any, i)=>{
-          const key = `${i}-${b.className}`
+          const key = `${i}-${b.label}`
           return (
             <Tooltip key={key} label={b.tooltip} h="20px" fontSize="12px"
               color="white" openDelay={1000} placement="bottom" bottom="15px" left="15px"
               data-testid="modal-tooltip">
-              <Button key={key} size="xs" variant="ghost" ml="5" onClick={b.onClick} data-testid={`${b.label}-button`}>
+              <Button key={key} size="xs" variant={`${b.default ? "default" : ""}`} ml="5" onClick={b.onClick}
+                      _hover={{backgroundColor: "#72bfca", color: "white"}} data-testid={`${b.label}-button`}>
                 {b.label}
               </Button>
             </Tooltip>
diff --git a/v3/src/components/case-table/attribute-menu/edit-formula-modal.tsx b/v3/src/components/case-table/attribute-menu/edit-formula-modal.tsx
index 04cf4c610f..c8fe97ceda 100644
--- a/v3/src/components/case-table/attribute-menu/edit-formula-modal.tsx
+++ b/v3/src/components/case-table/attribute-menu/edit-formula-modal.tsx
@@ -9,6 +9,8 @@ import { updateAttributesNotification, updateCasesNotification } from "../../../
 import { t } from "../../../utilities/translation/translate"
 import { CodapModal } from "../../codap-modal"
 
+import "./attribute-menu.scss"
+
 interface IProps {
   attributeId: string
   isOpen: boolean
@@ -53,14 +55,16 @@ export const EditFormulaModal = observer(function EditFormulaModal({ attributeId
     onClick: closeModal
   }, {
     label: t("DG.AttrFormView.applyBtnTitle"),
-    onClick: applyFormula
+    onClick: applyFormula,
+    default: true
   }]
 
   return (
     <CodapModal
       isOpen={isOpen}
       onClose={onClose}
-      modalWidth={"350px"}
+      modalWidth={"400px"}
+      modalHeight={"180px"}
     >
       <ModalHeader h="30" className="codap-modal-header" fontSize="md" data-testid="codap-modal-header">
         <div className="codap-modal-icon-container" />
@@ -68,7 +72,7 @@ export const EditFormulaModal = observer(function EditFormulaModal({ attributeId
         <ModalCloseButton onClick={onClose} data-testid="modal-close-button" />
       </ModalHeader>
       <ModalBody>
-        <FormControl display="flex" flexDirection="column">
+        <FormControl display="flex" flexDirection="column" className="formula-form-control">
           <FormLabel display="flex" flexDirection="row">{t("DG.AttrFormView.attrNamePrompt")}
             <Input
               size="xs" ml={5} placeholder="attribute" value={attribute?.name} data-testid="attr-name-input" disabled
@@ -82,15 +86,19 @@ export const EditFormulaModal = observer(function EditFormulaModal({ attributeId
       </ModalBody>
       <ModalFooter mt="-5">
         {
-          buttons.map((b, idx) => (
-            <Tooltip key={idx} label={b.tooltip} h="20px" fontSize="12px" color="white" openDelay={1000}
-              placement="bottom" bottom="15px" left="15px" data-testid="modal-tooltip"
-            >
-              <Button size="xs" variant="ghost" ml="5" onClick={b.onClick} data-testid={`${b.label}-button`}>
-                {b.label}
-              </Button>
-            </Tooltip>
-          ))
+          buttons.map((b, idx) => {
+            const key = `${idx}-${b.label}`
+            return (
+              <Tooltip key={idx} label={b.tooltip} h="20px" fontSize="12px" color="white" openDelay={1000}
+                placement="bottom" bottom="15px" left="15px" data-testid="modal-tooltip"
+              >
+                <Button key={key} size="xs" variant={`${b.default ? "default" : ""}`} ml="5" onClick={b.onClick}
+                      _hover={{backgroundColor: "#72bfca", color: "white"}} data-testid={`${b.label}-button`}>
+                  {b.label}
+                </Button>
+              </Tooltip>
+            )
+          })
         }
       </ModalFooter>
     </CodapModal>
diff --git a/v3/src/components/codap-modal.scss b/v3/src/components/codap-modal.scss
index 3854e00931..48cc48c06d 100644
--- a/v3/src/components/codap-modal.scss
+++ b/v3/src/components/codap-modal.scss
@@ -10,6 +10,7 @@ $header-height: 30px;
     flex-direction: row;
     align-items: center;
     box-shadow: none;
+    background-color: #f0f0f0;
 
     .codap-modal-icon-container {
       width: 30px;
@@ -17,6 +18,9 @@ $header-height: 30px;
       background-color: $teal-dark;
       top: 0;
       left: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
     }
 
     .codap-header-title {
@@ -41,7 +45,22 @@ $header-height: 30px;
     }
   }
 
+  .chakra-modal__body {
+    background-color: #f0f0f0;
+    padding: 0 8px;
+    box-sizing: border-box;
+    width: inherit;
+  }
+
+  .chakra-modal__footer {
+    background-color: #f0f0f0;
+  }
+
   .chakra-form__label {
-    align-items: center !important;
+    align-items: center;
+    margin-inline-end: 0;
+  }
+  input, textarea, select, .chakra-radio__control {
+    background-color: white;
   }
 }
diff --git a/v3/src/utilities/translation/lang/en-US.json5 b/v3/src/utilities/translation/lang/en-US.json5
index 15d857d702..dccd85d66a 100644
--- a/v3/src/utilities/translation/lang/en-US.json5
+++ b/v3/src/utilities/translation/lang/en-US.json5
@@ -767,16 +767,16 @@
     "DG.CaseTable.attribute.type.qualitative": "qualitative",
     "DG.CaseTable.attribute.type.boundary": "boundary",
     "DG.CaseTable.attribute.type.checkbox": "checkbox",
-    "DG.CaseTable.attributeEditor.name": "name",
-    "DG.CaseTable.attributeEditor.description": "description",
-    "DG.CaseTable.attributeEditor.type": "type",
-    "DG.CaseTable.attributeEditor.unit": "unit",
-    "DG.CaseTable.attributeEditor.precision": "precision",
+    "DG.CaseTable.attributeEditor.name": "Name",
+    "DG.CaseTable.attributeEditor.description": "Description",
+    "DG.CaseTable.attributeEditor.type": "Type",
+    "DG.CaseTable.attributeEditor.unit": "Unit",
+    "DG.CaseTable.attributeEditor.precision": "Precision",
     "DG.CaseTable.attributeEditor.datePrecisionOptions": "year month day hour minute second millisecond",
-    "DG.CaseTable.attributeEditor.editable": "editable",
+    "DG.CaseTable.attributeEditor.editable": "Editable",
     "DG.CaseTable.insertCasesDialog.title": "Insert Cases",
     "DG.CaseTable.insertCasesDialog.numCasesPrompt": "# cases to insert:",
-    "DG.CaseTable.insertCasesDialog.beforeAfter.prompt": "location:",
+    "DG.CaseTable.insertCasesDialog.beforeAfter.prompt": "Location:",
     "DG.CaseTable.insertCasesDialog.beforeAfter.before": "before",
     "DG.CaseTable.insertCasesDialog.beforeAfter.after": "after",
     "DG.CaseTable.insertCasesDialog.applyBtnTitle": "Insert Cases",
diff --git a/v3/src/utilities/translation/lang/es.json b/v3/src/utilities/translation/lang/es.json
index 9377bb7291..4f355f0e00 100644
--- a/v3/src/utilities/translation/lang/es.json
+++ b/v3/src/utilities/translation/lang/es.json
@@ -460,15 +460,15 @@
     "DG.CaseTable.attribute.type.date": "fecha",
     "DG.CaseTable.attribute.type.qualitative": "cualitativo",
     "DG.CaseTable.attribute.type.boundary": "límite",
-    "DG.CaseTable.attributeEditor.name": "nombre",
-    "DG.CaseTable.attributeEditor.description": "descripción",
-    "DG.CaseTable.attributeEditor.type": "tipo",
-    "DG.CaseTable.attributeEditor.unit": "unidad",
-    "DG.CaseTable.attributeEditor.precision": "precisión",
-    "DG.CaseTable.attributeEditor.editable": "editable",
+    "DG.CaseTable.attributeEditor.name": "Nombre",
+    "DG.CaseTable.attributeEditor.description": "Descripción",
+    "DG.CaseTable.attributeEditor.type": "Tipo",
+    "DG.CaseTable.attributeEditor.unit": "Unidad",
+    "DG.CaseTable.attributeEditor.precision": "Precisión",
+    "DG.CaseTable.attributeEditor.editable": "Editable",
     "DG.CaseTable.insertCasesDialog.title": "Insertar Casos",
     "DG.CaseTable.insertCasesDialog.numCasesPrompt": "# de casos a insertar:",
-    "DG.CaseTable.insertCasesDialog.beforeAfter.prompt": "ubicación:",
+    "DG.CaseTable.insertCasesDialog.beforeAfter.prompt": "Ubicación:",
     "DG.CaseTable.insertCasesDialog.beforeAfter.before": "antes",
     "DG.CaseTable.insertCasesDialog.beforeAfter.after": "después",
     "DG.CaseTable.insertCasesDialog.applyBtnTitle": "Insertar Casos",
diff --git a/v3/src/utilities/translation/lang/nb.json b/v3/src/utilities/translation/lang/nb.json
index 9029afe7a3..e30b5daaf9 100644
--- a/v3/src/utilities/translation/lang/nb.json
+++ b/v3/src/utilities/translation/lang/nb.json
@@ -453,15 +453,15 @@
     "DG.CaseTable.attribute.type.date": "dato",
     "DG.CaseTable.attribute.type.qualitative": "kvalitativ",
     "DG.CaseTable.attribute.type.boundary": "grense",
-    "DG.CaseTable.attributeEditor.name": "navn",
-    "DG.CaseTable.attributeEditor.description": "beskrivelse",
-    "DG.CaseTable.attributeEditor.type": "type",
-    "DG.CaseTable.attributeEditor.unit": "enhet",
-    "DG.CaseTable.attributeEditor.precision": "presisjon",
-    "DG.CaseTable.attributeEditor.editable": "redigerbar",
+    "DG.CaseTable.attributeEditor.name": "Navn",
+    "DG.CaseTable.attributeEditor.description": "Beskrivelse",
+    "DG.CaseTable.attributeEditor.type": "Type",
+    "DG.CaseTable.attributeEditor.unit": "Enhet",
+    "DG.CaseTable.attributeEditor.precision": "Presisjon",
+    "DG.CaseTable.attributeEditor.editable": "Redigerbar",
     "DG.CaseTable.insertCasesDialog.title": "Sett inn observasjoner",
     "DG.CaseTable.insertCasesDialog.numCasesPrompt": "#observasjoner som settes inn:",
-    "DG.CaseTable.insertCasesDialog.beforeAfter.prompt": "plassering:",
+    "DG.CaseTable.insertCasesDialog.beforeAfter.prompt": "Plassering:",
     "DG.CaseTable.insertCasesDialog.beforeAfter.before": "før",
     "DG.CaseTable.insertCasesDialog.beforeAfter.after": "etter",
     "DG.CaseTable.insertCasesDialog.applyBtnTitle": "Sett inn Observasjoner",
@@ -1067,4 +1067,4 @@
     "DG.plugin.Transformers.title": "Transformers",
     "DG.plugin.Transformers.description": "Transform datasets with a collection of powerful tools.",
     "DG.plugin.Sampler.top-bar.pause": "PAUSE"
-}
\ No newline at end of file
+}
diff --git a/v3/src/utilities/translation/lang/nn.json b/v3/src/utilities/translation/lang/nn.json
index 0fb61cebd0..1e482b3b6a 100644
--- a/v3/src/utilities/translation/lang/nn.json
+++ b/v3/src/utilities/translation/lang/nn.json
@@ -453,15 +453,15 @@
     "DG.CaseTable.attribute.type.date": "dato",
     "DG.CaseTable.attribute.type.qualitative": "kvalitativ",
     "DG.CaseTable.attribute.type.boundary": "grense",
-    "DG.CaseTable.attributeEditor.name": "navn",
-    "DG.CaseTable.attributeEditor.description": "skildring",
-    "DG.CaseTable.attributeEditor.type": "type",
-    "DG.CaseTable.attributeEditor.unit": "eining",
-    "DG.CaseTable.attributeEditor.precision": "presisjon",
-    "DG.CaseTable.attributeEditor.editable": "redigerbar",
+    "DG.CaseTable.attributeEditor.name": "Navn",
+    "DG.CaseTable.attributeEditor.description": "Skildring",
+    "DG.CaseTable.attributeEditor.type": "Type",
+    "DG.CaseTable.attributeEditor.unit": "Eining",
+    "DG.CaseTable.attributeEditor.precision": "Presisjon",
+    "DG.CaseTable.attributeEditor.editable": "Redigerbar",
     "DG.CaseTable.insertCasesDialog.title": "Sett inn observasjonar",
     "DG.CaseTable.insertCasesDialog.numCasesPrompt": "# observasjonar å setja inn",
-    "DG.CaseTable.insertCasesDialog.beforeAfter.prompt": "plassering:",
+    "DG.CaseTable.insertCasesDialog.beforeAfter.prompt": "Plassering:",
     "DG.CaseTable.insertCasesDialog.beforeAfter.before": "før",
     "DG.CaseTable.insertCasesDialog.beforeAfter.after": "etter",
     "DG.CaseTable.insertCasesDialog.applyBtnTitle": "Sett inn observasjonar",
@@ -1067,4 +1067,4 @@
     "DG.plugin.Transformers.title": "Transformers",
     "DG.plugin.Transformers.description": "Transform datasets with a collection of powerful tools.",
     "DG.plugin.Sampler.top-bar.pause": "PAUSE"
-}
\ No newline at end of file
+}
diff --git a/v3/src/utilities/translation/lang/pt-BR.json b/v3/src/utilities/translation/lang/pt-BR.json
index d8565c39a5..63ce07ce36 100644
--- a/v3/src/utilities/translation/lang/pt-BR.json
+++ b/v3/src/utilities/translation/lang/pt-BR.json
@@ -453,15 +453,15 @@
     "DG.CaseTable.attribute.type.date": "data",
     "DG.CaseTable.attribute.type.qualitative": "qualitativa",
     "DG.CaseTable.attribute.type.boundary": "limitada",
-    "DG.CaseTable.attributeEditor.name": "nome",
-    "DG.CaseTable.attributeEditor.description": "descrição",
-    "DG.CaseTable.attributeEditor.type": "tipo",
-    "DG.CaseTable.attributeEditor.unit": "unidade",
-    "DG.CaseTable.attributeEditor.precision": "precisão",
-    "DG.CaseTable.attributeEditor.editable": "editável",
+    "DG.CaseTable.attributeEditor.name": "Nome",
+    "DG.CaseTable.attributeEditor.description": "Descrição",
+    "DG.CaseTable.attributeEditor.type": "Tipo",
+    "DG.CaseTable.attributeEditor.unit": "Unidade",
+    "DG.CaseTable.attributeEditor.precision": "Precisão",
+    "DG.CaseTable.attributeEditor.editable": "Editável",
     "DG.CaseTable.insertCasesDialog.title": "Inserir Dados",
     "DG.CaseTable.insertCasesDialog.numCasesPrompt": "# dados para inserir:",
-    "DG.CaseTable.insertCasesDialog.beforeAfter.prompt": "localização:",
+    "DG.CaseTable.insertCasesDialog.beforeAfter.prompt": "Localização:",
     "DG.CaseTable.insertCasesDialog.beforeAfter.before": "antes",
     "DG.CaseTable.insertCasesDialog.beforeAfter.after": "depois",
     "DG.CaseTable.insertCasesDialog.applyBtnTitle": "Inserir Dados",
@@ -1067,4 +1067,4 @@
     "DG.plugin.Transformers.title": "Transformador",
     "DG.plugin.Transformers.description": "Transforme conjuntos de dados com ferramentas poderosas.",
     "DG.plugin.Sampler.top-bar.pause": "PAUSAR"
-}
\ No newline at end of file
+}
diff --git a/v3/src/utilities/translation/lang/tr.json b/v3/src/utilities/translation/lang/tr.json
index 8e7275c94d..d94b828ffd 100644
--- a/v3/src/utilities/translation/lang/tr.json
+++ b/v3/src/utilities/translation/lang/tr.json
@@ -453,15 +453,15 @@
     "DG.CaseTable.attribute.type.date": "tarih",
     "DG.CaseTable.attribute.type.qualitative": "nitel",
     "DG.CaseTable.attribute.type.boundary": "sınır",
-    "DG.CaseTable.attributeEditor.name": "isim",
-    "DG.CaseTable.attributeEditor.description": "açıklama",
-    "DG.CaseTable.attributeEditor.type": "tür",
-    "DG.CaseTable.attributeEditor.unit": "birim",
-    "DG.CaseTable.attributeEditor.precision": "kesinlik",
-    "DG.CaseTable.attributeEditor.editable": "düzenlenebilir",
+    "DG.CaseTable.attributeEditor.name": "Isim",
+    "DG.CaseTable.attributeEditor.description": "Açıklama",
+    "DG.CaseTable.attributeEditor.type": "Tür",
+    "DG.CaseTable.attributeEditor.unit": "Birim",
+    "DG.CaseTable.attributeEditor.precision": "Kesinlik",
+    "DG.CaseTable.attributeEditor.editable": "Düzenlenebilir",
     "DG.CaseTable.insertCasesDialog.title": "Durum Ekle",
     "DG.CaseTable.insertCasesDialog.numCasesPrompt": "# tane durum ekle:",
-    "DG.CaseTable.insertCasesDialog.beforeAfter.prompt": "yer:",
+    "DG.CaseTable.insertCasesDialog.beforeAfter.prompt": "Yer:",
     "DG.CaseTable.insertCasesDialog.beforeAfter.before": "önce",
     "DG.CaseTable.insertCasesDialog.beforeAfter.after": "sonra",
     "DG.CaseTable.insertCasesDialog.applyBtnTitle": "Durum Ekle",
@@ -1067,4 +1067,4 @@
     "DG.plugin.Transformers.title": "Transformers",
     "DG.plugin.Transformers.description": "Transform datasets with a collection of powerful tools.",
     "DG.plugin.Sampler.top-bar.pause": "PAUSE"
-}
\ No newline at end of file
+}