diff --git a/resources/images/icons2/20x20/activity-center@2x.png b/resources/images/icons2/20x20/activity-center@2x.png index 92f1eb409a..a36505e90f 100644 Binary files a/resources/images/icons2/20x20/activity-center@2x.png and b/resources/images/icons2/20x20/activity-center@2x.png differ diff --git a/resources/images/icons2/20x20/activity-center@3x.png b/resources/images/icons2/20x20/activity-center@3x.png index e97ce9e5cd..cffc27a84b 100644 Binary files a/resources/images/icons2/20x20/activity-center@3x.png and b/resources/images/icons2/20x20/activity-center@3x.png differ diff --git a/resources/images/icons2/24x24/browser@2x.png b/resources/images/icons2/24x24/browser@2x.png index 9acd6e1faa..a4dc31f597 100644 Binary files a/resources/images/icons2/24x24/browser@2x.png and b/resources/images/icons2/24x24/browser@2x.png differ diff --git a/resources/images/icons2/24x24/browser@3x.png b/resources/images/icons2/24x24/browser@3x.png index 104ec5ded0..03a7c8560c 100644 Binary files a/resources/images/icons2/24x24/browser@3x.png and b/resources/images/icons2/24x24/browser@3x.png differ diff --git a/resources/images/icons2/24x24/messages@2x.png b/resources/images/icons2/24x24/messages@2x.png index 6188c42ce8..d1e6cf2e06 100644 Binary files a/resources/images/icons2/24x24/messages@2x.png and b/resources/images/icons2/24x24/messages@2x.png differ diff --git a/resources/images/icons2/24x24/messages@3x.png b/resources/images/icons2/24x24/messages@3x.png index e325620b63..9354ff885f 100644 Binary files a/resources/images/icons2/24x24/messages@3x.png and b/resources/images/icons2/24x24/messages@3x.png differ diff --git a/resources/images/icons2/24x24/wallet@2x.png b/resources/images/icons2/24x24/wallet@2x.png index 8e82f77b6c..9bed857bda 100644 Binary files a/resources/images/icons2/24x24/wallet@2x.png and b/resources/images/icons2/24x24/wallet@2x.png differ diff --git a/resources/images/icons2/24x24/wallet@3x.png b/resources/images/icons2/24x24/wallet@3x.png index a027a26986..329acf4336 100644 Binary files a/resources/images/icons2/24x24/wallet@3x.png and b/resources/images/icons2/24x24/wallet@3x.png differ diff --git a/resources/images/ui2/discover@2x.png b/resources/images/ui2/discover@2x.png new file mode 100644 index 0000000000..73a3c97216 Binary files /dev/null and b/resources/images/ui2/discover@2x.png differ diff --git a/resources/images/ui2/discover@3x.png b/resources/images/ui2/discover@3x.png new file mode 100644 index 0000000000..396432ee69 Binary files /dev/null and b/resources/images/ui2/discover@3x.png differ diff --git a/resources/images/ui2/invite-friends@2x.png b/resources/images/ui2/invite-friends@2x.png new file mode 100644 index 0000000000..e19b50cf70 Binary files /dev/null and b/resources/images/ui2/invite-friends@2x.png differ diff --git a/resources/images/ui2/invite-friends@3x.png b/resources/images/ui2/invite-friends@3x.png new file mode 100644 index 0000000000..e19b50cf70 Binary files /dev/null and b/resources/images/ui2/invite-friends@3x.png differ diff --git a/src/quo2/components/avatars/user_avatar/style.cljs b/src/quo2/components/avatars/user_avatar/style.cljs index c04f405630..3759c781bc 100644 --- a/src/quo2/components/avatars/user_avatar/style.cljs +++ b/src/quo2/components/avatars/user_avatar/style.cljs @@ -57,10 +57,18 @@ (def initials-avatar-text {:color colors/white-opa-70}) +(defn inner-dot + [size online?] + (let [background (if online? colors/success-50 colors/neutral-40) + dimensions (get-in sizes [size :status-indicator])] + {:width (- dimensions 4) + :height (- dimensions 4) + :border-radius (- dimensions 4) + :background-color background})) + (defn dot - [size online? ring?] - (let [background (if online? colors/success-50 colors/neutral-40) - dimensions (get-in sizes [size :status-indicator]) + [size ring?] + (let [dimensions (get-in sizes [size :status-indicator]) border-width (get-in sizes [size :status-indicator-border]) right (case size :big 2 @@ -73,11 +81,13 @@ :small -2 0)] {:position :absolute + :justify-content :center + :align-items :center :bottom bottom :right right :width dimensions :height dimensions :border-width border-width :border-radius dimensions - :border-color (colors/theme-colors colors/white colors/neutral-100) - :background-color background})) + :background-color (colors/theme-colors colors/white colors/neutral-100) + :border-color (colors/theme-colors colors/white colors/neutral-100)})) diff --git a/src/quo2/components/avatars/user_avatar/view.cljs b/src/quo2/components/avatars/user_avatar/view.cljs index 8c0232cc4c..7e5c674bbc 100644 --- a/src/quo2/components/avatars/user_avatar/view.cljs +++ b/src/quo2/components/avatars/user_avatar/view.cljs @@ -62,4 +62,7 @@ (when status-indicator? [rn/view {:accessibility-label :status-indicator - :style (style/dot size online? draw-ring?)}])])) + :style (style/dot size draw-ring?)} + [rn/view + {:accessibility-label :inner-status-indicator-dot + :style (style/inner-dot size online?)}]])])) diff --git a/src/quo2/components/buttons/button.cljs b/src/quo2/components/buttons/button.cljs index 6ea075c234..6292436480 100644 --- a/src/quo2/components/buttons/button.cljs +++ b/src/quo2/components/buttons/button.cljs @@ -92,9 +92,9 @@ :grey {:icon-color colors/white :icon-secondary-color colors/neutral-40 :label-color colors/white - :background-color {:default colors/neutral-80 + :background-color {:default colors/neutral-90 :pressed colors/neutral-60 - :disabled colors/neutral-80}} + :disabled colors/neutral-90}} :dark-grey {:icon-color colors/white :icon-secondary-color colors/neutral-40 :label-color colors/white diff --git a/src/quo2/components/community/banner/style.cljs b/src/quo2/components/community/banner/style.cljs new file mode 100644 index 0000000000..267b6eb8fa --- /dev/null +++ b/src/quo2/components/community/banner/style.cljs @@ -0,0 +1,38 @@ +(ns quo2.components.community.banner.style + (:require [quo2.foundations.colors :as colors])) + +(defn community-card + [radius] + {:shadow-offset {:width 0 + :height 2} + :shadow-radius radius + :shadow-opacity 1 + :shadow-color colors/shadow + :elevation 1 + :border-radius radius + :justify-content :space-between + :background-color (colors/theme-colors + colors/white + colors/neutral-90)}) + +(def banner-content + {:flex 1 + :padding-top 8 + :padding-bottom 8 + :border-radius 12}) + +(def banner-title + {:flex 1 + :padding-horizontal 12}) + +(def banner-card + {:flex-direction :row + :margin-horizontal 20 + :margin-vertical 8 + :height 56 + :padding-right 12}) + +(def discover-illustration + {:position :absolute + :top -4 + :right 0}) diff --git a/src/quo2/components/community/banner/view.cljs b/src/quo2/components/community/banner/view.cljs new file mode 100644 index 0000000000..e1e72cb515 --- /dev/null +++ b/src/quo2/components/community/banner/view.cljs @@ -0,0 +1,46 @@ +(ns quo2.components.community.banner.view + (:require [quo2.components.community.banner.style :as style] + [quo2.components.markdown.text :as text] + [quo2.foundations.colors :as colors] + [react-native.core :as rn])) + +(defn- card-title-and-description + [title description] + [rn/view + {:style style/banner-content} + [rn/view + {:style style/banner-title} + [text/text + {:accessibility-label :community-name-text + :ellipsize-mode :tail + :number-of-lines 1 + :weight :semi-bold + :size :paragraph-1} + title] + [text/text + {:accessibility-label :community-name-text + :ellipsize-mode :tail + :number-of-lines 1 + :color (colors/theme-colors + colors/neutral-50 + colors/neutral-40) + :weight :regular + :size :paragraph-2} + description]]]) + +(defn view + [{:keys [title description on-press accessibility-label banner]}] + [rn/touchable-without-feedback + {:on-press on-press + :accessibility-label accessibility-label} + [rn/view + (merge (style/community-card 16) + {:background-color (colors/theme-colors + colors/white + colors/neutral-90)} + style/banner-card) + [card-title-and-description title description] + [rn/image + {:style style/discover-illustration + :source banner + :accessibility-label :discover-communities-illustration}]]]) diff --git a/src/quo2/components/community/discover_card.cljs b/src/quo2/components/community/discover_card.cljs deleted file mode 100644 index 21b821e7c3..0000000000 --- a/src/quo2/components/community/discover_card.cljs +++ /dev/null @@ -1,108 +0,0 @@ -(ns quo2.components.community.discover-card - (:require [quo2.components.community.style :as style] - [quo2.components.markdown.text :as text] - [quo2.foundations.colors :as colors] - [react-native.core :as rn])) - -;; Discover card placeholders images. -;; TODO replaced when real data is available -(def images - {:images [{:id 1 :column-images [{:id 1 :image ""}]} - {:id 2 :column-images [{}]}]}) - -(defn card-title-and-description - [title description] - [rn/view - {:flex 1 - :padding-top 8 - :padding-bottom 8 - :border-radius 12} - [rn/view - {:flex 1 - :padding-horizontal 12} - [text/text - {:accessibility-label :community-name-text - :ellipsize-mode :tail - :number-of-lines 1 - :weight :semi-bold - :size :paragraph-1} - title] - [text/text - {:accessibility-label :community-name-text - :ellipsize-mode :tail - :number-of-lines 1 - :color (colors/theme-colors - colors/neutral-50 - colors/neutral-40) - :weight :regular - :size :paragraph-2} - description]]]) - -(defn placeholder-list-images - [{:keys [images width height border-radius]}] - [rn/view - [rn/view {:justify-content :center} - (for [{:keys [id]} images] - ^{:key id} - [rn/view - {:border-radius border-radius - :margin-top 4 - :margin-right 4 - :width width - :height height - :background-color colors/neutral-10}])]]) - -(defn placeholder-row-images - [{:keys [first-image last-image images width height - border-radius]}] - [rn/view - (when first-image - [rn/view - {:border-bottom-right-radius 6 - :border-bottom-left-radius 6 - :margin-right 4 - :width width - :height height - :background-color colors/neutral-10}]) - (when images - [placeholder-list-images - {:images images - :width 32 - :height 32 - :border-radius 6}]) - (when last-image - [rn/view - {:border-top-left-radius border-radius - :border-top-right-radius 6 - :margin-top 4 - :width width - :height height - :background-color colors/neutral-10}])]) - -(defn discover-card - [{:keys [title description on-press accessibility-label]}] - (let [on-joined-images (get images :images)] - [rn/touchable-without-feedback - {:on-press on-press - :accessibility-label accessibility-label} - [rn/view - (merge (style/community-card 16) - {:background-color (colors/theme-colors - colors/white - colors/neutral-90)} - {:flex-direction :row - :margin-horizontal 20 - :margin-vertical 8 - :height 56 - :padding-right 12}) - [card-title-and-description title description] - (for [{:keys [id column-images]} on-joined-images] - ^{:key id} - [placeholder-row-images - {:images (when (= id 1) - column-images) - :width 32 - :height (if (= id 1) 8 26) - :border-radius 6 - :first-image "" ; TODO replace with real data - :last-image ""}])]])) ; TODO replace with real data diff --git a/src/quo2/components/tabs/segmented_tab.cljs b/src/quo2/components/tabs/segmented_tab.cljs index ef02d90da7..207150d3df 100644 --- a/src/quo2/components/tabs/segmented_tab.cljs +++ b/src/quo2/components/tabs/segmented_tab.cljs @@ -10,8 +10,8 @@ :dark {:background-color colors/white-opa-5}}) (def themes - {:light {:background-color colors/neutral-20} - :dark {:background-color colors/neutral-80}}) + {:light {:background-color colors/neutral-10} + :dark {:background-color colors/neutral-90}}) (defn segmented-control [{:keys [default-active on-change]}] diff --git a/src/quo2/components/tabs/tab/style.cljs b/src/quo2/components/tabs/tab/style.cljs index 84c73cf2ae..38f4a92b95 100644 --- a/src/quo2/components/tabs/tab/style.cljs +++ b/src/quo2/components/tabs/tab/style.cljs @@ -59,22 +59,22 @@ {:opacity tab-background-opacity})))) (def themes - {:light {:default {:background-color colors/neutral-20 + {:light {:default {:background-color colors/neutral-10 :icon-color colors/neutral-50 :label {:style {:color colors/neutral-100}}} :active {:background-color colors/neutral-50 :icon-color colors/white :label {:style {:color colors/white}}} - :disabled {:background-color colors/neutral-20 + :disabled {:background-color colors/neutral-10 :icon-color colors/neutral-50 :label {:style {:color colors/neutral-100}}}} - :dark {:default {:background-color colors/neutral-80 + :dark {:default {:background-color colors/neutral-90 :icon-color colors/neutral-40 :label {:style {:color colors/white}}} :active {:background-color colors/neutral-60 :icon-color colors/white :label {:style {:color colors/white}}} - :disabled {:background-color colors/neutral-80 + :disabled {:background-color colors/neutral-90 :icon-color colors/neutral-40 :label {:style {:color colors/white}}}}}) diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index 2ea9056018..95e4cdea06 100644 --- a/src/quo2/core.cljs +++ b/src/quo2/core.cljs @@ -15,7 +15,7 @@ quo2.components.community.community-card-view quo2.components.community.community-list-view quo2.components.community.community-view - quo2.components.community.discover-card + quo2.components.community.banner.view quo2.components.community.icon quo2.components.community.token-gating quo2.components.counter.counter @@ -143,7 +143,7 @@ (def community-tags quo2.components.community.community-view/community-tags) (def community-title quo2.components.community.community-view/community-title) (def permission-tag-container quo2.components.community.community-view/permission-tag-container) -(def discover-card quo2.components.community.discover-card/discover-card) +(def discover-card quo2.components.community.banner.view/view) (def token-gating quo2.components.community.token-gating/token-gating) (def community-icon quo2.components.community.icon/community-icon) diff --git a/src/quo2/foundations/colors.cljs b/src/quo2/foundations/colors.cljs index 5623839bbd..48613ad399 100644 --- a/src/quo2/foundations/colors.cljs +++ b/src/quo2/foundations/colors.cljs @@ -262,7 +262,7 @@ (custom-color color suffix-dark opacity-dark) (custom-color color suffix-light opacity-light)))) -(def shadow "rgba(9,16,28,0.04)") +(def shadow "rgba(9,16,28,0.08)") ;;General diff --git a/src/status_im2/common/home/view.cljs b/src/status_im2/common/home/view.cljs index facb22e782..7ee06c0fe5 100644 --- a/src/status_im2/common/home/view.cljs +++ b/src/status_im2/common/home/view.cljs @@ -9,14 +9,15 @@ [utils.re-frame :as rf])) (defn title-column - [{:keys [label handler accessibility-label]}] + [{:keys [label handler accessibility-label customization-color]}] [rn/view style/title-column [rn/view {:flex 1} [quo/text style/title-column-text label]] [plus-button/plus-button {:on-press handler - :accessibility-label accessibility-label}]]) + :accessibility-label accessibility-label + :customization-color customization-color}]]) (defn- get-button-common-props [type] @@ -49,14 +50,17 @@ (defn- left-section [{:keys [avatar]}] - [rn/touchable-without-feedback {:on-press #(rf/dispatch [:navigate-to :my-profile])} - [rn/view - {:accessibility-label :open-profile - :style style/left-section} - [quo/user-avatar - (merge {:status-indicator? true - :size :small} - avatar)]]]) + (let [{:keys [public-key]} (rf/sub [:multiaccount]) + online? (rf/sub [:visibility-status-updates/online? public-key])] + [rn/touchable-without-feedback {:on-press #(rf/dispatch [:navigate-to :my-profile])} + [rn/view + {:accessibility-label :open-profile + :style style/left-section} + [quo/user-avatar + (merge {:status-indicator? true + :size :small + :online? online?} + avatar)]]])) (defn connectivity-sheet [] diff --git a/src/status_im2/common/plus_button/view.cljs b/src/status_im2/common/plus_button/view.cljs index 08d23c7214..e5beb81155 100644 --- a/src/status_im2/common/plus_button/view.cljs +++ b/src/status_im2/common/plus_button/view.cljs @@ -2,11 +2,12 @@ (:require [quo2.components.buttons.button :as quo2.button])) (defn plus-button - [{:keys [on-press accessibility-label]}] + [{:keys [on-press accessibility-label customization-color]}] [quo2.button/button {:type :primary :size 32 :icon true :accessibility-label (or accessibility-label :plus-button) - :on-press on-press} + :on-press on-press + :customization-color customization-color} :i/add]) \ No newline at end of file diff --git a/src/status_im2/common/resources.cljs b/src/status_im2/common/resources.cljs index 9f59ea213c..f3b869e074 100644 --- a/src/status_im2/common/resources.cljs +++ b/src/status_im2/common/resources.cljs @@ -18,7 +18,9 @@ :keycard-logo (js/require "../resources/images/ui2/keycard-logo.png") :keycard-chip-light (js/require "../resources/images/ui2/keycard-chip-light.png") :keycard-chip-dark (js/require "../resources/images/ui2/keycard-chip-dark.png") - :keycard-watermark (js/require "../resources/images/ui2/keycard-watermark.png")}) + :keycard-watermark (js/require "../resources/images/ui2/keycard-watermark.png") + :discover (js/require "../resources/images/ui2/discover.png") + :invite-friends (js/require "../resources/images/ui2/invite-friends.png")}) (def mock-images {:coinbase (js/require "../resources/images/mock2/coinbase.png") diff --git a/src/status_im2/contexts/chat/home/view.cljs b/src/status_im2/contexts/chat/home/view.cljs index ac55bcd1f8..f91b27279c 100644 --- a/src/status_im2/contexts/chat/home/view.cljs +++ b/src/status_im2/contexts/chat/home/view.cljs @@ -1,20 +1,21 @@ (ns status-im2.contexts.chat.home.view (:require [utils.i18n :as i18n] + [utils.re-frame :as rf] [quo2.core :as quo] [re-frame.core :as re-frame] [react-native.core :as rn] + [react-native.safe-area :as safe-area] + [quo2.foundations.colors :as colors] + [react-native.blur :as blur] + [react-native.platform :as platform] + [status-im2.contexts.chat.home.style :as style] [status-im2.common.contact-list.view :as contact-list] [status-im2.common.home.view :as common.home] [status-im2.contexts.chat.home.chat-list-item.view :as chat-list-item] [status-im2.contexts.chat.home.contact-request.view :as contact-request] - [utils.re-frame :as rf] [status-im2.common.contact-list-item.view :as contact-list-item] [status-im2.common.home.actions.view :as actions] - [react-native.safe-area :as safe-area] - [quo2.foundations.colors :as colors] - [react-native.blur :as blur] - [status-im2.contexts.chat.home.style :as style] - [react-native.platform :as platform] + [status-im2.common.resources :as resources] [status-im2.contexts.chat.actions.view :as home.sheet])) (defn get-item-layout @@ -102,8 +103,12 @@ [] (fn [] (let [pending-contact-requests (rf/sub [:activity-center/pending-contact-requests]) - selected-tab (or (rf/sub [:messages-home/selected-tab]) - :tab/recent) + selected-tab (or (rf/sub [:messages-home/selected-tab]) :tab/recent) + {:keys [key-uid]} (rf/sub [:multiaccount]) + profile-color (:color (rf/sub [:onboarding-2/profile])) + customization-color (if profile-color + profile-color + (rf/sub [:profile/customization-color key-uid])) top (safe-area/get-top)] [:<> (if (= selected-tab :tab/contacts) @@ -115,13 +120,17 @@ {:blur-amount (if platform/ios? 20 10) :blur-type (if (colors/dark?) :dark (if platform/ios? :light :xlight)) :style style/blur}] - [common.home/top-nav] + [common.home/top-nav + {:type :grey + :avatar {:customization-color customization-color}}] [common.home/title-column {:label (i18n/label :t/messages) :handler #(rf/dispatch [:show-bottom-sheet {:content home.sheet/new-chat}]) - :accessibility-label :new-chat-button}] + :accessibility-label :new-chat-button + :customization-color customization-color}] [quo/discover-card - {:title (i18n/label :t/invite-friends-to-status) + {:banner (resources/get-image :invite-friends) + :title (i18n/label :t/invite-friends-to-status) :description (i18n/label :t/share-invite-link)}] ^{:key (str "tabs-" selected-tab)} [quo/tabs diff --git a/src/status_im2/contexts/communities/home/style.cljs b/src/status_im2/contexts/communities/home/style.cljs index c69e1f3abc..ec343ef858 100644 --- a/src/status_im2/contexts/communities/home/style.cljs +++ b/src/status_im2/contexts/communities/home/style.cljs @@ -1,5 +1,6 @@ (ns status-im2.contexts.communities.home.style - (:require [react-native.platform :as platform])) + (:require [react-native.platform :as platform] + [quo2.foundations.colors :as colors])) (def tabs {:padding-horizontal 20 @@ -13,6 +14,22 @@ :left 0 :bottom 0}) +(def empty-state-container + {:position :absolute + :top 390 + :left 0 + :right 0 + :align-items :center}) + +(def empty-state-placeholder + {:height 120 + :width 120 + :background-color colors/danger-50}) + +(defn header-height + [top] + {:height (+ 245 top)}) + (defn blur-container [top] {:overflow (if platform/ios? :visible :hidden) diff --git a/src/status_im2/contexts/communities/home/view.cljs b/src/status_im2/contexts/communities/home/view.cljs index 5785cddc92..7c1a790da5 100644 --- a/src/status_im2/contexts/communities/home/view.cljs +++ b/src/status_im2/contexts/communities/home/view.cljs @@ -1,15 +1,16 @@ (ns status-im2.contexts.communities.home.view (:require [utils.i18n :as i18n] - [quo2.core :as quo] - [react-native.core :as rn] - [status-im2.common.home.view :as common.home] - [status-im2.contexts.communities.actions.community-options.view :as options] [utils.re-frame :as rf] + [quo2.core :as quo] + [quo2.foundations.colors :as colors] + [react-native.core :as rn] [react-native.safe-area :as safe-area] [react-native.blur :as blur] - [quo2.foundations.colors :as colors] - [status-im2.contexts.communities.home.style :as style] [react-native.platform :as platform] + [status-im2.common.home.view :as common.home] + [status-im2.contexts.communities.actions.community-options.view :as options] + [status-im2.contexts.communities.home.style :as style] + [status-im2.common.resources :as resources] [status-im2.contexts.communities.actions.home-plus.view :as actions.home-plus])) (defn item-render @@ -32,38 +33,64 @@ {:id :pending :label (i18n/label :t/pending) :accessibility-label :pending-tab} {:id :opened :label (i18n/label :t/opened) :accessibility-label :opened-tab}]) +(defn empty-state + [] + [rn/view {:style style/empty-state-container} + [rn/view {:style style/empty-state-placeholder}] + [quo/text + {:accessibility-label :communities-rule-index + :weight :semi-bold + :size :paragraph-1} + (i18n/label :t/no-communities)] + [quo/text + {:accessibility-label :communities-rule-index + :weight :regular + :size :paragraph-2} + (i18n/label :t/no-communities-sub-title)]]) + (defn home [] (fn [] (let [selected-tab (or (rf/sub [:communities/selected-tab]) :joined) {:keys [joined pending opened]} (rf/sub [:communities/grouped-by-status]) + {:keys [key-uid]} (rf/sub [:multiaccount]) + profile-color (:color (rf/sub [:onboarding-2/profile])) + customization-color (if profile-color + profile-color + (rf/sub [:profile/customization-color key-uid])) selected-items (case selected-tab :joined joined :pending pending :opened opened) top (safe-area/get-top)] [:<> - [rn/flat-list - {:key-fn :id - :content-inset-adjustment-behavior :never - :header [rn/view {:height (+ 245 top)}] - :render-fn item-render - :data selected-items}] + (if (empty? selected-items) + [empty-state] + [rn/flat-list + {:key-fn :id + :content-inset-adjustment-behavior :never + :header [rn/view (style/header-height top)] + :render-fn item-render + :data selected-items}]) [rn/view {:style (style/blur-container top)} [blur/view {:blur-amount (if platform/ios? 20 10) :blur-type (if (colors/dark?) :dark (if platform/ios? :light :xlight)) :style style/blur}] - [common.home/top-nav] + [common.home/top-nav + {:type :grey + :avatar {:customization-color customization-color}}] [common.home/title-column {:label (i18n/label :t/communities) :handler #(rf/dispatch [:show-bottom-sheet {:content actions.home-plus/view}]) - :accessibility-label :new-chat-button}] + :accessibility-label :new-communities-button + :customization-color customization-color}] [quo/discover-card {:on-press #(rf/dispatch [:navigate-to :discover-communities]) :title (i18n/label :t/discover) - :description (i18n/label :t/whats-trending) + :description (i18n/label :t/favorite-communities) + :banner (resources/get-image :discover) :accessibility-label :communities-home-discover-card}] ^{:key (str "tabs-" selected-tab)} [quo/tabs diff --git a/src/status_im2/contexts/onboarding/welcome/view.cljs b/src/status_im2/contexts/onboarding/welcome/view.cljs index f321e7620d..1a8b8c895a 100644 --- a/src/status_im2/contexts/onboarding/welcome/view.cljs +++ b/src/status_im2/contexts/onboarding/welcome/view.cljs @@ -4,8 +4,10 @@ [quo2.foundations.colors :as colors] [utils.i18n :as i18n] [utils.re-frame :as rf] + [re-frame.core :as re-frame] [react-native.core :as rn] [react-native.safe-area :as safe-area] + [status-im2.constants :as constants] [status-im2.contexts.onboarding.welcome.style :as style] [status-im2.contexts.onboarding.common.background.view :as background])) @@ -33,11 +35,19 @@ :type :shell :on-press #(rf/dispatch [:init-root root])}}]) +(defn dispatch-visibility-status-update + [status-type] + (re-frame/dispatch + [:visibility-status-updates/delayed-visibility-status-update status-type])) + (defn view [] - (let [profile-color (:color (rf/sub [:onboarding-2/profile])) - insets (safe-area/get-insets)] + (let [profile-color (:color (rf/sub [:onboarding-2/profile])) + {:keys [status-type]} (rf/sub [:multiaccount/current-user-visibility-status]) + insets (safe-area/get-insets)] [rn/view {:style (style/page-container insets)} + (when (nil? status-type) + (dispatch-visibility-status-update constants/visibility-status-automatic)) [background/view true] [navigation-bar :enable-notifications] [page-title] diff --git a/src/status_im2/contexts/quo_preview/community/discover_card.cljs b/src/status_im2/contexts/quo_preview/community/discover_card.cljs index 0c7e3b480a..d0296d7439 100644 --- a/src/status_im2/contexts/quo_preview/community/discover_card.cljs +++ b/src/status_im2/contexts/quo_preview/community/discover_card.cljs @@ -1,7 +1,7 @@ (ns status-im2.contexts.quo-preview.community.discover-card (:require [quo.previews.preview :as preview] [quo.react-native :as rn] - [quo2.components.community.discover-card :as discover-card] + [quo2.components.community.banner.view :as discover-card] [quo2.foundations.colors :as colors] [reagent.core :as reagent] [utils.i18n :as i18n])) @@ -24,10 +24,10 @@ [rn/view {:padding-vertical 60 :justify-content :center} - [discover-card/discover-card + [discover-card/view {:joined? (:joined? @state) :title (i18n/label :t/discover) - :description (i18n/label :t/whats-trending)}]]]]))) + :description (i18n/label :t/favorite-communities)}]]]]))) (defn preview-discoverd-card [] diff --git a/src/status_im2/contexts/shell/view.cljs b/src/status_im2/contexts/shell/view.cljs index 739b14fda6..d3dcf13804 100644 --- a/src/status_im2/contexts/shell/view.cljs +++ b/src/status_im2/contexts/shell/view.cljs @@ -91,7 +91,7 @@ [blur/view (bottom-tabs/blur-overlay-params style/top-nav-blur-overlay)])])) (defn shell - [] + [customization-color] (let [switcher-cards (rf/sub [:shell/sorted-switcher-cards]) width (rf/sub [:dimensions/window-width]) top (safe-area/get-top) @@ -106,21 +106,28 @@ [jump-to-list switcher-cards shell-margin] [top-nav-blur-overlay top] [common.home/top-nav - {:type :shell - :style {:margin-top top - :z-index 2}}]])) + {:type :shell + :avatar {:customization-color customization-color} + :style {:margin-top top + :z-index 2}}]])) (defn f-shell-stack [] - (let [shared-values (animation/calculate-shared-values)] + (let [shared-values (animation/calculate-shared-values) + {:keys [key-uid]} (rf/sub [:multiaccount]) + profile-color (:color (rf/sub [:onboarding-2/profile])) + customization-color (if profile-color + profile-color + (rf/sub [:profile/customization-color key-uid]))] [rn/view {:style {:flex 1}} - [shell] + [shell customization-color] [bottom-tabs/bottom-tabs] [:f> home-stack/f-home-stack] [quo/floating-shell-button - {:jump-to {:on-press #(animation/close-home-stack true) - :label (i18n/label :t/jump-to)}} + {:jump-to {:on-press #(animation/close-home-stack true) + :label (i18n/label :t/jump-to) + :customization-color customization-color}} {:position :absolute :bottom (+ (shell.constants/bottom-tabs-container-height) 7)} ;; bottom offset is 12 = 7 + ;; 5(padding on button) diff --git a/src/status_im2/subs/chat/chats.cljs b/src/status_im2/subs/chat/chats.cljs index 70e5f09e0f..666e5040d9 100644 --- a/src/status_im2/subs/chat/chats.cljs +++ b/src/status_im2/subs/chat/chats.cljs @@ -284,6 +284,12 @@ (multiaccounts/displayed-photo (or (when (= id public-key) multiaccount) (get contacts id))))) +(re-frame/reg-sub + :profile/customization-color + :<- [:multiaccounts/multiaccounts] + (fn [multiaccounts [_ id]] + (:customization-color (get multiaccounts id)))) + (re-frame/reg-sub :chats/unread-messages-number :<- [:chats/home-list-chats] diff --git a/test/appium/tests/critical/test_public_chat_browsing.py b/test/appium/tests/critical/test_public_chat_browsing.py index 97e15654eb..675d91740c 100644 --- a/test/appium/tests/critical/test_public_chat_browsing.py +++ b/test/appium/tests/critical/test_public_chat_browsing.py @@ -309,7 +309,7 @@ class TestCommunityOneDeviceMerged(MultipleSharedDeviceTestCase): self.username = 'first user' self.home = self.sign_in.create_user(username=self.username) - self.home.communities_tab.click_until_presence_of_element(self.home.plus_button) + self.home.communities_tab.click_until_presence_of_element(self.home.plus_community_button) self.community_name = self.home.get_random_chat_name() self.channel_name = 'general' self.community = self.home.create_community(name=self.community_name, description='test description') diff --git a/test/appium/views/home_view.py b/test/appium/views/home_view.py index b5599b25bf..1704109d53 100644 --- a/test/appium/views/home_view.py +++ b/test/appium/views/home_view.py @@ -188,6 +188,7 @@ class HomeView(BaseView): super().__init__(driver) self.plus_button = Button(self.driver, accessibility_id="new-chat-button") + self.plus_community_button = Button(self.driver, accessibility_id="new-communities-button") self.chat_name_text = Text(self.driver, accessibility_id="chat-name-text") self.start_new_chat_button = ChatButton(self.driver, accessibility_id="start-1-1-chat-button") self.new_group_chat_button = ChatButton(self.driver, accessibility_id="start-group-chat-button") @@ -377,7 +378,7 @@ class HomeView(BaseView): def create_community(self, name: str, description="some_description", set_image=False, file_name='sauce_logo.png', require_approval=True): self.driver.info("## Creating community '%s', set image is set to '%s'" % (name, str(set_image)), device=False) - self.plus_button.click() + self.plus_community_button.click() chat_view = self.communities_button.click() chat_view.community_name_edit_box.set_value(name) chat_view.community_description_edit_box.set_value(description) diff --git a/translations/en.json b/translations/en.json index ff73ceac6f..199dbfbf37 100644 --- a/translations/en.json +++ b/translations/en.json @@ -1705,7 +1705,7 @@ "master-account": "Master account", "back-up": "Back up", "key-on-device": "Private key is saved on this device", - "whats-trending": "See what's trending", + "favorite-communities": "Your favourite communities", "seed-key-uid-mismatch": "Seed doesn't match", "seed-key-uid-mismatch-desc-1": "The seed phrase you entered does not match {{multiaccount-name}}", "seed-key-uid-mismatch-desc-2": "To manage keys for this account verify your seed phrase and try again.", @@ -2096,6 +2096,8 @@ "use-biometrics": "Use biometrics to fill in your password", "name-must-have-at-least-characters": "Name must have at least {{min-chars}} characters", "name-is-not-valid": "Name is not valid", + "no-communities": "No communities", + "no-communities-sub-title": "Your communities will be shown here", "mute-for-15-mins": "For 15 min", "mute-for-1-hour": "For 1 hour", "mute-for-8-hours": "For 8 hours",