diff --git a/src/status_im/ui/components/list_item/styles.cljs b/src/status_im/ui/components/list_item/styles.cljs index 26678204b2..fe36da0d85 100644 --- a/src/status_im/ui/components/list_item/styles.cljs +++ b/src/status_im/ui/components/list_item/styles.cljs @@ -31,4 +31,4 @@ (def error {:bottom-value 0 :color colors/red-light - :font-size 12}) \ No newline at end of file + :font-size 12}) diff --git a/src/status_im/ui/components/text_input/styles.cljs b/src/status_im/ui/components/text_input/styles.cljs index 0415026955..7efc2ffa3e 100644 --- a/src/status_im/ui/components/text_input/styles.cljs +++ b/src/status_im/ui/components/text_input/styles.cljs @@ -25,6 +25,6 @@ :desktop {:height 52}}) (defn error [label?] - {:bottom-value (if label? -20 0) + {:bottom-value (if label? 20 0) :color colors/red-light :font-size 12}) diff --git a/src/status_im/ui/components/tooltip/animations.cljs b/src/status_im/ui/components/tooltip/animations.cljs index 0308b2ddc4..269792d974 100644 --- a/src/status_im/ui/components/tooltip/animations.cljs +++ b/src/status_im/ui/components/tooltip/animations.cljs @@ -5,8 +5,10 @@ (fn [] (animation/start (animation/parallel - [(animation/timing opacity-value {:toValue 1 - :duration 500}) - (animation/timing bottom-anim-value {:toValue (- bottom-value delta) - :easing (.bezier (animation/easing) 0.685, 0.000, 0.025, 1.185) - :duration 500})])))) \ No newline at end of file + [(animation/timing opacity-value {:toValue 1 + :duration 500 + :useNativeDriver true}) + (animation/timing bottom-anim-value {:toValue (- bottom-value delta) + :easing (.bezier (animation/easing) 0.685, 0.000, 0.025, 1.185) + :duration 500 + :useNativeDriver true})])))) diff --git a/src/status_im/ui/components/tooltip/styles.cljs b/src/status_im/ui/components/tooltip/styles.cljs index 926db625d1..fadab53d50 100644 --- a/src/status_im/ui/components/tooltip/styles.cljs +++ b/src/status_im/ui/components/tooltip/styles.cljs @@ -23,7 +23,8 @@ :align-items :center :left 0 :right 0 - :bottom bottom-value + :bottom 0 + :transform [{:translateY bottom-value}] :opacity opacity-value}) (defn tooltip-text-container [color] diff --git a/src/status_im/ui/components/tooltip/views.cljs b/src/status_im/ui/components/tooltip/views.cljs index 653679bedf..19aeb0f952 100644 --- a/src/status_im/ui/components/tooltip/views.cljs +++ b/src/status_im/ui/components/tooltip/views.cljs @@ -9,10 +9,10 @@ [reagent.core :as reagent])) (views/defview tooltip [label & [{:keys [bottom-value color font-size container-style] - :or {bottom-value -30 color :white font-size 15}}]] + :or {bottom-value 30 color :white font-size 15}}]] (views/letsubs [bottom-anim-value (animation/create-value bottom-value) opacity-value (animation/create-value 0)] - {:component-did-mount (animations/animate-tooltip bottom-value bottom-anim-value opacity-value 10)} + {:component-did-mount (animations/animate-tooltip bottom-value bottom-anim-value opacity-value -10)} [react/view (merge styles/tooltip-container container-style) [react/animated-view {:style (styles/tooltip-animated bottom-anim-value opacity-value)} [react/view (styles/tooltip-text-container color) @@ -22,9 +22,9 @@ :color color)]]])) (views/defview bottom-tooltip-info [label on-close] - (views/letsubs [bottom-anim-value (animation/create-value -150) + (views/letsubs [bottom-anim-value (animation/create-value 150) opacity-value (animation/create-value 0)] - {:component-did-mount (animations/animate-tooltip -150 bottom-anim-value opacity-value -10)} + {:component-did-mount (animations/animate-tooltip 150 bottom-anim-value opacity-value 10)} [react/view styles/bottom-tooltip-container [react/animated-view {:style (styles/tooltip-animated bottom-anim-value opacity-value)} [vector-icons/icon :icons/tooltip-triangle (assoc diff --git a/src/status_im/ui/screens/add_new/new_public_chat/styles.cljs b/src/status_im/ui/screens/add_new/new_public_chat/styles.cljs index 6f3bbf9c35..e0fa81a935 100644 --- a/src/status_im/ui/screens/add_new/new_public_chat/styles.cljs +++ b/src/status_im/ui/screens/add_new/new_public_chat/styles.cljs @@ -45,6 +45,6 @@ :background-color nil}) (def tooltip - {:bottom-value -15 + {:bottom-value 15 :color colors/red-light :font-size 12}) diff --git a/src/status_im/ui/screens/bootnodes_settings/edit_bootnode/views.cljs b/src/status_im/ui/screens/bootnodes_settings/edit_bootnode/views.cljs index e6500681b9..90906573f0 100644 --- a/src/status_im/ui/screens/bootnodes_settings/edit_bootnode/views.cljs +++ b/src/status_im/ui/screens/bootnodes_settings/edit_bootnode/views.cljs @@ -71,7 +71,7 @@ {:format (i18n/label :t/bootnode-format)}) {:color colors/red-light :font-size 12 - :bottom-value -25}])] + :bottom-value 25}])] (when id [delete-button id])]] [react/view styles/bottom-container diff --git a/src/status_im/ui/screens/offline_messaging_settings/edit_mailserver/views.cljs b/src/status_im/ui/screens/offline_messaging_settings/edit_mailserver/views.cljs index 6ee23b4221..271a04e1e1 100644 --- a/src/status_im/ui/screens/offline_messaging_settings/edit_mailserver/views.cljs +++ b/src/status_im/ui/screens/offline_messaging_settings/edit_mailserver/views.cljs @@ -80,7 +80,7 @@ {:format (i18n/label :t/mailserver-format)}) {:color colors/red-light :font-size 12 - :bottom-value -25}])] + :bottom-value 25}])] (when (and id (not connected?)) [react/view