Greek font looks bad/rendering issue

Fixes duolicious#507 by adding robot to app.tsx and then chaning the default-text.tsx and default-text-input.tsx
DeepeshKalura · Jan 9, 2025 · a613e53 · a613e53
1 parent 1e5c9eb
commit a613e53
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 20 deletions.
diff --git a/App.tsx b/App.tsx
@@ -96,7 +96,7 @@ const HomeTabs = () => {
   );
 };
 
-const WebSplashScreen = ({loading}) => {
+const WebSplashScreen = ({ loading }) => {
   const [isFaded, setIsFaded] = useState(false);
   const opacity = useRef(new Animated.Value(1)).current;
 
@@ -181,6 +181,18 @@ const App = () => {
       MontserratRegular: require('./assets/fonts/montserrat/static/Montserrat-Regular.ttf'),
       MontserratSemiBold: require('./assets/fonts/montserrat/static/Montserrat-SemiBold.ttf'),
       MontserratThin: require('./assets/fonts/montserrat/static/Montserrat-Thin.ttf'),
+
+      // Added Roboto
+      RobotoBlack: require('./assets/fonts/roboto/Roboto-Black.ttf'),
+      RobotoBold: require('./assets/fonts/roboto/Roboto-Bold.ttf'),
+      RobotoExtraBold: require('./assets/fonts/roboto/Roboto-ExtraBold.ttf'),
+      RobotoLight: require('./assets/fonts/roboto/Roboto-Light.ttf'),
+      RobotoExtraLight: require('./assets/fonts/roboto/Roboto-ExtraLight.ttf'),
+      RobotoMedium: require('./assets/fonts/roboto/Roboto-Medium.ttf'),
+      RobotoRegular: require('./assets/fonts/roboto/Roboto-Regular.ttf'),
+      RobotoSemiBold: require('./assets/fonts/montserrat/static/Roboto-SemiBold.ttf'),
+      RobotoThin: require('./assets/fonts/roboto/Roboto-Thin.ttf'),
+
     });
   }, []);
 
@@ -233,7 +245,7 @@ const App = () => {
       logout();
 
       if (!parsedUrl) {
-        navigationContainerRef.reset({ routes: [ { name: 'Welcome' } ]});
+        navigationContainerRef.reset({ routes: [{ name: 'Welcome' }] });
       }
 
       return;
@@ -255,7 +267,7 @@ const App = () => {
       logout();
 
       if (!parsedUrl) {
-        navigationContainerRef.reset({ routes: [ { name: 'Welcome' } ]});
+        navigationContainerRef.reset({ routes: [{ name: 'Welcome' }] });
       }
 
       return;
@@ -337,8 +349,8 @@ const App = () => {
   const fetchServerStatusState = useCallback(async () => {
     let response: Response | null = null
     try {
-      response = await fetch(STATUS_URL, {cache: 'no-cache'});
-    } catch (e) {};
+      response = await fetch(STATUS_URL, { cache: 'no-cache' });
+    } catch (e) { };
 
     if (response === null || !response.ok) {
       // If even the status server is down, things are *very* not-okay. But odds
@@ -467,7 +479,7 @@ const App = () => {
   useScrollbarStyle();
 
   if (serverStatus !== "ok") {
-    return <UtilityScreen serverStatus={serverStatus}/>
+    return <UtilityScreen serverStatus={serverStatus} />
   }
 
   return (
@@ -478,8 +490,8 @@ const App = () => {
             ref={navigationContainerRef}
             initialState={
               initialState ?
-              { ...initialState, stale: true } :
-              undefined
+                { ...initialState, stale: true } :
+                undefined
             }
             onStateChange={onNavigationStateChange}
             theme={{
@@ -525,15 +537,15 @@ const App = () => {
                 component={TraitsTab} />
             </Stack.Navigator>
           </NavigationContainer>
-          <DonationNagModal/>
-          <ReportModal/>
-          <ImageCropper/>
-          <ColorPickerModal/>
-          <Toast/>
-          <StreamErrorModal/>
+          <DonationNagModal />
+          <ReportModal />
+          <ImageCropper />
+          <ColorPickerModal />
+          <Toast />
+          <StreamErrorModal />
         </>
       }
-      <WebSplashScreen loading={isLoading}/>
+      <WebSplashScreen loading={isLoading} />
     </SafeAreaProvider>
   );
 };

diff --git a/components/default-text-input.tsx b/components/default-text-input.tsx
@@ -4,7 +4,7 @@ import {
 } from 'react-native';
 
 const DefaultTextInput = (props) => {
-  const {style, innerRef, ...rest} = props;
+  const { style, innerRef, ...rest } = props;
 
   return (
     <TextInput
@@ -24,7 +24,7 @@ const DefaultTextInput = (props) => {
         borderWidth: 1,
         borderRadius: 10,
         height: 50,
-        fontFamily: 'MontserratRegular',
+        fontFamily: 'RobotoRegular',
         ...style,
       }}
       {...rest}

diff --git a/components/default-text.tsx b/components/default-text.tsx
@@ -19,18 +19,32 @@ const DefaultText = (props: TextProps) => {
     '900': 'MontserratBlack',
   }[fontWeight] || 'MontserratRegular';
 
+
+  const robotoFontFamily: string | undefined = {
+    '100': 'RobotoThin',
+    '200': 'RobotoExtraLight',
+    '300': 'RobotoLight',
+    '400': 'RobotoRegular',
+    '500': 'RobotoMedium',
+    '600': 'RobotoSemiBold',
+    '700': 'RobotoBold',
+    '800': 'RobotoExtraBold',
+    '900': 'RobotoBlack',
+  }[fontWeight] || 'RobotoRegular';
+
+
   const props_ = {
     style: [
-      {fontFamily: fontFamily || montserratFontFamily},
+      { fontFamily: fontFamily || `${robotoFontFamily}` },
       props.style,
-      {fontWeight: undefined},
+      { fontWeight: undefined },
     ]
   };
 
   return (
     <Text
       selectable={false}
-      {...{...props, ...props_}}
+      {...{ ...props, ...props_ }}
     >
       {props.children}
     </Text>