Update keycard Illustrations (#22171)

src/status_im/common/resources.cljs

@@ -26,9 +26,19 @@
    :qr-code                       (js/require "../resources/images/ui2/qr-code.png")
    :keycard-logo                  (js/require "../resources/images/ui2/keycard-logo.png")
    :keycard-buy                   (js/require "../resources/images/ui2/keycard-buy.png")
+   :keycard-backup-positive       (js/require "../resources/images/ui2/keycard-backup-positive.png")
+   :keycard-change-pin            (js/require "../resources/images/ui2/keycard-change-pin.png")
+   :keycard-change-pin-positive   (js/require "../resources/images/ui2/keycard-change-pin-positive.png")
+   :keycard-change-pin-negative   (js/require "../resources/images/ui2/keycard-change-pin-negative.png")
    :keycard-migration             (js/require "../resources/images/ui2/keycard-migration.png")
    :keycard-migration-failed      (js/require "../resources/images/ui2/keycard-migration-failed.png")
    :keycard-migration-succeeded   (js/require "../resources/images/ui2/keycard-migration-succeeded.png")
+   :keycard-not-same              (js/require "../resources/images/ui2/keycard-not-same.png")
+   :keycard-not-empty             (js/require "../resources/images/ui2/keycard-not-empty.png")
+   :keycard-reset-positive        (js/require "../resources/images/ui2/keycard-reset-positive.png")
+   :keycard-reset-negative        (js/require "../resources/images/ui2/keycard-reset-negative.png")
+   :keycard-unblock               (js/require "../resources/images/ui2/keycard-unblock.png")
+   :keycard-unblock-positive      (js/require "../resources/images/ui2/keycard-unblock-positive.png")
    :not-keycard                   (js/require "../resources/images/ui2/not-keycard.png")
    :discover                      (js/require "../resources/images/ui2/discover.png")
    :invite-friends                (js/require "../resources/images/ui2/invite-friends.png")

src/status_im/contexts/keycard/backup/view.cljs

@@ -15,10 +15,10 @@
      :on-press  events-helper/navigate-back}]
    [quo/page-top
     {:title (i18n/label :t/ready-add-keypair-keycard)}]
-   [rn/view {:style {:flex 1 :align-items :center :justify-content :center}}
-    [rn/image
-     {:resize-mode :contain
-      :source      (resources/get-image :keycard-migration)}]]
+   [rn/image
+    {:resize-mode :contain
+     :style       {:flex 1 :width (:width (rn/get-window))}
+     :source      (resources/get-image :keycard-migration)}]
    [common.view/tips]
    [quo/bottom-actions
     {:actions          :one-action
@@ -33,8 +33,11 @@
      :on-press  events-helper/navigate-back}]
    [quo/page-top
     {:title (i18n/label :t/backup-keycard-created)}]
-   [rn/view {:style {:flex 1}}]
-   [rn/view {:style {:padding-horizontal 20}}
+   [rn/image
+    {:resize-mode :contain
+     :style       {:flex 1 :width (:width (rn/get-window))}
+     :source      (resources/get-image :keycard-backup-positive)}]
+   [rn/view {:style {:padding-horizontal 20 :padding-vertical 12}}
     [quo/button {:on-press events-helper/navigate-back}
      (i18n/label :t/done)]]])
 
@@ -49,7 +52,10 @@
       {:title            (i18n/label :t/keycard-not-empty)
        :description      :text
        :description-text (i18n/label :t/scan-empty-keycard)}]
-     [rn/view {:style {:flex 1}}]
+     [rn/image
+      {:resize-mode :contain
+       :style       {:flex 1 :width (:width (rn/get-window))}
+       :source      (resources/get-image :keycard-not-empty)}]
      [common.view/tips]
      [rn/view {:style {:padding-horizontal 20}}
       [quo/button {:on-press on-press}
@@ -65,10 +71,10 @@
     {:title            (i18n/label :t/scan-empty-keycard)
      :description      :text
      :description-text (i18n/label :t/backup-empty-keycard-only)}]
-   [rn/view {:style {:flex 1 :align-items :center :justify-content :center}}
-    [rn/image
-     {:resize-mode :contain
-      :source      (resources/get-image :check-your-keycard)}]]
+   [rn/image
+    {:resize-mode :contain
+     :style       {:flex 1 :width (:width (rn/get-window))}
+     :source      (resources/get-image :check-your-keycard)}]
    [common.view/tips]
    [quo/bottom-actions
     {:actions          :one-action

src/status_im/contexts/keycard/change_pin/view.cljs

@@ -2,6 +2,7 @@
   (:require [quo.core :as quo]
             [react-native.core :as rn]
             [status-im.common.events-helper :as events-helper]
+            [status-im.common.resources :as resources]
             [status-im.contexts.keycard.common.view :as common.view]
             [utils.i18n :as i18n]
             [utils.re-frame :as rf]))
@@ -32,9 +33,10 @@
      :on-press  events-helper/navigate-back}]
    [quo/page-top
     {:title (i18n/label :t/ready-to-change-pin)}]
-   [rn/view {:style {:flex 1 :align-items :center :justify-content :center}}
-    [rn/image
-     {:resize-mode :contain}]]
+   [rn/image
+    {:resize-mode :contain
+     :style       {:flex 1 :width (:width (rn/get-window))}
+     :source      (resources/get-image :keycard-change-pin)}]
    [common.view/tips]
    [quo/bottom-actions
     {:actions          :one-action
@@ -52,9 +54,10 @@
     {:title            (i18n/label :t/keycard-pin-changed)
      :description      :text
      :description-text (i18n/label :t/keycard-pin-changed-description)}]
-   [rn/view {:style {:flex 1 :align-items :center :justify-content :center}}
-    [rn/image
-     {:resize-mode :contain}]]
+   [rn/image
+    {:resize-mode :contain
+     :style       {:flex 1 :width (:width (rn/get-window))}
+     :source      (resources/get-image :keycard-change-pin-positive)}]
    [quo/bottom-actions
     {:actions          :one-action
      :button-one-label (i18n/label :t/done)
@@ -70,9 +73,10 @@
     {:title            (i18n/label :t/keycard-pin-change-failed)
      :description      :text
      :description-text (i18n/label :t/keycard-pin-change-failed-description)}]
-   [rn/view {:style {:flex 1 :align-items :center :justify-content :center}}
-    [rn/image
-     {:resize-mode :contain}]]
+   [rn/image
+    {:resize-mode :contain
+     :style       {:flex 1 :width (:width (rn/get-window))}
+     :source      (resources/get-image :keycard-change-pin-negative)}]
    [common.view/tips]
    [quo/bottom-actions
     {:actions          :one-action

src/status_im/contexts/keycard/check/view.cljs

@@ -42,10 +42,10 @@
       {:title            (i18n/label :t/check-keycard)
        :description      :text
        :description-text (i18n/label :t/see-keycard-ready)}]
-     [rn/view {:style {:flex 1 :align-items :center :justify-content :center}}
-      [rn/image
-       {:resize-mode :contain
-        :source      (resources/get-image :check-your-keycard)}]]
+     [rn/image
+      {:resize-mode :contain
+       :style       {:flex 1 :width (:width (rn/get-window))}
+       :source      (resources/get-image :check-your-keycard)}]
      [common.view/tips]
      [quo/bottom-actions
       {:actions          :one-action

src/status_im/contexts/keycard/different_card/view.cljs

@@ -2,6 +2,7 @@
   (:require [quo.core :as quo]
             [react-native.core :as rn]
             [status-im.common.events-helper :as events-helper]
+            [status-im.common.resources :as resources]
             [utils.i18n :as i18n]))
 
 (defn view
@@ -14,8 +15,11 @@
     {:title            (i18n/label :t/different-keycard)
      :description      :text
      :description-text (i18n/label :t/scan-previous-keycard)}]
-   [rn/view {:style {:flex 1}}]
-   [rn/view {:style {:padding-horizontal 20}}
+   [rn/image
+    {:resize-mode :contain
+     :style       {:flex 1 :width (:width (rn/get-window))}
+     :source      (resources/get-image :keycard-not-same)}]
+   [rn/view {:style {:padding-horizontal 20 :padding-vertical 12}}
     [quo/button {:on-press events-helper/navigate-back}
      (i18n/label :t/try-again)]]])
 

src/status_im/contexts/keycard/factory_reset/view.cljs

@@ -2,6 +2,7 @@
   (:require [quo.core :as quo]
             [react-native.core :as rn]
             [status-im.common.events-helper :as events-helper]
+            [status-im.common.resources :as resources]
             [utils.i18n :as i18n]
             [utils.re-frame :as rf]))
 
@@ -48,8 +49,11 @@
     {:title            (i18n/label :t/keycard-reset-success)
      :description      :text
      :description-text (i18n/label :t/keycard-empty-ready)}]
-   [rn/view {:style {:flex 1}}]
-   [rn/view {:style {:padding-horizontal 20}}
+   [rn/image
+    {:resize-mode :contain
+     :style       {:flex 1 :width (:width (rn/get-window))}
+     :source      (resources/get-image :keycard-reset-positive)}]
+   [rn/view {:style {:padding-horizontal 20 :padding-vertical 12}}
     [quo/button {:on-press events-helper/navigate-back}
      (i18n/label :t/done)]]])
 
@@ -61,8 +65,11 @@
      :on-press  events-helper/navigate-back}]
    [quo/page-top
     {:title (i18n/label :t/keycard-reset-failed)}]
-   [rn/view {:style {:flex 1}}]
-   [rn/view {:style {:padding-horizontal 20}}
+   [rn/image
+    {:resize-mode :contain
+     :style       {:flex 1 :width (:width (rn/get-window))}
+     :source      (resources/get-image :keycard-reset-negative)}]
+   [rn/view {:style {:padding-horizontal 20 :padding-vertical 12}}
     [quo/button {:on-press events-helper/navigate-back}
      (i18n/label :t/try-again)]]])
 

src/status_im/contexts/keycard/migrate/fail/view.cljs

@@ -19,10 +19,10 @@
                          :profile-picture     profile-picture
                          :customization-color customization-color}
        :container-style {:margin-top constants/page-nav-height}}]
-     [rn/view {:style {:flex 1 :align-items :center :justify-content :center}}
-      [rn/image
-       {:resize-mode :contain
-        :source      (resources/get-image :keycard-migration-failed)}]]
+     [rn/image
+      {:resize-mode :contain
+       :style       {:flex 1 :width (:width (rn/get-window))}
+       :source      (resources/get-image :keycard-migration-failed)}]
      [quo/divider-label (i18n/label :t/what-you-can-do)]
      [quo/markdown-list {:description (i18n/label :t/keycard-migration-failed-instruction-1)}]
      [quo/markdown-list {:description (i18n/label :t/keycard-migration-failed-instruction-2)}]

src/status_im/contexts/keycard/migrate/re_encrypting/view.cljs

@@ -21,7 +21,7 @@
        :container-style {:margin-top constants/page-nav-height}}]
      [quo/text {:style {:padding-horizontal 20}}
       (i18n/label :t/do-not-quit)]
-     [rn/view {:style {:flex 1 :align-items :center :justify-content :center}}
-      [rn/image
-       {:resize-mode :contain
-        :source      (resources/get-image :keycard-migration)}]]]))
+     [rn/image
+      {:resize-mode :contain
+       :style       {:flex 1 :width (:width (rn/get-window))}
+       :source      (resources/get-image :keycard-migration)}]]))

src/status_im/contexts/keycard/migrate/success/view.cljs

@@ -21,11 +21,11 @@
        :container-style {:margin-top constants/page-nav-height}}]
      [quo/text {:style {:padding-horizontal 20}}
       (i18n/label :t/use-keycard-for-status)]
-     [rn/view {:style {:flex 1 :align-items :center :justify-content :center}}
-      [rn/image
-       {:resize-mode :contain
-        :source      (resources/get-image :keycard-migration-succeeded)}]]
+     [rn/image
+      {:resize-mode :contain
+       :style       {:flex 1 :width (:width (rn/get-window))}
+       :source      (resources/get-image :keycard-migration-succeeded)}]
      [quo/button
       {:on-press        #(rf/dispatch [:profile/logout])
-       :container-style {:margin-horizontal 20}}
+       :container-style {:margin-horizontal 20 :margin-vertical 12}}
       (i18n/label :t/logout)]]))

src/status_im/contexts/keycard/migrate/view.cljs

@@ -23,10 +23,10 @@
        :context-tag {:full-name           profile-name
                      :profile-picture     profile-picture
                      :customization-color customization-color}}]
-     [rn/view {:style {:flex 1 :align-items :center :justify-content :center}}
-      [rn/image
-       {:resize-mode :contain
-        :source      (resources/get-image :keycard-migration)}]]
+     [rn/image
+      {:resize-mode :contain
+       :style       {:flex 1 :width (:width (rn/get-window))}
+       :source      (resources/get-image :keycard-migration)}]
      [common.view/tips]
      [quo/bottom-actions
       {:actions          :one-action

src/status_im/contexts/keycard/not_keycard/view.cljs

@@ -15,10 +15,10 @@
     {:title            (i18n/label :t/oops-not-keycard)
      :description      :text
      :description-text (i18n/label :t/make-sure-keycard)}]
-   [rn/view {:style {:flex 1 :align-items :center :justify-content :center}}
-    [rn/image
-     {:resize-mode :contain
-      :source      (resources/get-image :not-keycard)}]]
-   [rn/view {:style {:padding-horizontal 20}}
+   [rn/image
+    {:resize-mode :contain
+     :style       {:flex 1 :width (:width (rn/get-window))}
+     :source      (resources/get-image :not-keycard)}]
+   [rn/view {:style {:padding-horizontal 20 :padding-vertical 12}}
     [quo/button {:on-press events-helper/navigate-back}
      (i18n/label :t/try-again)]]])

src/status_im/contexts/keycard/unblock/view.cljs

@@ -2,6 +2,7 @@
   (:require [quo.core :as quo]
             [react-native.core :as rn]
             [status-im.common.events-helper :as events-helper]
+            [status-im.common.resources :as resources]
             [status-im.contexts.keycard.common.view :as common.view]
             [utils.i18n :as i18n]
             [utils.re-frame :as rf]))
@@ -13,9 +14,14 @@
     {:icon-name :i/close
      :on-press  events-helper/navigate-back}]
    [quo/page-top
-    {:title (i18n/label :t/keycard-unblocked)}]
-   [rn/view {:style {:flex 1}}]
-   [rn/view {:style {:padding-horizontal 20}}
+    {:title            (i18n/label :t/keycard-unblocked)
+     :description      :text
+     :description-text (i18n/label :t/keycard-unblocked-description)}]
+   [rn/image
+    {:resize-mode :contain
+     :style       {:flex 1 :width (:width (rn/get-window))}
+     :source      (resources/get-image :keycard-unblock-positive)}]
+   [rn/view {:style {:padding-horizontal 20 :padding-vertical 12}}
     [quo/button {:on-press events-helper/navigate-back}
      (i18n/label :t/done)]]])
 
@@ -27,7 +33,10 @@
      :on-press  events-helper/navigate-back}]
    [quo/page-top
     {:title (i18n/label :t/ready-to-unblock-keycard)}]
-   [rn/view {:style {:flex 1}}]
+   [rn/image
+    {:resize-mode :contain
+     :style       {:flex 1 :width (:width (rn/get-window))}
+     :source      (resources/get-image :keycard-unblock)}]
    [common.view/tips]
    [quo/bottom-actions
     {:actions          :one-action

translations/en.json

@@ -796,7 +796,7 @@
   "device-syncing": "Device syncing",
   "devices": "Devices",
   "devices-count": "{{number}} devices",
-  "different-keycard": "It’s a different Keycard",
+  "different-keycard": "This is a different Keycard",
   "disable": "disable",
   "disable-all": "Disable all",
   "disable-later-in-settings": "You can disable this later in Settings",
@@ -1468,6 +1468,7 @@
   "keycard-success-title": "Success",
   "keycard-unauthorized-operation": "You're unauthorized to perform this operation.\n Please tap valid card and try again.",
   "keycard-unblocked": "Keycard unblocked",
+  "keycard-unblocked-description": "You’ll need this Keycard to login to Status and transact with derived accounts.",
   "keycard-upsell-subtitle": "Enhanced security and convenience",
   "keypair-name": "Key pair name",
   "keypair-name-description": "Name key pair for your own personal reference",