From fed7b96cd46aa39781cadad32024893decab728e Mon Sep 17 00:00:00 2001
From: Jerel Miller <jerelmiller@gmail.com>
Date: Mon, 17 Aug 2020 15:55:43 -0700
Subject: [PATCH] fix: bigger nav icons

---
 src/components/NavigationItems.js          | 11 +++++++++--
 src/components/NavigationItems.module.scss |  4 ++--
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/components/NavigationItems.js b/src/components/NavigationItems.js
index a19d5ce01..77ef8c058 100644
--- a/src/components/NavigationItems.js
+++ b/src/components/NavigationItems.js
@@ -82,7 +82,9 @@ const NavigationItems = ({
 
 const NavIcon = ({ page }) => {
   if (page.displayName === 'Collect data') {
-    return <CollectDataIcon className={styles.headerIcon} />;
+    return (
+      <CollectDataIcon className={styles.headerIcon} size="var(--icon-size)" />
+    );
   }
 
   if (iconLibrary[page.displayName]) {
@@ -90,6 +92,7 @@ const NavIcon = ({ page }) => {
       <NewRelicIcon
         className={styles.headerIcon}
         name={iconLibrary[page.displayName]}
+        size="var(--icon-size)"
       />
     );
   }
@@ -132,7 +135,11 @@ const NavItem = ({ page, depthLevel, searchTerm, filteredPageNames }) => {
         data-depth={depthLevel}
         className={cx({ [styles.filterOn]: filteredPageNames })}
         css={css`
-          padding-left: ${depthLevel === 0 ? '0' : 'calc(0.5rem + 1em)'};
+          --icon-size: 1.5rem;
+
+          padding-left: ${depthLevel === 0
+            ? '0'
+            : 'calc(0.5rem + var(--icon-size))'};
 
           ${depthLevel === 0 &&
           css`
diff --git a/src/components/NavigationItems.module.scss b/src/components/NavigationItems.module.scss
index df3fd0beb..d47d8040f 100644
--- a/src/components/NavigationItems.module.scss
+++ b/src/components/NavigationItems.module.scss
@@ -7,9 +7,9 @@
   transition: 0.2s ease-out;
   padding: 0.5rem;
   margin: 0 -0.5rem;
-  margin-left: calc((0.5rem + 1em) * -1);
+  margin-left: calc((0.5rem + var(--icon-size)) * -1);
   border-radius: 0.25rem;
-  padding-left: calc(0.5rem + 1em);
+  padding-left: calc(0.5rem + var(--icon-size));
 
   &:hover {
     color: var(--primary-text-hover-color);