Merge pull request #179 from status-im/bug/#147

fix #147 tab bottom gradient

Former-commit-id: 1307e25de6

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

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

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

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

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

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