Merge pull request #516 from sailpoint-oss/fix/lightdarkicons

Use css to style icons
sailpoint-oss · Mar 21, 2024 · a48ec75 · a48ec75
2 parents ccf691e + c97c214
commit a48ec75
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 19 deletions.
diff --git a/sidebars.js b/sidebars.js
@@ -202,11 +202,6 @@ const sidebars = {
           label: 'Product Documentation',
           href: 'https://documentation.sailpoint.com',
         },
-        {
-          type: 'link',
-          label: 'Certifications',
-          href: 'https://university.sailpoint.com/Saba/Web_spf/NA10P1PRD075/guest/categorydetail/categ000000000003041/true/xxemptyxx/',
-        },
       ],
     },
   ],
@@ -252,11 +247,6 @@ const sidebars = {
             label: 'Product Documentation',
             href: 'https://documentation.sailpoint.com/#identityiq',
           },
-          {
-            type: 'link',
-            label: 'Certifications',
-            href: 'https://university.sailpoint.com/Saba/Web_spf/NA10P1PRD075/guest/categorydetail/categ000000000003042/true/xxemptyxx/',
-          },
       ],
     },
   ],

diff --git a/src/theme/DocCard/index.js b/src/theme/DocCard/index.js
@@ -9,8 +9,7 @@ import isInternalUrl from '@docusaurus/isInternalUrl';
 import {translate} from '@docusaurus/Translate';
 import styles from './styles.module.css';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faFolderOpen, faLink, faBook, faArrowUpRightFromSquare } from '@fortawesome/pro-duotone-svg-icons'
-import { useColorMode } from '@docusaurus/theme-common';
+import { faFolderOpen, faBook, faArrowUpRightFromSquare } from '@fortawesome/pro-duotone-svg-icons'
 
 function CardContainer({href, children}) {
   return (
@@ -39,18 +38,14 @@ function CardLayout({href, icon, title, description}) {
 }
 function CardCategory({item}) {
   const href = findFirstCategoryLink(item);
-  const {colorMode} = useColorMode();
-  //const icon = colorMode === 'dark' ? <FontAwesomeIcon icon={faFolderOpen} style={{marginRight: "0.5em"}} color='#0033a1' /> : <FontAwesomeIcon icon={faFolderOpen} style={{marginRight: "0.5em"}} color='#7ecfee' />;
-  //const icon = <FontAwesomeIcon icon={faFolderOpen} style={{marginRight: "0.5em"}} color='#0033a1' />;
-  //console.log(item)
   // Unexpected: categories that don't have a link have been filtered upfront
   if (!href) {
     return null;
   }
   return (
     <CardLayout
       href={href}
-      icon={<FontAwesomeIcon icon={faFolderOpen} style={{marginRight: "0.5em"}} color={colorMode === 'dark' ? '#7ecfee' : '#0033a1'} />}
+      icon={<FontAwesomeIcon icon={faFolderOpen} className={styles.docCardIcon} />}
       //icon={icon}
       title={item.label}
       description={
@@ -69,8 +64,7 @@ function CardCategory({item}) {
   );
 }
 function CardLink({item}) {
-  const {colorMode} = useColorMode();
-  const icon = isInternalUrl(item.href) ? <FontAwesomeIcon icon={faBook} style={{marginRight: "0.5em"}} color={colorMode === 'dark' ? '#7ecfee' : '#0033a1'} /> : <FontAwesomeIcon icon={faArrowUpRightFromSquare} style={{marginRight: "0.5em"}} color={colorMode === 'dark' ? '#7ecfee' : '#0033a1'} />;
+  const icon = isInternalUrl(item.href) ? <FontAwesomeIcon icon={faBook} className={styles.docCardIcon} /> : <FontAwesomeIcon icon={faArrowUpRightFromSquare} className={styles.docCardIcon} />;
   const doc = useDocById(item.docId ?? undefined);
   return (
     <CardLayout

diff --git a/src/theme/DocCard/styles.module.css b/src/theme/DocCard/styles.module.css
@@ -26,3 +26,8 @@
 .cardDescription {
   font-size: 0.9rem;
 }
+
+.docCardIcon {
+  margin-right: .5em;
+  color: var(--ifm-color-primary);
+}