♻️remove hard coded colors

ZeroGachis · Nov 30, 2023 · 3781f91 · 3781f91
1 parent 59f4090
commit 3781f91
Showing 1 changed file with 13 additions and 28 deletions.
diff --git a/src/components/badge/Badge.tsx b/src/components/badge/Badge.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, ViewStyle } from 'react-native';
 
 import { Body } from '../typography/Body';
 import { ThemType, useTheme } from '../../styles/themes';
@@ -8,47 +8,32 @@ import type { WithTestID } from 'src/shared/type';
 type BadgeProps = WithTestID<{
     number: number;
     maxDigits: number;
-    backgroundColor?: string;
-    color?: string;
+    style?: ViewStyle;
 }>;
 
-const DEFAULT_COLOR = '#ffffff';
-const DEFAULT_BACKGROUND_COLOR = '#2F4158';
-
-const createStyle = (
-    theme: ThemType,
-    color: string,
-    backgroundColor: string,
-) => {
+const createStyle = (theme: ThemType, style?: ViewStyle) => {
     return StyleSheet.create({
         badge: {
-            backgroundColor,
-            color,
-            borderRadius: 8,
+            backgroundColor: theme.sw.colors.neutral[700],
+            color: theme.sw.colors.neutral[50],
             paddingHorizontal: theme.sw.spacing.xs,
             paddingVertical: theme.sw.spacing.xxs,
-            fontSize: 14,
+            alignSelf: 'flex-start',
+            borderRadius: 8,
+            ...style,
         },
     });
 };
 
-export const Badge = ({
-    number,
-    maxDigits,
-    testID,
-    backgroundColor = DEFAULT_BACKGROUND_COLOR,
-    color = DEFAULT_COLOR,
-}: BadgeProps) => {
+export const Badge = ({ number, maxDigits, testID, style }: BadgeProps) => {
     const theme = useTheme();
     const displayText = getTruncatedNumber(number, maxDigits);
-    const badgeStyle = createStyle(theme, color, backgroundColor).badge;
+    const badgeStyle = createStyle(theme, style).badge;
 
     return (
-        <View style={{ alignSelf: 'flex-start' }} testID={testID}>
-            <Body size='B2' weight='semi-bold' style={badgeStyle}>
-                {displayText}
-            </Body>
-        </View>
+        <Body size='B2' weight='semi-bold' style={badgeStyle} testID={testID}>
+            {displayText}
+        </Body>
     );
 };