replace mockup with refactored version

packages/docs-reanimated/src/components/AvailableFrom/index.tsx

@@ -1,38 +1,46 @@
 import React from 'react';
+import clsx from 'clsx';
+import { useColorMode } from '@docusaurus/theme-common';
+
 import styles from './styles.module.css';
+import Danger from '/static/img/danger.svg';
+import DangerDark from '/static/img/danger-dark.svg';
 
 interface Props {
   version?: string;
-  big?: any;
+  isFull?: boolean;
 }
 
-export default function AvailableFrom({ version, big }: Props) {
-  return (
-    <>
-      {big ? (
-        <div className={styles.big}>
-          <div className={styles.info}>
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="13"
-              height="14"
-              fill="none"
-              viewBox="0 0 13 14">
-              <path
-                stroke="#001a72"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M6.5 10.327v.006m0-6.666v4.666M12.5 7a6 6 0 11-12 0 6 6 0 0112 0z"></path>
-            </svg>
+export default function AvailableFrom({ version, isFull }: Props) {
+  const { colorMode } = useColorMode();
+  const isLightMode = colorMode === 'light';
+  const badgeThemeStyles = isLightMode ? styles.light : styles.dark;
+
+  const getBadgeContent = () => {
+    if (isFull) {
+      return (
+        <>
+          <div className={styles.infoIcon}>
+            {isLightMode ? <Danger /> : <DangerDark />}
           </div>
           <span>
             Available from Reanimated{' '}
             <span className={styles.version}>v{version}</span>
           </span>
-        </div>
-      ) : (
-        <div className={styles.badge}>Available from v{version}</div>
-      )}
-    </>
+        </>
+      );
+    }
+
+    return <>Available from v{version}</>;
+  };
+
+  return (
+    <div
+      className={clsx(
+        isFull ? styles.fullBadge : styles.badge,
+        badgeThemeStyles
+      )}>
+      {getBadgeContent()}
+    </div>
   );
 }

packages/docs-reanimated/src/components/AvailableFrom/styles.module.css

@@ -1,7 +1,5 @@
 .badge {
   display: inline-block;
-  background-color: var(--swm-purple-light-40);
-  color: var(--swm-navy-light-100);
   border-radius: 8px;
   font-size: 12px;
   font-weight: 500;
@@ -10,19 +8,34 @@
   margin: 0 0.25rem;
 }
 
-.info {
-  margin-right: 1rem;
-}
-.version {
-  font-weight: 500;
-}
-
-.big {
+.fullBadge {
   padding: 1rem;
   width: '100%';
   border-radius: 8px;
-  background-color: var(--swm-purple-light-20);
   display: flex !important;
   flex-direction: row;
   margin-bottom: 1rem;
 }
+
+.light {
+  background-color: var(--swm-yellow-light-40);
+  color: var(--swm-navy-light-100);
+}
+
+.dark {
+  background-color: var(--swm-yellow-dark-120);
+  color: var(--swm-off-white);
+}
+
+.infoIcon {
+  margin-right: 1rem;
+}
+
+.infoIcon > svg {
+  width: 14px;
+  height: 14px;
+}
+
+.version {
+  font-weight: 500;
+}