docs: various small fixes (#5708)

### Before <img width="337" alt="image" src="https://github.com/software-mansion/react-native-reanimated/assets/39658211/1c38844a-8102-49e8-a137-12c7ccbafea4"> <img width="294" alt="image" src="https://github.com/software-mansion/react-native-reanimated/assets/39658211/12103eae-3c8f-4fb9-9e4d-da953ab34a3e"> https://github.com/software-mansion/react-native-reanimated/assets/39658211/f8b0f22d-18b9-4a3b-83a7-8ab241248712 ### After <img width="266" alt="image" src="https://github.com/software-mansion/react-native-reanimated/assets/39658211/0a21f0f9-967c-4145-a81e-f51431d9dd70"> <img width="256" alt="image" src="https://github.com/software-mansion/react-native-reanimated/assets/39658211/aa22884f-0107-481e-aaa7-c348f55627c4"> https://github.com/software-mansion/react-native-reanimated/assets/39658211/803432f3-7ecc-43fe-870c-1365e030cedc
software-mansion · Feb 22, 2024 · 35c90b3 · 35c90b3
1 parent 3c99bb9
commit 35c90b3
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 51 deletions.
diff --git a/docs/src/theme/Admonition/index.js b/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}

diff --git a/docs/src/theme/Admonition/styles.module.css b/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 {

diff --git a/docs/src/theme/MDXComponents/DetailsStyling.tsx b/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>

diff --git a/docs/src/theme/MDXComponents/styles.module.css b/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 {

diff --git a/docs/src/theme/PaginatorNavLink/index.js b/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>