[fix][perf] fix typography on android

- remove font-weight and font-style on mobile because otherwise android
falls back to default font and doesn't use the font-family
- since nested text inherits from parent, only put the needed styling
in nested text style
- use parens instead of brackets to resolve components

components/src/status_im/ui/components/react.cljs

@@ -113,34 +113,35 @@
       (update :style typography/get-style)
       (assoc :max-font-size-multiplier max-font-size-multiplier)))
 
+(defn prepare-nested-text-props [props]
+  (-> props
+      (update :style typography/get-nested-style)
+      (assoc :nested? true)))
+
 ;; Accessor methods for React Components
 (defn text
   "For nested text elements, use nested-text instead"
   ([text-element]
-   [text {} text-element])
+   (text {} text-element))
   ([options text-element]
    [text-class (prepare-text-props options) text-element]))
 
 (defn nested-text
-  ([options & nested-text-elements]
+  "Returns nested text elements with proper styling and typography
-   (let [options-with-style (prepare-text-props options)]
+  Do not use the nested? option, it is for internal usage of the function only"
-     (reduce (fn [acc text-element]
+  [options & nested-text-elements]
-               (conj acc
+  (let [options-with-style (if (:nested? options)
-                     (cond
+                             (prepare-nested-text-props options)
-                       (string? text-element)
+                             (prepare-text-props options))]
-                       [text-class options-with-style text-element]
+    (reduce (fn [acc text-element]
-
+              (conj acc
-                       (vector? text-element)
+                    (if (string? text-element)
-                       (let [[options nested-text-elements] text-element]
+                      text-element
-                         [(if (string? nested-text-elements)
+                      (let [[options & nested-text-elements] text-element]
-                            text-class
+                        (apply nested-text (prepare-nested-text-props options)
-                            nested-text)
+                               nested-text-elements)))))
-                          (prepare-text-props
+            [text-class (dissoc options-with-style :nested?)]
-                           (utils.core/deep-merge options-with-style
+            nested-text-elements)))
-                                                  options))
-                          nested-text-elements]))))
-             [text-class options-with-style]
-             nested-text-elements))))
 
 (defn text-input
   [options text]

src/status_im/ui/components/typography.cljs

@@ -61,22 +61,44 @@
   [{:keys [typography] :as style}]
   {:pre [(or (nil? typography) (contains? typography-styles typography))]}
   (let [{:keys [font-weight font-style font-size line-height]
-         :or {line-height (get-line-height font-size)}
          :as style}
         (merge default-style
                (get typography-styles
                     typography)
+               (dissoc style :typography :nested?))]
+    (if platform/desktop?
+      (assoc style :font-family default-font-family)
+      (-> style
+          (assoc :font-family
+                 (str default-font-family "-"
+                      (case font-weight
+                        "400" (when-not (= font-style :italic)
+                                "Regular")
+                        "500" "Medium"
+                        "600" "SemiBold"
+                        "700" "Bold")
+                      (when (= font-style :italic)
+                        "Italic")))
+          (dissoc :font-weight :font-style)))))
+
+(defn get-nested-style
+  [{:keys [typography] :as style}]
+  {:pre [(or (nil? typography) (contains? typography-styles typography))]}
+  (let [{:keys [font-weight font-style font-size] :as style}
+        (merge (get typography-styles
+                    typography)
                (dissoc style :typography))]
-    (assoc style
+    (if platform/desktop?
-           :font-family (if platform/desktop?
+      style
-                          default-font-family
+      (cond-> (dissoc style :font-weight :font-style)
-                          (str default-font-family "-"
+        (or font-weight font-style)
-                               (case font-weight
+        (assoc :font-family
-                                 "400"   (when-not (= font-style :italic)
+               (str default-font-family "-"
-                                           "Regular")
+                    (case font-weight
-                                 "500"   "Medium"
+                      "500" "Medium"
-                                 "600"   "SemiBold"
+                      "600" "SemiBold"
-                                 "700"   "Bold")
+                      "700" "Bold"
-                               (when (= font-style :italic)
+                      (when-not (= font-style :italic)
-                                 "Italic")))
+                        "Regular"))
-           :line-height line-height)))
+                    (when (= font-style :italic)
+                      "Italic")))))))