From 3781f9111504c714049c96cf5e4b71a9714eb222 Mon Sep 17 00:00:00 2001 From: Adrien Castagliola Date: Thu, 30 Nov 2023 15:37:18 +0100 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8Fremove=20hard=20coded=20color?= =?UTF-8?q?s?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/badge/Badge.tsx | 41 +++++++++++----------------------- 1 file changed, 13 insertions(+), 28 deletions(-) diff --git a/src/components/badge/Badge.tsx b/src/components/badge/Badge.tsx index 5e5d6cbf..535129a0 100644 --- 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 ( - - - {displayText} - - + + {displayText} + ); };