fix fontfamily

web-ridge · Jun 6, 2023 · 5eab209 · 5eab209
1 parent 2069383
commit 5eab209
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 27 deletions.
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -54,10 +54,9 @@ let theme = createSimpleTheme({
       rippleColor: MD3LightTheme.colors.primary,
       selectedTextColor: MD3LightTheme.colors.onSecondaryContainer,
       activeIndicatorColor: MD3LightTheme.colors.secondaryContainer,
-      fontSize: 10,
-      fontStyle: 'italic',
-      fontWeight: '900',
-      fontFamily: 'Arial',
+      fontSize: 13,
+      fontFamily: 'Montserrat',
+      fontWeight: '500',
     },
     // bottomTabs: {
     //   rippleColor: MD3LightTheme.colors.secondaryContainer,
@@ -74,17 +73,16 @@ let theme = createSimpleTheme({
     //   activeIndicatorColor: MD3DarkTheme.colors.secondaryContainer,
     // },
     // Optional styling of bottom tabs
-    // bottomTabs: {
-    //   backgroundColor: MD3DarkTheme.colors.background,
-    //   textColor: MD3DarkTheme.colors.onBackground,
-    //   rippleColor: MD3DarkTheme.colors.primary,
-    //   selectedTextColor: MD3DarkTheme.colors.primary,
-    //   activeIndicatorColor: MD3DarkTheme.colors.secondary,
-    //     fontSize: 10,
-    //     fontStyle: 'italic',
-    //     fontWeight: '900',
-    //   fontFamily: 'sans-serif',
-    // },
+    bottomTabs: {
+      backgroundColor: MD3DarkTheme.colors.surface,
+      textColor: MD3DarkTheme.colors.onSurfaceVariant,
+      rippleColor: MD3DarkTheme.colors.primary,
+      selectedTextColor: MD3DarkTheme.colors.onSecondaryContainer,
+      activeIndicatorColor: MD3DarkTheme.colors.secondaryContainer,
+      fontSize: 13,
+      fontFamily: 'Montserrat',
+      fontWeight: '500',
+    },
   },
 });
 

diff --git a/src/web/BottomTabBadgeWeb.tsx b/src/web/BottomTabBadgeWeb.tsx
@@ -8,12 +8,14 @@ type Props = React.ComponentProps<typeof Text> & {
   visible?: boolean;
   children?: string | number;
   size?: number;
+  aboveDrawerBreakingPoint: boolean;
 };
 
 function BottomTabBadgeWeb({
   children,
   size = defaultSize,
   visible = true,
+  aboveDrawerBreakingPoint,
   ...rest
 }: Props) {
   const { theme } = React.useContext(RidgeNavigationContext);
@@ -28,18 +30,21 @@ function BottomTabBadgeWeb({
     <Text
       numberOfLines={1}
       style={[
+        styles.container,
         {
           opacity: 1,
-          backgroundColor,
+          backgroundColor: aboveDrawerBreakingPoint
+            ? undefined
+            : backgroundColor,
           color: textColor,
           fontSize: size * 0.7,
           lineHeight: size,
           height: size,
           fontWeight: '500',
           minWidth: size,
           borderRadius,
+          fontFamily: theme.bottomBar.fontFamily,
         },
-        styles.container,
       ]}
       {...rest}
     >

diff --git a/src/web/BottomTabWeb.tsx b/src/web/BottomTabWeb.tsx
@@ -28,6 +28,8 @@ function BottomTabWeb({
 }) {
   const { theme } = React.useContext(RidgeNavigationContext);
 
+  count = 3;
+
   return (
     <BottomTabLink key={bottomTab.path} to={bottomTab} params={{}}>
       {(linkProps) => (
@@ -84,8 +86,10 @@ function BottomTabWeb({
                     {aboveDrawerBreakingPoint && (
                       <Text
                         style={[
-                          styles.title,
                           {
+                            fontFamily: theme.bottomBar.fontFamily,
+                            fontSize: theme.bottomBar.fontSize,
+                            fontWeight: theme.bottomBar.fontWeight,
                             color: isSelected
                               ? theme.bottomBar.selectedTextColor
                               : theme.bottomBar.textColor,
@@ -96,18 +100,25 @@ function BottomTabWeb({
                       </Text>
                     )}
                   </View>
-                  {aboveDrawerBreakingPoint && (
+                  {aboveDrawerBreakingPoint && !!count && (
                     <View style={styles.badgeRight}>
-                      <Text>443</Text>
+                      <BottomTabBadge
+                        visible={!!count}
+                        aboveDrawerBreakingPoint={aboveDrawerBreakingPoint}
+                      >
+                        {count}
+                      </BottomTabBadge>
                     </View>
                   )}
                 </View>
                 <View style={styles.spacer} />
                 {!aboveDrawerBreakingPoint && (
                   <Text
                     style={[
-                      styles.title,
                       {
+                        fontFamily: theme.bottomBar.fontFamily,
+                        fontSize: theme.bottomBar.fontSize,
+                        fontWeight: theme.bottomBar.fontWeight,
                         color: isSelected
                           ? theme.bottomBar.selectedTextColor
                           : theme.bottomBar.textColor,
@@ -205,12 +216,6 @@ const styles = StyleSheet.create({
     height: 24,
     margin: 10,
   },
-  title: {
-    fontSize: 13,
-    fontWeight: '500',
-    fontFamily:
-      '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
-  },
 });
 
 export default React.memo(BottomTabWeb);