fix: translationDialog styles bleeding to other components

dhis2 · Oct 8, 2024 · 94aedd7 · 94aedd7
1 parent 3cce33c
commit 94aedd7
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 17 deletions.
diff --git a/src/components/sectionList/translation/TranslatableFields.tsx b/src/components/sectionList/translation/TranslatableFields.tsx
@@ -23,20 +23,20 @@ const TranslatableFields: React.FC<TranslatableFieldsProps> = ({
     selectedLocale,
 }) => {
     return (
-        <div className={style.formObj}>
+        <div className={style.translateableFields}>
             <div className={style.formSection}>
                 {translatableFields.map((field) => (
                     <React.Fragment key={field}>
                         {field === 'description' ? (
                             <TextAreaField
-                                className={style.row}
+                                className={style.rowStart}
                                 label={getTranslatedProperty(field)}
                                 disabled
                                 value={baseReferenceValues[field]}
                             />
                         ) : (
                             <InputField
-                                className={style.row}
+                                className={style.rowStart}
                                 label={getTranslatedProperty(field)}
                                 disabled
                                 value={baseReferenceValues[field]}

diff --git a/src/components/sectionList/translation/TranslationDialog.tsx b/src/components/sectionList/translation/TranslationDialog.tsx
@@ -72,7 +72,7 @@ export const TranslationDialog = ({
 
                     <TranslationForm
                         model={model}
-                        selectedLocale={selectedLocale && selectedLocale}
+                        selectedLocale={selectedLocale}
                         onClose={onClose}
                     />
                 </ModalContent>

diff --git a/src/components/sectionList/translation/translation.module.css b/src/components/sectionList/translation/translation.module.css
@@ -1,10 +1,17 @@
 .row {
     display: flex;
     flex-direction: column;
-    margin-top: 20px;
-    margin-bottom: 20px;
-    padding-bottom: 10px;
-    border-bottom: 1px solid var(--colors-grey400);
+    border-block-end: 1px solid var(--colors-grey400);
+    padding-block: 10px;
+}
+
+.rowStart {
+    composes: row;
+    padding-inline-end: 10px;
+}
+
+.field {
+    padding-inline-end: 10px;
 }
 
 .baseLocale {
@@ -13,27 +20,22 @@
     justify-content: space-between;
     background-color: var(--colors-grey200);
     color: var(--colors-grey600);
-    padding: 5px 10px;
+    padding-block: 5px;
+    padding-inline: 10px;
 }
-.formObj {
+.translateableFields {
     display: flex;
     align-items: center;
     margin-right: 10px;
     width: 100%;
 }
-input {
-    margin-right: 10px !important;
-}
-textarea {
-    margin-right: 10px !important;
-}
 
 .formSection {
     width: 50%;
 }
 
 .notice {
-    margin-bottom: 15px;
+    margin-block-end: 15px;
 }
 
 .warnText {