Various style fixes in docs

docs/src/components/Hero/StartScreen/index.tsx

@@ -17,10 +17,12 @@ const StartScreen = () => {
           </h2>
         </div>
         <div className={styles.lowerHeading}>
-          <HomepageButton
-            href="/react-native-gesture-handler/docs/"
-            title="Get started"
-          />
+          <div className={styles.buttonContainer}>
+            <HomepageButton
+              href="/react-native-gesture-handler/docs/"
+              title="Get started"
+            />
+          </div>
         </div>
       </div>
     </section>

docs/src/components/Hero/StartScreen/styles.module.css

@@ -37,6 +37,11 @@
   color: var(--swm-landing-heading);
 }
 
+.buttonContainer {
+  display: flex;
+  justify-content: flex-start;
+}
+
 @media (max-width: 768px) {
   .headingLabel {
     font-size: 48px;

docs/src/components/HomepageButton/styles.module.css

@@ -1,10 +1,10 @@
 .homepageButton {
-  width: max-content;
   height: 60px;
   padding: 1em 1.5em 1em 1em;
 
   font-weight: 500;
   font-size: 20px;
+  text-wrap: nowrap;
 
   color: var(--swm-off-white);
   background-color: var(--swm-landing-button-purple);

docs/src/theme/Admonition/index.js

@@ -2,10 +2,9 @@ import React from 'react';
 import clsx from 'clsx';
 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: {
@@ -77,6 +76,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(
@@ -88,9 +92,7 @@ export default function Admonition(props) {
       )}>
       <div className={styles.admonitionHeading}>
         <div className={styles.admonitionIcon}>
-          {/* one of the icons is always hidden in css */}
-          <Danger />
-          <DangerDark />
+          <ThemedImage sources={dangerIcon} />
         </div>
 
         {titleLabel}

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

@@ -20,19 +20,10 @@
 }
 
 .admonitionIcon {
-  display: inline-block;
+  display: flex;
   margin-right: 0.4em;
 
   width: 21px;
-  height: 27px;
-}
-
-[data-theme='dark'] .admonitionIcon svg:first-child {
-  display: none;
-}
-
-[data-theme='light'] .admonitionIcon svg:nth-child(2) {
-  display: none;
 }
 
 .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,19 @@ 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 rightArrow = {
+    light: useBaseUrl('/img/arrow-right.svg'),
+    dark: useBaseUrl('/img/arrow-right-dark.svg'),
+  };
 
-  const matchDirectedArrow = (isNextPaginator) => {
-    return isNextPaginator ? arrows['right'] : arrows['left'];
+  const leftArrow = {
+    light: useBaseUrl('/img/arrow-left.svg'),
+    dark: useBaseUrl('/img/arrow-left-dark.svg'),
   };
 
   return (
@@ -45,7 +32,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>