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
This commit is contained in:
John Ngei 2023-08-17 23:46:01 +03:00 committed by GitHub
parent e11a761fcc
commit 99294fa8ea
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 46 additions and 26 deletions

View File

@ -1,6 +1,6 @@
(ns status-im2.contexts.chat.home.view (ns status-im2.contexts.chat.home.view
(:require [oops.core :as oops] (:require [oops.core :as oops]
[quo2.theme :as theme] [quo2.theme :as quo.theme]
[re-frame.core :as re-frame] [re-frame.core :as re-frame]
[react-native.core :as rn] [react-native.core :as rn]
[react-native.reanimated :as reanimated] [react-native.reanimated :as reanimated]
@ -27,31 +27,32 @@
(filter k) (filter k)
(sort-by :timestamp >)))) (sort-by :timestamp >))))
(def empty-state-content (defn empty-state-content
[theme]
#:tab{:contacts #:tab{:contacts
{:title (i18n/label :t/no-contacts) {:title (i18n/label :t/no-contacts)
:description (i18n/label :t/no-contacts-description) :description (i18n/label :t/no-contacts-description)
:image (resources/get-image :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 :groups
{:title (i18n/label :t/no-group-chats) {:title (i18n/label :t/no-group-chats)
:description (i18n/label :t/no-group-chats-description) :description (i18n/label :t/no-group-chats-description)
:image (resources/get-image :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 :recent
{:title (i18n/label :t/no-messages) {:title (i18n/label :t/no-messages)
:description (i18n/label :t/no-messages-description) :description (i18n/label :t/no-messages-description)
:image (resources/get-image :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 (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]) (let [unfiltered-items (rf/sub [:chats-stack-items])
items (filter-and-sort-items-by-tab selected-tab unfiltered-items)] items (filter-and-sort-items-by-tab selected-tab unfiltered-items)]
(if (empty? items) (if (empty? items)
[common.home/empty-state-image [common.home/empty-state-image
{:selected-tab selected-tab {:selected-tab selected-tab
:tab->content empty-state-content}] :tab->content (empty-state-content theme)}]
[reanimated/flat-list [reanimated/flat-list
{:ref set-scroll-ref {:ref set-scroll-ref
:key-fn #(or (:chat-id %) (:public-key %) (:id %)) :key-fn #(or (:chat-id %) (:public-key %) (:id %))
@ -81,12 +82,12 @@
item])) item]))
(defn contacts (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])] (let [items (rf/sub [:contacts/active-sections])]
(if (and (empty? items) (empty? pending-contact-requests)) (if (and (empty? items) (empty? pending-contact-requests))
[common.home/empty-state-image [common.home/empty-state-image
{:selected-tab :tab/contacts {:selected-tab :tab/contacts
:tab->content empty-state-content}] :tab->content (empty-state-content theme)}]
[rn/section-list [rn/section-list
{:ref set-scroll-ref {:ref set-scroll-ref
:key-fn :public-key :key-fn :public-key
@ -117,8 +118,8 @@
:title (i18n/label :t/invite-friends-to-status) :title (i18n/label :t/invite-friends-to-status)
:description (i18n/label :t/share-invite-link)}}) :description (i18n/label :t/share-invite-link)}})
(defn home (defn- f-view-internal
[] [{:keys [theme]}]
(let [scroll-ref (atom nil) (let [scroll-ref (atom nil)
set-scroll-ref #(reset! scroll-ref %)] set-scroll-ref #(reset! scroll-ref %)]
(fn [] (fn []
@ -131,11 +132,13 @@
[contacts [contacts
{:pending-contact-requests pending-contact-requests {:pending-contact-requests pending-contact-requests
:set-scroll-ref set-scroll-ref :set-scroll-ref set-scroll-ref
:scroll-shared-value scroll-shared-value}] :scroll-shared-value scroll-shared-value
:theme theme}]
[chats [chats
{:selected-tab selected-tab {:selected-tab selected-tab
:set-scroll-ref set-scroll-ref :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 [:f> common.home.banner/animated-banner
{:content banner-data {:content banner-data
:customization-color customization-color :customization-color customization-color
@ -153,3 +156,9 @@
:selected-tab selected-tab :selected-tab selected-tab
:on-tab-change (fn [tab] (rf/dispatch [:messages-home/select-tab tab])) :on-tab-change (fn [tab] (rf/dispatch [:messages-home/select-tab tab]))
:scroll-shared-value scroll-shared-value}]])))) :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))

View File

@ -1,7 +1,7 @@
(ns status-im2.contexts.communities.home.view (ns status-im2.contexts.communities.home.view
(:require [oops.core :as oops] (:require [oops.core :as oops]
[quo2.core :as quo] [quo2.core :as quo]
[quo2.theme :as theme] [quo2.theme :as quo.theme]
[react-native.core :as rn] [react-native.core :as rn]
[react-native.reanimated :as reanimated] [react-native.reanimated :as reanimated]
[status-im2.common.home.banner.view :as common.home.banner] [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 :pending :label (i18n/label :t/pending) :accessibility-label :pending-tab}
{:id :opened :label (i18n/label :t/opened) :accessibility-label :opened-tab}]) {:id :opened :label (i18n/label :t/opened) :accessibility-label :opened-tab}])
(def empty-state-content
(defn empty-state-content
[theme]
{:joined {:joined
{:title (i18n/label :t/no-communities) {:title (i18n/label :t/no-communities)
:description [:<> :description [:<>
@ -45,18 +47,21 @@
(i18n/label :t/no-communities-description-strikethrough)] (i18n/label :t/no-communities-description-strikethrough)]
" " " "
(i18n/label :t/no-communities-description)] (i18n/label :t/no-communities-description)]
:image (resources/get-image (theme/theme-value :no-communities-light :image (resources/get-image (quo.theme/theme-value :no-communities-light
:no-communities-dark))} :no-communities-dark
theme))}
:pending :pending
{:title (i18n/label :t/no-pending-communities) {:title (i18n/label :t/no-pending-communities)
:description (i18n/label :t/no-pending-communities-description) :description (i18n/label :t/no-pending-communities-description)
:image (resources/get-image (theme/theme-value :no-pending-communities-light :image (resources/get-image (quo.theme/theme-value :no-pending-communities-light
:no-pending-communities-dark))} :no-pending-communities-dark
theme))}
:opened :opened
{:title (i18n/label :t/no-opened-communities) {:title (i18n/label :t/no-opened-communities)
:description (i18n/label :t/no-opened-communities-description) :description (i18n/label :t/no-opened-communities-description)
:image (resources/get-image (theme/theme-value :no-opened-communities-light :image (resources/get-image (quo.theme/theme-value :no-opened-communities-light
:no-opened-communities-dark))}}) :no-opened-communities-dark
theme))}})
(def ^:private banner-data (def ^:private banner-data
{:title-props {:title-props
@ -70,8 +75,8 @@
:banner (resources/get-image :discover) :banner (resources/get-image :discover)
:accessibility-label :communities-home-discover-card}}) :accessibility-label :communities-home-discover-card}})
(defn home (defn- f-view-internal
[] [{:keys [theme]}]
(let [flat-list-ref (atom nil) (let [flat-list-ref (atom nil)
set-flat-list-ref #(reset! flat-list-ref %)] set-flat-list-ref #(reset! flat-list-ref %)]
(fn [] (fn []
@ -87,7 +92,7 @@
(if (empty? selected-items) (if (empty? selected-items)
[common.home/empty-state-image [common.home/empty-state-image
{:selected-tab selected-tab {:selected-tab selected-tab
:tab->content empty-state-content}] :tab->content (empty-state-content theme)}]
[reanimated/flat-list [reanimated/flat-list
{:ref set-flat-list-ref {:ref set-flat-list-ref
:key-fn :id :key-fn :id
@ -109,3 +114,9 @@
:selected-tab selected-tab :selected-tab selected-tab
:on-tab-change (fn [tab] (rf/dispatch [:communities/select-tab tab])) :on-tab-change (fn [tab] (rf/dispatch [:communities/select-tab tab]))
:scroll-shared-value scroll-shared-value}]])))) :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))

View File

@ -28,8 +28,8 @@
:z-index (get shared-values :z-index (get shared-values
(get shell.constants/stacks-z-index-keywords stack-id))})} (get shell.constants/stacks-z-index-keywords stack-id))})}
(case stack-id (case stack-id
:communities-stack [:f> communities/home] :communities-stack [:f> communities/view]
:chats-stack [:f> chat/home] :chats-stack [:f> chat/view]
;NOTE temporary while we support old wallet ;NOTE temporary while we support old wallet
:wallet-stack (if @state/load-new-wallet? :wallet-stack (if @state/load-new-wallet?
[wallet-new/view] [wallet-new/view]