fix: visualization menu icon size (#2940)

dhis2 · Mar 18, 2024 · bb05e17 · bb05e17
1 parent 1d116ed
commit bb05e17
Show file tree

Hide file tree

Showing 19 changed files with 24 additions and 53 deletions.
diff --git a/src/assets/AreaIcon.js b/src/assets/AreaIcon.js
@@ -1,9 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-const AreaIcon = ({
-    style = { paddingRight: '8px', width: 24, height: 24 },
-}) => (
+const AreaIcon = ({ style }) => (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style={style}>
         <g fill="none" fillRule="evenodd" transform="matrix(0 -1 -1 0 48 48)">
             <polygon points="0 0 48 0 48 48 0 48" />

diff --git a/src/assets/BarIcon.js b/src/assets/BarIcon.js
@@ -1,9 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-const BarIcon = ({
-    style = { paddingRight: '8px', width: 24, height: 24 },
-}) => (
+const BarIcon = ({ style }) => (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0,0,48,48" style={style}>
         <g fill="none" fillRule="evenodd" transform="matrix(0 -1 -1 0 48 48)">
             <polygon points="0 0 48 0 48 48 0 48" />

diff --git a/src/assets/BubbleIcon.js b/src/assets/BubbleIcon.js
@@ -1,9 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-const BubbleIcon = ({
-    style = { paddingRight: '8px', width: 24, height: 24 },
-}) => (
+const BubbleIcon = ({ style }) => (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0,0,48,48" style={style}>
         <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
             <circle fill="#63A4FF" cx="18" cy="25" r="12" />

diff --git a/src/assets/ColumnIcon.js b/src/assets/ColumnIcon.js
@@ -1,9 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-const ColumnIcon = ({
-    style = { paddingRight: '8px', width: 24, height: 24 },
-}) => (
+const ColumnIcon = ({ style }) => (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style={style}>
         <g fill="none" fillRule="evenodd">
             <polygon points="0 0 48 0 48 48 0 48" />

diff --git a/src/assets/GaugeIcon.js b/src/assets/GaugeIcon.js
@@ -1,9 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-const GaugeIcon = ({
-    style = { paddingRight: '8px', width: 24, height: 24 },
-}) => (
+const GaugeIcon = ({ style }) => (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0,0,48,48" style={style}>
         <g fill="none" fillRule="evenodd" transform="rotate(90 24 24)">
             <polygon points="0 0 48 0 48 48 0 48" />

diff --git a/src/assets/LineIcon.js b/src/assets/LineIcon.js
@@ -1,9 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-const LineIcon = ({
-    style = { paddingRight: '8px', width: 24, height: 24 },
-}) => (
+const LineIcon = ({ style }) => (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0,0,48,48" style={style}>
         <g fill="none" fillRule="evenodd" transform="matrix(0 -1 -1 0 48 48)">
             <polygon points="0 0 48 0 48 48 0 48" />

diff --git a/src/assets/OutlierTableIcon.js b/src/assets/OutlierTableIcon.js
@@ -1,9 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-const OutlierTableIcon = ({
-    style = { paddingRight: '8px', width: 24, height: 24 },
-}) => (
+const OutlierTableIcon = ({ style }) => (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0,0,48,48" style={style}>
         <path
             fillRule="evenodd"

diff --git a/src/assets/PieIcon.js b/src/assets/PieIcon.js
@@ -1,9 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-const PieIcon = ({
-    style = { paddingRight: '8px', width: 24, height: 24 },
-}) => (
+const PieIcon = ({ style }) => (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0,0,48,48" style={style}>
         <g fill="none" fillRule="evenodd" transform="rotate(90 24 24)">
             <polygon points="0 0 48 0 48 48 0 48" />

diff --git a/src/assets/PivotTableIcon.js b/src/assets/PivotTableIcon.js
@@ -1,9 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-const PivotTableIcon = ({
-    style = { paddingRight: '8px', width: 24, height: 24 },
-}) => (
+const PivotTableIcon = ({ style }) => (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0,0,48,48" style={style}>
         <g fill="none" fillRule="evenodd">
             <polygon points="0 0 48 0 48 48 0 48" />

diff --git a/src/assets/RadarIcon.js b/src/assets/RadarIcon.js
@@ -1,9 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-const RadarIcon = ({
-    style = { paddingRight: '8px', width: 24, height: 24 },
-}) => (
+const RadarIcon = ({ style }) => (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0,0,48,48" style={style}>
         <g fill="none" fillRule="evenodd" transform="rotate(90 24 24)">
             <polygon points="0 0 48 0 48 48 0 48" />

diff --git a/src/assets/ScatterIcon.js b/src/assets/ScatterIcon.js
@@ -1,9 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-const ScatterIcon = ({
-    style = { paddingRight: '8px', width: 24, height: 24 },
-}) => (
+const ScatterIcon = ({ style }) => (
     <svg
         height="48"
         viewBox="0 0 48 48"

diff --git a/src/assets/SingleValueIcon.js b/src/assets/SingleValueIcon.js
@@ -1,9 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-const SingleValueIcon = ({
-    style = { paddingRight: '8px', width: 24, height: 24 },
-}) => (
+const SingleValueIcon = ({ style }) => (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0,0,48,48" style={style}>
         <g fill="none" fillRule="evenodd">
             <polygon points="0 0 48 0 48 48 0 48" />

diff --git a/src/assets/StackedAreaIcon.js b/src/assets/StackedAreaIcon.js
@@ -1,9 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-const StackedAreaIcon = ({
-    style = { paddingRight: '8px', width: 24, height: 24 },
-}) => (
+const StackedAreaIcon = ({ style }) => (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0,0,48,48" style={style}>
         <g fill="none" fillRule="evenodd" transform="matrix(0 -1 -1 0 48 48)">
             <polygon points="0 0 48 0 48 48 0 48" />

diff --git a/src/assets/StackedBarIcon.js b/src/assets/StackedBarIcon.js
@@ -1,9 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-const StackedBarIcon = ({
-    style = { paddingRight: '8px', width: 24, height: 24 },
-}) => (
+const StackedBarIcon = ({ style }) => (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0,0,48,48" style={style}>
         <g fill="none" fillRule="evenodd" transform="matrix(0 -1 -1 0 48 48)">
             <polygon points="0 0 48 0 48 48 0 48" />

diff --git a/src/assets/StackedColumnIcon.js b/src/assets/StackedColumnIcon.js
@@ -1,9 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-const StackedColumnIcon = ({
-    style = { paddingRight: '8px', width: 24, height: 24 },
-}) => (
+const StackedColumnIcon = ({ style }) => (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0,0,48,48" style={style}>
         <g fill="none" fillRule="evenodd">
             <polygon points="0 0 48 0 48 48 0 48" />

diff --git a/src/assets/YearOverYearColumnIcon.js b/src/assets/YearOverYearColumnIcon.js
@@ -1,9 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-const YearOverYearColumnIcon = ({
-    style = { paddingRight: '8px', width: 24, height: 24 },
-}) => (
+const YearOverYearColumnIcon = ({ style }) => (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0,0,48,48" style={style}>
         <g fill="none" fillRule="evenodd">
             <polygon points="0 0 48 0 48 48 0 48" />

diff --git a/src/assets/YearOverYearLineIcon.js b/src/assets/YearOverYearLineIcon.js
@@ -1,9 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-const YearOverYearLineIcon = ({
-    style = { paddingRight: '8px', width: 24, height: 24 },
-}) => (
+const YearOverYearLineIcon = ({ style }) => (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0,0,48,48" style={style}>
         <g fill="none" fillRule="evenodd" transform="matrix(0 -1 -1 0 48 48)">
             <polygon points="0 0 48 0 48 48 0 48" />

diff --git a/src/components/VisualizationTypeSelector/VisualizationTypeSelector.js b/src/components/VisualizationTypeSelector/VisualizationTypeSelector.js
@@ -109,7 +109,10 @@ const UnconnectedVisualizationTypeSelector = (
                     })}
                     data-test={'visualization-type-selector-button'}
                 >
-                    <ListItemIcon iconType={visualizationType} />
+                    <ListItemIcon
+                        iconType={visualizationType}
+                        style={{ width: 24, height: 24 }}
+                    />
                     <span
                         className={styles.selectedVizTypeLabel}
                         data-test="visualization-type-selector-currently-selected-text"

diff --git a/src/components/VisualizationTypeSelector/styles/VisualizationTypeSelector.module.css b/src/components/VisualizationTypeSelector/styles/VisualizationTypeSelector.module.css
@@ -14,7 +14,7 @@
     justify-content: flex-start;
     background-color: var(--colors-white);
     cursor: pointer;
-    flex-grow: 1
+    flex-grow: 1;
 }
 
 .button:hover,
@@ -26,6 +26,8 @@
     font-size: 14px;
     padding-top: 1px;
     user-select: none;
+    color: var(--colors-grey900);
+    margin-left: 4px;
 }
 
 .cardContainer {