[#5440] Add dismiss button to "Add to contacts" badge

Signed-off-by: Dmitry Novotochinov <dmitry.novot@gmail.com>

CHANGELOG.md

@@ -6,6 +6,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 ### Added
+- Added dismiss button to "Add to contacts" bar
 
 ### Fixed
 

src/status_im/chat/screen.cljs

@@ -30,13 +30,22 @@
             [status-im.ui.components.colors :as colors]))
 
 (defview add-contact-bar [contact-identity]
-  (letsubs [contact [:get-contact-by-identity contact-identity]]
-    (when (models.contact/can-add-to-contacts? contact)
+  (letsubs [{:keys [hide-contact?] :as contact} [:get-contact-by-identity contact-identity]]
+    (when (and (not hide-contact?)
+               (models.contact/can-add-to-contacts? contact))
+      [react/view style/add-contact
+       [react/view style/add-contact-left]
        [react/touchable-highlight
         {:on-press            #(re-frame/dispatch [:add-contact contact-identity])
          :accessibility-label :add-to-contacts-button}
-       [react/view style/add-contact
-        [react/i18n-text {:style style/add-contact-text :key :add-to-contacts}]]])))
+        [react/view style/add-contact-center
+         [vector-icons/icon :icons/add {:color colors/blue}]
+         [react/i18n-text {:style style/add-contact-text :key :add-to-contacts}]]]
+       [react/touchable-highlight
+        {:on-press            #(re-frame/dispatch [:hide-contact contact-identity])
+         :accessibility-label :add-to-contacts-close-button}
+        [vector-icons/icon :icons/close {:color           colors/gray-icon
+                                         :container-style style/add-contact-close-icon}]]])))
 
 (defn- on-options [chat-id chat-name group-chat? public?]
   (list-selection/show {:title   chat-name

src/status_im/chat/styles/screen.cljs

@@ -186,14 +186,30 @@
   {:color "#888888"})
 
 (def add-contact
-  {:height           35
+  {:flex-direction   :row
+   :align-items      :center
+   :height           36
    :background-color :white
-   :justify-content  :center})
+   :justify-content  :space-between})
 
-(def add-contact-text
+(def add-contact-left
+  {:width       24
+   :margin-left 12})
+
+(def add-contact-center
+  {:flex-direction :row
+   :align-items    :center})
+
+(defstyle add-contact-text
   {:text-align          :center
    :text-align-vertical :center
-   :color               :#7099e6})
+   :padding-left        4
+   :font-size           15
+   :ios                 {:letter-spacing 0.2}
+   :color               colors/blue})
+
+(def add-contact-close-icon
+  {:margin-right 12})
 
 (defstyle actions-list-view
   {:ios {:border-bottom-color component.styles/color-gray3

src/status_im/models/contact.cljs

@@ -28,6 +28,7 @@
 (defn- add-new-contact [{:keys [whisper-identity] :as contact} {:keys [db]}]
   (let [new-contact (assoc contact
                            :pending? false
+                           :hide-contact? false
                            :public-key whisper-identity)]
     {:db            (-> db
                         (update-in [:contacts/contacts whisper-identity]

src/status_im/ui/screens/contacts/events.cljs

@@ -43,6 +43,12 @@
  (fn [cofx [_ whisper-id]]
    (models.contact/add-contact whisper-id cofx)))
 
+(handlers/register-handler-fx
+ :hide-contact
+ (fn [{:keys [db]} [_ whisper-id]]
+   (when (get-in db [:contacts/contacts whisper-id])
+     {:db (assoc-in db [:contacts/contacts whisper-id :hide-contact?] true)})))
+
 (handlers/register-handler-fx
  :set-contact-identity-from-qr
  [(re-frame/inject-cofx :random-id)]