[ISSUE #3482] Fixe profile UI regression

Signed-off-by: Julien Eluard <julien.eluard@gmail.com>

src/status_im/ui/components/qr_code_viewer/views.cljs

@@ -15,10 +15,10 @@
     [react/text {:style (merge styles/hash-value-text style)}
      value]]])
 
-(defn qr-code-viewer [{:keys [hint-style footer-style]} value hint legend]
+(defn qr-code-viewer [{:keys [style hint-style footer-style]} value hint legend]
   {:pre [(not (nil? value))]}
   (let [{:keys [width height]} (react/get-dimensions "window")]
-    [react/view {:style     styles/qr-code}
+    [react/view {:style (merge styles/qr-code style)}
      [react/text {:style (merge styles/qr-code-hint hint-style)}
       hint]
      (when width

src/status_im/ui/screens/profile/components/styles.cljs

@@ -42,23 +42,27 @@
 (def settings-item-separator
   {:margin-left 16})
 
-(defstyle settings-item
+(def settings-item
   {:padding-horizontal 16
+   :flex               1
    :flex-direction     :row
    :align-items        :center
    :background-color   colors/white
    :height             52})
 
-(defstyle settings-item-text
+(def settings-item-text-wrapper
   {:flex             1
-   :flex-wrap :nowrap
+   :flex-direction   :row
+   :justify-content  :space-between})
+
+(defstyle settings-item-text
+  {:flex-wrap :nowrap
    :font-size 15
    :ios       {:letter-spacing -0.2}
    :android   {:color colors/black}})
 
 (def settings-item-value
-  {:flex          2
+  {:flex-wrap     :nowrap
-   :flex-wrap     :nowrap
    :text-align    :right
    :padding-right 10
    :font-size     15

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

@@ -66,12 +66,14 @@
    {:on-press action-fn
     :disabled (not active?)}
    [react/view styles/settings-item
-    [react/text {:style styles/settings-item-text}
+    [react/view styles/settings-item-text-wrapper
+     [react/text {:style           styles/settings-item-text
+                  :number-of-lines 1}
       (i18n/label label-kw)]
      (when-not (string/blank? value)
        [react/text {:style           styles/settings-item-value
                     :number-of-lines 1
                     :uppercase?      components.styles/uppercase?}
-       value])
+        value])]
     (when active?
       [vector-icons/icon :icons/forward {:color colors/gray}])]])

src/status_im/ui/screens/profile/user/styles.cljs

@@ -32,6 +32,13 @@
    :align-items     :center
    :justify-content :center})
 
+(def qr-code
+  {:background-color colors/gray-lighter})
+
+(def qr-code-viewer
+  {:flex-grow      1
+   :flex-direction :column})
+
 (defstyle logout-text
   (merge profile.components.styles/settings-item-text
          {:color colors/red}))

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

@@ -1,24 +1,25 @@
 (ns status-im.ui.screens.profile.user.views
   (:require-macros [status-im.utils.views :refer [defview letsubs]])
-  (:require [status-im.ui.screens.profile.user.styles :as styles]
+  (:require [re-frame.core :as re-frame]
-            [status-im.ui.components.toolbar.view :as toolbar]
-            [status-im.ui.components.react :as react]
-            [re-frame.core :as re-frame]
-            [status-im.ui.components.common.styles :as common.styles]
-            [status-im.ui.components.styles :as components.styles]
             [status-im.i18n :as i18n]
+            [status-im.protocol.core :as protocol]
+            [status-im.ui.components.action-button.styles :as action-button.styles]
             [status-im.ui.components.colors :as colors]
-            [status-im.utils.utils :as utils]
+            [status-im.ui.components.common.styles :as common.styles]
             [status-im.ui.components.icons.vector-icons :as vector-icons]
             [status-im.ui.components.list-selection :as list-selection]
-            [status-im.ui.components.status-bar.view :as status-bar]
             [status-im.ui.components.qr-code-viewer.views :as qr-code-viewer]
-            [status-im.utils.config :as config]
+            [status-im.ui.components.react :as react]
-            [status-im.utils.platform :as platform]
+            [status-im.ui.components.status-bar.view :as status-bar]
+            [status-im.ui.components.styles :as components.styles]
+            [status-im.ui.components.toolbar.view :as toolbar]
             [status-im.ui.screens.profile.components.views :as profile.components]
             [status-im.ui.screens.profile.components.styles :as profile.components.styles]
-            [status-im.ui.components.action-button.styles :as action-button.styles]
+            [status-im.ui.screens.profile.user.styles :as styles]
-            [status-im.protocol.core :as protocol]))
+            [status-im.utils.config :as config]
+            [status-im.utils.platform :as platform]
+            [status-im.utils.utils :as utils]))
+
 
 (defn my-profile-toolbar []
   [toolbar/toolbar {}
@@ -59,11 +60,10 @@
 
 (defview qr-viewer []
   (letsubs [{:keys [value contact]} [:get :qr-modal]]
-    [react/view {:flex-grow      1
+    [react/view styles/qr-code-viewer
-                 :flex-direction :column}
      [status-bar/status-bar {:type :modal}]
      [qr-viewer-toolbar (:name contact) value]
-     [qr-code-viewer/qr-code-viewer {}
+     [qr-code-viewer/qr-code-viewer {:style styles/qr-code}
       value (i18n/label :t/qr-code-public-key-hint) (str value)]]))
 
 (defn- show-qr [contact source value]