Wrap

Author: m-bert

packages/docs-gesture-handler/src/components/HeaderWithBadges/index.tsx

@@ -1,13 +1,8 @@
 import React from 'react';
-import { StyleSheet } from 'react-native';
 import { useColorMode } from '@docusaurus/theme-common';
 
-const COLORS = {
-  SWM_OFF_WHITE: '#f8f9ff',
-  SWM_PURPLE_LIGHT_100: '#782aeb',
-  SWM_NAVY_LIGHT_60: '#6676aa',
-  SWM_NAVY: '#232736',
-};
+import styles from './styles.module.css';
+import clsx from 'clsx';
 
 type HeaderWithBadgesProps = {
   platforms?: ('android' | 'iOS' | 'web')[];
@@ -29,11 +24,11 @@ export function VersionBadge({ version }: VersionBadgeProps) {
 
   return (
     <div
-      style={{
-        ...styles.badge,
-        ...styles.versionBadge,
-        ...(isDark ? styles.versionBadgeDark : styles.versionBadgeLight),
-      }}>
+      className={clsx(
+        styles.badge,
+        styles.versionBadge,
+        isDark ? styles.versionBadgeDark : styles.versionBadgeLight
+      )}>
       Available from {version}
     </div>
   );
@@ -49,7 +44,7 @@ export function PlatformBadge({ platform }: PlatformBadgeProps) {
           ? styles.webBadge
           : {};
 
-  return <div style={{ ...styles.badge, ...platformBadge }}>{platform}</div>;
+  return <div className={clsx(styles.badge, platformBadge)}>{platform}</div>;
 }
 
 export default function HeaderWithBadges({
@@ -58,7 +53,7 @@ export default function HeaderWithBadges({
   children,
 }: HeaderWithBadgesProps) {
   return (
-    <div style={styles.container}>
+    <div className={clsx(styles.headerWithBadges)}>
       {children}
 
       {platforms
@@ -71,55 +66,3 @@ export default function HeaderWithBadges({
     </div>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    display: 'flex',
-    flexDirection: 'row',
-    gap: 10,
-    marginBottom: 20,
-  },
-
-  badge: {
-    borderRadius: 10,
-    paddingTop: 2,
-    paddingBottom: 2,
-    paddingLeft: 10,
-    paddingRight: 10,
-    color: 'white',
-
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-around',
-  },
-
-  androidBadge: {
-    backgroundColor: '#0f8142',
-  },
-
-  iosBadge: {
-    backgroundColor: '#000000',
-  },
-
-  webBadge: {
-    backgroundColor: '#1067c4',
-  },
-
-  versionBadge: {
-    marginLeft: 'auto',
-    borderWidth: 1,
-    borderStyle: 'solid',
-  },
-
-  versionBadgeLight: {
-    borderColor: COLORS.SWM_PURPLE_LIGHT_100,
-    backgroundColor: COLORS.SWM_OFF_WHITE,
-    color: COLORS.SWM_PURPLE_LIGHT_100,
-  },
-
-  versionBadgeDark: {
-    borderColor: COLORS.SWM_NAVY_LIGHT_60,
-    backgroundColor: COLORS.SWM_NAVY,
-    color: COLORS.SWM_OFF_WHITE,
-  },
-});

packages/docs-gesture-handler/src/components/HeaderWithBadges/styles.module.css

@@ -0,0 +1,61 @@
+.headerWithBadges {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  margin-bottom: 20px;
+}
+
+.badge {
+  border-radius: 16px;
+  padding: 2px 10px;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
+
+.androidBadge {
+  background-color: #0f8142;
+}
+
+.iosBadge {
+  background-color: #000000;
+}
+
+.webBadge {
+  background-color: #1067c4;
+}
+
+.versionBadge {
+  margin-left: auto;
+  border-width: 1px;
+  border-style: solid;
+}
+
+.versionBadgeLight {
+  border-color: var(--swm-purple-light-100);
+  background-color: var(--swm-off-white);
+  color: var(--swm-purple-light-100);
+}
+
+.versionBadgeDark {
+  border-color: var(--swm-navy-light-60);
+  background-color: var(--swm-navy);
+  color: var(--swm-off-white);
+}
+
+@media (max-width: 420px) {
+  .headerWithBadges {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 10px;
+    margin-bottom: 20px;
+  }
+
+  .versionBadge {
+    margin-left: 0px;
+    border-width: 1px;
+    border-style: solid;
+  }
+}