Fix font weight on android (this platform sucks)

MoOx · Jan 27, 2021 · 1ac5a99 · 1ac5a99
1 parent 8e9b349
commit 1ac5a99
Show file tree

Hide file tree

Showing 14 changed files with 65 additions and 129 deletions.
diff --git a/src/components/CalendarsPermissions.res b/src/components/CalendarsPermissions.res
@@ -64,7 +64,7 @@ let make = (~onAboutPrivacyPress, ~onContinuePress) => {
         <Text
           style={
             open Style
-            array([Theme.text["title2"], Theme.text["bold"], theme.styles["text"]])
+            array([Theme.text["title2"], Theme.text["weight700"], theme.styles["text"]])
           }>
           {"Set Up Calendars Access"->React.string}
         </Text>

diff --git a/src/components/Filters.res b/src/components/Filters.res
@@ -9,7 +9,6 @@ let styles = {
     "options": viewStyle(~flexDirection=#row, ~justifyContent=#flexEnd, ()),
     "text": textStyle(~fontSize=16., ~lineHeight=16. *. 1.4, ()),
     "infoText": textStyle(~fontSize=12., ~lineHeight=12. *. 1.4, ()),
-    "durationText": textStyle(~fontSize=12., ~lineHeight=12., ~fontWeight=#_700, ()),
   }
 }->StyleSheet.create
 

diff --git a/src/components/GoalEdit.res b/src/components/GoalEdit.res
@@ -290,7 +290,8 @@ let make = (
                   open Style
                   array([
                     Theme.text["subhead"],
-                    textStyle(~color=theme.colors.blue, ~fontWeight=Theme.fontWeights.semiBold, ()),
+                    Theme.text["weight600"],
+                    textStyle(~color=theme.colors.blue, ()),
                   ])
                 }
                 numberOfLines=1
@@ -373,20 +374,16 @@ let make = (
                 array([
                   Predefined.styles["flex"],
                   Theme.text["callout"],
+                  Theme.text["weight500"],
                   theme.styles["text"],
-                  textStyle(~fontWeight=Theme.fontWeights.medium, ()),
                 ])
               }>
               {"Weekly Goal"->React.string}
             </Text>
             <Text
               style={
                 open Style
-                array([
-                  Theme.text["callout"],
-                  theme.styles["textLight1"],
-                  textStyle(~fontWeight=Theme.fontWeights.semiBold, ()),
-                ])
+                array([Theme.text["callout"], Theme.text["weight600"], theme.styles["textLight1"]])
               }
               numberOfLines=1
               adjustsFontSizeToFit=true>

diff --git a/src/components/Goals.res b/src/components/Goals.res
@@ -358,8 +358,8 @@ let make = (~onNewGoalPress, ~onEditGoalPress) => {
                         open Style
                         array([
                           Theme.text["caption1"],
+                          Theme.text["weight700"],
                           Theme.styleSheets.dark["textOnDarkLight"],
-                          textStyle(~fontWeight=Theme.fontWeights.bold, ()),
                         ])
                       }>
                       {switch goal.type_->Goal.Type.fromSerialized {
@@ -375,8 +375,8 @@ let make = (~onNewGoalPress, ~onEditGoalPress) => {
                         open Style
                         array([
                           Theme.text["title1"],
+                          Theme.text["weight500"],
                           Theme.styleSheets.dark["text"],
-                          textStyle(~fontWeight=Theme.fontWeights.medium, ()),
                         ])
                       }
                       numberOfLines=1>
@@ -548,8 +548,8 @@ let make = (~onNewGoalPress, ~onEditGoalPress) => {
                           open Style
                           array([
                             Theme.text["caption1"],
+                            Theme.text["weight300"],
                             Theme.styleSheets.dark["textOnDarkLight"],
-                            textStyle(~fontWeight=Theme.fontWeights.light, ()),
                           ])
                         }>
                         {"Daily Average"->React.string}
@@ -559,13 +559,9 @@ let make = (~onNewGoalPress, ~onEditGoalPress) => {
                           open Style
                           array([
                             Theme.text["title2"],
+                            Theme.text["weight500"],
                             Theme.styleSheets.dark["text"],
-                            textStyle(
-                              //  ~fontWeight=Theme.fontWeights.light,
-                              ~fontWeight=Theme.fontWeights.medium,
-                              ~textAlign=#right,
-                              (),
-                            ),
+                            textStyle(~textAlign=#right, ()),
                           ])
                         }>
                         {switch proportionalAverageTime {

diff --git a/src/components/Home.res b/src/components/Home.res
@@ -406,7 +406,7 @@ let make = (~onGetStarted, ~refreshing, ~onRefreshDone, ~onFiltersPress, ~onActi
               <Text
                 style={
                   open Style
-                  array([Theme.text["title1"], Theme.text["heavy"], theme.styles["text"]])
+                  array([Theme.text["title1"], Theme.text["weight800"], theme.styles["text"]])
                 }>
                 {"No Events"->React.string}
               </Text>

diff --git a/src/components/NotificationsPermissionsPopin.res b/src/components/NotificationsPermissionsPopin.res
@@ -142,7 +142,7 @@ let make = () => {
                 <Text
                   style={
                     open Style
-                    array([Theme.text["title2"], Theme.text["bold"], theme.styles["text"]])
+                    array([Theme.text["title2"], Theme.text["weight700"], theme.styles["text"]])
                   }>
                   {"Set Up Reminders"->React.string}
                 </Text>

diff --git a/src/components/TopActivities.res b/src/components/TopActivities.res
@@ -65,7 +65,7 @@ let make = (~mapTitleDuration, ~onFiltersPress, ~onActivityPress) => {
                 <Text
                   style={Style.array([
                     Theme.text["title3"],
-                    Theme.text["medium"],
+                    Theme.text["weight500"],
                     theme.styles["textLight2"],
                   ])}>
                   {"No activities"->React.string}

diff --git a/src/components/WeeklyGraph.res b/src/components/WeeklyGraph.res
@@ -5,8 +5,6 @@ open ReactMultiversal
 let styles = {
   open Style
   {
-    "text": textStyle(~fontSize=16., ~lineHeight=16. *. 1.4, ()),
-    "durationText": textStyle(~fontSize=12., ~lineHeight=12., ~fontWeight=#_700, ()),
     "dash": style(~alignSelf=#stretch, ()),
   }
 }->StyleSheet.create

diff --git a/src/components/Welcome.res b/src/components/Welcome.res
@@ -13,11 +13,10 @@ let styles = {
       ~alignSelf=#flexStart,
       (),
     ),
-    "title": textStyle(~fontSize=58., ~lineHeight=58., ~fontWeight=#_100, ()),
+    "title": textStyle(~fontSize=58., ~lineHeight=58., ()),
     "appName": textStyle(
       ~fontSize=68.,
       ~lineHeight=68.,
-      ~fontWeight=#_800,
       // ~color=Consts.Colors.color1,
       (),
     ),
@@ -26,13 +25,7 @@ let styles = {
     "iconCalendar": imageStyle(~width=48.->dp, ~height=48.->dp, ~marginTop=2.->dp, ()),
     "bottomText": viewStyle(~flexShrink=1., ()),
     "permissions": textStyle(~flexShrink=1., ~fontSize=12., ~lineHeight=12. *. 1.4, ()),
-    "permissionsLink": textStyle(
-      ~flexShrink=1.,
-      ~fontSize=14.,
-      ~lineHeight=14. *. 1.4,
-      ~fontWeight=#_600,
-      (),
-    ),
+    "permissionsLink": textStyle(~textAlign=#center, ~fontSize=14., ~lineHeight=14. *. 1.4, ()),
   }
 }->StyleSheet.create
 
@@ -118,7 +111,7 @@ let make = (~onAboutPrivacyPress, ~onContinuePress) => {
         <Text
           style={
             open Style
-            array([styles["title"], theme.styles["text"]])
+            array([styles["title"], theme.styles["text"], Theme.text["weight100"]])
           }
           numberOfLines=1
           adjustsFontSizeToFit=true>
@@ -127,7 +120,7 @@ let make = (~onAboutPrivacyPress, ~onContinuePress) => {
         <Text
           style={
             open Style
-            array([styles["appName"], theme.styles["textMain"]])
+            array([styles["appName"], theme.styles["textMain"], Theme.text["weight800"]])
           }
           numberOfLines=1
           adjustsFontSizeToFit=true>

diff --git a/src/components/shareable/Html.res b/src/components/shareable/Html.res
@@ -50,7 +50,7 @@ module H1 = {
       <Text
         style={
           open Style
-          array([Theme.text["largeTitle"], Theme.text["bold"], theme.styles["text"]])
+          array([Theme.text["largeTitle"], Theme.text["weight700"], theme.styles["text"]])
         }>
         children
       </Text>
@@ -69,7 +69,7 @@ module H2 = {
       <Text
         style={
           open Style
-          array([Theme.text["title1"], Theme.text["bold"], theme.styles["text"]])
+          array([Theme.text["title1"], Theme.text["weight700"], theme.styles["text"]])
         }>
         children
       </Text>
@@ -88,7 +88,7 @@ module H3 = {
       <Text
         style={
           open Style
-          array([Theme.text["title2"], Theme.text["bold"], theme.styles["text"]])
+          array([Theme.text["title2"], Theme.text["weight700"], theme.styles["text"]])
         }>
         children
       </Text>
@@ -107,7 +107,7 @@ module H4 = {
       <Text
         style={
           open Style
-          array([Theme.text["title3"], Theme.text["bold"], theme.styles["text"]])
+          array([Theme.text["title3"], Theme.text["weight700"], theme.styles["text"]])
         }>
         children
       </Text>
@@ -126,7 +126,7 @@ module H5 = {
       <Text
         style={
           open Style
-          array([Theme.text["headline"], Theme.text["bold"], theme.styles["text"]])
+          array([Theme.text["headline"], Theme.text["weight700"], theme.styles["text"]])
         }>
         children
       </Text>
@@ -144,7 +144,7 @@ module H6 = {
       <Text
         style={
           open Style
-          array([Theme.text["headline"], Theme.text["semiBold"], theme.styles["text"]])
+          array([Theme.text["headline"], Theme.text["weight600"], theme.styles["text"]])
         }>
         children
       </Text>

diff --git a/src/components/shareable/Theme.res b/src/components/shareable/Theme.res
@@ -106,92 +106,45 @@ let fontWeights = {
 }
 
 let text = {
-  "largeTitle": textStyle(
-    ~fontSize=34.,
-    ~lineHeight=41.,
-    ~letterSpacing=0.37,
-    ~fontWeight=fontWeights.regular,
-    (),
-  ),
-  "title1": textStyle(
-    ~fontSize=28.,
-    ~lineHeight=34.,
-    ~letterSpacing=0.36,
-    ~fontWeight=fontWeights.regular,
-    (),
-  ),
-  "title2": textStyle(
-    ~fontSize=22.,
-    ~lineHeight=28.,
-    ~letterSpacing=0.35,
-    ~fontWeight=fontWeights.regular,
-    (),
-  ),
-  "title3": textStyle(
-    ~fontSize=20.,
-    ~lineHeight=24.,
-    ~letterSpacing=0.38,
-    ~fontWeight=fontWeights.regular,
-    (),
-  ),
-  "headline": textStyle(
-    ~fontSize=17.,
-    ~lineHeight=22.,
-    ~letterSpacing=-0.41,
-    ~fontWeight=fontWeights.semiBold,
-    (),
-  ),
-  "body": textStyle(
-    ~fontSize=17.,
-    ~lineHeight=22.,
-    ~letterSpacing=-0.41,
-    ~fontWeight=fontWeights.regular,
-    (),
-  ),
-  "callout": textStyle(
-    ~fontSize=16.,
-    ~lineHeight=21.,
-    ~letterSpacing=-0.32,
-    ~fontWeight=fontWeights.regular,
-    (),
-  ),
-  "subhead": textStyle(
-    ~fontSize=15.,
-    ~lineHeight=20.,
-    ~letterSpacing=-0.24,
-    ~fontWeight=fontWeights.regular,
-    (),
-  ),
-  "footnote": textStyle(
-    ~fontSize=13.,
-    ~lineHeight=18.,
-    ~letterSpacing=-0.08,
-    ~fontWeight=fontWeights.regular,
-    (),
-  ),
-  "caption1": textStyle(
-    ~fontSize=12.,
-    ~lineHeight=16.,
-    ~letterSpacing=0.,
-    ~fontWeight=fontWeights.regular,
-    (),
-  ),
-  "caption2": textStyle(
-    ~fontSize=11.,
-    ~lineHeight=13.,
-    ~letterSpacing=0.07,
-    ~fontWeight=fontWeights.regular,
-    (),
-  ),
-  "thin": textStyle(~fontWeight=fontWeights.thin, ()),
-  "ultraLight": textStyle(~fontWeight=fontWeights.ultraLight, ()),
-  "light": textStyle(~fontWeight=fontWeights.light, ()),
-  "regular": textStyle(~fontWeight=fontWeights.regular, ()),
-  "medium": textStyle(~fontWeight=fontWeights.medium, ()),
-  "semiBold": textStyle(~fontWeight=fontWeights.semiBold, ()),
-  "bold": textStyle(~fontWeight=fontWeights.bold, ()),
-  "heavy": textStyle(~fontWeight=fontWeights.heavy, ()),
-  "black": textStyle(~fontWeight=fontWeights.black, ()),
+  "largeTitle": textStyle(~fontSize=34., ~lineHeight=41., ~letterSpacing=0.37, ()),
+  "title1": textStyle(~fontSize=28., ~lineHeight=34., ~letterSpacing=0.36, ()),
+  "title2": textStyle(~fontSize=22., ~lineHeight=28., ~letterSpacing=0.35, ()),
+  "title3": textStyle(~fontSize=20., ~lineHeight=24., ~letterSpacing=0.38, ()),
+  "headline": textStyle(~fontSize=17., ~lineHeight=22., ~letterSpacing=-0.41, ()),
+  "body": textStyle(~fontSize=17., ~lineHeight=22., ~letterSpacing=-0.41, ()),
+  "callout": textStyle(~fontSize=16., ~lineHeight=21., ~letterSpacing=-0.32, ()),
+  "subhead": textStyle(~fontSize=15., ~lineHeight=20., ~letterSpacing=-0.24, ()),
+  "footnote": textStyle(~fontSize=13., ~lineHeight=18., ~letterSpacing=-0.08, ()),
+  "caption1": textStyle(~fontSize=12., ~lineHeight=16., ~letterSpacing=0., ()),
+  "caption2": textStyle(~fontSize=11., ~lineHeight=13., ~letterSpacing=0.07, ()),
+  "weight100": Platform.os === Platform.android
+    ? textStyle(~fontFamily="sans-serif-thin", ~fontWeight=#_100, ())
+    : textStyle(~fontWeight=#_100, ()),
+  "weight200": Platform.os === Platform.android
+    ? textStyle(~fontFamily="sans-serif-light", ~fontWeight=#_200, ())
+    : textStyle(~fontWeight=#_200, ()),
+  "weight300": Platform.os === Platform.android
+    ? textStyle(~fontFamily="sans-serif-light", ~fontWeight=#_300, ())
+    : textStyle(~fontWeight=#_300, ()),
+  "weight400": Platform.os === Platform.android
+    ? textStyle(~fontFamily="sans-serif", ~fontWeight=#_400, ())
+    : textStyle(~fontWeight=#_400, ()),
+  "weight500": Platform.os === Platform.android
+    ? textStyle(~fontFamily="sans-serif-medium", ~fontWeight=#_500, ())
+    : textStyle(~fontWeight=#_500, ()),
+  "weight600": Platform.os === Platform.android
+    ? textStyle(~fontFamily="sans-serif-medium", ~fontWeight=#_600, ())
+    : textStyle(~fontWeight=#_600, ()),
+  "weight700": Platform.os === Platform.android
+    ? textStyle(~fontFamily="sans-serif-bold", ~fontWeight=#_700, ())
+    : textStyle(~fontWeight=#_700, ()),
+  // pixel 3 handle sans-serif-bold / bold as heavy, but oneplus & oppo doesn't, so we stick to bold...
+  "weight800": Platform.os === Platform.android
+    ? textStyle(~fontFamily="sans-serif-bold", ~fontWeight=#_700, ())
+    : textStyle(~fontWeight=#_800, ()),
+  "weight900": Platform.os === Platform.android
+    ? textStyle(~fontFamily="sans-serif-black", ~fontWeight=#_900, ())
+    : textStyle(~fontWeight=#_900, ()),
 }->StyleSheet.create
 
 let styleSheets = {

diff --git a/src/components/shareable/components/TouchableButton.res b/src/components/shareable/components/TouchableButton.res
@@ -44,7 +44,7 @@ let make = (~onPress, ~text, ~styleBackground=?, ~styleText=?, ~mode=Contained)
           open Style
           arrayOption([
             Some(Theme.text["callout"]),
-            Some(Theme.text["semiBold"]),
+            Some(Theme.text["weight600"]),
             styleText
             ->Option.map(s => Some(s))
             ->Option.getWithDefault(

diff --git a/src/screens/GoalEditModalScreen.res b/src/screens/GoalEditModalScreen.res
@@ -96,7 +96,7 @@ let make = (~navigation, ~route: ReactNavigation.Core.route<Navigators.RootStack
             <Animated.Text
               style={
                 open Style
-                array([defaultStyle, textStyle(~color, ~fontWeight=Theme.fontWeights.regular, ())])
+                array([defaultStyle, Theme.text["weight400"], textStyle(~color, ())])
               }>
               {"Cancel"->React.string}
             </Animated.Text>

diff --git a/src/screens/GoalNewModalScreen.res b/src/screens/GoalNewModalScreen.res
@@ -81,7 +81,7 @@ let make = (~navigation, ~route: ReactNavigation.Core.route<Navigators.RootStack
             <Animated.Text
               style={
                 open Style
-                array([defaultStyle, textStyle(~color, ~fontWeight=Theme.fontWeights.regular, ())])
+                array([defaultStyle, Theme.text["weight400"], textStyle(~color, ())])
               }>
               {"Cancel"->React.string}
             </Animated.Text>