Update Keycard color in keycard flow (#22066)

Author: Parveshdhull

src/quo/components/empty_state/empty_state/styles.cljs

@@ -35,4 +35,4 @@
 (def image-placeholder
   {:width            80
    :height           80
-   :background-color colors/danger})
+   :background-color colors/danger-50})

src/quo/components/inputs/input/style.cljs

@@ -31,7 +31,7 @@
        :placeholder  (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 theme)
        :text         (colors/theme-colors colors/neutral-100 colors/white theme)}
       :error
-      {:border-color (colors/theme-colors colors/danger-opa-40 colors/danger-opa-40 theme)
+      {:border-color colors/danger-50-opa-40
        :placeholder  (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme)
        :text         (colors/theme-colors colors/neutral-100 colors/white theme)}
       :disabled
@@ -48,7 +48,7 @@
        :placeholder  (colors/theme-colors colors/neutral-30 colors/neutral-60 theme)
        :text         (colors/theme-colors colors/neutral-100 colors/white theme)}
       :error
-      {:border-color (colors/theme-colors colors/danger-opa-40 colors/danger-opa-40 theme)
+      {:border-color colors/danger-50-opa-40
        :placeholder  (colors/theme-colors colors/neutral-40 colors/white-opa-40 theme)
        :text         (colors/theme-colors colors/neutral-100 colors/white theme)}
       :disabled

src/quo/components/keycard/component_spec.cljs

@@ -4,11 +4,7 @@
     [test-helpers.component :as h]))
 
 (h/describe "keycard component"
-  (h/test "Render of keycard component when: holder-name prop is not set"
-    (h/render [keycard/keycard])
-    (h/is-truthy (h/get-by-translation-text :t/empty-keycard)))
-
-  (h/test "Render of keycard component when: holder-name prop is set"
-    (let [holder-name "Alisha"]
+  (let [holder-name "Alisha"]
+    (h/test "Render of keycard component when: holder-name prop is set"
       (h/render [keycard/keycard {:holder-name holder-name}])
       (h/is-truthy (h/get-by-translation-text :t/user-keycard {:name holder-name})))))

src/quo/components/keycard/style.cljs

@@ -6,40 +6,28 @@
 (def keycard-chip-height 28)
 
 (defn card-container
-  [locked? theme]
+  [locked? theme blur?]
   {:overflow         :hidden
    :height           keycard-height
    :align-items      :flex-start
    :justify-content  :space-between
    :border-width     1
-   :border-color     (if locked?
+   :border-color     (if (or locked? blur?)
                        colors/white-opa-5
                        (colors/theme-colors colors/neutral-20 colors/neutral-80 theme))
    :border-style     :solid
    :border-radius    16
    :padding          16
    :background-color (if locked?
-                       (colors/theme-colors colors/danger colors/danger-opa-40 theme)
-                       (colors/theme-colors colors/neutral-5 colors/neutral-90 theme))})
+                       (colors/theme-colors colors/danger-50 colors/danger-50-opa-40 theme)
+                       colors/keycard-color)})
 
 (defn keycard-logo
   [locked? theme]
   {:tint-color (if locked?
                  colors/white
                  (colors/theme-colors colors/neutral-100 colors/white theme))})
 
-(defn keycard-watermark
-  [locked? theme]
-  {:position   :absolute
-   :tint-color (if locked?
-                 colors/white-opa-5
-                 (colors/theme-colors colors/neutral-100 colors/white theme))
-   :align-self :center
-   :height     280.48
-   :transform  [{:rotate "-30deg"} {:translate-y -30}]
-   :opacity    (when-not locked? 0.02)
-   :z-index    1})
-
 (def keycard-chip
   {:height   keycard-chip-height
    :position :absolute

src/quo/components/keycard/view.cljs

@@ -1,5 +1,6 @@
 (ns quo.components.keycard.view
   (:require
+    [clojure.string :as string]
     [quo.components.keycard.style :as style]
     [quo.components.tags.tag :as tag]
     [quo.foundations.colors :as colors]
@@ -14,29 +15,24 @@
   - :locked? - Boolean to specify whether the keycard is locked or not
   - :theme :light/:dark
   "
-  [{:keys [holder-name locked?]}]
-  (let [theme (quo.theme/use-theme)
-        label (if holder-name
-                (i18n/label :t/user-keycard {:name holder-name})
-                (i18n/label :t/empty-keycard))]
-    [rn/view {:style (style/card-container locked? theme)}
+  [{:keys [holder-name locked? blur?]}]
+  (let [theme (quo.theme/use-theme)]
+    [rn/view {:style (style/card-container locked? theme blur?)}
      [rn/image
       {:source (resources/get-image :keycard-logo)
        :style  (style/keycard-logo locked? theme)}]
      [rn/image
       {:source (resources/get-image
                 (if (or locked? (= :dark theme)) :keycard-chip-dark :keycard-chip-light))
        :style  style/keycard-chip}]
-     [rn/image
-      {:source (resources/get-image :keycard-watermark)
-       :style  (style/keycard-watermark locked? theme)}]
-     [tag/tag
-      {:size                32
-       :type                (when locked? :icon)
-       :label               label
-       :labelled?           true
-       :blurred?            true
-       :resource            (when locked? :i/locked)
-       :accessibility-label :holder-name
-       :icon-color          colors/white-70-blur
-       :override-theme      (when locked? :dark)}]]))
+     (when-not (string/blank? holder-name)
+       [tag/tag
+        {:size                32
+         :type                (when locked? :icon)
+         :label               (i18n/label :t/user-keycard {:name holder-name})
+         :labelled?           true
+         :blurred?            true
+         :resource            (when locked? :i/locked)
+         :accessibility-label :holder-name
+         :icon-color          colors/white-70-blur
+         :override-theme      (when locked? :dark)}])]))

src/quo/foundations/colors.cljs

@@ -195,17 +195,12 @@
 (def success-60-opa-30 (alpha success-60 0.3))
 (def success-60-opa-40 (alpha success-60 0.4))
 
-;;;;Danger
-(def danger "#E95460")
-
-;; Danger with transparency
-(def danger-opa-40 (alpha danger 0.4))
-
 ;;Solid
 (def danger-50 "#E95460")
 (def danger-60 "#BA434D")
 
 (def system-yellow "#FFD60A")
+(def keycard-color "#FF6400")
 
 ;;50 with transparency
 (def danger-50-opa-0 (alpha danger-50 0))

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

@@ -33,7 +33,7 @@
        :description      :text
        :description-text description}]
      [rn/view {:style {:margin-horizontal 20}}
-      [quo/keycard {:holder-name ""}]
+      [quo/keycard {:blur? true}]
       [quo/section-label
        {:section (i18n/label :t/what-you-can-do) :container-style {:padding-vertical 8}}]
       (if (= error :keycard/error.keycard-empty)

src/status_im/contexts/keycard/manage/profile_keys/view.cljs

@@ -27,7 +27,7 @@
       {:title profile-name}]
      [rn/view {:style {:margin-horizontal 20}}
       [rn/view {:style {:padding-top 8 :padding-bottom 20}}
-       [quo/keycard {:holder-name ""}]]
+       [quo/keycard {:blur? true}]]
       [quo/section-label
        {:section (i18n/label :t/what-you-can-do) :container-style {:padding-vertical 8}}]
       [quo/settings-item

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

@@ -17,7 +17,7 @@
      :description-text (i18n/label :t/finalise-migration-instructions)}]
    [rn/view {:style {:margin-horizontal 20}}
     [rn/view {:style {:padding-top 8 :padding-bottom 20}}
-     [quo/keycard {:holder-name ""}]]
+     [quo/keycard {:blur? true}]]
     [quo/section-label {:section (i18n/label :t/what-you-can-do) :container-style {:padding-vertical 8}}]
     [quo/settings-item
      {:title             (i18n/label :t/finalise-migration)

translations/en.json

@@ -876,7 +876,6 @@
   "empty-chat-description-one-to-one": "Any messages you send here are encrypted and can only be read by you and ",
   "empty-chat-description-public": "It's been quiet here for the last {{quiet-hours}}. Start the conversation or ",
   "empty-chat-description-public-share-this": "share this chat.",
-  "empty-keycard": "Empty Keycard",
   "empty-keycard-required": "Requires an empty Keycard",
   "empty-notifications-admin-tab": "No unread admin notifications",
   "empty-notifications-all-tab": "No unread notifications",