From 99294fa8eaafd3a89c166218dc1b9d43a83e1af9 Mon Sep 17 00:00:00 2001 From: John Ngei Date: Thu, 17 Aug 2023 23:46:01 +0300 Subject: [PATCH] update empty state image illustrations to reflect the applied theme * update empty state image illustrations to reflect the applied theme * refactored the code to use theme provider --- src/status_im2/contexts/chat/home/view.cljs | 35 ++++++++++++------- .../contexts/communities/home/view.cljs | 33 +++++++++++------ .../jump_to/components/home_stack/view.cljs | 4 +-- 3 files changed, 46 insertions(+), 26 deletions(-) diff --git a/src/status_im2/contexts/chat/home/view.cljs b/src/status_im2/contexts/chat/home/view.cljs index 78cc1e8223..f1c43cc330 100644 --- a/src/status_im2/contexts/chat/home/view.cljs +++ b/src/status_im2/contexts/chat/home/view.cljs @@ -1,6 +1,6 @@ (ns status-im2.contexts.chat.home.view (:require [oops.core :as oops] - [quo2.theme :as theme] + [quo2.theme :as quo.theme] [re-frame.core :as re-frame] [react-native.core :as rn] [react-native.reanimated :as reanimated] @@ -27,31 +27,32 @@ (filter k) (sort-by :timestamp >)))) -(def empty-state-content +(defn empty-state-content + [theme] #:tab{:contacts {:title (i18n/label :t/no-contacts) :description (i18n/label :t/no-contacts-description) :image (resources/get-image - (theme/theme-value :no-contacts-light :no-contacts-dark))} + (quo.theme/theme-value :no-contacts-light :no-contacts-dark theme))} :groups {:title (i18n/label :t/no-group-chats) :description (i18n/label :t/no-group-chats-description) :image (resources/get-image - (theme/theme-value :no-group-chats-light :no-group-chats-dark))} + (quo.theme/theme-value :no-group-chats-light :no-group-chats-dark theme))} :recent {:title (i18n/label :t/no-messages) :description (i18n/label :t/no-messages-description) :image (resources/get-image - (theme/theme-value :no-messages-light :no-messages-dark))}}) + (quo.theme/theme-value :no-messages-light :no-messages-dark theme))}}) (defn chats - [{:keys [selected-tab set-scroll-ref scroll-shared-value]}] + [{:keys [theme selected-tab set-scroll-ref scroll-shared-value]}] (let [unfiltered-items (rf/sub [:chats-stack-items]) items (filter-and-sort-items-by-tab selected-tab unfiltered-items)] (if (empty? items) [common.home/empty-state-image {:selected-tab selected-tab - :tab->content empty-state-content}] + :tab->content (empty-state-content theme)}] [reanimated/flat-list {:ref set-scroll-ref :key-fn #(or (:chat-id %) (:public-key %) (:id %)) @@ -81,12 +82,12 @@ item])) (defn contacts - [{:keys [pending-contact-requests set-scroll-ref scroll-shared-value]}] + [{:keys [theme pending-contact-requests set-scroll-ref scroll-shared-value]}] (let [items (rf/sub [:contacts/active-sections])] (if (and (empty? items) (empty? pending-contact-requests)) [common.home/empty-state-image {:selected-tab :tab/contacts - :tab->content empty-state-content}] + :tab->content (empty-state-content theme)}] [rn/section-list {:ref set-scroll-ref :key-fn :public-key @@ -117,8 +118,8 @@ :title (i18n/label :t/invite-friends-to-status) :description (i18n/label :t/share-invite-link)}}) -(defn home - [] +(defn- f-view-internal + [{:keys [theme]}] (let [scroll-ref (atom nil) set-scroll-ref #(reset! scroll-ref %)] (fn [] @@ -131,11 +132,13 @@ [contacts {:pending-contact-requests pending-contact-requests :set-scroll-ref set-scroll-ref - :scroll-shared-value scroll-shared-value}] + :scroll-shared-value scroll-shared-value + :theme theme}] [chats {:selected-tab selected-tab :set-scroll-ref set-scroll-ref - :scroll-shared-value scroll-shared-value}]) + :scroll-shared-value scroll-shared-value + :theme theme}]) [:f> common.home.banner/animated-banner {:content banner-data :customization-color customization-color @@ -153,3 +156,9 @@ :selected-tab selected-tab :on-tab-change (fn [tab] (rf/dispatch [:messages-home/select-tab tab])) :scroll-shared-value scroll-shared-value}]])))) + +(defn- internal-chats-home-view + [params] + [:f> f-view-internal params]) + +(def view (quo.theme/with-theme internal-chats-home-view)) diff --git a/src/status_im2/contexts/communities/home/view.cljs b/src/status_im2/contexts/communities/home/view.cljs index fa1ff5f7c0..26180780ef 100644 --- a/src/status_im2/contexts/communities/home/view.cljs +++ b/src/status_im2/contexts/communities/home/view.cljs @@ -1,7 +1,7 @@ (ns status-im2.contexts.communities.home.view (:require [oops.core :as oops] [quo2.core :as quo] - [quo2.theme :as theme] + [quo2.theme :as quo.theme] [react-native.core :as rn] [react-native.reanimated :as reanimated] [status-im2.common.home.banner.view :as common.home.banner] @@ -37,7 +37,9 @@ {:id :pending :label (i18n/label :t/pending) :accessibility-label :pending-tab} {:id :opened :label (i18n/label :t/opened) :accessibility-label :opened-tab}]) -(def empty-state-content + +(defn empty-state-content + [theme] {:joined {:title (i18n/label :t/no-communities) :description [:<> @@ -45,18 +47,21 @@ (i18n/label :t/no-communities-description-strikethrough)] " " (i18n/label :t/no-communities-description)] - :image (resources/get-image (theme/theme-value :no-communities-light - :no-communities-dark))} + :image (resources/get-image (quo.theme/theme-value :no-communities-light + :no-communities-dark + theme))} :pending {:title (i18n/label :t/no-pending-communities) :description (i18n/label :t/no-pending-communities-description) - :image (resources/get-image (theme/theme-value :no-pending-communities-light - :no-pending-communities-dark))} + :image (resources/get-image (quo.theme/theme-value :no-pending-communities-light + :no-pending-communities-dark + theme))} :opened {:title (i18n/label :t/no-opened-communities) :description (i18n/label :t/no-opened-communities-description) - :image (resources/get-image (theme/theme-value :no-opened-communities-light - :no-opened-communities-dark))}}) + :image (resources/get-image (quo.theme/theme-value :no-opened-communities-light + :no-opened-communities-dark + theme))}}) (def ^:private banner-data {:title-props @@ -70,8 +75,8 @@ :banner (resources/get-image :discover) :accessibility-label :communities-home-discover-card}}) -(defn home - [] +(defn- f-view-internal + [{:keys [theme]}] (let [flat-list-ref (atom nil) set-flat-list-ref #(reset! flat-list-ref %)] (fn [] @@ -87,7 +92,7 @@ (if (empty? selected-items) [common.home/empty-state-image {:selected-tab selected-tab - :tab->content empty-state-content}] + :tab->content (empty-state-content theme)}] [reanimated/flat-list {:ref set-flat-list-ref :key-fn :id @@ -109,3 +114,9 @@ :selected-tab selected-tab :on-tab-change (fn [tab] (rf/dispatch [:communities/select-tab tab])) :scroll-shared-value scroll-shared-value}]])))) + +(defn- internal-communities-home-view + [params] + [:f> f-view-internal params]) + +(def view (quo.theme/with-theme internal-communities-home-view)) diff --git a/src/status_im2/contexts/shell/jump_to/components/home_stack/view.cljs b/src/status_im2/contexts/shell/jump_to/components/home_stack/view.cljs index e20209c67b..762b83fb01 100644 --- a/src/status_im2/contexts/shell/jump_to/components/home_stack/view.cljs +++ b/src/status_im2/contexts/shell/jump_to/components/home_stack/view.cljs @@ -28,8 +28,8 @@ :z-index (get shared-values (get shell.constants/stacks-z-index-keywords stack-id))})} (case stack-id - :communities-stack [:f> communities/home] - :chats-stack [:f> chat/home] + :communities-stack [:f> communities/view] + :chats-stack [:f> chat/view] ;NOTE temporary while we support old wallet :wallet-stack (if @state/load-new-wallet? [wallet-new/view]