diff --git a/src/status_im/ui/screens/discover/components/views.cljs b/src/status_im/ui/screens/discover/components/views.cljs index 62825927d4..2bdf78c97b 100644 --- a/src/status_im/ui/screens/discover/components/views.cljs +++ b/src/status_im/ui/screens/discover/components/views.cljs @@ -24,17 +24,6 @@ :uppercase? (:uppercase? styles/subtitle-text-augment)} (i18n/label action-kw)]]]]) -(defn tags-menu [tags] - [react/view styles/tag-title-container - (for [tag (take 3 tags)] - ^{:key (str "tag-" tag)} - [react/touchable-highlight {:on-press #(do (re-frame/dispatch [:set :discover-search-tags [tag]]) - (re-frame/dispatch [:navigate-to :discover-search-results]))} - [react/view styles/tag-view - [react/text {:style styles/tag-title - :font :default} - (str " #" tag)]]])]) - (defn display-name [me? account-name contact-name name whisper-id] (cond me? account-name ;status by current user diff --git a/src/status_im/ui/screens/discover/popular_hashtags/views.cljs b/src/status_im/ui/screens/discover/popular_hashtags/views.cljs index 7ab63af4fc..e6e4254315 100644 --- a/src/status_im/ui/screens/discover/popular_hashtags/views.cljs +++ b/src/status_im/ui/screens/discover/popular_hashtags/views.cljs @@ -3,9 +3,27 @@ (:require [status-im.components.react :as react] [status-im.ui.screens.discover.styles :as styles] [status-im.ui.screens.discover.components.views :as components] + [status-im.components.list.views :as list] + [re-frame.core :as re-frame] + [status-im.i18n :as i18n] [status-im.components.toolbar-new.view :as toolbar])) -;; TOOD(oskarth): These styles should be either generic or popular, not recent-* +(defn render-tag [tag] + [react/touchable-highlight {:on-press #(do (re-frame/dispatch [:set :discover-search-tags [tag]]) + (re-frame/dispatch [:navigate-to :discover-search-results]))} + [react/view styles/tag-view + [react/text {:style styles/tag-title + :font :default} + (str " #" tag)]]]) + +(defn tags-menu [tags] + [react/view styles/tag-title-container + [list/flat-list {:data tags + :render-fn render-tag + :horizontal true + :shows-horizontal-scroll-indicator false + :separator? false}]]) + (defview discover-all-hashtags [] (letsubs [current-account [:get-current-account] popular-tags [:get-popular-tags 10] @@ -13,11 +31,11 @@ [react/view styles/discover-container [toolbar/toolbar2 {} toolbar/default-nav-back - [react/view {} [react/text {} "All hashtags"]]] - [components/tags-menu (map :name popular-tags)] + [toolbar/content-title (i18n/label :t/popular-tags)]] + [tags-menu (map :name popular-tags)] [react/scroll-view styles/list-container - [react/view styles/recent-container - [react/view styles/recent-list + [react/view styles/status-list-outer + [react/view styles/status-list-inner (let [discoveries (map-indexed vector discoveries)] (for [[i {:keys [message-id] :as message}] discoveries] ^{:key (str "message-hashtag-" message-id)} diff --git a/src/status_im/ui/screens/discover/recent_statuses/views.cljs b/src/status_im/ui/screens/discover/recent_statuses/views.cljs index daf41bf012..f9ed39b4ff 100644 --- a/src/status_im/ui/screens/discover/recent_statuses/views.cljs +++ b/src/status_im/ui/screens/discover/recent_statuses/views.cljs @@ -15,8 +15,8 @@ toolbar/default-nav-back [react/view {} [react/text {} "All recent"]]] [react/scroll-view (styles/list-container tabs-hidden?) - [react/view styles/recent-container - [react/view styles/recent-list + [react/view styles/status-list-outer + [react/view styles/status-list-inner (let [discoveries (map-indexed vector discoveries)] (for [[i {:keys [message-id] :as message}] discoveries] ^{:key (str "message-recent-" message-id)} diff --git a/src/status_im/ui/screens/discover/search_results/views.cljs b/src/status_im/ui/screens/discover/search_results/views.cljs index 246397a774..71aef89d3b 100644 --- a/src/status_im/ui/screens/discover/search_results/views.cljs +++ b/src/status_im/ui/screens/discover/search_results/views.cljs @@ -41,4 +41,4 @@ {:message row :current-account current-account}])) :renderSeparator render-separator - :style styles/recent-list}])]))) + :style styles/status-list-inner}])]))) diff --git a/src/status_im/ui/screens/discover/styles.cljs b/src/status_im/ui/screens/discover/styles.cljs index 0ab9a623fa..3faa203f65 100644 --- a/src/status_im/ui/screens/discover/styles.cljs +++ b/src/status_im/ui/screens/discover/styles.cljs @@ -40,19 +40,6 @@ {:ios {:uppercase? false} :android {:uppercase? true}}) -(defstyle tag-view - {:margin-horizontal 2 - :ios {:flex-direction :column - :background-color styles/color-light-blue6 - :border-radius 4 - :border-width 1 - :border-color styles/color-light-blue6 - :padding 6} - :android {:flex-direction :column - :background-color styles/color-light-blue6 - :border-radius 5 - :padding 4}}) - (defstyle discover-item-status-text {:ios {:font-size 14 :letter-spacing -0.1} @@ -156,10 +143,10 @@ ;; discover_recent -(def recent-container +(def status-list-outer {:background-color toolbar-background2}) -(def recent-list +(def status-list-inner {:background-color :white :padding-left 16}) @@ -230,25 +217,34 @@ :border-bottom-width 1}) (def discover-tag-container - {:flex 1 - :backgroundColor styles/color-light-gray}) - -(def tag-title-scroll - {:flex 1 - :alignItems :center - :justifyContent :center}) + {:flex 1 + :background-color styles/color-light-gray}) (def tag-title-container - {:flex 0.2 - :alignItems :center - :justifyContent :center - :flex-direction :row}) + {:height 68 + :margin-left 16 + :align-items :center + :justify-content :flex-start + :flex-direction :row + :background-color styles/color-light-gray}) + +(defstyle tag-view + {:margin-horizontal 2 + :padding 10 + :padding-bottom 8 + :height 36 + :background-color styles/color-white + :justify-content :center + :align-items :center + :flex-direction :column + :ios {:border-radius 8 + :border-color styles/color-light-blue6} + :android {:border-radius 4}}) (def tag-title - {:color styles/color-blue - :font-size 14 - :padding-right 5 - :padding-bottom 2}) + {:color styles/color-blue4 + :background-color styles/color-white + :font-size 14}) (def icon-back {:width 8