docs: various small fixes

docs/src/theme/Admonition/index.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import clsx from 'clsx';
-import { ThemeClassNames, useColorMode } from '@docusaurus/theme-common';
+import { ThemeClassNames } from '@docusaurus/theme-common';
 import Translate from '@docusaurus/Translate';
+import ThemedImage from '@theme/ThemedImage';
 import styles from './styles.module.css';
 
-import Danger from '/static/img/danger.svg';
-import DangerDark from '/static/img/danger-dark.svg';
+import useBaseUrl from '@docusaurus/useBaseUrl';
 
 const AdmonitionConfigs = {
   note: {
@@ -68,7 +68,6 @@ const aliases = {
 };
 
 export default function Admonition(props) {
-  const { colorMode } = useColorMode();
   const {
     children,
     type,
@@ -78,6 +77,11 @@ export default function Admonition(props) {
   const typeConfig = getAdmonitionConfig(type);
   const titleLabel = title ?? typeConfig.label;
 
+  const dangerIcon = {
+    light: useBaseUrl('/img/danger.svg'),
+    dark: useBaseUrl('/img/danger-dark.svg'),
+  };
+
   return (
     <div
       className={clsx(
@@ -89,7 +93,7 @@ export default function Admonition(props) {
       )}>
       <div className={styles.admonitionHeading}>
         <div className={styles.admonitionIcon}>
-          {colorMode === 'light' ? <Danger /> : <DangerDark />}
+          <ThemedImage sources={dangerIcon} />
         </div>
 
         {titleLabel}

docs/src/theme/Admonition/styles.module.css

@@ -6,10 +6,6 @@
   margin-bottom: 1.5em;
 }
 
-[data-theme='dark'] .admonition {
-  color: var(--swm-off-white);
-}
-
 .admonitionHeading {
   display: flex;
   font-family: var(--swm-admonition-heading-font-family);
@@ -24,11 +20,10 @@
 }
 
 .admonitionIcon {
-  display: inline-block;
+  display: flex;
   margin-right: 0.4em;
 
   width: 21px;
-  height: 27px;
 }
 
 .admonitionIcon svg {

docs/src/theme/MDXComponents/DetailsStyling.tsx

@@ -1,26 +1,25 @@
-import {
-  useCollapsible,
-  useColorMode,
-  Collapsible,
-} from '@docusaurus/theme-common';
+import { useCollapsible, Collapsible } from '@docusaurus/theme-common';
 
 import clsx from 'clsx';
 import React from 'react';
 import { useRef, useState } from 'react';
 
 import styles from './styles.module.css';
 import useIsBrowser from '@docusaurus/useIsBrowser';
-
-import Arrow from '@site/static/img/Arrow.svg';
-import ArrowDark from '@site/static/img/Arrow-dark.svg';
+import ThemedImage from '@theme/ThemedImage';
+import useBaseUrl from '@docusaurus/useBaseUrl';
 
 const DetailsStyling = ({ summary, children, ...props }): JSX.Element => {
   const isBrowser = useIsBrowser();
-  const { colorMode } = useColorMode();
   const { collapsed, setCollapsed } = useCollapsible({
     initialState: !props.open,
   });
 
+  const arrowIcon = {
+    light: useBaseUrl('/img/Arrow.svg'),
+    dark: useBaseUrl('img/Arrow-dark.svg'),
+  };
+
   const detailsRef = useRef<HTMLDetailsElement>(null);
   const [open, setOpen] = useState(props.open);
 
@@ -65,11 +64,7 @@ const DetailsStyling = ({ summary, children, ...props }): JSX.Element => {
         }
       }}>
       <summary>
-        {colorMode === 'light' ? (
-          <Arrow className={styles.arrow} />
-        ) : (
-          <ArrowDark className={styles.arrow} />
-        )}
+        <ThemedImage sources={arrowIcon} className={styles.arrow} />
 
         <p>{extractedSummaryElement}</p>
       </summary>

docs/src/theme/MDXComponents/styles.module.css

@@ -3,7 +3,6 @@
   box-shadow: -8px 8px 0 var(--swm-details-background);
 
   color: var(--swm-details-color);
-  padding: 1.5em 2em;
 }
 
 .details a {
@@ -15,6 +14,7 @@
   align-items: center;
   cursor: pointer;
   list-style: none;
+  padding: 1.5em 2em;
 }
 
 .details > summary > p {
@@ -42,8 +42,7 @@
 }
 
 .collapsibleContent {
-  margin-top: 1rem;
-  padding-top: 0.5rem;
+  padding: 0 2em 1.5em 2em;
 }
 
 .collapsibleContent > *:last-child {

docs/src/theme/PaginatorNavLink/index.js

@@ -2,32 +2,20 @@ import React from 'react';
 import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 import styles from './styles.module.css';
-
-import ArrowLeft from '@site/static/img/arrow-left.svg';
-import ArrowRight from '@site/static/img/arrow-right.svg';
-
-import ArrowLeftDark from '@site/static/img/arrow-left-dark.svg';
-import ArrowRightDark from '@site/static/img/arrow-right-dark.svg';
-import { useColorMode } from '@docusaurus/theme-common';
-
-const arrows = {
-  left: {
-    light: <ArrowLeft />,
-    dark: <ArrowLeftDark />,
-  },
-
-  right: {
-    light: <ArrowRight />,
-    dark: <ArrowRightDark />,
-  },
-};
+import ThemedImage from '@theme/ThemedImage';
+import useBaseUrl from '@docusaurus/useBaseUrl';
 
 export default function PaginatorNavLink(props) {
   const { permalink, title, subLabel, isNext } = props;
-  const { colorMode } = useColorMode();
 
-  const matchDirectedArrow = (isNextPaginator) => {
-    return isNextPaginator ? arrows['right'] : arrows['left'];
+  const rightArrow = {
+    light: useBaseUrl('/img/arrow-right.svg'),
+    dark: useBaseUrl('/img/arrow-right-dark.svg'),
+  };
+
+  const leftArrow = {
+    light: useBaseUrl('/img/arrow-left.svg'),
+    dark: useBaseUrl('/img/arrow-left-dark.svg'),
   };
 
   return (
@@ -45,7 +33,7 @@ export default function PaginatorNavLink(props) {
             isNext ? styles.paginationNext : styles.paginationPrevious
           )}>
           <div className={styles.paginationArrow}>
-            {matchDirectedArrow(isNext)[colorMode]}
+            <ThemedImage sources={isNext ? rightArrow : leftArrow} />
           </div>
           <div className="pagination-nav__sublabel">{subLabel}</div>
         </div>