fix: bigger nav icons

newrelic · Aug 17, 2020 · fed7b96 · fed7b96
1 parent 56a79c0
commit fed7b96
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/src/components/NavigationItems.js b/src/components/NavigationItems.js
@@ -82,14 +82,17 @@ 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]) {
     return (
       <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
@@ -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);