diff --git a/components/src/status_im/ui/components/react.cljs b/components/src/status_im/ui/components/react.cljs index 07fcbbb452..3ede316b0d 100644 --- a/components/src/status_im/ui/components/react.cljs +++ b/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] - (let [options-with-style (prepare-text-props options)] - (reduce (fn [acc text-element] - (conj acc - (cond - (string? text-element) - [text-class options-with-style text-element] - - (vector? text-element) - (let [[options nested-text-elements] text-element] - [(if (string? nested-text-elements) - text-class - nested-text) - (prepare-text-props - (utils.core/deep-merge options-with-style - options)) - nested-text-elements])))) - [text-class options-with-style] - nested-text-elements)))) + "Returns nested text elements with proper styling and typography + Do not use the nested? option, it is for internal usage of the function only" + [options & nested-text-elements] + (let [options-with-style (if (:nested? options) + (prepare-nested-text-props options) + (prepare-text-props options))] + (reduce (fn [acc text-element] + (conj acc + (if (string? text-element) + text-element + (let [[options & nested-text-elements] text-element] + (apply nested-text (prepare-nested-text-props options) + nested-text-elements))))) + [text-class (dissoc options-with-style :nested?)] + nested-text-elements))) (defn text-input [options text] diff --git a/src/status_im/ui/components/typography.cljs b/src/status_im/ui/components/typography.cljs index 5a8fc3a70e..a5ab379538 100644 --- a/src/status_im/ui/components/typography.cljs +++ b/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 - :font-family (if platform/desktop? - default-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"))) - :line-height line-height))) + (if platform/desktop? + style + (cond-> (dissoc style :font-weight :font-style) + (or font-weight font-style) + (assoc :font-family + (str default-font-family "-" + (case font-weight + "500" "Medium" + "600" "SemiBold" + "700" "Bold" + (when-not (= font-style :italic) + "Regular")) + (when (= font-style :italic) + "Italic")))))))