ref: channel-avatar adapt props to designs and fix color

src/quo2/components/avatars/channel_avatar/component_spec.cljs

@@ -8,22 +8,22 @@
     (h/render [component/view])
     (h/is-truthy (h/query-by-label-text :initials))
     (h/is-null (h/query-by-label-text :emoji))
-    (h/is-null (h/query-by-label-text :lock)))
+    (h/is-null (h/query-by-role :channel-avatar-badge)))
 
-  (h/test "with emoji, no lock set, large size"
+  (h/test "with emoji, no badge, large size"
     (let [emoji "🍓"]
       (h/render [component/view {:emoji emoji :size :size-32}])
       (h/is-null (h/query-by-label-text :initials))
       (h/is-truthy (h/query-by-text emoji))
-      (h/is-null (h/query-by-label-text :lock))))
+      (h/is-null (h/query-by-role :channel-avatar-badge))))
 
-  (h/test "locked"
-    (h/render [component/view {:locked? true}])
-    (h/is-truthy (h/query-by-label-text :lock)))
+  (h/test "with locked badge"
+    (h/render [component/view {:badge :locked}])
+    (h/is-truthy (h/query-by-role :channel-avatar-badge-locked)))
 
-  (h/test "unlocked"
-    (h/render [component/view {:locked? false}])
-    (h/is-truthy (h/query-by-label-text :lock)))
+  (h/test "with unlocked badge"
+    (h/render [component/view {:badge :unlocked}])
+    (h/is-truthy (h/query-by-label-text :channel-avatar-badge-unlocked)))
 
   (h/test "no emoji, smaller size"
     (h/render [component/view {:full-name "Status Mobile"}])

src/quo2/components/avatars/channel_avatar/style.cljs

@@ -24,7 +24,7 @@
                 :size-32 15
                 11)})
 
-(defn lock-container
+(defn badge-container
   [size theme]
   (let [distance (if (= size :size-32) 20 12)]
     {:position         :absolute
@@ -34,6 +34,6 @@
      :border-radius    (* 2 lock-icon-size)
      :padding          2}))
 
-(def lock-icon
+(def badge-icon
   {:width  lock-icon-size
    :height lock-icon-size})

src/quo2/components/avatars/channel_avatar/view.cljs

@@ -22,23 +22,24 @@
                                 :weight :medium))
      (utils.string/get-initials channel-name amount-initials)]))
 
-(defn- lock
-  [locked? size theme]
-  ;; When `locked?` is nil, we must not display the unlocked icon.
-  (when (boolean? locked?)
-    [rn/view
-     {:accessibility-label :lock
-      :style               (style/lock-container size theme)}
-     [icons/icon (if locked? :i/locked :i/unlocked)
-      {:color           (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
-       :container-style style/lock-icon
-       :size            12}]]))
+(defn- badge-icon
+  [{:keys [badge size theme]}]
+  [rn/view
+   {:accessibility-label :channel-avatar-badge
+    :style               (style/badge-container size theme)}
+   [icons/icon
+    (case badge
+      :locked   :i/locked
+      :unlocked :i/unlocked)
+    {:color               (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
+     :container-style     style/badge-icon
+     :size                12
+     :accessibility-label (keyword (str "channel-avatar-badge-" (name badge)))}]])
 
 (defn- view-internal
   "Options:
 
-  :size - keyword (default nil) - Container size, for the moment,
-  only :size/l (meaning large) is supported.
+  :size - keyword (defaults to 24) - Container size (:size-32 :size-64)
 
   :emoji - string (default nil)
 
@@ -46,13 +47,12 @@
   community channel, then the default color should be the community custom
   color.
 
-  :locked? - nil/bool (default nil) - When true/false display a locked/unlocked
-  icon respectively. When nil does not show icon.
+  :badge - keyword (default nil) shows a badge next to the avatar (:locked :unlocked)
 
   :full-name - string (default nil) - When :emoji is blank, this value will be
   used to extract the initials.
   "
-  [{:keys [size emoji customization-color locked? full-name theme]}]
+  [{:keys [size emoji customization-color badge full-name theme]}]
   [rn/view
    {:accessibility-label :channel-avatar
     :style               (style/outer-container {:theme               theme
@@ -68,6 +68,10 @@
       {:style               (style/emoji-size size)
        :accessibility-label :emoji}
       (string/trim emoji)])
-   [lock locked? size theme]])
+   (when (keyword? badge)
+     [badge-icon
+      {:badge badge
+       :size  size
+       :theme theme}])])
 
 (def view (quo.theme/with-theme view-internal))

src/quo2/components/list_items/channel/view.cljs

@@ -40,7 +40,7 @@
         :on-press-out        #(reset! pressed? false)}
        [channel-avatar/view
         {:size                :size-32
-         :locked?             locked?
+         :badge               (if locked? :locked :unlocked)
          :full-name           name
          :customization-color customization-color
          :emoji               emoji}]

src/quo2/components/share/qr_code/view.cljs

@@ -34,7 +34,7 @@
         :source (:picture props)}]
 
       :channel
-      [channel-avatar/view (assoc props :locked? nil :size :size-64)]
+      [channel-avatar/view (assoc props :badge nil :size :size-64)]
 
       :saved-address
       [wallet-avatar/wallet-user-avatar (assoc props :size :size-64)]

src/status_im2/contexts/quo_preview/avatars/channel_avatar.cljs

@@ -9,33 +9,27 @@
     :type    :select
     :options [{:key :size-64}
               {:key :size-32}
-              {:key :default}]}
+              {:key   nil
+               :value "Default"}]}
    {:key  :emoji
     :type :text}
    {:key  :full-name
     :type :text}
    (preview/customization-color-option)
-   {:key     :locked-state
+   {:key     :badge
     :type    :select
-    :options [{:key :not-set}
+    :options [{:key   nil
+               :value "Default"}
               {:key :unlocked}
               {:key :locked}]}])
 
 (defn view
   []
   (let [state (reagent/atom {:size                :size-32
-                             :locked-state        :not-set
+                             :badge               nil
                              :emoji               "🍑"
                              :full-name           "Some channel"
                              :customization-color :blue})]
     (fn []
-      (let [locked? (case (:locked-state @state)
-                      :not-set  nil
-                      :unlocked false
-                      :locked   true
-                      nil)]
-        [preview/preview-container {:state state :descriptor descriptor}
-         [quo/channel-avatar
-          (assoc @state
-                 :locked?
-                 locked?)]]))))
+      [preview/preview-container {:state state :descriptor descriptor}
+       [quo/channel-avatar @state]])))