[#16077] Add community illustrations

* Add empty state images
* Add empty state component for communities

src/status_im2/common/resources.cljs

@@ -22,10 +22,26 @@
    :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")
+   :no-messages-light             (js/require "../resources/images/ui2/no-messages-light.png")
+   :no-messages-dark              (js/require "../resources/images/ui2/no-messages-dark.png")
+   :no-group-chats-light          (js/require "../resources/images/ui2/no-group-chats-light.png")
+   :no-group-chats-dark           (js/require "../resources/images/ui2/no-group-chats-dark.png")
    :no-contacts-light             (js/require "../resources/images/ui2/no-contacts-light.png")
    :no-contacts-dark              (js/require "../resources/images/ui2/no-contacts-dark.png")
-   :no-messages-light             (js/require "../resources/images/ui2/no-messages-light.png")
-   :no-messages-dark              (js/require "../resources/images/ui2/no-messages-dark.png")})
+   :no-sent-requests-light        (js/require "../resources/images/ui2/no-sent-requests-light.png")
+   :no-sent-requests-dark         (js/require "../resources/images/ui2/no-sent-requests-dark.png")
+   :no-received-requests-light    (js/require "../resources/images/ui2/no-received-requests-light.png")
+   :no-received-requests-dark     (js/require "../resources/images/ui2/no-received-requests-dark.png")
+   :no-communities-light          (js/require "../resources/images/ui2/no-communities-light.png")
+   :no-communities-dark           (js/require "../resources/images/ui2/no-communities-dark.png")
+   :no-pending-communities-light  (js/require "../resources/images/ui2/no-pending-communities-light.png")
+   :no-pending-communities-dark   (js/require "../resources/images/ui2/no-pending-communities-dark.png")
+   :no-opened-communities-light   (js/require "../resources/images/ui2/no-opened-communities-light.png")
+   :no-opened-communities-dark    (js/require "../resources/images/ui2/no-opened-communities-dark.png")
+   :no-contacts-to-invite-light   (js/require "../resources/images/ui2/no-contacts-to-invite-light.png")
+   :no-contacts-to-invite-dark    (js/require "../resources/images/ui2/no-contacts-to-invite-dark.png")
+   :no-notifications-light        (js/require "../resources/images/ui2/no-notifications-light.png")
+   :no-notifications-dark         (js/require "../resources/images/ui2/no-notifications-dark.png")})
 
 (def mock-images
   {:coinbase             (js/require "../resources/images/mock2/coinbase.png")

src/status_im2/contexts/communities/home/style.cljs

@@ -1,6 +1,8 @@
 (ns status-im2.contexts.communities.home.style
-  (:require [react-native.platform :as platform]
-            [quo2.foundations.colors :as colors]))
+  (:require [quo2.foundations.colors :as colors]
+            [react-native.platform :as platform]))
+
+(def header-height 245)
 
 (def tabs
   {:padding-horizontal 20
@@ -14,21 +16,21 @@
    :left     0
    :bottom   0})
 
-(def empty-state-container
-  {:position    :absolute
-   :top         390
-   :left        0
-   :right       0
-   :align-items :center})
+(defn empty-state-container
+  [top]
+  {:margin-top      (+ header-height top)
+   :margin-bottom   44
+   :flex            1
+   :justify-content :center})
 
 (def empty-state-placeholder
   {:height           120
    :width            120
    :background-color colors/danger-50})
 
-(defn header-height
+(defn header-spacing
   [top]
-  {:height (+ 245 top)})
+  {:height (+ header-height top)})
 
 (defn blur-container
   [top]

src/status_im2/contexts/communities/home/view.cljs

@@ -1,18 +1,19 @@
 (ns status-im2.contexts.communities.home.view
-  (:require [utils.i18n :as i18n]
-            [utils.re-frame :as rf]
-            [quo2.core :as quo]
+  (:require [quo2.core :as quo]
             [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
-            [react-native.safe-area :as safe-area]
+            [quo2.theme :as theme]
             [react-native.blur :as blur]
+            [react-native.core :as rn]
             [react-native.platform :as platform]
+            [react-native.safe-area :as safe-area]
             [status-im.multiaccounts.core :as multiaccounts]
             [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]))
+            [status-im2.contexts.communities.actions.community-options.view :as options]
+            [status-im2.contexts.communities.actions.home-plus.view :as actions.home-plus]
+            [status-im2.contexts.communities.home.style :as style]
+            [utils.i18n :as i18n]
+            [utils.re-frame :as rf]))
 
 (defn item-render
   [{:keys [id] :as item}]
@@ -34,73 +35,92 @@
    {: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-content
+  [selected-tab]
+  (case selected-tab
+    :joined
+    {:title       (i18n/label :t/no-communities)
+     :description [:<>
+                   [rn/text {:style {:text-decoration-line :line-through}}
+                    (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))}
+    :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))}
+    :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))}
+    nil))
+
 (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)]])
+  [{:keys [style selected-tab customization-color]}]
+  (let [{:keys [image title description]} (empty-state-content selected-tab)]
+    [rn/view {:style style}
+     [quo/empty-state
+      {:customization-color customization-color
+       :image               image
+       :title               title
+       :description         description}]]))
 
 (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])
-          account                         (rf/sub [:profile/multiaccount])
-          profile-color                   (:color (rf/sub [:onboarding-2/profile]))
-          customization-color             (if profile-color
-                                            profile-color
+  (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])
+        account                         (rf/sub [:profile/multiaccount])
+        customization-color             (or (:color (rf/sub [:onboarding-2/profile]))
                                             (rf/sub [:profile/customization-color key-uid]))
-          selected-items                  (case selected-tab
-                                            :joined  joined
-                                            :pending pending
-                                            :opened  opened)
-          top                             (safe-area/get-top)]
-      [:<>
-       (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
-         {:type   :grey
-          :avatar {:customization-color customization-color
-                   :full-name           (multiaccounts/displayed-name account)
-                   :profile-picture     (multiaccounts/displayed-photo account)}}]
-        [common.home/title-column
-         {:label               (i18n/label :t/communities)
-          :handler             #(rf/dispatch [:show-bottom-sheet {:content actions.home-plus/view}])
-          :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/favorite-communities)
-          :banner              (resources/get-image :discover)
-          :accessibility-label :communities-home-discover-card}]
-        ^{:key (str "tabs-" selected-tab)}
-        [quo/tabs
-         {:size           32
-          :style          style/tabs
-          :on-change      (fn [tab]
-                            (rf/dispatch [:communities/select-tab tab]))
-          :default-active selected-tab
-          :data           tabs-data}]]])))
+        selected-items                  (case selected-tab
+                                          :joined  joined
+                                          :pending pending
+                                          :opened  opened)
+        top                             (safe-area/get-top)]
+    [:<>
+     (if (empty? selected-items)
+       [empty-state
+        {:style               (style/empty-state-container top)
+         :selected-tab        selected-tab
+         :customization-color customization-color}]
+       [rn/flat-list
+        {:key-fn                            :id
+         :content-inset-adjustment-behavior :never
+         :header                            [rn/view {:style (style/header-spacing 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
+       {:type   :grey
+        :avatar {:customization-color customization-color
+                 :full-name           (multiaccounts/displayed-name account)
+                 :profile-picture     (multiaccounts/displayed-photo account)}}]
+      [common.home/title-column
+       {:label               (i18n/label :t/communities)
+        :handler             #(rf/dispatch [:show-bottom-sheet {:content actions.home-plus/view}])
+        :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/favorite-communities)
+        :banner              (resources/get-image :discover)
+        :accessibility-label :communities-home-discover-card}]
+      ^{:key (str "tabs-" selected-tab)}
+      [quo/tabs
+       {:size           32
+        :style          style/tabs
+        :on-change      (fn [tab]
+                          (rf/dispatch [:communities/select-tab tab]))
+        :default-active selected-tab
+        :data           tabs-data}]]]))

translations/en.json

@@ -2103,7 +2103,12 @@
     "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",
+    "no-communities-description-strikethrough": "Never",
+    "no-communities-description": "go full nyan, find your community",
+    "no-pending-communities": "No pending communities",
+    "no-pending-communities-description": "It's toaster",
+    "no-opened-communities": "No opened communities",
+    "no-opened-communities-description": "But... feels good man",
     "mute-for-15-mins": "For 15 min",
     "mute-for-1-hour": "For 1 hour",
     "mute-for-8-hours": "For 8 hours",