diff --git a/src/quo2/components/community/community_card_view.cljs b/src/quo2/components/community/community_card_view.cljs index c1176ecaf8..a0d57b7b37 100644 --- a/src/quo2/components/community/community_card_view.cljs +++ b/src/quo2/components/community/community_card_view.cljs @@ -5,8 +5,8 @@ [react-native.core :as rn])) (defn community-card-view-item - [{:keys [name description locked images - status tokens cover tags width]} on-press] + [{:keys [name description locked images cover + status tokens tags width]} on-press] [rn/touchable-without-feedback {:accessibility-label :community-card-item :on-press on-press} @@ -18,16 +18,16 @@ :on-press on-press} [rn/view {:flex 1} - [rn/view (style/community-cover-container 40) + [rn/view (style/community-cover-container 60) [rn/image {:source cover :style - {:flex 1 - :border-radius 20}}]] + {:flex 1 + :border-top-right-radius 20 + :border-top-left-radius 20}}]] [rn/view (style/card-view-content-container 12) [rn/view (style/card-view-chat-icon 48) [icon/community-icon {:images images} 48]] - (when (= status :gated) [rn/view (style/permission-tag-styles) [community-view/permission-tag-container diff --git a/src/quo2/components/community/community_view.cljs b/src/quo2/components/community/community_view.cljs index 983328b4b9..725075bf3a 100644 --- a/src/quo2/components/community/community_view.cljs +++ b/src/quo2/components/community/community_view.cljs @@ -42,16 +42,15 @@ (defn community-tags [tags] [rn/view (style/community-tags-container) - (for [{:keys [id tag-label resource]} tags] - ^{:key id} + (for [{:keys [name emoji]} tags] + ^{:key name} [rn/view {:margin-right 8} [tag/tag - {:id id - :size 24 - :label tag-label + {:size 24 + :label name :type :emoji :labelled? true - :resource resource}]])]) + :resource emoji}]])]) (defn community-title [{:keys [title description size] :or {size :small}}] @@ -82,6 +81,5 @@ colors/neutral-80) :locked? locked? :tokens tokens - :size 24 :on-press on-press}]) diff --git a/src/quo2/components/community/style.cljs b/src/quo2/components/community/style.cljs index 06613dc6dc..f773ac73a4 100644 --- a/src/quo2/components/community/style.cljs +++ b/src/quo2/components/community/style.cljs @@ -57,14 +57,18 @@ (defn card-view-content-container [padding-horizontal] - {:flex 1 - :height 20 - :padding-left padding-horizontal - :padding-right padding-horizontal - :border-radius 16 - :background-color (colors/theme-colors - colors/white - colors/neutral-90)}) + {:position :absolute + :top 40 + :bottom 0 + :left 0 + :right 0 + :height 20 + :padding-horizontal padding-horizontal + :border-top-right-radius 16 + :border-top-left-radius 16 + :background-color (colors/theme-colors + colors/white + colors/neutral-90)}) (defn card-view-chat-icon [icon-size] diff --git a/src/quo2/components/tags/base_tag.cljs b/src/quo2/components/tags/base_tag.cljs index 8197cb7dc7..b85a6f0e94 100644 --- a/src/quo2/components/tags/base_tag.cljs +++ b/src/quo2/components/tags/base_tag.cljs @@ -2,7 +2,7 @@ (:require [react-native.core :as rn])) (defn style-container - [size disabled border-color border-width background-color label type] + [size disabled border-color border-width background-color labelled? type] (merge {:height size :border-color border-color :background-color background-color @@ -12,14 +12,23 @@ :justify-content :center} (when disabled {:opacity 0.3}) - (when (and (or (= type :icon) (= type :emoji)) (not label)) + (when (and (or (= type :icon) (= type :emoji)) (not labelled?)) {:width size}))) (defn base-tag [_] - (fn [{:keys [id size disabled? border-color border-width background-color on-press - accessibility-label labelled? type] - :or {size 32}} children] + (fn + [{:keys [id + size + disabled? + border-color + border-width + background-color + on-press + accessibility-label + type + labelled?] + :or {size 32}} children] [rn/touchable-without-feedback (merge {:disabled disabled? :accessibility-label accessibility-label} diff --git a/src/quo2/components/tags/tag.cljs b/src/quo2/components/tags/tag.cljs index 640be6b74f..c8ca233ff5 100644 --- a/src/quo2/components/tags/tag.cljs +++ b/src/quo2/components/tags/tag.cljs @@ -27,7 +27,7 @@ :text-color {:style {:color colors/white}}}}}) (defn tag-resources - [size type resource icon-color label text-color labelled] + [size type resource icon-color label text-color labelled?] [rn/view {:style (merge {:flex-direction :row :align-items :center @@ -46,16 +46,14 @@ 24 12) :color icon-color}]) (when (= type :emoji) - [rn/image - {:source resource - :style (merge (case size - 32 {:height 20 - :width 20} - 24 {:height 12 - :width 12}) - (when label - {:margin-right 4}))}]) - (when labelled + [text/text + {:style {:margin-right 4} + :size (case size + 32 :paragraph-1 + 24 :paragraph-2 + nil)} + resource]) + (when labelled? [text/text (merge {:size (case size 32 :paragraph-1 @@ -70,6 +68,7 @@ (defn tag "opts {:type :icon/:emoji/:label + :label string :size 32/24 :on-press fn :blurred? true/false @@ -82,9 +81,21 @@ - `type` can be icon or emoji with or without a tag label - `labelled` boolean: is true if tag has label else false" [_ _] - (fn [{:keys [id on-press disabled? size resource active accessibility-label - label type labelled? blurred? icon-color override-theme] - :or {size 32}}] + (fn + [{:keys [id + on-press + disabled? + size + active + accessibility-label + label + resource + type + labelled? + blurred? + icon-color + override-theme] + :or {size 32}}] (let [state (cond disabled? :disabled active :active :else :default) diff --git a/src/quo2/components/tags/tags.cljs b/src/quo2/components/tags/tags.cljs index e477180b6e..874ae0f563 100644 --- a/src/quo2/components/tags/tags.cljs +++ b/src/quo2/components/tags/tags.cljs @@ -138,7 +138,9 @@ :blurred? blurred? :icon-color icon-color :disabled? disabled? - :label label + :label (if labelled? + label + (when (= type :label) label)) :type type :labelled? labelled? :on-press (fn [id] @@ -150,17 +152,18 @@ :index index :viewPosition 0.5})) (when on-change - (on-change id)))} - label]])})]) + (on-change id)))}]])})]) [rn/view {:style {:flex-direction :row}} - (for [{:keys [label id resource]} data] + (for [{:keys [id label resource]} data] ^{:key id} [rn/view {:style {:margin-right 8}} [tag/tag (merge {:id id :size size :type type - :label (if labelled? label (when (= type :label) label)) + :label (if labelled? + label + (when (= type :label) label)) :active (= id active-tab-id) :disabled? disabled? :blurred? blurred? diff --git a/src/status_im2/common/scroll_page/view.cljs b/src/status_im2/common/scroll_page/view.cljs index 0c02118634..cea0164c90 100644 --- a/src/status_im2/common/scroll_page/view.cljs +++ b/src/status_im2/common/scroll_page/view.cljs @@ -31,7 +31,7 @@ height name page-nav - cover + logo sticky-header top-nav title-colum @@ -65,11 +65,11 @@ :top 0 :left 0 :right 0}} - (when cover + (when logo [reanimated/view {:style (style/sticky-header-title opacity-animation)} [rn/image - {:source cover + {:source logo :style style/sticky-header-image}] [quo/text {:size :paragraph-1 @@ -122,6 +122,7 @@ (let [scroll-height (reagent/atom negative-scroll-position-0)] (fn [{:keys [cover-image + logo page-nav-right-section-buttons name on-scroll @@ -134,7 +135,7 @@ children] [:<> [:f> scroll-page-header @scroll-height height name page-nav-right-section-buttons - cover-image sticky-header top-nav title-colum navigate-back?] + logo sticky-header top-nav title-colum navigate-back?] [rn/scroll-view {:content-container-style (style/scroll-view-container (diff-with-max-min @scroll-height 16 0)) @@ -162,5 +163,5 @@ :border-radius (diff-with-max-min @scroll-height 16 0) :background-color background-color} (when cover-image - [:f> display-picture @scroll-height cover-image]) + [:f> display-picture @scroll-height logo]) children])]]))) diff --git a/src/status_im2/contexts/communities/discover/style.cljs b/src/status_im2/contexts/communities/discover/style.cljs index 9a8873e5f2..791364195a 100644 --- a/src/status_im2/contexts/communities/discover/style.cljs +++ b/src/status_im2/contexts/communities/discover/style.cljs @@ -2,9 +2,10 @@ (:require [react-native.platform :as platform])) (def screen-title-container - {:height 56 - :padding-vertical 12 - :justify-content :center}) + {:height 56 + :padding-vertical 12 + :justify-content :center + :margin-horizontal 20}) (def featured-communities-header {:flex-direction :row @@ -12,6 +13,7 @@ :padding-top 8 :margin-bottom 8 :padding-right 20 + :margin-left 20 :justify-content :space-between}) (def featured-communities-title-container @@ -21,7 +23,13 @@ (def featured-list-container {:flex-direction :row :overflow :hidden - :margin-bottom 24}) + :margin-bottom 24 + :margin-left 20 + :padding-right 20}) + +(def other-communities-container + {:flex 1 + :margin-horizontal 20}) (defn discover-communities-segments [fixed?] @@ -30,8 +38,9 @@ :height 56 :background-color :transparent} (when-not fixed? - {:margin-top 12 - :margin-bottom 4}))) + {:margin-top 12 + :margin-horizontal 20 + :margin-bottom 4}))) (defn discover-screen-container [background-color] @@ -47,8 +56,7 @@ :justify-content :center}) (def render-communities-container - {:padding-horizontal 20 - :margin-top 100}) + {:margin-top 100}) (defn blur-tabs-header [] diff --git a/src/status_im2/contexts/communities/discover/view.cljs b/src/status_im2/contexts/communities/discover/view.cljs index 89487eec95..5ca726abab 100644 --- a/src/status_im2/contexts/communities/discover/view.cljs +++ b/src/status_im2/contexts/communities/discover/view.cljs @@ -18,26 +18,17 @@ {:data {:community-color "#0052FF" :status :gated :locked? true - :cover (resources/get-mock-image :community-cover) :tokens [{:id 1 :group [{:id 1 - :token-icon (resources/get-mock-image :status-logo)}]}] - :tags [{:id 1 - :tag-label (i18n/label :t/music) - :resource (resources/get-image :music)} - {:id 2 - :tag-label (i18n/label :t/lifestyle) - :resource (resources/get-image :lifestyle)} - {:id 3 - :tag-label (i18n/label :t/podcasts) - :resource (resources/get-image :podcasts)}]}}) + :token-icon (resources/get-mock-image :status-logo)}]}]}}) (defn render-fn [community-item _ _ {:keys [width view-type]}] - (let [item (merge community-item - (get mock-community-item-data :data))] + (let [item (merge community-item + (get mock-community-item-data :data)) + cover {:uri (get-in (:images item) [:banner :uri])}] (if (= view-type :card-view) - [quo/community-card-view-item (assoc item :width width) + [quo/community-card-view-item (assoc item :width width :cover cover) #(rf/dispatch [:navigate-to :community-overview (:id item)])] [quo/communities-list-view-item {:on-press (fn [] @@ -134,7 +125,7 @@ (defn other-communities-list [{:keys [communities communities-ids view-type]}] - [rn/view {:flex 1} + [rn/view {:style style/other-communities-container} (map-indexed (fn [inner-index item] (let [community-id (when communities-ids item) diff --git a/src/status_im2/contexts/communities/overview/view.cljs b/src/status_im2/contexts/communities/overview/view.cljs index a1ea49b443..99c6ba799c 100644 --- a/src/status_im2/contexts/communities/overview/view.cljs +++ b/src/status_im2/contexts/communities/overview/view.cljs @@ -288,10 +288,12 @@ (let [categories-heights (reagent/atom []) first-channel-height (reagent/atom 0) scroll-height (reagent/atom 0) - cover {:uri (get-in images [:large :uri])}] + cover {:uri (get-in images [:banner :uri])} + logo {:uri (get-in images [:thumbnail :uri])}] (fn [community] [scroll-page/scroll-page {:cover-image cover + :logo logo :page-nav-right-section-buttons (page-nav-right-section-buttons id) :name name :on-scroll #(reset! scroll-height %) diff --git a/src/status_im2/contexts/quo_preview/tags/tags.cljs b/src/status_im2/contexts/quo_preview/tags/tags.cljs index 3941f0f092..b941b9eb3b 100644 --- a/src/status_im2/contexts/quo_preview/tags/tags.cljs +++ b/src/status_im2/contexts/quo_preview/tags/tags.cljs @@ -92,9 +92,7 @@ @state {:default-active 1 :component :tags - :labelled? (if (= :label type) true (:labelled? @state)) - :resource (when (= type :icon) - :main-icons2/placeholder) + :labelled? (if (= :label (:type @state)) true (:labelled? @state)) :data [{:id 1 :label "Music" :resource (resources/get-image :music)} {:id 2 :label "Lifestyle" :resource (resources/get-image :lifestyle)} {:id 2 :label "Podcasts" :resource (resources/get-image :podcasts)}