updated profile view (#314)

src/status_im/components/chat_icon/styles.cljs

@@ -34,7 +34,7 @@
 
 (def chat-icon
   {:margin        4
-   :borderRadius 20
+   :border-radius 20
    :width         40
    :height        40})
 
@@ -46,7 +46,8 @@
 (def chat-icon-menu-item
   (merge chat-icon
          {:width         24
-          :height 24}))
+          :height        24
+          :border-radius 12}))
 
 (def chat-icon-profile
   (merge chat-icon
@@ -60,10 +61,10 @@
    :right            0
    :width            20
    :height           20
-   :borderRadius    10
-   :backgroundColor online-color
-   :borderWidth     2
-   :borderColor     color-white})
+   :border-radius    10
+   :background-color online-color
+   :border-width     2
+   :border-color     color-white})
 
 (def online-view-menu-item
   (merge online-view
@@ -82,8 +83,8 @@
    :top              6
    :width            4
    :height           4
-   :borderRadius    2
-   :backgroundColor color-white})
+   :border-radius    2
+   :background-color color-white})
 (def online-dot-left (merge online-dot {:left 3}))
 (def online-dot-right (merge online-dot {:left 9}))
 

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
-          :font  :default}
-    (if (= username address)
-      (label :t/user-anonymous)
-      username)]
+   [text-field
+    {:line-color       :white
+     :focus-line-color :white
+     :placeholder      (label :t/user-anonymous)
+     :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
@@ -176,25 +171,12 @@
               :edit?             edit?}]
 
     [status-image-view {:account           account
+                        :profile-edit-data profile-edit-data
                         :photo-path        (or new-photo-path photo-path)
                         :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
-  {:margin-top 12
-   :font-size  18
-   :color      text1-color})
+(def username-wrapper
+  {:width 300
+   :margin-top -22
+   :margin-bottom -16})
 
-(def username-input
-  {:align-self    "stretch"
-   :margin-top    -8
-   :margin-bottom -22
-   :font-size     18
+(defn username-input [edit? valid?]
+  {:font-size  18
    :text-align :center
-   :color         text1-color})
+   :color      (if edit?
+                 (if valid? text1-color color-red)
+                 text1-disabled-color)})
 
 (def status-block
   {:flex-direction "column"