From bb05e17d803ffbb7fe6ef3b3a287a23e49470f7a Mon Sep 17 00:00:00 2001
From: Joe Cooper <33054985+cooper-joe@users.noreply.github.com>
Date: Mon, 18 Mar 2024 16:35:47 +0100
Subject: [PATCH] fix: visualization menu icon size (#2940)

---
 src/assets/AreaIcon.js                                       | 4 +---
 src/assets/BarIcon.js                                        | 4 +---
 src/assets/BubbleIcon.js                                     | 4 +---
 src/assets/ColumnIcon.js                                     | 4 +---
 src/assets/GaugeIcon.js                                      | 4 +---
 src/assets/LineIcon.js                                       | 4 +---
 src/assets/OutlierTableIcon.js                               | 4 +---
 src/assets/PieIcon.js                                        | 4 +---
 src/assets/PivotTableIcon.js                                 | 4 +---
 src/assets/RadarIcon.js                                      | 4 +---
 src/assets/ScatterIcon.js                                    | 4 +---
 src/assets/SingleValueIcon.js                                | 4 +---
 src/assets/StackedAreaIcon.js                                | 4 +---
 src/assets/StackedBarIcon.js                                 | 4 +---
 src/assets/StackedColumnIcon.js                              | 4 +---
 src/assets/YearOverYearColumnIcon.js                         | 4 +---
 src/assets/YearOverYearLineIcon.js                           | 4 +---
 .../VisualizationTypeSelector/VisualizationTypeSelector.js   | 5 ++++-
 .../styles/VisualizationTypeSelector.module.css              | 4 +++-
 19 files changed, 24 insertions(+), 53 deletions(-)

diff --git a/src/assets/AreaIcon.js b/src/assets/AreaIcon.js
index f9040a2b91..3d25761637 100644
--- 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
index c773522a6c..f1f68ded03 100644
--- 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
index 4730336ceb..fd7791c76c 100644
--- 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
index d012479ffa..755cc51028 100644
--- 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
index 394920bc94..5492914ed4 100644
--- 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
index a40dd3300d..939c69911f 100644
--- 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
index 1e0bca1e60..3268194615 100644
--- 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
index bcb9a3bfcd..a200d3c1f8 100644
--- 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
index 8b27d0e35a..df1744a6f9 100644
--- 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
index c492753ded..ffc7c919c0 100644
--- 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
index eca1b2120a..3a78aff9b9 100644
--- 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
index b5a942e9ab..d53e226df4 100644
--- 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
index c612defcc5..d5684941b3 100644
--- 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
index a72e30a8bb..d540e82190 100644
--- 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
index aefe9e9654..515729cd3b 100644
--- 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
index cb23715c54..d79fa820d1 100644
--- 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
index 5786499754..f7058296d9 100644
--- 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
index d91b3dc27c..0d00f2ea43 100644
--- 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
index cdbcfef3ba..97b22b6655 100644
--- 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 {