fix: legend type spacing in SV options (#1298)

There was too little space between the Display legend option toggle and the Legend type option in SV.
dhis2 · Sep 23, 2020 · 4477292 · 4477292
1 parent 0a64396
commit 4477292
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 3 deletions.
diff --git a/packages/app/src/components/VisualizationOptions/Options/Legend.js b/packages/app/src/components/VisualizationOptions/Options/Legend.js
@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
+import cx from 'classnames'
 
 import i18n from '@dhis2/d2-i18n'
 import { Checkbox, FieldSet, Legend as UiCoreLegend } from '@dhis2/ui'
@@ -23,6 +24,7 @@ import {
     tabSectionOptionToggleable,
     tabSectionOption,
     tabSectionTitle,
+    tabSectionTitleMargin,
 } from '../styles/VisualizationOptions.style.js'
 
 const Legend = ({
@@ -66,8 +68,10 @@ const Legend = ({
                             <FieldSet>
                                 <UiCoreLegend>
                                     <span
-                                        className={tabSectionTitle.className}
-                                        style={{ marginTop: 8 }}
+                                        className={cx(
+                                            tabSectionTitle.className,
+                                            tabSectionTitleMargin.className
+                                        )}
                                     >
                                         {i18n.t('Legend style')}
                                     </span>
@@ -81,7 +85,11 @@ const Legend = ({
                     <div>
                         <FieldSet>
                             <UiCoreLegend>
-                                <span className={tabSectionTitle.className}>
+                                <span
+                                    className={cx(tabSectionTitle.className, {
+                                        [tabSectionTitleMargin.className]: hideStyleOptions,
+                                    })}
+                                >
                                     {i18n.t('Legend type')}
                                 </span>
                             </UiCoreLegend>

diff --git a/packages/app/src/components/VisualizationOptions/VisualizationOptions.js b/packages/app/src/components/VisualizationOptions/VisualizationOptions.js
@@ -7,6 +7,7 @@ import { FieldSet, Legend, TabBar, Tab, Help } from '@dhis2/ui'
 import {
     tabSection,
     tabSectionTitle,
+    tabSectionTitleMargin,
     tabSectionOption,
     tabSectionOptionItem,
     tabSectionOptionToggleable,
@@ -112,6 +113,7 @@ export class VisualizationOptions extends Component {
                 {tabs[activeTabIndex].content}
                 {tabSection.styles}
                 {tabSectionTitle.styles}
+                {tabSectionTitleMargin.styles}
                 {tabSectionOption.styles}
                 {tabSectionOptionItem.styles}
                 {tabSectionOptionToggleable.styles}

diff --git a/packages/app/src/components/VisualizationOptions/styles/VisualizationOptions.style.js b/packages/app/src/components/VisualizationOptions/styles/VisualizationOptions.style.js
@@ -38,6 +38,12 @@ export const tabSectionTitle = css.resolve`
     }
 `
 
+export const tabSectionTitleMargin = css.resolve`
+    span {
+        margin-top: ${spacers.dp8};
+    }
+`
+
 export const tabSectionOption = css.resolve`
     div:not(:last-child):not(.inline) {
         padding-bottom: ${spacers.dp16};