Fix: Messages/Author component text overflow (#17414)

src/quo/components/inputs/input/view.cljs

@@ -77,7 +77,7 @@
                               (when on-change-text (on-change-text new-text))
                               (let [amount-chars (count new-text)]
                                 (reset! char-count amount-chars)
-                                (when (>= amount-chars char-limit)
+                                (when (and (>= amount-chars char-limit) on-char-limit-reach)
                                   (on-char-limit-reach amount-chars))))]
     (fn [{:keys [blur? theme error? right-icon left-icon disabled? small? button
                  label char-limit multiline? clearable? on-focus on-blur container-style]

src/quo/components/list_items/user_list.cljs

@@ -20,8 +20,7 @@
 (defn action-icon
   [{:keys [type on-press on-check disabled? checked?]}]
   [rn/touchable-opacity
-   {:on-press (when on-press on-press)
-    :style    {:position :absolute :right 20}}
+   {:on-press (when on-press on-press)}
    (case type
      :options
      [icons/icon :i/options
@@ -50,8 +49,8 @@
      :profile-picture photo-path
      :online?         online?
      :size            :small}]
-   [rn/view {:style {:margin-left 8}}
-    [author/author
+   [rn/view {:style {:margin-horizontal 8 :flex 1}}
+    [author/view
      {:primary-name   primary-name
       :secondary-name secondary-name
       :contact?       contact?

src/quo/components/messages/author/style.cljs

@@ -3,31 +3,45 @@
     [quo.foundations.colors :as colors]))
 
 (def container
-  {:flex-wrap      :wrap
+  {:flex-wrap      :nowrap
    :flex-direction :row
    :align-items    :center})
 
 (defn middle-dot-nickname
-  []
-  {:color             (colors/theme-colors colors/neutral-40 colors/neutral-50)
+  [theme]
+  {:color             (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)
    :margin-horizontal 4})
 
 (defn chat-key-text
-  []
-  {:color       (colors/theme-colors colors/neutral-40 colors/neutral-50)
+  [theme]
+  {:color       (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)
    :margin-left 8
    :padding-top 1})
 
 (defn middle-dot-chat-key
-  []
-  {:color       (colors/theme-colors colors/neutral-40 colors/neutral-50)
+  [theme]
+  {:color       (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)
    :margin-left 4})
 
+(defn primary-name
+  [muted? theme]
+  {:color       (if muted?
+                  colors/neutral-50
+                  (colors/theme-colors colors/neutral-100 colors/white theme))
+   :flex-shrink 1})
+
+(defn secondary-name
+  [theme]
+  {:padding-top 1
+   :flex-shrink 999999
+   :min-width   40
+   :color       (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)})
+
 (def icon-container
   {:margin-left 4})
 
 (defn time-text
-  [verified?]
-  {:color       (colors/theme-colors colors/neutral-40 colors/neutral-50)
+  [theme]
+  {:color       (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)
    :padding-top 1
-   :margin-left (if verified? 8 4)})
+   :margin-left 8})

src/quo/components/messages/author/view.cljs

@@ -4,14 +4,14 @@
     [quo.components.icon :as icons]
     [quo.components.markdown.text :as text]
     [quo.components.messages.author.style :as style]
-    [quo.foundations.colors :as colors]
+    [quo.theme :as quo.theme]
     [react-native.core :as rn]))
 
 (def middle-dot "·")
 
-(defn author
+(defn- internal-view
   [{:keys [primary-name secondary-name style short-chat-key time-str contact? verified? untrustworthy?
-           muted? size]
+           muted? size theme]
     :or   {size 13}}]
   [rn/view {:style (merge style/container style {:height (if (= size 15) 21.75 18.2)})}
    [text/text
@@ -19,24 +19,21 @@
      :size                (if (= size 15) :paragraph-1 :paragraph-2)
      :number-of-lines     1
      :accessibility-label :author-primary-name
-     :style               {:color (if muted?
-                                    colors/neutral-50
-                                    (colors/theme-colors colors/neutral-100 colors/white))}}
+     :style               (style/primary-name muted? theme)}
     primary-name]
    (when (not (string/blank? secondary-name))
      [:<>
       [text/text
        {:size            :label
         :number-of-lines 1
-        :style           (style/middle-dot-nickname)}
+        :style           (style/middle-dot-nickname theme)}
        middle-dot]
       [text/text
        {:weight              :medium
         :size                :label
         :number-of-lines     1
         :accessibility-label :author-secondary-name
-        :style               {:padding-top 1
-                              :color       (colors/theme-colors colors/neutral-50 colors/neutral-40)}}
+        :style               (style/secondary-name theme)}
        secondary-name]])
    (when contact?
      [icons/icon :main-icons2/contact
@@ -59,14 +56,14 @@
       {:monospace       true
        :size            :label
        :number-of-lines 1
-       :style           (style/chat-key-text)}
+       :style           (style/chat-key-text theme)}
       short-chat-key])
    (when (and (not verified?) time-str short-chat-key)
      [text/text
       {:monospace       true
        :size            :label
        :number-of-lines 1
-       :style           (style/middle-dot-chat-key)}
+       :style           (style/middle-dot-chat-key theme)}
       middle-dot])
    (when time-str
      [text/text
@@ -74,5 +71,7 @@
        :size                :label
        :accessibility-label :message-timestamp
        :number-of-lines     1
-       :style               (style/time-text verified?)}
+       :style               (style/time-text theme)}
       time-str])])
+
+(def view (quo.theme/with-theme internal-view))

src/quo/core.cljs

@@ -294,6 +294,7 @@
 (def text quo.components.markdown.text/text)
 
 ;;;; Messages
+(def author quo.components.messages.author.view/view)
 (def gap quo.components.messages.gap/gap)
 (def system-message quo.components.messages.system-message.view/system-message)
 
@@ -319,7 +320,6 @@
 (def soundtrack quo.components.record-audio.soundtrack.view/f-soundtrack)
 
 ;;;; Selectors
-(def author quo.components.messages.author.view/author)
 (def disclaimer quo.components.selectors.disclaimer.view/view)
 (def filter quo.components.selectors.filter.view/view)
 (def reactions-selector quo.components.selectors.reactions-selector.view/view)

src/status_im/ui/screens/profile/contact/views.cljs

@@ -105,7 +105,7 @@
                             (save-nickname public-key @entered-nickname))
     :auto-capitalize     :none
     :auto-focus          false
-    :max-length          32
+    :max-length          constants/profile-name-max-length
     :accessibility-label :nickname-input
     :default-value       nickname
     :placeholder         (i18n/label :t/nickname)
@@ -132,7 +132,7 @@
          {:style {:align-self :flex-end
                   :margin-top 16
                   :color      colors/gray}}
-         (str (count @entered-nickname) " / 32")]]
+         (str (count @entered-nickname) " / " constants/profile-name-max-length)]]
        [toolbar/toolbar
         {:show-border? true
          :center

src/status_im2/contexts/chat/messages/list/view.cljs

@@ -83,8 +83,8 @@
   [{:keys [ens-verified added?]} theme]
   (when (or ens-verified added?)
     [rn/view
-     {:style {:padding-left 10
-              :margin-top   2}}
+     {:style {:margin-left 4
+              :margin-top  8}}
      (if ens-verified
        [quo/icon :i/verified
         {:no-color true
@@ -225,12 +225,15 @@
              :display-name    display-name
              :online?         online?
              :profile-picture photo-path}])]
-        [quo/text
-         {:weight          :semi-bold
-          :size            :heading-1
-          :style           {:margin-top (if group-chat 54 12)}
-          :number-of-lines 1}
-         display-name
+        [rn/view
+         {:style {:flex-direction :row
+                  :margin-top     (if group-chat 54 12)}}
+         [quo/text
+          {:weight          :semi-bold
+           :size            :heading-1
+           :style           {:flex-shrink 1}
+           :number-of-lines 1}
+          display-name]
          [contact-icon contact theme]]
         (when bio
           [quo/text {:style style/bio}

src/status_im2/contexts/contacts/drawers/nickname_drawer/style.cljs

@@ -10,10 +10,9 @@
    :border-radius    20
    :align-items      :center
    :align-self       :flex-start
-   :padding          4
-   :margin-top       8
+   :margin-top       4
    :margin-left      -4
-   :margin-bottom    16})
+   :margin-bottom    20})
 
 (def buttons-container
   {:flex-direction  :row

src/status_im2/contexts/contacts/drawers/nickname_drawer/view.cljs

@@ -7,6 +7,7 @@
     [react-native.core :as rn]
     [react-native.safe-area :as safe-area]
     [reagent.core :as reagent]
+    [status-im2.constants :as constants]
     [status-im2.contexts.contacts.drawers.nickname-drawer.style :as style]
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]))
@@ -38,23 +39,22 @@
         :accessibility-label accessibility-label}
        [quo/text
         {:weight :semi-bold
-         :size   :heading-1} title]
+         :size   :heading-2} title]
        [rn/view {:style (style/context-container)}
-        [quo/user-avatar
-         {:full-name         primary-name
-          :profile-picture   photo-path
-          :size              :xxs
-          :status-indicator? false}]
-        [quo/text
-         {:weight :medium
-          :size   :paragraph-2
-          :style  {:margin-left 4}} primary-name]]
+        [quo/context-tag
+         {:type            :default
+          :blur?           false
+          :profile-picture photo-path
+          :full-name       primary-name
+          :size            24}]]
        [quo/input
         {:type              :text
-         :blur?             true
+         :blur?             false
          :placeholder       (i18n/label :t/type-nickname)
          :auto-focus        true
-         :max-length        32
+         :max-length        constants/profile-name-max-length
+         :label             (i18n/label :t/nickname)
+         :char-limit        constants/profile-name-max-length
          :on-change-text    (fn [nickname]
                               (reset! entered-nickname nickname))
          :on-submit-editing #(add-nickname-and-show-toast primary-name @entered-nickname public-key)}]

src/status_im2/contexts/quo_preview/main.cljs

@@ -339,12 +339,12 @@
                         :component text/view}
                        {:name      :markdown-list
                         :component markdown-list/view}]
-   :messages          [{:name      :gap
+   :messages          [{:name      :author
+                        :component messages-author/view}
+                       {:name      :gap
                         :component messages-gap/view}
                        {:name      :system-messages
-                        :component system-message/view}
-                       {:name      :author
-                        :component messages-author/view}]
+                        :component system-message/view}]
    :navigation        [{:name      :bottom-nav-tab
                         :component bottom-nav-tab/view}
                        {:name      :top-nav