diff --git a/src/quo/components/tags/context_tag/schema.cljs b/src/quo/components/tags/context_tag/schema.cljs index 7310059388..0fe884beaa 100644 --- a/src/quo/components/tags/context_tag/schema.cljs +++ b/src/quo/components/tags/context_tag/schema.cljs @@ -8,6 +8,7 @@ [:enum :default :multiuser :group :channel :community :token :network :multinetwork :account :collectible :address :icon :audio]]] [:customization-color {:optional true} [:maybe :schema.common/customization-color]] + [:container-style {:optional true} [:maybe :map]] [:theme :schema.common/theme] [:blur? {:optional true} [:maybe :boolean]] [:state {:optional true} [:maybe [:enum :selected :default]]]]) @@ -38,6 +39,7 @@ (def ^:private ?channel [:map [:community-name {:optional true} [:maybe :string]] + [:community-logo {:optional true} [:maybe :schema.common/image-source]] [:channel-name {:optional true} [:maybe :string]]]) (def ^:private ?community diff --git a/src/quo/components/tags/context_tag/style.cljs b/src/quo/components/tags/context_tag/style.cljs index 4fddec851f..688cf59db1 100644 --- a/src/quo/components/tags/context_tag/style.cljs +++ b/src/quo/components/tags/context_tag/style.cljs @@ -36,6 +36,7 @@ (colors/custom-color customization-color 60) theme)] (cond-> {:padding 2 + :padding-right 8 :flex-direction :row :align-items :center :height size diff --git a/src/quo/components/tags/context_tag/view.cljs b/src/quo/components/tags/context_tag/view.cljs index 56aee95c55..5aa3fdf300 100644 --- a/src/quo/components/tags/context_tag/view.cljs +++ b/src/quo/components/tags/context_tag/view.cljs @@ -12,6 +12,7 @@ [quo.foundations.colors :as colors] [quo.theme :as quo.theme] [react-native.core :as rn] + [react-native.fast-image :as fast-image] [schema.core :as schema])) (defn- tag-skeleton @@ -30,7 +31,7 @@ (let [text-size (if (= size 24) :paragraph-2 :paragraph-1) icon-size (if (= size 24) 16 20)] [rn/view {:style (style/tag-container size)} - [rn/image {:style (style/circle-logo size) :source community-logo}] + [fast-image/fast-image {:style (style/circle-logo size) :source community-logo}] [rn/view {:style (style/tag-spacing size)} [text/text {:style (style/text theme) @@ -82,81 +83,81 @@ type :default state :default} :as props}] - [rn/view - {:style (merge (style/container {:theme theme - :type type - :size size - :state state - :blur? blur? - :customization-color customization-color}) - container-style) - :accessibility-label :context-tag} - (case type - :default - [tag-skeleton {:theme theme :size size :text full-name} - [user-avatar/user-avatar - {:full-name full-name - :profile-picture profile-picture - :size (if (= size 24) :xxs 28) - :status-indicator? false - :ring? false - :customization-color customization-color}]] + [rn/view {:style (merge {:align-items :flex-start} container-style)} + [rn/view + {:style (style/container {:theme theme + :type type + :size size + :state state + :blur? blur? + :customization-color customization-color}) + :accessibility-label :context-tag} + (case type + :default + [tag-skeleton {:theme theme :size size :text full-name} + [user-avatar/user-avatar + {:full-name full-name + :profile-picture profile-picture + :size (if (= size 24) :xxs 28) + :status-indicator? false + :ring? false + :customization-color customization-color}]] - :multiuser - [preview-list/view {:type :user :size :size-20} - users] + :multiuser + [preview-list/view {:type :user :size :size-20} + users] - :multinetwork - [preview-list/view {:type :network :size :size-20} - networks] + :multinetwork + [preview-list/view {:type :network :size :size-20} + networks] - :audio - [tag-skeleton {:theme theme :text (str duration)} - [rn/view {:style (style/audio-tag-icon-container customization-color theme)} - [icons/icon :i/play {:color style/audio-tag-icon-color :size 12}]]] + :audio + [tag-skeleton {:theme theme :text (str duration)} + [rn/view {:style (style/audio-tag-icon-container customization-color theme)} + [icons/icon :i/play {:color style/audio-tag-icon-color :size 12}]]] - :group - [tag-skeleton {:theme theme :size size :text group-name} - [group-avatar/view - {:icon-name :i/members - :size (if (= size 24) :size-20 :size-28) - :customization-color (colors/custom-color customization-color 50)}]] + :group + [tag-skeleton {:theme theme :size size :text group-name} + [group-avatar/view + {:icon-name :i/members + :size (if (= size 24) :size-20 :size-28) + :customization-color (colors/custom-color customization-color 50)}]] - (:channel :community) - [communities-tag (assoc props :channel? (= type :channel))] + (:channel :community) + [communities-tag (assoc props :channel? (= type :channel))] - :token - [tag-skeleton {:theme theme :size size :text (str amount " " token)} - [token/view - {:style (style/token-logo size) - :token token - :size (if (= size 24) :size-20 :size-28)}]] + :token + [tag-skeleton {:theme theme :size size :text (str amount " " token)} + [token/view + {:style (style/token-logo size) + :token token + :size (if (= size 24) :size-20 :size-28)}]] - :network - [tag-skeleton {:theme theme :size size :text network-name} - [rn/image {:style (style/circle-logo size) :source network-logo}]] + :network + [tag-skeleton {:theme theme :size size :text network-name} + [rn/image {:style (style/circle-logo size) :source network-logo}]] - :collectible - [tag-skeleton - {:theme theme - :size size - :text (str collectible-name " #" collectible-number)} - [rn/image {:style (style/rounded-logo size) :source collectible}]] + :collectible + [tag-skeleton + {:theme theme + :size size + :text (str collectible-name " #" collectible-number)} + [rn/image {:style (style/rounded-logo size) :source collectible}]] - :account - [tag-skeleton {:theme theme :size size :text account-name} - [account-avatar/view - {:customization-color customization-color - :emoji emoji - :size (if (= size 24) 20 28)}]] + :account + [tag-skeleton {:theme theme :size size :text account-name} + [account-avatar/view + {:customization-color customization-color + :emoji emoji + :size (if (= size 24) 20 28)}]] - :address - [address-tag props] + :address + [address-tag props] - :icon - [icon-tag props] + :icon + [icon-tag props] - nil)]) + nil)]]) (def view (quo.theme/with-theme diff --git a/src/status_im/contexts/chat/messenger/menus/pinned_messages/style.cljs b/src/status_im/contexts/chat/messenger/menus/pinned_messages/style.cljs index b97d83f60e..ad7b9cf3d3 100644 --- a/src/status_im/contexts/chat/messenger/menus/pinned_messages/style.cljs +++ b/src/status_im/contexts/chat/messenger/menus/pinned_messages/style.cljs @@ -1,6 +1,5 @@ (ns status-im.contexts.chat.messenger.menus.pinned-messages.style (:require - [quo.foundations.colors :as colors] [react-native.platform :as platform])) (defn heading @@ -8,29 +7,8 @@ {:padding-horizontal 20 :margin-bottom (when-not community? 12)}) -(defn heading-container - [] - {:flex-direction :row - :background-color (colors/theme-colors colors/neutral-10 colors/neutral-80) - :border-radius 20 - :align-items :center - :align-self :flex-start - :margin-horizontal 20 - :padding 4 - :margin-top 8 - :margin-bottom 16}) - -(defn heading-text - [] - {:margin-left 6 - :margin-right 4 - :color (colors/theme-colors colors/neutral-60 colors/neutral-20)}) - -(defn chat-name-text - [] - {:margin-left 4 - :margin-right 8 - :color (colors/theme-colors colors/neutral-60 colors/neutral-20)}) +(def community-tag-container + {:margin-horizontal 20 :margin-top 4 :margin-bottom 12}) (def no-pinned-messages-container {:justify-content :center @@ -38,22 +16,5 @@ :margin 12 :margin-bottom (when platform/android? 12)}) -(def no-pinned-messages-icon - {:width 80 - :height 80 - :justify-content :center - :align-items :center - :border-width 1}) - -(def no-pinned-messages-content - {:margin-top 12}) - -(def no-pinned-messages-title - {:text-align :center}) - -(def no-pinned-messages-text - {:text-align :center - :margin-top 2}) - (def list-footer {:height (when platform/android? 12)}) diff --git a/src/status_im/contexts/chat/messenger/menus/pinned_messages/view.cljs b/src/status_im/contexts/chat/messenger/menus/pinned_messages/view.cljs index abb5fa317a..14c233deff 100644 --- a/src/status_im/contexts/chat/messenger/menus/pinned_messages/view.cljs +++ b/src/status_im/contexts/chat/messenger/menus/pinned_messages/view.cljs @@ -1,10 +1,8 @@ (ns status-im.contexts.chat.messenger.menus.pinned-messages.view (:require [quo.core :as quo] - [quo.foundations.colors :as colors] [quo.theme] [react-native.core :as rn] - [react-native.fast-image :as fast-image] [react-native.gesture :as gesture] [status-im.common.resources :as resources] [status-im.contexts.chat.messenger.menus.pinned-messages.style :as style] @@ -52,20 +50,13 @@ :style (style/heading community)} (i18n/label :t/pinned-messages)] (when community - [rn/view {:style (style/heading-container)} - [fast-image/fast-image - {:source (community-avatar community-images) - :style {:width 20 - :height 20 - :border-radius 20}}] - [rn/text {:style (style/heading-text)} (:name community)] - [quo/icon - :i/chevron-right - {:color (colors/theme-colors colors/neutral-60 colors/neutral-30) - :size 12}] - [rn/text - {:style (style/chat-name-text)} - (str "# " (:chat-name current-chat))]])] + [quo/context-tag + {:type :channel + :size 24 + :container-style style/community-tag-container + :community-logo (community-avatar community-images) + :community-name (:name community) + :channel-name (:chat-name current-chat)}])] (if (pos? (count pinned)) [rn/flat-list {:data pinned