Make color selector take full 0device width to match Figma and add dynamic width (#17465)

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

@@ -0,0 +1,3 @@
+(ns quo.components.colors.color.constants)
+
+(def ^:const IPHONE_11_PRO_VIEWPORT_WIDTH 375)

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

@@ -1,24 +1,38 @@
 (ns quo.components.colors.color.style
   (:require
+    [quo.components.colors.color.constants :as constants]
     [quo.foundations.colors :as colors]))
 
-(def color-button-common
+(defn color-button-common
-  {:width             48
+  [window-width]
-   :height            48
+  {:width         48
-   :border-width      4
+   :height        48
-   :border-radius     24
+   :border-width  4
-   :margin-horizontal 4
+   :border-radius 24
-   :transform         [{:rotate "45deg"}]
+   :margin-right  (-> window-width
-   :border-color      :transparent})
+                      (- constants/IPHONE_11_PRO_VIEWPORT_WIDTH) ;We want the design to be 100%
+                                                                 ;identical to Figma on iPhone 11
+                                                                 ;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)
+                      (+ 8)) ;Add same margin that's on Figma for 11 Pro, This value will increase
+                             ;based on the device VW because of the division above.
+   :transform     [{:rotate "45deg"}]
+   :border-color  :transparent})
 
 (defn color-button
-  [color selected?]
+  ([color selected?]
-  (merge color-button-common
+   (color-button color selected? nil nil))
-         (when selected?
+  ([color selected? idx window-width]
-           {:border-top-color    (colors/alpha color 0.4)
+   (merge (color-button-common window-width)
-            :border-end-color    (colors/alpha color 0.4)
+          (when selected?
-            :border-bottom-color (colors/alpha color 0.2)
+            {:border-top-color    (colors/alpha color 0.4)
-            :border-start-color  (colors/alpha color 0.2)})))
+             :border-end-color    (colors/alpha color 0.4)
+             :border-bottom-color (colors/alpha color 0.2)
+             :border-start-color  (colors/alpha color 0.2)}
+            (when (zero? idx)
+              {:margin-left -4})))))
 
 (defn color-circle
   [color border?]

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

@@ -19,7 +19,9 @@
            selected?
            on-press
            blur?
-           theme]
+           theme
+           idx
+           window-width]
     :as   props}]
   (let [border?   (and (not blur?) (not selected?))
         hex-color (if (= :feng-shui color)
@@ -29,7 +31,7 @@
                                          theme))]
 
     [rn/pressable
-     {:style               (style/color-button hex-color selected?)
+     {:style               (style/color-button hex-color selected? idx window-width)
       :accessibility-label :color-picker-item
       :on-press            #(on-press color)}
      (if (and (= :feng-shui color) (not selected?))

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

@@ -17,20 +17,22 @@
    - `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]}]
+  [{:keys [default-selected window-width]}]
   (let [selected (reagent/atom default-selected)]
     (fn [{:keys [blur? on-change feng-shui? container-style]}]
       [rn/scroll-view
        {:horizontal                        true
         :shows-horizontal-scroll-indicator false
         :content-container-style           container-style}
-       (doall (map (fn [color]
+       (doall (map-indexed (fn [idx color]
-                     [color/view
+                             [color/view
-                      {:selected? (= color @selected)
+                              {:selected?    (= color @selected)
-                       :on-press  #(on-change-handler selected % on-change)
+                               :on-press     #(on-change-handler selected % on-change)
-                       :blur?     blur?
+                               :blur?        blur?
-                       :key       color
+                               :key          color
-                       :color     color}])
+                               :color        color
-                   ;; TODO: using :feng-shui? temporarily while b & w is being developed.
+                               :idx          idx
-                   ;; https://github.com/status-im/status-mobile/discussions/16676
+                               :window-width window-width}])
-                   (if feng-shui? (conj color-list :feng-shui) color-list)))])))
+                           ;; TODO: using :feng-shui? temporarily while b & w is being developed.
+                           ;; https://github.com/status-im/status-mobile/discussions/16676
+                           (if feng-shui? (conj color-list :feng-shui) color-list)))])))

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

@@ -2,6 +2,7 @@
   (: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]
@@ -33,6 +34,12 @@
 (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]
@@ -131,7 +138,8 @@
           {:keys [keyboard-shown keyboard-height]} (hooks/use-keyboard)
           show-background?                         (show-button-background keyboard-height
                                                                            keyboard-shown
-                                                                           @content-scroll-y)]
+                                                                           @content-scroll-y)
+          {window-width :width}                    (rn/get-window)]
       [rn/view {:style style/page-container}
        [quo/page-nav
         {:margin-top navigation-bar-top
@@ -194,11 +202,13 @@
             {:size   :paragraph-2
              :weight :medium
              :style  style/color-title}
-            (i18n/label :t/accent-colour)]
+            (i18n/label :t/accent-colour)]]]
-           [quo/color-picker
+         [quo/color-picker
-            {:blur?            true
+          {:blur?            true
-             :default-selected :blue
+           :default-selected :blue
-             :on-change        on-change}]]]]]
+           :on-change        on-change
+           :window-width     window-width
+           :container-style  {:padding-left (iphone-11-Pro-20-pixel-from-width window-width)}}]]]
 
        [rn/keyboard-avoiding-view
         {:style          {:position :absolute