Merge pull request #327 from status-im/bug/#314

Updated profile view (#314)

Former-commit-id: 436ee19499

src/status_im/components/chat_icon/styles.cljs

@@ -33,10 +33,10 @@
    :lineHeight 20})
 
 (def chat-icon
-  {:margin       4
+  {:margin        4
-   :borderRadius 20
+   :border-radius 20
-   :width        40
+   :width         40
-   :height       40})
+   :height        40})
 
 (def chat-icon-chat-list
   (merge chat-icon
@@ -45,8 +45,9 @@
 
 (def chat-icon-menu-item
   (merge chat-icon
-         {:width  24
+         {:width         24
-          :height 24}))
+          :height        24
+          :border-radius 12}))
 
 (def chat-icon-profile
   (merge chat-icon
@@ -55,15 +56,15 @@
           :border-radius 32}))
 
 (def online-view
-  {:position        :absolute
+  {:position         :absolute
-   :bottom          0
+   :bottom           0
-   :right           0
+   :right            0
-   :width           20
+   :width            20
-   :height          20
+   :height           20
-   :borderRadius    10
+   :border-radius    10
-   :backgroundColor online-color
+   :background-color online-color
-   :borderWidth     2
+   :border-width     2
-   :borderColor     color-white})
+   :border-color     color-white})
 
 (def online-view-menu-item
   (merge online-view
@@ -78,21 +79,21 @@
           :border-radius 12}))
 
 (def online-dot
-  {:position        :absolute
+  {:position         :absolute
-   :top             6
+   :top              6
-   :width           4
+   :width            4
-   :height          4
+   :height           4
-   :borderRadius    2
+   :border-radius    2
-   :backgroundColor color-white})
+   :background-color color-white})
 (def online-dot-left (merge online-dot {:left 3}))
 (def online-dot-right (merge online-dot {:left 9}))
 
 (def photo-pencil
-  {:margin-left 5
+  {:margin-left  5
    :margin-right 5
-   :margin-top  3
+   :margin-top   3
-   :font-size   12
+   :font-size    12
-   :color       :white})
+   :color        :white})
 
 (def online-dot-menu-item
   (merge online-dot

src/status_im/profile/handlers.cljs

@@ -23,7 +23,6 @@
                        new-status     :status
                        new-photo-path :photo-path}]
   (let [new-name        (if (or (not new-name)
-                                (str/blank? new-name)
                                 (not (s/valid? ::v/name new-name)))
                           name
                           new-name)

src/status_im/profile/screen.cljs

@@ -52,6 +52,7 @@
 
 (defn status-image-view [{{address  :address
                            username :name} :account
+                          {new-name :name} :profile-edit-data
                           photo-path       :photo-path
                           status           :status
                           edit?            :edit?}]
@@ -68,11 +69,16 @@
       [my-profile-icon {:account {:photo-path photo-path
                                   :name       username}
                         :edit?   edit?}])]
-   [text {:style st/username
+   [text-field
-          :font  :default}
+    {:line-color       :white
-    (if (= username address)
+     :focus-line-color :white
-      (label :t/user-anonymous)
+     :placeholder      (label :t/user-anonymous)
-      username)]
+     :editable         edit?
+     :input-style      (st/username-input edit? (s/valid? ::v/name (or new-name username)))
+     :wrapper-style    st/username-wrapper
+     :value            (if (not= username address)
+                         username)
+     :on-change-text   #(dispatch [:set-in [:profile-edit :name] %])}]
    [text-input {:style          st/status-input
                 :maxLength      140
                 :editable       edit?
@@ -119,17 +125,6 @@
        [icon :more_vertical_blue st/more-btn-image]]]]]
 
    [scroll-view st/profile-properties-container
-    [text-field
-     {:editable      false
-      :input-style   st/profile-input-text
-      :wrapper-style st/profile-input-wrapper
-      :value         (if (and (not= username address)
-                              username
-                              (not (str/blank? username)))
-                       username
-                       (label :t/not-specified))
-      :label         (label :t/username)}]
-
     [text-field
      {:editable      false
       :input-style   st/profile-input-text
@@ -175,26 +170,13 @@
               :profile-edit-data profile-edit-data
               :edit?             edit?}]
 
-    [status-image-view {:account    account
+    [status-image-view {:account           account
-                        :photo-path (or new-photo-path photo-path)
+                        :profile-edit-data profile-edit-data
-                        :status     (or new-status status)
+                        :photo-path        (or new-photo-path photo-path)
-                        :edit?      edit?}]
+                        :status            (or new-status status)
+                        :edit?             edit?}]
 
     [scroll-view st/profile-properties-container
-     [text-field
-      {:error          (if-not (s/valid? ::v/name new-name)
-                         (label :t/error-incorrect-name))
-       :error-color    "#7099e6"
-       :editable       edit?
-       :input-style    (if edit?
-                         st/profile-input-text
-                         st/profile-input-text-non-editable)
-       :wrapper-style  st/profile-input-wrapper
-       :value          (if (not= username address)
-                         username)
-       :label          (label :t/username)
-       :on-change-text #(dispatch [:set-in [:profile-edit :name] %])}]
-
      [text-field
       {:editable      false
        :input-style   st/profile-input-text-non-editable

src/status_im/profile/styles.cljs

@@ -10,7 +10,8 @@
                                                  separator-color
                                                  text1-color
                                                  text1-disabled-color
-                                                 text2-color]]))
+                                                 text2-color
+                                                 color-red]]))
 
 (def profile
   {:flex             1
@@ -51,18 +52,17 @@
 (def user-photo-container
   {:margin-top 22})
 
-(def username
+(def username-wrapper
-  {:margin-top 12
+  {:width 300
-   :font-size  18
+   :margin-top -22
-   :color      text1-color})
+   :margin-bottom -16})
 
-(def username-input
+(defn username-input [edit? valid?]
-  {:align-self    "stretch"
+  {:font-size  18
-   :margin-top    -8
+   :text-align :center
-   :margin-bottom -22
+   :color      (if edit?
-   :font-size     18
+                 (if valid? text1-color color-red)
-   :text-align    :center
+                 text1-disabled-color)})
-   :color         text1-color})
 
 (def status-block
   {:flex-direction "column"