💄 DOP-4658 side nav now handles dark mode (#1127)

Co-authored-by: Caesar Bell <[email protected]>

package.json

@@ -89,7 +89,7 @@
     "@leafygreen-ui/search-input": "^2.1.4",
     "@leafygreen-ui/segmented-control": "^8.0.0",
     "@leafygreen-ui/select": "^7.0.0",
-    "@leafygreen-ui/side-nav": "^10.0.0",
+    "@leafygreen-ui/side-nav": "^14.1.3",
     "@leafygreen-ui/table": "^6.1.0",
     "@leafygreen-ui/tabs": "^11.2.0",
     "@leafygreen-ui/text-area": "^6.1.0",

src/components/Card/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withPrefix, navigate } from 'gatsby';
+import { navigate } from 'gatsby';
 import styled from '@emotion/styled';
 import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
 import LeafyGreenCard from '@leafygreen-ui/card';
@@ -12,6 +12,7 @@ import ConditionalWrapper from '../ConditionalWrapper';
 import Link from '../Link';
 import Tag from '../Tag';
 import { isRelativeUrl } from '../../utils/is-relative-url';
+import { getSuitableIcon } from '../../utils/get-suitable-icon';
 
 const cardBaseStyles = css`
   display: flex;
@@ -157,15 +158,7 @@ const Card = ({
     isLanding && !isLargeIconStyle ? landingStyles : '', // must come after other styles to override
   ];
 
-  let iconSrc;
-
-  if (icon) {
-    const isPath = icon.includes('/');
-    const getIcon = `${icon}${darkMode ? '_inverse' : ''}`;
-    const imageUrl = `https://webimages.mongodb.com/_com_assets/icons/${getIcon}.svg`;
-
-    iconSrc = isPath ? (darkMode && iconDark ? withPrefix(iconDark) : withPrefix(icon)) : imageUrl;
-  }
+  const iconSrc = getSuitableIcon(icon, iconDark, darkMode);
 
   return (
     <LeafyGreenCard className={cx(styling)} onClick={url ? () => onCardClick(url) : undefined}>

src/components/Sidenav/DocsHomeButton.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { SideNavItem } from '@leafygreen-ui/side-nav';
 import Icon from '@leafygreen-ui/icon';
 import { css as LeafyCSS, cx } from '@leafygreen-ui/emotion';
@@ -10,29 +11,33 @@ import { titleStyle } from './styles/sideNavItem';
 
 const homeLinkStyle = LeafyCSS`
   span {
-    color: ${palette.gray.dark1};
+    color: var(--color);
     font-weight: 400;
     display: flex;
     gap: 6px;
     svg {
       height: 17px;
-      color: ${palette.gray.dark2};
     }
   }
 `;
 
-const DocsHomeButton = () => {
+const DocsHomeButton = ({ darkMode }) => {
   return (
     <SideNavItem
       className={cx(titleStyle, sideNavItemBasePadding, homeLinkStyle)}
       as={Link}
       href={baseUrl()}
       hideExternalIcon={true}
+      style={{ '--color': darkMode ? palette.gray.light1 : palette.gray.dark1 }}
     >
       <Icon glyph="Home"></Icon>
       Docs Home
     </SideNavItem>
   );
 };
 
+DocsHomeButton.propTypes = {
+  darkMode: PropTypes.bool,
+};
+
 export default DocsHomeButton;