fix huge view overlaying everything for the action button

Former-commit-id: faf9c786df

src/status_im/chats_list/styles.cljs

@@ -1,12 +1,12 @@
 (ns status-im.chats-list.styles
   (:require [status-im.components.styles :refer [font
-                                               title-font
+                                                 title-font
-                                               color-white
+                                                 color-white
-                                               color-blue
+                                                 color-blue
-                                               online-color
+                                                 online-color
-                                               text1-color
+                                                 text1-color
-                                               text2-color
+                                                 text2-color
-                                               new-messages-count-color]]
+                                                 new-messages-count-color]]
             [status-im.components.tabs.styles :refer [tabs-height]]))
 
 (def chat-container
@@ -116,9 +116,10 @@
    :color    :white})
 
 (defn action-buttons-container [animation? offset-y]
-  {:position     :absolute
+  ;; todo fix overlaying of parent view
-   :left         0
+  {:position  :absolute
-   :right        0
+   :right     0
-   :top          0
+   :height    230
-   :bottom       0
+   :width     80
-   :transform    [{:translateY (if animation? offset-y 1)}]})
+   :bottom    0
+   :transform [{:translateY (if animation? offset-y 1)}]})

src/status_im/components/main_tabs.cljs

@@ -103,9 +103,8 @@
   [view-id [:get :view-id]
    tab-animation? [:get :prev-tab-view-id]]
   [drawer-view
-   [view {:style common-st/flex}
+   [view {:style         common-st/flex
-    [view {:style common-st/flex
+          :pointerEvents (if tab-animation? :none :auto)}
-           :pointerEvents (if tab-animation? :none :auto)}
+    (doall (map #(tab-view %) tab-list))
-     (doall (map #(tab-view %) tab-list))]
     [tabs {:selected-view-id view-id
            :tab-list         tab-list}]]])

src/status_im/components/tabs/styles.cljs

@@ -14,7 +14,11 @@
 (def tab-height 56)
 
 (defn tabs-container [hidden? animation? offset-y]
-  {:height          tabs-height
+  {:position        :absolute
+   :bottom          0
+   :left            0
+   :right           0
+   :height          tabs-height
    :backgroundColor color-white
    :marginBottom    (if (or hidden? animation?)
                       (- tabs-height) 0)
@@ -55,9 +59,10 @@
    :alignItems     :center})
 
 (defn tab-view-container [offset-x]
-  {:position  :absolute
+  {:position       :absolute
-   :top       0
+   :top            0
-   :left      0
+   :left           0
-   :right     0
+   :right          0
-   :bottom    0
+   :bottom         0
-   :transform [{:translateX offset-x}]})
+   :padding-bottom 59
+   :transform      [{:translateX offset-x}]})

src/status_im/contacts/screen.cljs

@@ -88,12 +88,13 @@
          [view st/empty-contact-groups
           [react/icon :group_big st/empty-contacts-icon]
           [text {:style st/empty-contacts-text} (label :t/no-contacts)]])
-       [action-button {:buttonColor color-blue
+       [view st/buttons-container
-                       :offsetY     16
+        [action-button {:buttonColor color-blue
-                       :offsetX     16}
+                        :offsetY     16
-        [action-button-item
+                        :offsetX     16}
-         {:title       (label :t/new-contact)
+         [action-button-item
-          :buttonColor :#9b59b6
+          {:title       (label :t/new-contact)
-          :onPress     #(dispatch [:navigate-to :new-contact])}
+           :buttonColor :#9b59b6
-         [icon {:name  :android-create
+           :onPress     #(dispatch [:navigate-to :new-contact])}
-                :style create-icon}]]]])))
+          [icon {:name  :android-create
+                 :style create-icon}]]]]])))

src/status_im/contacts/styles.cljs

@@ -180,3 +180,10 @@
 (def address-explication
   {:textAlign :center
    :color "#838c93de"})
+
+(def buttons-container
+  {:position :absolute
+   :bottom 0
+   :right 0
+   :width 200
+   :height 170})