Fixes #3944: Improve metrics opt-in screen

Signed-off-by: Julien Eluard <julien.eluard@gmail.com>

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."
+   :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."
-   :share-usage-data                     "Share usage"
+   :learn-what-we-collect-link           "Learn more about what we collect"
-   :dont-want-to-share                   "No, I don't want to share"
+   :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"

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)})}]])})))
+                                            :height (/ (* @content-width height) width)})}]])})))

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})
+   :justify-content :center
-
+   :margin-top    (scaled-y 90)
-(def logo
+   :margin-bottom (scaled-y 90)})
-  {:size      82
-   :icon-size 34})
 
 (def usage-data-image
-  {:width      138
+  {:width         (* (/ 390 432) (scaled-y 138))
-   :height     208
+   :height        (scaled-y 138)})
-   :margin-top 10})
 
 (defstyle help-improve-text
-  {:text-align :center
+  {:text-align    :center
-   :color      colors/black
+   :color         colors/black
-   :ios        {:line-height    28
+   :margin-bottom (scaled-y 8)
-                :font-size      22
+   :margin-left   46
-                :font-weight    :bold
+   :margin-right  46
-                :letter-spacing -0.3}
+   :ios           {:line-height    28
-   :android    {:font-size   24
+                   :font-size      22
-                :line-height 30}})
+                   :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  (scaled-y 26)
-   :margin-bottom  16
+   :margin-left    34
+   :margin-right   34
    :font-size      14
    :letter-spacing -0.2
    :text-align     :center
    :color          colors/gray})
 
-(def buttons-container
+(def learn-what-we-collect-link
-  {:align-items :center})
+  {:text-align    :center
+   :color         colors/blue
+   :margin-bottom (scaled-y 109)
+   :margin-left   61
+   :margin-right  63})
 
 (def bottom-button-container
-  {:margin-bottom 6
+  {:flex-direction  :row
-   :margin-top    38})
+   :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)})

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}
+     [react/view {:style styles/image-container}
-      [components.common/logo styles/logo]
       [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
+     [react/text {:style styles/learn-what-we-collect-link
-      [components.common/button {:button-style {:flex-direction :row}
+                  :on-press #(.openURL react/linking "https://wiki.status.im/Help_Improve_Status#Help_Improve_Status")}
-                                 :on-press     #(re-frame/dispatch [:help-improve-handler true next])
+      (i18n/label :t/learn-what-we-collect-link)]
-                                 :label        (i18n/label :t/share-usage-data)}]
+     [react/view styles/bottom-button-container
-      [react/view styles/bottom-button-container
+      [components.common/button {:button-style      styles/share-button
-       [components.common/button {:on-press    #(re-frame/dispatch [:help-improve-handler false next])
+                                 :uppercase?        false
-                                  :label       (i18n/label :t/dont-want-to-share)
+                                 :on-press          #(utils/show-confirmation {:ios-confirm-style "default"}
-                                  :background? false}]]]]))
+                                                                              (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)}]]]))
+

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