diff --git a/src/status_im/chats_list/screen.cljs b/src/status_im/chats_list/screen.cljs index 9e38f48307..1b3e6e5f98 100644 --- a/src/status_im/chats_list/screen.cljs +++ b/src/status_im/chats_list/screen.cljs @@ -21,6 +21,7 @@ [status-im.components.icons.ionicons :refer [icon]] [status-im.i18n :refer [label]] [status-im.chats-list.styles :as st] + [status-im.components.tabs.bottom-gradient :refer [bottom-gradient]] [status-im.components.tabs.styles :refer [tabs-height]])) (defview chats-list-toolbar [] @@ -82,4 +83,5 @@ :buttonColor :#1abc9c :onPress #(dispatch [:show-group-new])} [icon {:name :person-stalker - :style st/person-stalker-icon}]]]]]))) + :style st/person-stalker-icon}]]]] + [bottom-gradient]]))) diff --git a/src/status_im/components/tabs/bottom_gradient.cljs b/src/status_im/components/tabs/bottom_gradient.cljs new file mode 100644 index 0000000000..16e62bdf05 --- /dev/null +++ b/src/status_im/components/tabs/bottom_gradient.cljs @@ -0,0 +1,8 @@ +(ns status-im.components.tabs.bottom-gradient + (:require [status-im.components.tabs.styles :as st] + [status-im.components.react :refer [linear-gradient]])) + +(defn bottom-gradient [] + [linear-gradient {:locations [0 0.8 1] + :colors ["rgba(24, 52, 76, 0)" "rgba(24, 52, 76, 0.085)" "rgba(24, 52, 76, 0.165)"] + :style st/bottom-gradient}]) \ No newline at end of file diff --git a/src/status_im/components/tabs/styles.cljs b/src/status_im/components/tabs/styles.cljs index 4425c6349d..30b6ab03d1 100644 --- a/src/status_im/components/tabs/styles.cljs +++ b/src/status_im/components/tabs/styles.cljs @@ -24,9 +24,12 @@ (- tabs-height) 0) :transform [{:translateY (if animation? offset-y 1)}]}) -(def top-gradient - {:flexDirection :row - :height 3}) +(def bottom-gradient + {:position :absolute + :bottom 0 + :left 0 + :right 0 + :height 4}) (def tabs-inner-container {:flexDirection :row diff --git a/src/status_im/components/tabs/tabs.cljs b/src/status_im/components/tabs/tabs.cljs index a6d10d5d8d..fc6de8b40f 100644 --- a/src/status_im/components/tabs/tabs.cljs +++ b/src/status_im/components/tabs/tabs.cljs @@ -55,7 +55,5 @@ (defn tabs [{:keys [tab-list selected-view-id]}] [tabs-container - [linear-gradient {:colors ["rgba(24, 52, 76, 0.01)" "rgba(24, 52, 76, 0.085)" "rgba(24, 52, 76, 0.165)"] - :style st/top-gradient}] [view st/tabs-inner-container (doall (map-indexed #(create-tab %1 %2 selected-view-id) tab-list))]]) diff --git a/src/status_im/contacts/screen.cljs b/src/status_im/contacts/screen.cljs index ef0d54464d..21aaf4910d 100644 --- a/src/status_im/contacts/screen.cljs +++ b/src/status_im/contacts/screen.cljs @@ -20,6 +20,7 @@ icon-search create-icon toolbar-background2]] + [status-im.components.tabs.bottom-gradient :refer [bottom-gradient]] [status-im.contacts.styles :as st] [status-im.i18n :refer [label]])) @@ -97,4 +98,5 @@ :buttonColor :#9b59b6 :onPress #(dispatch [:navigate-to :new-contact])} [icon {:name :android-create - :style create-icon}]]]]]))) + :style create-icon}]]]] + [bottom-gradient]]))) diff --git a/src/status_im/discovery/screen.cljs b/src/status_im/discovery/screen.cljs index b7d8e37a7b..1e04f418a7 100644 --- a/src/status_im/discovery/screen.cljs +++ b/src/status_im/discovery/screen.cljs @@ -10,6 +10,7 @@ [status-im.discovery.views.popular :refer [popular]] [status-im.discovery.views.recent :refer [discovery-recent]] [status-im.discovery.styles :as st] + [status-im.components.tabs.bottom-gradient :refer [bottom-gradient]] [status-im.i18n :refer [label]])) (defn get-hashtags [status] @@ -50,4 +51,5 @@ [popular] [view st/section-spacing [text {:style st/discovery-subtitle} (label :t/recent)]] - [discovery-recent]]]) + [discovery-recent]] + [bottom-gradient]])