fix: adjust options dialog for easier scanning (#580)

* fix: styling for options dialog sections * fix: width for range axis decimals/steps to allow placeholder text
dhis2 · Jan 30, 2020 · b0393ff · b0393ff
1 parent 7c573b7
commit b0393ff
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 4 deletions.
diff --git a/packages/app/src/components/VisualizationOptions/Options/RangeAxisDecimals.js b/packages/app/src/components/VisualizationOptions/Options/RangeAxisDecimals.js
@@ -7,7 +7,7 @@ import TextBaseOption from './TextBaseOption'
 const RangeAxisDecimals = () => (
     <TextBaseOption
         type="number"
-        width="72px"
+        width="96px"
         label={i18n.t('Decimals')}
         placeholder={i18n.t('Auto')}
         option={{

diff --git a/packages/app/src/components/VisualizationOptions/Options/RangeAxisSteps.js b/packages/app/src/components/VisualizationOptions/Options/RangeAxisSteps.js
@@ -7,7 +7,7 @@ import TextBaseOption from './TextBaseOption'
 export const RangeAxisSteps = () => (
     <TextBaseOption
         type="number"
-        width="72px"
+        width="96px"
         helpText={i18n.t(
             'The number of axis steps between the min and max values'
         )}

diff --git a/packages/app/src/components/VisualizationOptions/styles/VisualizationOptions.style.js b/packages/app/src/components/VisualizationOptions/styles/VisualizationOptions.style.js
@@ -14,6 +14,10 @@ export const tabSection = css.resolve`
     div {
         padding: ${spacers.dp16} 0;
     }
+    div:not(:last-child) {
+        border-bottom: 1px solid ${colors.grey300};
+        margin-bottom: ${spacers.dp8};
+    }
 `
 
 export const tabSectionContent = css.resolve`
@@ -25,9 +29,11 @@ export const tabSectionContent = css.resolve`
 export const tabSectionTitle = css.resolve`
     span {
         display: inline-block;
-        padding-bottom: ${spacers.dp16};
-        font-size: ${spacers.dp16};
+        padding-bottom: ${spacers.dp12};
+        font-size: 15px;
         color: ${colors.grey900};
+        font-weight: 500;
+        letter-spacing: 0.2px;
     }
 `