Follow up to fix color picker on wallet (#17748)

src/quo/components/colors/color/style.cljs

@@ -1,7 +1,7 @@
 (ns quo.components.colors.color.style
   (:require
-    [quo.components.colors.color.constants :as constants]
+    [quo.foundations.colors :as colors]
-    [quo.foundations.colors :as colors]))
+    [utils.responsiveness :as responsiveness]))
 
 (defn color-button-common
   [window-width]
@@ -10,9 +10,9 @@
    :border-width  4
    :border-radius 24
    :margin-right  (-> window-width
-                      (- constants/IPHONE_11_PRO_VIEWPORT_WIDTH) ;We want the design to be 100%
+                      (- responsiveness/IPHONE_11_PRO_VIEWPORT_WIDTH) ;We want the design to be 100%
-                                                                 ;identical to Figma on iPhone 11
+                      ;identical to Figma on iPhone 11
-                                                                 ;Pro, So we're using it's VW here.
+                      ;Pro, So we're using it's VW here.
                       (/ 6) ;Dividing by an appropriate factor to get a reasonable value for each VW
                             ;on other devices (This will yield 0 on iPhone 11 Pro, Which is what we
                             ;want)
@@ -25,14 +25,12 @@
   ([color selected?]
    (color-button color selected? nil nil))
   ([color selected? idx window-width]
-   (merge (color-button-common window-width)
+   (cond-> (color-button-common window-width)
-          (when selected?
+     selected?   (assoc :border-top-color    (colors/alpha color 0.4)
-            {:border-top-color    (colors/alpha color 0.4)
+                        :border-end-color    (colors/alpha color 0.4)
-             :border-end-color    (colors/alpha color 0.4)
+                        :border-bottom-color (colors/alpha color 0.2)
-             :border-bottom-color (colors/alpha color 0.2)
+                        :border-start-color  (colors/alpha color 0.2))
-             :border-start-color  (colors/alpha color 0.2)}
+     (zero? idx) (assoc :margin-left -4))))
-            (when (zero? idx)
-              {:margin-left -4})))))
 
 (defn color-circle
   [color border?]

src/quo/components/colors/color_picker/view.cljs

@@ -17,8 +17,9 @@
    - `default-selected` Default selected color name.
    - `on-change` Callback called when a color is selected `(fn [color-name])`.
    - `blur?` Boolean to enable blur background support.}"
-  [{:keys [default-selected window-width]}]
+  [{:keys [default-selected]}]
-  (let [selected (reagent/atom default-selected)]
+  (let [selected              (reagent/atom default-selected)
+        {window-width :width} (rn/get-window)]
     (fn [{:keys [blur? on-change feng-shui? container-style]}]
       [rn/scroll-view
        {:horizontal                        true

src/status_im2/contexts/onboarding/create_profile/view.cljs

@@ -2,7 +2,6 @@
   (:require
     [clojure.string :as string]
     [oops.core :as oops]
-    [quo.components.colors.color.constants :as constants]
     [quo.core :as quo]
     [quo.foundations.colors :as colors]
     [react-native.blur :as blur]
@@ -15,7 +14,8 @@
     [status-im2.contexts.onboarding.create-profile.style :as style]
     [status-im2.contexts.onboarding.select-photo.method-menu.view :as method-menu]
     [utils.i18n :as i18n]
-    [utils.re-frame :as rf]))
+    [utils.re-frame :as rf]
+    [utils.responsiveness :as responsiveness]))
 
 ;; NOTE - validation should match with Desktop
 ;; https://github.com/status-im/status-desktop/blob/2ba96803168461088346bf5030df750cb226df4c/ui/imports/utils/Constants.qml#L468
@@ -34,12 +34,6 @@
 (defn length-not-valid [s] (< (count (string/trim (str s))) min-length))
 (def scroll-view-height (reagent/atom 0))
 (def content-container-height (reagent/atom 0))
-(defn iphone-11-Pro-20-pixel-from-width
-  [window-width]
-  ;; Divide iPhone 11 Pro VW by the desired value
-  (let [calculate-ratio (/ constants/IPHONE_11_PRO_VIEWPORT_WIDTH 20)]
-    ;; Divide window width by the ratio to get a dynamic value. Based on the VW width
-    (int (/ window-width calculate-ratio))))
 
 (defn validation-message
   [s]
@@ -208,7 +202,8 @@
            :default-selected :blue
            :on-change        on-change
            :window-width     window-width
-           :container-style  {:padding-left (iphone-11-Pro-20-pixel-from-width window-width)}}]]]
+           :container-style  {:padding-left (responsiveness/iphone-11-Pro-20-pixel-from-width
+                                             window-width)}}]]]
 
        [rn/keyboard-avoiding-view
         {:style          {:position :absolute

src/status_im2/contexts/wallet/common/screen_base/create_or_edit_account/view.cljs

@@ -12,8 +12,9 @@
            on-change-color
            on-change-emoji section-label bottom-action? bottom-action-label bottom-action-props
            custom-bottom-action]} & children]
-  (let [{:keys [top bottom]} (safe-area/get-insets)
+  (let [{:keys [top bottom]}  (safe-area/get-insets)
-        margin-top           (if (false? margin-top?) 0 top)]
+        margin-top            (if (false? margin-top?) 0 top)
+        {window-width :width} (rn/get-window)]
     [rn/keyboard-avoiding-view
      {:style                    (style/root-container margin-top)
       :keyboard-vertical-offset (- bottom)}
@@ -58,7 +59,8 @@
         [quo/color-picker
          {:default-selected account-color
           :on-change        on-change-color
-          :container-style  style/color-picker}]]
+          :container-style  style/color-picker
+          :window-width     window-width}]]
        [quo/divider-line {:container-style style/divider-2}]
        (when section-label
          [quo/section-label

src/status_im2/contexts/wallet/create_account/view.cljs

@@ -9,7 +9,8 @@
     [status-im2.contexts.wallet.common.utils :as utils]
     [status-im2.contexts.wallet.create-account.style :as style]
     [utils.i18n :as i18n]
-    [utils.re-frame :as rf]))
+    [utils.re-frame :as rf]
+    [utils.responsiveness :refer [iphone-11-Pro-20-pixel-from-width]]))
 
 (def diamond-emoji "\uD83D\uDC8E")
 
@@ -40,17 +41,18 @@
 
 (defn- view-internal
   []
-  (let [top                  (safe-area/get-top)
+  (let [top                   (safe-area/get-top)
-        bottom               (safe-area/get-bottom)
+        bottom                (safe-area/get-bottom)
-        account-color        (reagent/atom :blue)
+        account-color         (reagent/atom :blue)
-        emoji                (reagent/atom diamond-emoji)
+        emoji                 (reagent/atom diamond-emoji)
-        number-of-accounts   (count (rf/sub [:profile/wallet-accounts]))
+        number-of-accounts    (count (rf/sub [:profile/wallet-accounts]))
-        account-name         (reagent/atom (i18n/label :t/default-account-name
+        account-name          (reagent/atom (i18n/label :t/default-account-name
-                                                       {:number (inc number-of-accounts)}))
+                                                        {:number (inc number-of-accounts)}))
-        derivation-path      (reagent/atom (utils/get-derivation-path number-of-accounts))
+        derivation-path       (reagent/atom (utils/get-derivation-path number-of-accounts))
-        {:keys [public-key]} (rf/sub [:profile/profile])
+        {:keys [public-key]}  (rf/sub [:profile/profile])
-        on-change-text       #(reset! account-name %)
+        on-change-text        #(reset! account-name %)
-        display-name         (first (rf/sub [:contacts/contact-two-names-by-identity public-key]))]
+        display-name          (first (rf/sub [:contacts/contact-two-names-by-identity public-key]))
+        {window-width :width} (rn/get-window)]
     (fn [{:keys [theme]}]
       [rn/view
        {:style {:flex       1
@@ -100,8 +102,8 @@
         [quo/color-picker
          {:default-selected @account-color
           :on-change        #(reset! account-color %)
-          :container-style  {:padding-horizontal 12
+          :container-style  {:padding-vertical 12
-                             :padding-vertical   12}}]]
+                             :padding-left     (iphone-11-Pro-20-pixel-from-width window-width)}}]]
        [quo/divider-line]
        [quo/category
         {:list-type :settings

src/utils/responsiveness.cljs

@@ -0,0 +1,10 @@
+(ns utils.responsiveness)
+
+(def ^:const IPHONE_11_PRO_VIEWPORT_WIDTH 375)
+
+(defn iphone-11-Pro-20-pixel-from-width
+  [window-width]
+  ;; Divide iPhone 11 Pro VW by the desired value
+  (let [calculate-ratio (/ IPHONE_11_PRO_VIEWPORT_WIDTH 20)]
+    ;; Divide window width by the ratio to get a dynamic value. Based on the VW width
+    (int (/ window-width calculate-ratio))))