diff --git a/resources/images/ui/analytics-image.png b/resources/images/ui/analytics-image.png index 61b06b97dd..7e8590c898 100644 Binary files a/resources/images/ui/analytics-image.png and b/resources/images/ui/analytics-image.png differ diff --git a/src/status_im/translations/en.cljs b/src/status_im/translations/en.cljs index 724328b76b..22506731a3 100644 --- a/src/status_im/translations/en.cljs +++ b/src/status_im/translations/en.cljs @@ -50,9 +50,13 @@ :help-improve "Help improve Status\nby sharing usage patterns" :help-improve? "Help improve Status?" - :help-improve-description "We collect anonymous data to help improve Status." - :share-usage-data "Share usage" - :dont-want-to-share "No, I don't want to share" + :help-improve-description "We collect anonymous data to understand how Status is used and inform future development. Whilst we appreciate your help to make Status better, this is an optional choice and can be changed at any time." + :learn-what-we-collect-link "Learn more about what we collect" + :share-usage-data "Share data" + :dont-want-to-share "Do not share" + :confirmation-title "Share data with Status?" + :confirmation-text "Are you sure you want to share anonymous data with Status?" + :confirmation-action "Share" ;;drawer :switch-users "Switch users" diff --git a/src/status_im/ui/components/common/common.cljs b/src/status_im/ui/components/common/common.cljs index 056b3d00b7..4b0fc39bb0 100644 --- a/src/status_im/ui/components/common/common.cljs +++ b/src/status_im/ui/components/common/common.cljs @@ -72,10 +72,10 @@ (when forward? [icons/icon :icons/forward {:color colors/blue}])]]) -(defn button [{:keys [on-press label background? button-style label-style] :or {background? true}}] +(defn button [{:keys [on-press label background? uppercase? button-style label-style] :or {background? true uppercase? true}}] [react/touchable-highlight {:on-press on-press} [react/view {:style (styles/button button-style background?)} - [react/text {:uppercase? true + [react/text {:uppercase? uppercase? :style (merge styles/button-label label-style)} label]]]) @@ -99,4 +99,4 @@ :resize-mode :contain :style (merge style {:width @content-width - :height (/ (* @content-width height) width)})}]])}))) \ No newline at end of file + :height (/ (* @content-width height) width)})}]])}))) diff --git a/src/status_im/ui/screens/usage_data/styles.cljs b/src/status_im/ui/screens/usage_data/styles.cljs index cfae954927..dcf854265b 100644 --- a/src/status_im/ui/screens/usage_data/styles.cljs +++ b/src/status_im/ui/screens/usage_data/styles.cljs @@ -1,48 +1,71 @@ (ns status-im.ui.screens.usage-data.styles (:require-macros [status-im.utils.styles :refer [defnstyle defstyle]]) - (:require [status-im.ui.components.colors :as colors])) + (:require [status-im.ui.components.colors :as colors] + [status-im.ui.components.react :as react] + [status-im.utils.platform :as platform])) + +(def window-width (:width (react/get-dimensions "window"))) +(def window-height (:height (react/get-dimensions "window"))) +(defn scaled-x [n] (* (/ window-width 375) n)) +(defn scaled-y [n] (* (/ window-height 667) n)) (def usage-data-view {:flex 1 - :padding-horizontal 30 - :background-color colors/white}) + :background-color colors/white + :align-items :center}) -(def logo-container +(def image-container {:flex 1 :align-items :center - :justify-content :center}) - -(def logo - {:size 82 - :icon-size 34}) + :justify-content :center + :margin-top (scaled-y 90) + :margin-bottom (scaled-y 90)}) (def usage-data-image - {:width 138 - :height 208 - :margin-top 10}) + {:width (* (/ 390 432) (scaled-y 138)) + :height (scaled-y 138)}) (defstyle help-improve-text - {:text-align :center - :color colors/black - :ios {:line-height 28 - :font-size 22 - :font-weight :bold - :letter-spacing -0.3} - :android {:font-size 24 - :line-height 30}}) + {:text-align :center + :color colors/black + :margin-bottom (scaled-y 8) + :margin-left 46 + :margin-right 46 + :ios {:line-height 28 + :font-size 22 + :font-weight :bold + :letter-spacing -0.3} + :android {:font-size 24 + :line-height 30}}) (def help-improve-text-description {:line-height 21 - :margin-top 8 - :margin-bottom 16 + :margin-bottom (scaled-y 26) + :margin-left 34 + :margin-right 34 :font-size 14 :letter-spacing -0.2 :text-align :center :color colors/gray}) -(def buttons-container - {:align-items :center}) +(def learn-what-we-collect-link + {:text-align :center + :color colors/blue + :margin-bottom (scaled-y 109) + :margin-left 61 + :margin-right 63}) (def bottom-button-container - {:margin-bottom 6 - :margin-top 38}) \ No newline at end of file + {:flex-direction :row + :margin-bottom (scaled-y (if platform/ios? 96 48)) + :margin-left 41 + :margin-right 42}) + +(def share-button + {:padding-horizontal 18 + :width (scaled-x 138) + :margin-right 16}) + +(def dont-share-button + {:padding-horizontal 18 + :width (scaled-x 138)}) diff --git a/src/status_im/ui/screens/usage_data/views.cljs b/src/status_im/ui/screens/usage_data/views.cljs index 69d0360040..57b7efd5e4 100644 --- a/src/status_im/ui/screens/usage_data/views.cljs +++ b/src/status_im/ui/screens/usage_data/views.cljs @@ -6,14 +6,14 @@ [status-im.ui.components.common.common :as components.common] [status-im.ui.components.react :as react] [status-im.ui.components.status-bar.view :as status-bar] - [status-im.ui.screens.usage-data.styles :as styles])) + [status-im.ui.screens.usage-data.styles :as styles] + [status-im.utils.utils :as utils])) (views/defview usage-data [] (views/letsubs [next [:get-screen-params]] [react/view {:style styles/usage-data-view} [status-bar/status-bar {:flat? true}] - [react/view {:style styles/logo-container} - [components.common/logo styles/logo] + [react/view {:style styles/image-container} [react/image {:source (:analytics-image resources/ui) :style styles/usage-data-image}]] [react/text {:style styles/help-improve-text} @@ -21,11 +21,21 @@ [react/view [react/text {:style styles/help-improve-text-description} (i18n/label :t/help-improve-description)]] - [react/view styles/buttons-container - [components.common/button {:button-style {:flex-direction :row} - :on-press #(re-frame/dispatch [:help-improve-handler true next]) - :label (i18n/label :t/share-usage-data)}] - [react/view styles/bottom-button-container - [components.common/button {:on-press #(re-frame/dispatch [:help-improve-handler false next]) - :label (i18n/label :t/dont-want-to-share) - :background? false}]]]])) + [react/text {:style styles/learn-what-we-collect-link + :on-press #(.openURL react/linking "https://wiki.status.im/Help_Improve_Status#Help_Improve_Status")} + (i18n/label :t/learn-what-we-collect-link)] + [react/view styles/bottom-button-container + [components.common/button {:button-style styles/share-button + :uppercase? false + :on-press #(utils/show-confirmation {:ios-confirm-style "default"} + (i18n/label :t/confirmation-title) + (i18n/label :t/confirmation-text) + (i18n/label :t/confirmation-action) + (fn [] (re-frame/dispatch [:help-improve-handler true next])) + nil) + :label (i18n/label :t/share-usage-data)}] + [components.common/button {:button-style styles/dont-share-button + :uppercase? false + :on-press #(re-frame/dispatch [:help-improve-handler false next]) + :label (i18n/label :t/dont-want-to-share)}]]])) + diff --git a/src/status_im/utils/utils.cljs b/src/status_im/utils/utils.cljs index b2c1e180a6..5afe41909e 100644 --- a/src/status_im/utils/utils.cljs +++ b/src/status_im/utils/utils.cljs @@ -23,6 +23,8 @@ ([title content confirm-button-text on-accept] (show-confirmation title content confirm-button-text on-accept nil)) ([title content confirm-button-text on-accept on-cancel] + (show-confirmation nil title content confirm-button-text on-accept on-cancel)) + ([{:keys [ios-confirm-style] :or {ios-confirm-style "destructive"}} title content confirm-button-text on-accept on-cancel] (.alert (.-Alert rn-dependencies/react-native) title content @@ -34,7 +36,7 @@ (when on-cancel {:onPress on-cancel})) {:text (or confirm-button-text "OK") :onPress on-accept - :style "destructive" + :style ios-confirm-style :accessibility-label :confirm-button}))))) (defn show-question