[#13690] Fix visibility status color (#13747)

Author: ilmotta

src/status_im/db.cljs

@@ -13,7 +13,7 @@
              :sync-state                         :done
              :link-previews-whitelist            []
              :app-state                          "active"
-             :wallet                              wallet.db/default-wallet
+             :wallet                             wallet.db/default-wallet
              :wallet/all-tokens                  {}
              :peers-count                        0
              :node-info                          {}
@@ -34,9 +34,9 @@
              :registry                           {}
              :visibility-status-updates          {}
              :stickers/packs-pending             #{}
-             :keycard                            {:nfc-enabled?   false
-                                                  :pin            {:original     []
-                                                                   :confirmation []
-                                                                   :current      []
-                                                                   :puk          []
-                                                                   :enter-step   :original}}})
+             :keycard                            {:nfc-enabled? false
+                                                  :pin          {:original     []
+                                                                 :confirmation []
+                                                                 :current      []
+                                                                 :puk          []
+                                                                 :enter-step   :original}}})

src/status_im/ui/components/chat_icon/screen.cljs

@@ -63,25 +63,6 @@
        [react/view {:style               dot-styles
                     :accessibility-label dot-accessibility-label}])]))
 
-(defn profile-photo-plus-dot-view-old
-  [{:keys [public-key photo-container photo-path community?]}]
-  (let [photo-path             (if (nil? photo-path)
-                                 @(re-frame.core/subscribe [:chats/photo-path public-key])
-                                 photo-path)
-        photo-container        (if (nil? photo-container)
-                                 styles/container-chat-list photo-container)
-        size                    (:width photo-container)
-        identicon?              (when photo-path (profile.db/base64-png? photo-path))
-        dot-styles              (visibility-status-utils/icon-visibility-status-dot-old
-                                 public-key size identicon?)
-        dot-accessibility-label (:accessibility-label dot-styles)]
-    [react/view {:style               photo-container
-                 :accessibility-label :profile-photo}
-     [photos/photo photo-path {:size size}]
-     (when-not community?
-       [react/view {:style               dot-styles
-                    :accessibility-label dot-accessibility-label}])]))
-
 (defn emoji-chat-icon-view
   [chat-id group-chat name emoji styles]
   [react/view (:container styles)
@@ -92,16 +73,6 @@
      [profile-photo-plus-dot-view {:public-key      chat-id
                                    :photo-container (:default-chat-icon styles)}])])
 
-(defn emoji-chat-icon-view-old
-  [chat-id group-chat name emoji styles]
-  [react/view (:container styles)
-   (if group-chat
-     (if (string/blank? emoji)
-       [default-chat-icon name styles]
-       [emoji-chat-icon emoji styles])
-     [profile-photo-plus-dot-view-old {:public-key      chat-id
-                                       :photo-container (:default-chat-icon styles)}])])
-
 (defn chat-icon-view-toolbar
   [chat-id group-chat name color emoji]
   [emoji-chat-icon-view chat-id group-chat name emoji
@@ -169,7 +140,7 @@
   (if group-chat
     [default-chat-icon icon-text styles]
     (let [photo-path @(re-frame.core/subscribe [:chats/photo-path chat-id])]
-      (if-not (string/blank? photo-path)
+      (when-not (string/blank? photo-path)
         [photos/photo photo-path styles]))))
 
 (defn emoji-chat-intro-icon-view [icon-text chat-id group-chat emoji styles]
@@ -178,7 +149,7 @@
       [default-chat-icon icon-text styles]
       [emoji-chat-icon emoji styles])
     (let [photo-path @(re-frame.core/subscribe [:chats/photo-path chat-id])]
-      (if-not (string/blank? photo-path)
+      (when-not (string/blank? photo-path)
         [photos/photo photo-path styles]))))
 
 (defn profile-icon-view
@@ -192,10 +163,10 @@
                                                  (styles/emoji-chat-icon-text size))} override-styles)]
     [react/view (:container styles)
      (if (and photo-path (seq photo-path))
-       [profile-photo-plus-dot-view-old {:photo-path      photo-path
-                                         :public-key      public-key
-                                         :photo-container (:container styles)
-                                         :community?      community?}]
+       [profile-photo-plus-dot-view {:photo-path      photo-path
+                                     :public-key      public-key
+                                     :photo-container (:container styles)
+                                     :community?      community?}]
        (if (string/blank? emoji)
          [default-chat-icon name styles]
          [emoji-chat-icon emoji styles]))

src/status_im/ui/screens/communities/members.cljs

@@ -45,15 +45,15 @@
                                             my-public-key
                                             can-manage-users?
                                             can-kick-users?]}]
-  (let [member (<sub [:contacts/contact-by-identity public-key])
+  (let [member                   (<sub [:contacts/contact-by-identity public-key])
         [first-name second-name] (<sub [:contacts/contact-two-names-by-identity public-key])]
     [quo/list-item
      {:title               first-name
       :subtitle            second-name
       :accessibility-label :member-item
-      :icon                 [chat-icon/profile-photo-plus-dot-view-old
-                             {:public-key public-key
-                              :photo-path (multiaccounts/displayed-photo member)}]
+      :icon                [chat-icon/profile-photo-plus-dot-view
+                            {:public-key public-key
+                             :photo-path (multiaccounts/displayed-photo member)}]
       :accessory           (when (not= public-key my-public-key)
                              [quo/button {:on-press
                                           #(>evt [:bottom-sheet/show-sheet

src/status_im/ui/screens/contacts_list/views.cljs

@@ -15,7 +15,7 @@
     [quo/list-item
      {:title    first-name
       :subtitle second-name
-      :icon     [chat-icon.screen/profile-photo-plus-dot-view-old
+      :icon     [chat-icon.screen/profile-photo-plus-dot-view
                  {:public-key public-key
                   :photo-path (multiaccounts/displayed-photo contact)}]
       :chevron  true

src/status_im/ui/screens/home/views/inner_item.cljs

@@ -259,7 +259,7 @@
     [react/touchable-opacity (merge {:style {:height 64 :background-color background-color}} opts)
      [:<>
       [chat-item-icon muted (and group-chat (not public?)) (and group-chat public?)]
-      [chat-icon.screen/emoji-chat-icon-view-old chat-id group-chat chat-name emoji
+      [chat-icon.screen/emoji-chat-icon-view chat-id group-chat chat-name emoji
        {:container              (assoc chat-icon.styles/container-chat-list
                                        :top 12 :left 16 :position :absolute)
         :size                   40
@@ -279,4 +279,4 @@
                             (:whisper-timestamp last-message)
                             timestamp))]
          [unviewed-indicator-old home-item]])
-      [message-content-text (select-keys last-message [:content :content-type :community-id]) true]]]))
+      [message-content-text (select-keys last-message [:content :content-type :community-id]) true]]]))

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

@@ -14,24 +14,27 @@
    :padding                6
    :padding-right          12})
 
-(defn visibility-status-dot [dot-color size]
-  {:background-color dot-color
-   :width            size
-   :height           size
-   :border-radius    (/ size 2)
-   :border-width     3.5
-   :border-color     (quo2.colors/theme-colors quo2.colors/white quo2.colors/neutral-90)})
+(defn visibility-status-dot
+  [{:keys [color size new-ui?]}]
+  (if new-ui?
+    {:background-color color
+     :width            size
+     :height           size
+     :border-radius    (/ size 2)
+     :border-width     3.5
+     :border-color     (quo2.colors/theme-colors quo2.colors/white quo2.colors/neutral-90)}
+    {:background-color color
+     :width            size
+     :height           size
+     :border-radius    (/ size 2)
+     :border-width     1
+     :border-color     colors/white}))
 
-(defn visibility-status-dot-old [dot-color size]
-  {:background-color dot-color
-   :width            size
-   :height           size
-   :border-radius    (/ size 2)
-   :border-width     1
-   :border-color     colors/white})
-
-(defn visibility-status-profile-dot-old [color size border-width margin-left]
-  (merge (visibility-status-dot-old color size)
+(defn visibility-status-profile-dot
+  [{:keys [color size border-width margin-left new-ui?]}]
+  (merge (visibility-status-dot {:color   color
+                                 :size    size
+                                 :new-ui? new-ui?})
          {:margin-right 6
           :margin-left  margin-left
           :border-width border-width}))

src/status_im/ui/screens/profile/visibility_status/utils.cljs

@@ -1,12 +1,13 @@
 (ns status-im.ui.screens.profile.visibility-status.utils
-  (:require [status-im.constants :as constants]
+  (:require [clojure.string :as string]
+            [quo.design-system.colors :as colors]
+            [quo2.foundations.colors :as quo2.colors]
+            [status-im.constants :as constants]
             [status-im.i18n.i18n :as i18n]
             [status-im.ui.screens.profile.visibility-status.styles :as styles]
-            [status-im.utils.handlers :refer [<sub]]
+            [status-im.utils.config :as config]
             [status-im.utils.datetime :as datetime]
-            [quo.design-system.colors :as colors]
-            [clojure.string :as string]
-            [quo2.foundations.colors :as quo2.colors]))
+            [status-im.utils.handlers :refer [<sub]]))
 
 ;; Specs:
 ;; :visibility-status-automatic
@@ -73,53 +74,63 @@
       constants/visibility-status-inactive
       status-type)))
 
-(defn dot-color [{:keys [status-type] :or {status-type constants/visibility-status-inactive}}]
-  (:color (get visibility-status-type-data status-type)))
-
-(defn dot-color-old [{:keys [status-type] :or {status-type constants/visibility-status-inactive}}]
-  (:color (get visibility-status-type-data-old status-type)))
+(defn icon-dot-color [{:keys [status-type] :or {status-type constants/visibility-status-inactive}}]
+  (if @config/new-ui-enabled?
+    (:color (get visibility-status-type-data status-type))
+    (:color (get visibility-status-type-data-old status-type))))
 
 (defn my-icon? [public-key]
   (or (string/blank? public-key)
       (= public-key (<sub [:multiaccount/public-key]))))
 
-(defn visibility-status-update [public-key my-icon?]
+(defn visibility-status-update
+  [public-key my-icon?]
   (if my-icon?
     (<sub [:multiaccount/current-user-visibility-status])
     (<sub [:visibility-status-updates/visibility-status-update public-key])))
 
-(defn icon-visibility-status-dot [public-key container-size _]
-  (let [my-icon?                 (my-icon? public-key)
-        visibility-status-update (visibility-status-update public-key my-icon?)
-        size                     (/ container-size 2.4)
-        margin                   -2
-        dot-color                (dot-color visibility-status-update)
-        accessibility-label      (if (= dot-color quo2.colors/color-online)
-                                   :online-profile-photo-dot
-                                   :offline-profile-photo-dot)]
-    (merge (styles/visibility-status-dot dot-color size)
-           {:bottom              margin
-            :right               margin
-            :position            :absolute
-            :accessibility-label accessibility-label})))
+(defn icon-dot-accessibility-label
+  [dot-color]
+  (if @config/new-ui-enabled?
+    (if (= dot-color quo2.colors/color-online)
+      :online-profile-photo-dot
+      :offline-profile-photo-dot)
+    (if (= dot-color colors/color-online)
+      :online-profile-photo-dot
+      :offline-profile-photo-dot)))
+
+(defn icon-dot-margin
+  [size identicon?]
+  (if @config/new-ui-enabled?
+    -2
+    (if identicon?
+      (/ size 6)
+      (/ size 7))))
+
+(defn icon-dot-size
+  [container-size]
+  (if @config/new-ui-enabled?
+    (/ container-size 2.4)
+    (/ container-size 4)))
 
-(defn icon-visibility-status-dot-old [public-key container-size identicon?]
+(defn icon-visibility-status-dot
+  [public-key container-size identicon?]
   (let [my-icon?                 (my-icon? public-key)
         visibility-status-update (visibility-status-update public-key my-icon?)
-        size                     (/ container-size 4)
-        margin                   (if identicon? (/ size 6) (/ size 7))
-        dot-color                (dot-color-old visibility-status-update)
-        accessibility-label      (if (= dot-color colors/color-online)
-                                   :online-profile-photo-dot
-                                   :offline-profile-photo-dot)]
-    (merge (styles/visibility-status-dot-old dot-color size)
+        size                     (icon-dot-size container-size)
+        margin                   (icon-dot-margin size identicon?)
+        dot-color                (icon-dot-color visibility-status-update)
+        new-ui?                  @config/new-ui-enabled?]
+    (merge (styles/visibility-status-dot {:color   dot-color
+                                          :size    size
+                                          :new-ui? new-ui?})
            {:bottom              margin
             :right               margin
             :position            :absolute
-            :accessibility-label accessibility-label})))
+            :accessibility-label (icon-dot-accessibility-label dot-color)})))
 
 (defn visibility-status-order [public-key]
   (let [my-icon?                 (my-icon? public-key)
         visibility-status-update (visibility-status-update public-key my-icon?)
-        dot-color                (dot-color visibility-status-update)]
+        dot-color                (icon-dot-color visibility-status-update)]
     (if (= dot-color colors/color-online) 0 1)))

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

@@ -6,13 +6,14 @@
             [quo.react-native :as rn]
             [re-frame.core :as re-frame]
             [reagent.core :as reagent]
+            [status-im.constants :as constants]
             [status-im.ui.components.animation :as anim]
             [status-im.ui.components.react :as react]
-            [status-im.utils.platform :as platform]
-            [status-im.utils.handlers :refer [<sub]]
-            [status-im.constants :as constants]
             [status-im.ui.screens.profile.visibility-status.styles :as styles]
-            [status-im.ui.screens.profile.visibility-status.utils :as utils]))
+            [status-im.ui.screens.profile.visibility-status.utils :as utils]
+            [status-im.utils.config :as config]
+            [status-im.utils.handlers :refer [<sub]]
+            [status-im.utils.platform :as platform]))
 
 ;; === Code Related to visibility-status-button ===
 
@@ -33,13 +34,22 @@
 (defn profile-visibility-status-dot [status-type color]
   (let [automatic?                      (= status-type
                                            constants/visibility-status-automatic)
-        [border-width margin-left size] (if automatic? [1 -10 12] [0 6 10])]
+        [border-width margin-left size] (if automatic? [1 -10 12] [0 6 10])
+        new-ui?                         @config/new-ui-enabled?]
     [:<>
      (when automatic?
-       [rn/view {:style (styles/visibility-status-profile-dot-old
-                         colors/color-inactive size border-width 6)}])
-     [rn/view {:style (styles/visibility-status-profile-dot-old
-                       color size border-width margin-left)}]]))
+       [rn/view {:style (styles/visibility-status-profile-dot
+                         {:color        colors/color-inactive
+                          :size         size
+                          :border-width border-width
+                          :margin-left  6
+                          :new-ui?      new-ui?})}])
+     [rn/view {:style (styles/visibility-status-profile-dot
+                       {:color        color
+                        :size         size
+                        :border-width border-width
+                        :margin-left  margin-left
+                        :new-ui?      new-ui?})}]]))
 
 (defn visibility-status-button [on-press props]
   (let [logged-in?            (<sub [:multiaccount/logged-in?])