diff --git a/resources/images/ui2/no-contacts-to-chat-dark@2x.png b/resources/images/ui2/no-contacts-to-chat-dark@2x.png new file mode 100644 index 0000000000..c0434abff5 Binary files /dev/null and b/resources/images/ui2/no-contacts-to-chat-dark@2x.png differ diff --git a/resources/images/ui2/no-contacts-to-chat-dark@3x.png b/resources/images/ui2/no-contacts-to-chat-dark@3x.png new file mode 100644 index 0000000000..9d85865700 Binary files /dev/null and b/resources/images/ui2/no-contacts-to-chat-dark@3x.png differ diff --git a/resources/images/ui2/no-contacts-to-chat-light@2x.png b/resources/images/ui2/no-contacts-to-chat-light@2x.png new file mode 100644 index 0000000000..535aadf033 Binary files /dev/null and b/resources/images/ui2/no-contacts-to-chat-light@2x.png differ diff --git a/resources/images/ui2/no-contacts-to-chat-light@3x.png b/resources/images/ui2/no-contacts-to-chat-light@3x.png new file mode 100644 index 0000000000..629773d2d2 Binary files /dev/null and b/resources/images/ui2/no-contacts-to-chat-light@3x.png differ diff --git a/src/quo/components/list_items/user_list.cljs b/src/quo/components/list_items/user.cljs similarity index 57% rename from src/quo/components/list_items/user_list.cljs rename to src/quo/components/list_items/user.cljs index 694fff00f7..9452d0a4e4 100644 --- a/src/quo/components/list_items/user_list.cljs +++ b/src/quo/components/list_items/user.cljs @@ -1,4 +1,4 @@ -(ns quo.components.list-items.user-list +(ns quo.components.list-items.user (:require [quo.components.avatars.user-avatar.view :as user-avatar] [quo.components.icon :as icons] @@ -18,14 +18,14 @@ :align-items :center}) (defn action-icon - [{:keys [type on-press on-check disabled? checked?]}] + [{:keys [type on-press on-check disabled? checked?]} theme] [rn/touchable-opacity {:on-press (when on-press on-press)} (case type :options [icons/icon :i/options {:size 20 - :color (colors/theme-colors colors/neutral-50 colors/neutral-40)}] + :color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}] :checkbox [selectors/view {:type :checkbox @@ -37,30 +37,33 @@ [text/text "not implemented"] [rn/view])]) -(defn user-list +(defn user [{:keys [short-chat-key primary-name secondary-name photo-path online? contact? verified? - untrustworthy? on-press on-long-press accessory]}] - [rn/touchable-opacity + untrustworthy? on-press on-long-press accessory customization-color theme]}] + [rn/touchable-highlight {:style container-style + :underlay-color (colors/resolve-color customization-color theme 5) :accessibility-label :user-list :on-press (when on-press on-press) :on-long-press (when on-long-press on-long-press)} - [user-avatar/user-avatar - {:full-name primary-name - :profile-picture photo-path - :online? online? - :size :small}] - [rn/view {:style {:margin-horizontal 8 :flex 1}} - [author/view - {:primary-name primary-name - :secondary-name secondary-name - :contact? contact? - :verified? verified? - :untrustworthy? untrustworthy?}] - (when short-chat-key - [text/text - {:size :paragraph-1 - :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)}} - short-chat-key])] - (when accessory - [action-icon accessory])]) + [:<> + [user-avatar/user-avatar + {:full-name primary-name + :profile-picture photo-path + :online? online? + :size :small}] + [rn/view {:style {:margin-horizontal 8 :flex 1}} + [author/view + {:primary-name primary-name + :secondary-name secondary-name + :contact? contact? + :verified? verified? + :untrustworthy? untrustworthy? + :size 15}] + (when short-chat-key + [text/text + {:size :paragraph-2 + :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)}} + short-chat-key])] + (when accessory + [action-icon accessory theme])]]) diff --git a/src/quo/components/messages/author/style.cljs b/src/quo/components/messages/author/style.cljs index ca57521230..30da1f0051 100644 --- a/src/quo/components/messages/author/style.cljs +++ b/src/quo/components/messages/author/style.cljs @@ -38,7 +38,7 @@ (defn icon-container [is-first?] {:margin-left (if is-first? 4 2) - :margin-bottom 2}) + :margin-bottom 4}) (defn time-text [theme] diff --git a/src/quo/components/messages/author/view.cljs b/src/quo/components/messages/author/view.cljs index edabe0ea87..e594a80369 100644 --- a/src/quo/components/messages/author/view.cljs +++ b/src/quo/components/messages/author/view.cljs @@ -51,8 +51,7 @@ [icons/icon :main-icons2/untrustworthy {:size 12 :no-color true - :container-style (style/icon-container contact?)}]) - ] + :container-style (style/icon-container contact?)}])] (when (and (not verified?) short-chat-key) [text/text {:weight :monospace diff --git a/src/quo/core.cljs b/src/quo/core.cljs index 5d77b5b119..87c1de0a7a 100644 --- a/src/quo/core.cljs +++ b/src/quo/core.cljs @@ -86,7 +86,7 @@ quo.components.list-items.saved-contact-address.view quo.components.list-items.token-network.view quo.components.list-items.token-value.view - quo.components.list-items.user-list + quo.components.list-items.user quo.components.loaders.skeleton-list.view quo.components.markdown.list.view quo.components.markdown.text @@ -299,7 +299,7 @@ (def account-list-card quo.components.list-items.account-list-card.view/view) (def address quo.components.list-items.address.view/view) (def channel quo.components.list-items.channel.view/view) -(def community-list-item quo.components.list-items.community.view/view) +(def community-list quo.components.list-items.community.view/view) (def dapp quo.components.list-items.dapp.view/view) (def menu-item quo.components.list-items.menu-item/menu-item) (def preview-list quo.components.list-items.preview-list.view/view) @@ -308,7 +308,7 @@ (def saved-contact-address quo.components.list-items.saved-contact-address.view/view) (def token-network quo.components.list-items.token-network.view/view) (def token-value quo.components.list-items.token-value.view/view) -(def user-list quo.components.list-items.user-list/user-list) +(def user quo.components.list-items.user/user) ;;;; Loaders (def skeleton-list quo.components.loaders.skeleton-list.view/view) diff --git a/src/react_native/section_list.cljs b/src/react_native/section_list.cljs index 770ffbe5fc..86efd9acda 100644 --- a/src/react_native/section_list.cljs +++ b/src/react_native/section_list.cljs @@ -17,19 +17,19 @@ (fn [^js data] (let [^js section (.-section data)] (reagent/as-element [f - {:title (.-title section) + {:index (.-index section) + :title (.-title section) :data (.-data section)}])))) (defn- wrap-per-section-render-fn - [props] - (update - (if-let [f (:render-fn props)] - (assoc (dissoc props :render-fn :render-data) - :renderItem - (memo-wrap-render-fn f (:render-data props))) - props) - :data - to-array)) + [index props] + (-> (if-let [f (:render-fn props)] + (assoc (dissoc props :render-fn :render-data) + :renderItem + (memo-wrap-render-fn f (:render-data props))) + props) + (update :data to-array) + (assoc :index index))) (defn section-list "A wrapper for SectionList. @@ -42,6 +42,8 @@ props (when render-section-footer-fn {:renderSectionFooter (wrap-render-section-header-fn render-section-footer-fn)}) - {:sections (clj->js (map wrap-per-section-render-fn sections)) + {:sections (->> sections + (map-indexed wrap-per-section-render-fn) + (clj->js)) :renderSectionHeader (wrap-render-section-header-fn render-section-header-fn) :style style})]) diff --git a/src/status_im/common/contact_list/style.cljs b/src/status_im/common/contact_list/style.cljs new file mode 100644 index 0000000000..ebd7f77b6e --- /dev/null +++ b/src/status_im/common/contact_list/style.cljs @@ -0,0 +1,5 @@ +(ns status-im.common.contact-list.style) + +(defn contacts-section-header + [first-item?] + {:padding-top (if first-item? 0 8)}) diff --git a/src/status_im/common/contact_list/view.cljs b/src/status_im/common/contact_list/view.cljs index 7391a9ae60..ecbc6fc076 100644 --- a/src/status_im/common/contact_list/view.cljs +++ b/src/status_im/common/contact_list/view.cljs @@ -1,7 +1,10 @@ (ns status-im.common.contact-list.view (:require - [quo.core :as quo])) + [quo.core :as quo] + [react-native.core :as rn] + [status-im.common.contact-list.style :as style])) (defn contacts-section-header - [{:keys [title]}] - [quo/divider-label title]) + [{:keys [title index]}] + [rn/view (style/contacts-section-header (= index 0)) + [quo/divider-label title]]) diff --git a/src/status_im/common/contact_list_item/view.cljs b/src/status_im/common/contact_list_item/view.cljs index 01863dc120..00cee05347 100644 --- a/src/status_im/common/contact_list_item/view.cljs +++ b/src/status_im/common/contact_list_item/view.cljs @@ -6,17 +6,21 @@ (defn contact-list-item [{:keys [on-press on-long-press accessory]} - {:keys [primary-name secondary-name public-key compressed-key ens-verified added?]}] - (let [photo-path (rf/sub [:chats/photo-path public-key]) - online? (rf/sub [:visibility-status-updates/online? public-key])] - [quo/user-list - {:short-chat-key (address/get-shortened-compressed-key (or compressed-key public-key)) - :primary-name primary-name - :secondary-name secondary-name - :photo-path photo-path - :online? online? - :verified? ens-verified - :contact? added? - :on-press on-press - :on-long-press on-long-press - :accessory accessory}])) + {:keys [primary-name secondary-name public-key compressed-key ens-verified added?]} + theme] + (let [photo-path (rf/sub [:chats/photo-path public-key]) + online? (rf/sub [:visibility-status-updates/online? public-key]) + customization-color (rf/sub [:profile/customization-color])] + [quo/user + {:customization-color customization-color + :theme theme + :short-chat-key (address/get-shortened-compressed-key (or compressed-key public-key)) + :primary-name primary-name + :secondary-name secondary-name + :photo-path photo-path + :online? online? + :verified? ens-verified + :contact? added? + :on-press on-press + :on-long-press on-long-press + :accessory accessory}])) diff --git a/src/status_im/common/resources.cljs b/src/status_im/common/resources.cljs index d3699d6880..408ca6f993 100644 --- a/src/status_im/common/resources.cljs +++ b/src/status_im/common/resources.cljs @@ -38,6 +38,9 @@ :no-contacts {:light (js/require "../resources/images/ui2/no-contacts-light.png") :dark (js/require "../resources/images/ui2/no-contacts-dark.png")} + :no-contacts-to-chat + {:light (js/require "../resources/images/ui2/no-contacts-to-chat-light.png") + :dark (js/require "../resources/images/ui2/no-contacts-to-chat-dark.png")} :keycard-chip {:light (js/require "../resources/images/ui2/keycard-chip-light.png") :dark (js/require "../resources/images/ui2/keycard-chip-dark.png")} diff --git a/src/status_im/contexts/chat/actions/view.cljs b/src/status_im/contexts/chat/actions/view.cljs index c1778e4573..a70abba3f3 100644 --- a/src/status_im/contexts/chat/actions/view.cljs +++ b/src/status_im/contexts/chat/actions/view.cljs @@ -29,7 +29,7 @@ {:icon :i/add-user :accessibility-label :add-a-contact :label (i18n/label :t/add-a-contact) - :sub-label (i18n/label :t/enter-a-chat-key) + :sub-label (i18n/label :t/enter-chat-key) :add-divider? true :on-press #(debounce/dispatch-and-chill [:open-modal :new-contact] diff --git a/src/status_im/contexts/chat/home/add_new_contact/style.cljs b/src/status_im/contexts/chat/home/add_new_contact/style.cljs index 19a9e21fe7..aba3cb13c7 100644 --- a/src/status_im/contexts/chat/home/add_new_contact/style.cljs +++ b/src/status_im/contexts/chat/home/add_new_contact/style.cljs @@ -21,7 +21,7 @@ [] {:size :heading-1 :weight :semi-bold - :style {:margin-top 32 + :style {:margin-top 28 :margin-bottom 6 :color (colors/theme-colors colors/neutral-100 colors/white)}}) diff --git a/src/status_im/contexts/chat/home/new_chat/view.cljs b/src/status_im/contexts/chat/home/new_chat/view.cljs index 77bbabb287..7c83d7e93d 100644 --- a/src/status_im/contexts/chat/home/new_chat/view.cljs +++ b/src/status_im/contexts/chat/home/new_chat/view.cljs @@ -16,33 +16,38 @@ (defn- no-contacts-view [{:keys [theme]}] - [rn/view - {:style (style/no-contacts)} - [rn/image {:source (resources/get-themed-image :no-contacts theme)}] - [quo/text - {:weight :semi-bold - :size :paragraph-1 - :style {:margin-bottom 2 - :margin-top 12}} - (i18n/label :t/you-have-no-contacts)] - [quo/text - {:weight :regular - :size :label} - (i18n/label :t/dont-yell-at-me)] - [quo/button - {:type :primary - :size 32 - :container-style {:margin-top 20 - :margin-bottom 12} - :on-press #(rf/dispatch [:invite.events/share-link])} - (i18n/label :t/invite-friends)] - [quo/button - {:type :grey - :size 32 - :on-press #(do - (rf/dispatch [:navigate-back]) - (rf/dispatch [:open-modal :new-contact]))} - (i18n/label :t/add-a-contact)]]) + (let [customization-color (rf/sub [:profile/customization-color])] + [rn/view + {:style (style/no-contacts)} + [rn/image {:source (resources/get-themed-image :no-contacts-to-chat theme)}] + [quo/text + {:weight :semi-bold + :size :paragraph-1 + :style {:margin-bottom 2 + :margin-top 12}} + (i18n/label :t/you-have-no-contacts)] + [quo/text + {:weight :regular + :size :paragraph-2} + (i18n/label :t/dont-yell-at-me)] + [quo/button + {:customization-color customization-color + :theme theme + :type :primary + :size 32 + :container-style {:margin-top 20 + :margin-bottom 12} + :on-press #(rf/dispatch [:invite.events/share-link])} + (i18n/label :t/invite-friends)] + [quo/button + {:customization-color customization-color + :theme theme + :type :grey + :size 32 + :on-press #(do + (rf/dispatch [:navigate-back]) + (rf/dispatch [:open-modal :new-contact]))} + (i18n/label :t/add-a-contact)]])) (defn contact-item-render [_] diff --git a/src/status_im/contexts/chat/home/view.cljs b/src/status_im/contexts/chat/home/view.cljs index b8c0640796..ec18f3a0ce 100644 --- a/src/status_im/contexts/chat/home/view.cljs +++ b/src/status_im/contexts/chat/home/view.cljs @@ -73,7 +73,7 @@ :shared-value scroll-shared-value})}]))) (defn contact-item-render - [{:keys [public-key] :as item}] + [{:keys [public-key] :as item} theme] (let [current-pk (rf/sub [:multiaccount/public-key]) show-profile-actions #(rf/dispatch [:show-bottom-sheet {:content (fn [] [actions/contact-actions item])}])] @@ -83,7 +83,8 @@ :on-long-press show-profile-actions :accessory {:type :options :on-press show-profile-actions}}) - item])) + item + theme])) (defn contacts [{:keys [theme pending-contact-requests set-scroll-ref scroll-shared-value]}] @@ -105,7 +106,8 @@ :sections items :sticky-section-headers-enabled false :render-section-header-fn contact-list/contacts-section-header - :render-fn contact-item-render + :render-fn (fn [data] + (contact-item-render data theme)) :scroll-event-throttle 8 :on-scroll #(common.banner/set-scroll-shared-value {:scroll-input (oops/oget % "nativeEvent.contentOffset.y") diff --git a/src/status_im/contexts/communities/discover/view.cljs b/src/status_im/contexts/communities/discover/view.cljs index 7d596a629b..8a4e219409 100644 --- a/src/status_im/contexts/communities/discover/view.cljs +++ b/src/status_im/contexts/communities/discover/view.cljs @@ -21,7 +21,7 @@ {:community (assoc item :cover cover) :width width :on-press #(rf/dispatch [:communities/navigate-to-community-overview (:id item)])}] - [quo/community-list-item + [quo/community-list {:on-press (fn [] (rf/dispatch [:dismiss-keyboard]) (rf/dispatch [:communities/navigate-to-community-overview (:id item)])) @@ -144,7 +144,7 @@ {:community (assoc community :cover cover) :on-press #(rf/dispatch [:communities/navigate-to-community-overview (:id community)])}] - [quo/community-list-item + [quo/community-list {:on-press (fn [] (rf/dispatch [:dismiss-keyboard]) (rf/dispatch [:communities/navigate-to-community-overview diff --git a/src/status_im/contexts/preview/quo/list_items/community_list.cljs b/src/status_im/contexts/preview/quo/community/list_item.cljs similarity index 97% rename from src/status_im/contexts/preview/quo/list_items/community_list.cljs rename to src/status_im/contexts/preview/quo/community/list_item.cljs index 326e346a19..74be8a6ae8 100644 --- a/src/status_im/contexts/preview/quo/list_items/community_list.cljs +++ b/src/status_im/contexts/preview/quo/community/list_item.cljs @@ -1,4 +1,4 @@ -(ns status-im.contexts.preview.quo.list-items.community-list +(ns status-im.contexts.preview.quo.community.list-item (:require [quo.core :as quo] [quo.theme :as quo.theme] @@ -95,7 +95,7 @@ :unread-count 5})] (fn [] [preview/preview-container {:state state :descriptor (descriptors @state)} - [quo/community-list-item + [quo/community-list (merge @state {:container-style {:width 335} :logo (resources/get-mock-image :status-logo) diff --git a/src/status_im/contexts/preview/quo/list_items/user_list.cljs b/src/status_im/contexts/preview/quo/list_items/user_list.cljs index 80a5a010a7..09d931bb7a 100644 --- a/src/status_im/contexts/preview/quo/list_items/user_list.cljs +++ b/src/status_im/contexts/preview/quo/list_items/user_list.cljs @@ -41,4 +41,4 @@ :descriptor descriptor :component-container-style {:padding-vertical 30 :padding-horizontal 15}} - [quo/user-list @state]]))) + [quo/user @state]]))) diff --git a/src/status_im/contexts/preview/quo/main.cljs b/src/status_im/contexts/preview/quo/main.cljs index be55573707..7dcb0ed885 100644 --- a/src/status_im/contexts/preview/quo/main.cljs +++ b/src/status_im/contexts/preview/quo/main.cljs @@ -41,6 +41,7 @@ :as community-membership-list-view] [status-im.contexts.preview.quo.community.community-stat :as community-stat] [status-im.contexts.preview.quo.community.discover-card :as discover-card] + [status-im.contexts.preview.quo.community.list-item :as community-list-item] [status-im.contexts.preview.quo.community.token-gating :as token-gating] [status-im.contexts.preview.quo.counter.counter :as counter] [status-im.contexts.preview.quo.counter.step :as step] @@ -92,8 +93,6 @@ account-list-card] [status-im.contexts.preview.quo.list-items.address :as address] [status-im.contexts.preview.quo.list-items.channel :as channel] - [status-im.contexts.preview.quo.list-items.community-list :as - community-list] [status-im.contexts.preview.quo.list-items.dapp :as dapp] [status-im.contexts.preview.quo.list-items.preview-lists :as preview-lists] [status-im.contexts.preview.quo.list-items.quiz-item :as quiz-item] @@ -349,7 +348,7 @@ :component channel/view} {:name :community-list :options {:insets {:top? true}} - :component community-list/view} + :component community-list-item/view} {:name :dapp :component dapp/preview} {:name :preview-lists diff --git a/translations/en.json b/translations/en.json index b398d63d39..16011801ea 100644 --- a/translations/en.json +++ b/translations/en.json @@ -1622,7 +1622,7 @@ "not-enough-snt": "Not enough SNT", "add-new-contact": "Add new contact", "add-a-contact": "Add a contact", - "enter-a-chat-key": "Add a chatkey or scan a QR", + "enter-chat-key": "Enter chat key or scan a QR", "you-dont-have-contacts": "You don’t have any contacts yet.", "set-max": "Set max", "continue-anyway": "Continue anyway",