replaced mocked community-tags and images with real data

Co-authored-by: jo-mut <jo_ngei@Johns-MacBook-Air.local>

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
+  [{:keys [name description locked images cover
-           status tokens cover tags width]} on-press]
+           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
+         {:flex                    1
-          :border-radius 20}}]]
+          :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

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]
+   (for [{:keys [name emoji]} tags]
-     ^{:key id}
+     ^{:key name}
      [rn/view {:margin-right 8}
       [tag/tag
-       {:id        id
+       {:size      24
-        :size      24
+        :label     name
-        :label     tag-label
         :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}])

src/quo2/components/community/style.cljs

@@ -57,14 +57,18 @@
 
 (defn card-view-content-container
   [padding-horizontal]
-  {:flex             1
+  {:position                :absolute
-   :height           20
+   :top                     40
-   :padding-left     padding-horizontal
+   :bottom                  0
-   :padding-right    padding-horizontal
+   :left                    0
-   :border-radius    16
+   :right                   0
-   :background-color (colors/theme-colors
+   :height                  20
-                      colors/white
+   :padding-horizontal      padding-horizontal
-                      colors/neutral-90)})
+   :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]

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
+  (fn
-               accessibility-label labelled? type]
+    [{:keys [id
-        :or   {size 32}} children]
+             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}

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
+     [text/text
-      {:source resource
+      {:style {:margin-right 4}
-       :style  (merge (case size
+       :size  (case size
-                        32 {:height 20
+                32 :paragraph-1
-                            :width  20}
+                24 :paragraph-2
-                        24 {:height 12
+                nil)}
-                            :width  12})
+      resource])
-                      (when label
+   (when labelled?
-                        {:margin-right 4}))}])
-   (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
+  (fn
-               label type labelled? blurred? icon-color override-theme]
+    [{:keys [id
-        :or   {size 32}}]
+             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)

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)))}
+                                              (on-change id)))}]])})])
-                             label]])})])
           [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?

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])]])))

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

@@ -2,9 +2,10 @@
   (:require [react-native.platform :as platform]))
 
 (def screen-title-container
-  {:height           56
+  {:height            56
-   :padding-vertical 12
+   :padding-vertical  12
-   :justify-content  :center})
+   :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-top        12
-      :margin-bottom 4})))
+      :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
   []

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)}]}]
+                                      :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)}]}})
 
 (defn render-fn
   [community-item _ _ {:keys [width view-type]}]
-  (let [item (merge community-item
+  (let [item  (merge community-item
-                    (get mock-community-item-data :data))]
+                     (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)

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 %)

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))
+             :labelled?      (if (= :label (:type @state)) true (:labelled? @state))
-             :resource       (when (= type :icon)
-                               :main-icons2/placeholder)
              :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)}