Selector component improvements (#15541)

* Add missing color variants for selectors
* Rename test ns and replace rtl fns by helper ones
* Add missing disclaimer blur style in onboarding - create password

src/quo2/components/list_items/user_list.cljs

@@ -5,7 +5,7 @@
             [quo2.components.icon :as icons]
             [quo2.foundations.colors :as colors]
             [quo2.components.messages.author.view :as author]
-            [quo2.components.selectors.selectors :as selectors]))
+            [quo2.components.selectors.selectors.view :as selectors]))
 
 (def container-style
   {:margin-horizontal  8

src/quo2/components/selectors/__tests__/selectors_component_spec.cljs

@@ -1,84 +0,0 @@
-(ns quo2.components.selectors.--tests--.selectors-component-spec
-  (:require ["@testing-library/react-native" :as rtl]
-            [quo2.components.selectors.selectors :as selectors]
-            [reagent.core :as reagent]))
-
-(defn render-toggle
-  ([]
-   (render-toggle {}))
-  ([opts]
-   (rtl/render (reagent/as-element [selectors/toggle opts]))))
-
-(defn render-checkbox
-  ([]
-   (render-checkbox {}))
-  ([opts]
-   (rtl/render (reagent/as-element [selectors/checkbox opts]))))
-
-(defn render-checkbox-prefill
-  ([]
-   (render-checkbox-prefill {}))
-  ([opts]
-   (rtl/render (reagent/as-element [selectors/checkbox-prefill opts]))))
-
-(defn render-radio
-  ([]
-   (render-radio {}))
-  ([opts]
-   (rtl/render (reagent/as-element [selectors/radio opts]))))
-
-(js/global.test "default render of toggle component"
-  (fn []
-    (render-toggle)
-    (-> (js/expect (rtl/screen.getByTestId "toggle-component"))
-        (.toBeTruthy))))
-
-(js/global.test "toggle component on change is working"
-  (let [mock-fn (js/jest.fn)]
-    (fn []
-      (render-toggle {:on-change mock-fn})
-      (rtl/fireEvent.press (rtl/screen.getByTestId "toggle-component"))
-      (-> (js/expect mock-fn)
-          (.toHaveBeenCalledTimes 1)))))
-
-(js/global.test "default render of radio component"
-  (fn []
-    (render-radio)
-    (-> (js/expect (rtl/screen.getByTestId "radio-component"))
-        (.toBeTruthy))))
-
-(js/global.test "radio component on change is working"
-  (let [mock-fn (js/jest.fn)]
-    (fn []
-      (render-radio {:on-change mock-fn})
-      (rtl/fireEvent.press (rtl/screen.getByTestId "radio-component"))
-      (-> (js/expect mock-fn)
-          (.toHaveBeenCalledTimes 1)))))
-
-(js/global.test "default render of checkbox component"
-  (fn []
-    (render-checkbox)
-    (-> (js/expect (rtl/screen.getByTestId "checkbox-component"))
-        (.toBeTruthy))))
-
-(js/global.test "checkbox component on change is working"
-  (let [mock-fn (js/jest.fn)]
-    (fn []
-      (render-checkbox {:on-change mock-fn})
-      (rtl/fireEvent.press (rtl/screen.getByTestId "checkbox-component"))
-      (-> (js/expect mock-fn)
-          (.toHaveBeenCalledTimes 1)))))
-
-(js/global.test "default render of checkbox-prefill component"
-  (fn []
-    (render-checkbox-prefill)
-    (-> (js/expect (rtl/screen.getByTestId "checkbox-prefill-component"))
-        (.toBeTruthy))))
-
-(js/global.test "checkbox-prefill component on change is working"
-  (let [mock-fn (js/jest.fn)]
-    (fn []
-      (render-checkbox-prefill {:on-change mock-fn})
-      (rtl/fireEvent.press (rtl/screen.getByTestId "checkbox-prefill-component"))
-      (-> (js/expect mock-fn)
-          (.toHaveBeenCalledTimes 1)))))

src/quo2/components/selectors/disclaimer/view.cljs

@@ -1,7 +1,7 @@
 (ns quo2.components.selectors.disclaimer.view
   (:require [quo2.components.markdown.text :as text]
             [quo2.components.selectors.disclaimer.style :as style]
-            [quo2.components.selectors.selectors :as selectors]
+            [quo2.components.selectors.selectors.view :as selectors]
             [react-native.core :as rn]))
 
 (defn view
@@ -10,8 +10,9 @@
    {:style (merge container-style (style/container blur?))}
    [selectors/checkbox
     {:accessibility-label accessibility-label
-     :on-change           on-change
-     :checked?            checked?}]
+     :blur?               blur?
+     :checked?            checked?
+     :on-change           on-change}]
    [text/text
     {:size  :paragraph-2
      :style style/text}

src/quo2/components/selectors/selectors.cljs

@@ -1,109 +0,0 @@
-(ns quo2.components.selectors.selectors
-  (:require [quo2.components.icon :as icons]
-            [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
-            [reagent.core :as reagent]
-            [quo2.components.selectors.styles :as style]))
-
-(defn- handle-press
-  [disabled? on-change checked?]
-  (when (not disabled?)
-    (fn []
-      (swap! checked? not)
-      (when on-change (on-change @checked?)))))
-
-(defn checkbox-prefill
-  [{:keys [default-checked?]}]
-  (let [internal-checked? (reagent/atom (or default-checked? false))]
-    (fn [{:keys [on-change disabled? blurred-background? container-style checked?]}]
-      (when (and (not (nil? checked?)) (not= @internal-checked? checked?))
-        (reset! internal-checked? checked?))
-      (let [checked? (or checked? @internal-checked?)]
-        [rn/touchable-without-feedback
-         {:on-press (handle-press disabled? on-change internal-checked?)}
-         [rn/view
-          {:style               (merge
-                                 container-style
-                                 (style/checkbox-prefill blurred-background? disabled?))
-           :accessibility-label (str "checkbox-" (if checked? "on" "off"))
-           :accessibility-role  :checkbox
-           :testID              "checkbox-prefill-component"}
-          (when checked?
-            [rn/view
-             {:style
-              {:height 20
-               :width  20}}
-             [icons/icon :i/check-small
-              {:size  20
-               :color (colors/theme-colors
-                       (colors/alpha colors/neutral-100 (if disabled? 0.3 1))
-                       (colors/alpha colors/white (if disabled? 0.3 1)))}]])]]))))
-
-(defn checkbox
-  [{:keys [default-checked?]}]
-  (let [internal-checked? (reagent/atom (or default-checked? false))]
-    (fn [{:keys [on-change disabled? blurred-background? container-style checked?]}]
-      (when (and (not (nil? checked?)) (not= @internal-checked? checked?))
-        (reset! internal-checked? checked?))
-      (let [checked? (or checked? @internal-checked?)]
-        [rn/touchable-without-feedback
-         {:on-press (handle-press disabled? on-change internal-checked?)}
-         [rn/view
-          {:style (merge
-                   container-style
-                   {:height 20
-                    :width  20})}
-          [rn/view
-           {:style               (style/checkbox blurred-background? disabled? checked?)
-            :accessibility-label (str "checkbox-" (if checked? "on" "off"))
-            :accessibility-role  :checkbox
-            :testID              "checkbox-component"}
-           (when checked?
-             [rn/view
-              {:style
-               {:height 20
-                :width  20}}
-              [icons/icon :i/check-small
-               {:size  20
-                :color colors/white}]])]]]))))
-
-(defn radio
-  [{:keys [default-checked?]}]
-  (let [internal-checked? (reagent/atom (or default-checked? false))]
-    (fn [{:keys [on-change disabled? blurred-background? container-style checked?]}]
-      (when (and (not (nil? checked?)) (not= @internal-checked? checked?))
-        (reset! internal-checked? checked?))
-      (let [checked? (or checked? @internal-checked?)]
-        [rn/touchable-without-feedback
-         {:on-press (handle-press disabled? on-change internal-checked?)}
-         [rn/view
-          {:style               (merge
-                                 container-style
-                                 (style/radio checked? disabled? blurred-background?))
-           :accessibility-label (str "radio-" (if checked? "on" "off"))
-           :accessibility-role  :checkbox
-           :testID              "radio-component"}
-
-          [rn/view
-           {:style
-            (style/radio-inner checked? disabled? blurred-background?)}]]]))))
-
-(defn toggle
-  [{:keys [default-checked?]}]
-  (let [internal-checked? (reagent/atom (or default-checked? false))]
-    (fn [{:keys [on-change disabled? blurred-background? container-style checked?]}]
-      (when (and (not (nil? checked?)) (not= @internal-checked? checked?))
-        (reset! internal-checked? checked?))
-      (let [checked? (or checked? @internal-checked?)]
-        [rn/touchable-without-feedback
-         {:on-press (handle-press disabled? on-change internal-checked?)}
-         [rn/view
-          {:style               (merge
-                                 container-style
-                                 (style/toggle checked? disabled? blurred-background?))
-           :accessibility-label (str "toggle-" (if checked? "on" "off"))
-           :accessibility-role  :checkbox
-           :testID              "toggle-component"}
-          [rn/view
-           {:style
-            (style/toggle-inner checked? disabled? blurred-background?)}]]]))))

src/quo2/components/selectors/selectors/component_spec.cljs

@@ -0,0 +1,68 @@
+(ns quo2.components.selectors.selectors.component-spec
+  (:require [quo2.components.selectors.selectors.view :as selectors]
+            [reagent.core :as reagent]
+            [test-helpers.component :as h]))
+
+(defn render-toggle
+  ([]
+   (render-toggle {}))
+  ([opts]
+   (h/render (reagent/as-element [selectors/toggle opts]))))
+
+(defn render-checkbox
+  ([]
+   (render-checkbox {}))
+  ([opts]
+   (h/render (reagent/as-element [selectors/checkbox opts]))))
+
+(defn render-checkbox-prefill
+  ([]
+   (render-checkbox-prefill {}))
+  ([opts]
+   (h/render (reagent/as-element [selectors/checkbox-prefill opts]))))
+
+(defn render-radio
+  ([]
+   (render-radio {}))
+  ([opts]
+   (h/render (reagent/as-element [selectors/radio opts]))))
+
+(h/test "default render of toggle component"
+  (render-toggle)
+  (h/is-truthy (h/get-by-test-id "toggle-component")))
+
+(h/test "toggle component on change is working"
+  (let [mock-fn (h/mock-fn)]
+    (render-toggle {:on-change mock-fn})
+    (h/fire-event :press (h/get-by-test-id "toggle-component"))
+    (h/was-called mock-fn)))
+
+(h/test "default render of radio component"
+  (render-radio)
+  (h/is-truthy (h/get-by-test-id "radio-component")))
+
+(h/test "radio component on change is working"
+  (let [mock-fn (h/mock-fn)]
+    (render-radio {:on-change mock-fn})
+    (h/fire-event :press (h/get-by-test-id "radio-component"))
+    (h/was-called mock-fn)))
+
+(h/test "default render of checkbox component"
+  (render-checkbox)
+  (h/is-truthy (h/get-by-test-id "checkbox-component")))
+
+(h/test "checkbox component on change is working"
+  (let [mock-fn (h/mock-fn)]
+    (render-checkbox {:on-change mock-fn})
+    (h/fire-event :press (h/get-by-test-id "checkbox-component"))
+    (h/was-called mock-fn)))
+
+(h/test "default render of checkbox-prefill component"
+  (render-checkbox-prefill)
+  (h/is-truthy (h/get-by-test-id "checkbox-prefill-component")))
+
+(h/test "checkbox-prefill component on change is working"
+  (let [mock-fn (h/mock-fn)]
+    (render-checkbox-prefill {:on-change mock-fn})
+    (h/fire-event :press (h/get-by-test-id "checkbox-prefill-component"))
+    (h/was-called mock-fn)))

src/quo2/components/selectors/selectors/style.cljs

@@ -0,0 +1,127 @@
+(ns quo2.components.selectors.selectors.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(defn toggle-background-color
+  [custom-color]
+  {:normal {:checked   (colors/custom-color-by-theme custom-color 50 60)
+            :unchecked (colors/theme-colors colors/neutral-30 colors/neutral-80)}
+   :blur   {:checked   (colors/theme-colors (colors/custom-color custom-color 50) colors/white-opa-70)
+            :unchecked (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-10)}})
+
+(defn radio-border-color
+  [customization-color]
+  {:normal {:checked   (colors/custom-color-by-theme customization-color 50 60)
+            :unchecked (colors/theme-colors colors/neutral-30 colors/neutral-70)}
+   :blur   {:checked   (colors/theme-colors (colors/custom-color customization-color 50)
+                                            colors/white)
+            :unchecked (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-40)}})
+
+(defn radio-background-unchecked-color
+  []
+  {:normal (colors/theme-colors colors/white-opa-40 colors/neutral-80-opa-40)
+   :blur   colors/white-opa-5})
+
+(defn checkbox-background-color
+  [customization-color]
+  {:normal {:checked   (colors/custom-color-by-theme customization-color 50 60)
+            :unchecked (colors/theme-colors colors/white-opa-40 colors/neutral-80-opa-40)}
+   :blur   {:checked   (colors/theme-colors (colors/custom-color customization-color 50)
+                                            colors/white)
+            :unchecked colors/white-opa-5}})
+
+(defn checkbox-border-unchecked-color
+  []
+  {:normal (colors/theme-colors colors/neutral-30 colors/neutral-70)
+   :blur   (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-40)})
+
+(defn checkbox-prefill-background-color
+  []
+  {:normal (colors/theme-colors colors/neutral-30 colors/neutral-80)
+   :blur   (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10)})
+
+(defn- get-color
+  [color-map & [blur? checked?]]
+  (let [blur-type (if blur? :blur :normal)]
+    (if (some? checked?)
+      (get-in color-map [blur-type (if checked? :checked :unchecked)])
+      (get color-map blur-type))))
+
+(defn toggle
+  [{:keys [checked? disabled? blur? container-style customization-color]}]
+  (assoc container-style
+         :height           20
+         :width            30
+         :border-radius    20
+         :opacity          (if disabled? 0.3 1)
+         :background-color (get-color (toggle-background-color customization-color) blur? checked?)))
+
+(defn toggle-inner
+  [{:keys [checked?]}]
+  {:height           16
+   :width            16
+   :background-color colors/white
+   :border-radius    20
+   :margin-left      (if checked? 12 2)
+   :margin-right     :auto
+   :margin-top       :auto
+   :margin-bottom    :auto})
+
+(defn radio
+  [{:keys [checked? disabled? blur? container-style customization-color]}]
+  (assoc container-style
+         :height           20
+         :width            20
+         :border-radius    20
+         :border-width     1.2
+         :opacity          (if disabled? 0.3 1)
+         :background-color (when-not checked?
+                             (get-color (radio-background-unchecked-color) blur?))
+         :border-color     (get-color (radio-border-color customization-color) blur? checked?)))
+
+(defn radio-inner
+  [{:keys [checked? blur? customization-color]}]
+  {:height           14
+   :width            14
+   :margin           1.8
+   :border-radius    7
+   :background-color (when checked?
+                       (get-color (radio-border-color customization-color) blur? checked?))})
+
+(defn checkbox
+  [{:keys [checked? disabled? blur? container-style customization-color]}]
+  (assoc container-style
+         :height           20
+         :width            20
+         :border-radius    6
+         :opacity          (if disabled? 0.3 1)
+         :border-width     (if checked? 0 1.2)
+         :background-color (get-color (checkbox-background-color customization-color) blur? checked?)
+         :border-color     (when-not checked?
+                             (get-color (checkbox-border-unchecked-color) blur?))))
+
+(defn common-checkbox-inner
+  [{:keys [checked?]}]
+  (let [size (if checked? 20 0)]
+    {:height size :width size}))
+
+(defn checkbox-check
+  [_checked? blur?]
+  {:size  20
+   :color (if blur?
+            (colors/theme-colors colors/white colors/neutral-100)
+            colors/white)})
+
+(defn checkbox-prefill
+  [{:keys [disabled? blur? container-style]}]
+  (assoc container-style
+         :height           21
+         :width            21
+         :border-radius    6
+         :opacity          (if disabled? 0.3 1)
+         :background-color (get-color (checkbox-prefill-background-color) blur?)))
+
+(defn checkbox-prefill-check
+  [checked? _blur?]
+  {:size  20
+   :color (when checked? (colors/theme-colors colors/neutral-100 colors/white))})
+

src/quo2/components/selectors/selectors/view.cljs

@@ -0,0 +1,76 @@
+(ns quo2.components.selectors.selectors.view
+  (:require [quo2.components.icon :as icons]
+            [quo2.components.selectors.selectors.style :as style]
+            [react-native.core :as rn]
+            [reagent.core :as reagent]))
+
+(defn- handle-press
+  [on-change checked-atom checked?]
+  (when checked-atom (swap! checked-atom not))
+  (when on-change (on-change (not checked?))))
+
+(defn- selector
+  [{:keys [default-checked? checked?]}]
+  (let [controlled-component? (some? checked?)
+        internal-checked?     (when-not controlled-component?
+                                (reagent/atom (or default-checked? false)))]
+    (fn [{:keys [checked? disabled? blur? customization-color on-change container-style
+                 label-prefix outer-style-fn inner-style-fn icon-style-fn]
+          :or   {customization-color :blue}}]
+      (let [actual-checked?     (if controlled-component? checked? @internal-checked?)
+            accessibility-label (str label-prefix "-" (if actual-checked? "on" "off"))
+            test-id             (str label-prefix "-component")
+            outer-styles        (outer-style-fn {:checked?            actual-checked?
+                                                 :disabled?           disabled?
+                                                 :blur?               blur?
+                                                 :container-style     container-style
+                                                 :customization-color customization-color})]
+        [rn/touchable-without-feedback
+         (when-not disabled?
+           {:on-press #(handle-press on-change internal-checked? actual-checked?)})
+         [rn/view
+          {:style                             outer-styles
+           :needs-offscreen-alpha-compositing true
+           :accessibility-label               accessibility-label
+           :accessibility-role                :checkbox
+           :testID                            test-id}
+          [rn/view
+           {:style (inner-style-fn {:checked?            actual-checked?
+                                    :blur?               blur?
+                                    :customization-color customization-color})}
+           (when (and icon-style-fn actual-checked?)
+             [icons/icon :i/check-small (icon-style-fn actual-checked? blur?)])]]]))))
+
+(defn toggle
+  [props]
+  [selector
+   (assoc props
+          :label-prefix   "toggle"
+          :outer-style-fn style/toggle
+          :inner-style-fn style/toggle-inner)])
+
+(defn radio
+  [props]
+  [selector
+   (assoc props
+          :label-prefix   "radio"
+          :outer-style-fn style/radio
+          :inner-style-fn style/radio-inner)])
+
+(defn checkbox
+  [props]
+  [selector
+   (assoc props
+          :label-prefix   "checkbox"
+          :outer-style-fn style/checkbox
+          :inner-style-fn style/common-checkbox-inner
+          :icon-style-fn  style/checkbox-check)])
+
+(defn checkbox-prefill
+  [props]
+  [selector
+   (assoc props
+          :label-prefix   "checkbox-prefill"
+          :outer-style-fn style/checkbox-prefill
+          :inner-style-fn style/common-checkbox-inner
+          :icon-style-fn  style/checkbox-prefill-check)])

src/quo2/components/selectors/styles.cljs

@@ -1,130 +0,0 @@
-(ns quo2.components.selectors.styles
-  (:require [quo2.foundations.colors :as colors]))
-
-(defn get-color
-  [checked? disabled? blurred-background?]
-  (cond
-    checked?
-    (colors/custom-color-by-theme
-     :primary
-     50
-     60
-     (when disabled? 30)
-     (when disabled? 30))
-    blurred-background?
-    (colors/theme-colors
-     (colors/alpha colors/neutral-80 (if disabled? 0.05 0.1))
-     (colors/alpha colors/white (if disabled? 0.05 0.1)))
-    :else
-    (colors/theme-colors
-     (colors/alpha colors/neutral-20 (if disabled? 0.4 1))
-     (colors/alpha colors/neutral-70 (if disabled? 0.3 1)))))
-
-(defn checkbox-prefill
-  [blurred-background? disabled?]
-  {:height           21
-   :width            21
-   :border-radius    6
-   :background-color (if blurred-background?
-                       (colors/theme-colors
-                        (colors/alpha colors/neutral-80
-                                      (if disabled? 0.05 0.1))
-                        (colors/alpha colors/white (if disabled? 0.05 0.1)))
-                       (colors/theme-colors
-                        (colors/alpha colors/neutral-20
-                                      (if disabled? 0.3 1))
-                        (colors/alpha colors/neutral-70
-                                      (if disabled? 0.3 1))))})
-
-(defn checkbox
-  [blurred-background? disabled? checked?]
-  {:flex             1
-   :border-radius    6
-   :border-width     (if checked? 0 1)
-   :background-color (cond
-                       checked?
-                       (get-color checked? disabled? blurred-background?)
-                       blurred-background?
-                       (colors/theme-colors
-                        colors/white-opa-5
-                        colors/white-opa-10)
-                       :else
-                       (colors/theme-colors
-                        colors/white
-                        colors/neutral-80-opa-40))
-   :border-color     (if checked?
-                       :none
-                       (get-color checked?
-                                  disabled?
-                                  blurred-background?))})
-
-(defn checkbox-toggle
-  [checked? disabled? blurred-background?]
-  {:flex             1
-   :border-radius    6
-   :border-width     (if @checked? 0 1)
-   :background-color (cond
-                       @checked?
-                       (get-color @checked? disabled? blurred-background?)
-                       blurred-background?
-                       (colors/theme-colors
-                        colors/white-opa-5
-                        colors/white-opa-10)
-                       :else
-                       (colors/theme-colors
-                        colors/white
-                        colors/neutral-80-opa-40))
-   :border-color     (if @checked?
-                       :none
-                       (get-color @checked? disabled? blurred-background?))})
-
-(defn radio
-  [checked? disabled? blurred-background?]
-  {:height           20
-   :width            20
-   :border-radius    20
-   :border-width     1
-   :border-color     (get-color checked?
-                                disabled?
-                                blurred-background?)
-   :background-color (when-not blurred-background?
-                       (colors/theme-colors colors/white
-                                            (colors/alpha colors/neutral-80
-                                                          0.4)))})
-
-(defn toggle
-  [checked? disabled? blurred-background?]
-  {:height           20
-   :width            30
-   :border-radius    20
-   :background-color (get-color checked?
-                                disabled?
-                                blurred-background?)})
-
-(defn toggle-inner
-  [checked? disabled? blurred-background?]
-  {:margin-left      (if checked? 12 2)
-   :height           16
-   :width            16
-   :background-color (if blurred-background?
-                       (colors/theme-colors
-                        (colors/alpha colors/white (if disabled? 0.4 1))
-                        (colors/alpha colors/white (if disabled? 0.3 1)))
-                       (colors/theme-colors
-                        (colors/alpha colors/white 1)
-                        (colors/alpha colors/white (if disabled? 0.4 1))))
-   :border-radius    20
-   :margin-right     :auto
-   :margin-top       :auto
-   :margin-bottom    :auto})
-
-(defn radio-inner
-  [checked? disabled? blurred-background?]
-  {:margin-left      :auto
-   :height           14
-   :width            14
-   :background-color (when checked? (get-color checked? disabled? blurred-background?))
-   :border-radius    20
-   :margin-right     :auto
-   :margin-top       :auto
-   :margin-bottom    :auto})

src/quo2/components/settings/privacy_option.cljs

@@ -1,7 +1,7 @@
 (ns quo2.components.settings.privacy-option
   (:require [quo2.components.icon :as icons]
             [quo2.components.markdown.text :as text]
-            [quo2.components.selectors.selectors :as selectors]
+            [quo2.components.selectors.selectors.view :as selectors]
             [quo2.components.settings.style :as style]
             [quo2.foundations.colors :as colors]
             [react-native.core :as rn]))

src/quo2/core.cljs

@@ -56,7 +56,7 @@
     quo2.components.record-audio.record-audio.view
     quo2.components.selectors.disclaimer.view
     quo2.components.selectors.filter.view
-    quo2.components.selectors.selectors
+    quo2.components.selectors.selectors.view
     quo2.components.separator
     quo2.components.settings.accounts.view
     quo2.components.settings.privacy-option
@@ -99,7 +99,7 @@
 (def floating-shell-button quo2.components.navigation.floating-shell-button/floating-shell-button)
 (def page-nav quo2.components.navigation.page-nav/page-nav)
 (def disclaimer quo2.components.selectors.disclaimer.view/view)
-(def checkbox quo2.components.selectors.selectors/checkbox)
+(def checkbox quo2.components.selectors.selectors.view/checkbox)
 (def filter quo2.components.selectors.filter.view/view)
 (def skeleton quo2.components.loaders.skeleton/skeleton)
 (def author quo2.components.messages.author.view/author)

src/quo2/core_spec.cljs

@@ -20,8 +20,8 @@
     [quo2.components.profile.select-profile.component-spec]
     [quo2.components.record-audio.record-audio.--tests--.record-audio-component-spec]
     [quo2.components.record-audio.soundtrack.--tests--.soundtrack-component-spec]
-    [quo2.components.selectors.--tests--.selectors-component-spec]
     [quo2.components.selectors.disclaimer.component-spec]
     [quo2.components.selectors.filter.component-spec]
+    [quo2.components.selectors.selectors.component-spec]
     [quo2.components.share.share-qr-code.component-spec]
     [quo2.components.tags.--tests--.status-tags-component-spec]))

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

@@ -170,8 +170,9 @@
           (when (= @focused-input :repeat-password)
             [rn/view {:style style/disclaimer-container}
              [quo/disclaimer
-              {:on-change #(reset! accepts-disclaimer? %)
-               :checked?  @accepts-disclaimer?}
+              {:blur?     true
+               :checked?  @accepts-disclaimer?
+               :on-change #(reset! accepts-disclaimer? %)}
               (i18n/label :t/password-creation-disclaimer)]])
 
           [rn/view {:style style/button-container}

src/status_im2/contexts/quo_preview/selectors/selectors.cljs

@@ -1,91 +1,71 @@
 (ns status-im2.contexts.quo-preview.selectors.selectors
-  (:require ["react-native" :refer [StyleSheet]]
-            [oops.core :refer [oget]]
-            [quo.previews.preview :as preview]
-            [quo.react-native :as rn]
-            [quo2.components.markdown.text :as text]
-            [quo2.components.selectors.selectors :as quo2]
+  (:require [quo2.components.markdown.text :as text]
+            [quo2.components.selectors.selectors.view :as quo2]
             [quo2.foundations.colors :as colors]
+            [react-native.core :as rn]
             [reagent.core :as reagent]
-            [status-im.ui.components.react :as react]))
+            [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label "Disabled?"
+  [{:label "Disabled"
     :key   :disabled?
-    :type  :boolean}])
+    :type  :boolean}
+   {:label "Blur"
+    :key   :blur?
+    :type  :boolean}
+   {:label   "Customization color"
+    :key     :customization-color
+    :type    :select
+    :options (map (fn [[color _]]
+                    {:key color :value (name color)})
+                  colors/customization)}])
+
+(defn selector-preview
+  [text component {:keys [disabled? blur? customization-color]}]
+  [rn/view
+   {:style {:margin      6
+            :align-items :center}}
+   [text/text {:size :paragraph-1} text]
+   [component
+    {:container-style     {:margin 4}
+     :disabled?           disabled?
+     :blur?               blur?
+     :customization-color customization-color}]])
 
 (defn cool-preview
   []
-  (let [state (reagent/atom {:disabled false})]
+  (let [state (reagent/atom {:disabled?           false
+                             :blur?               false
+                             :customization-color :blue})]
     (fn []
       [rn/view
-       {:margin-bottom 50
-        :padding       16}
        [preview/customizer state descriptor]
+       [rn/view {:style {:margin-vertical 24}}
+        [preview/blur-view
+         {:style                 {:width       "100%"
+                                  :align-items :center
+                                  :top         (if (:blur? @state) 32 16)
+                                  :position    (if (:blur? @state)
+                                                 :absolute
+                                                 :relative)}
+          :height                300
+          :show-blur-background? (:blur? @state)}
 
-       [rn/view
-        {:padding-vertical 60
-         :align-items      :center}
-        [text/text {:size :heading-2} "Toggle"]
-        [quo2/toggle
-         {:container-style {:margin-top 0}
-          :disabled?       (:disabled? @state)}]
-        [text/text {:size :heading-2} "Radio"]
-        [quo2/radio
-         {:container-style {:margin-top 0}
-          :disabled?       (:disabled? @state)}]
-        [text/text {:size :heading-2} "Checkbox"]
-        [quo2/checkbox
-         {:container-style {:margin-top 0}
-          :disabled?       (:disabled? @state)}]
-        [text/text {:size :heading-2} "Checkbox Prefill"]
-        [quo2/checkbox-prefill
-         {:container-style {:margin-top 0}
-          :disabled?       (:disabled? @state)}]]
-
-       [rn/view
-        {:padding-vertical 60
-         :align-items      :center}
-        [react/blur-view
-         {:style      (oget StyleSheet "absoluteFill")
-          :blurAmount 20
-          :blurType   (if (colors/dark?) :dark :light)}
-         [react/linear-gradient
-          {:style  (oget StyleSheet "absoluteFill")
-           :colors [(colors/alpha "#4CB4EF" 0.2)
-                    (colors/alpha "#FB8F61" 0.2)
-                    (colors/alpha "#647084" 0.2)]
-           :start  {:x 0 :y 0}
-           :end    {:x 1 :y 1}}]]
-
-        [text/text {:size :heading-2} "Toggle"]
-        [quo2/toggle
-         {:container-style     {:margin-top 0}
-          :disabled?           (:disabled? @state)
-          :blurred-background? true}]
-        [text/text {:size :heading-2} "Radio"]
-        [quo2/radio
-         {:container-style     {:margin-top 0}
-          :disabled?           (:disabled? @state)
-          :blurred-background? true}]
-        [text/text {:size :heading-2} "Checkbox"]
-        [quo2/checkbox
-         {:container-style     {:margin-top 0}
-          :disabled?           (:disabled? @state)
-          :blurred-background? true}]
-        [text/text {:size :heading-2} "Checkbox Prefill"]
-        [quo2/checkbox-prefill
-         {:container-style     {:margin-top 0}
-          :disabled?           (:disabled? @state)
-          :blurred-background? true}]]])))
+         [rn/view
+          {:style {:flex        1
+                   :align-items :center}}
+          [selector-preview "Toggle" quo2/toggle @state]
+          [selector-preview "Radio" quo2/radio @state]
+          [selector-preview "Checkbox" quo2/checkbox @state]
+          [selector-preview "Checkbox Prefill" quo2/checkbox-prefill @state]]]]])))
 
 (defn preview-selectors
   []
   [rn/view
-   {:background-color (colors/theme-colors colors/white colors/neutral-90)
-    :flex             1}
+   {:style {:background-color (colors/theme-colors colors/white colors/neutral-95)
+            :flex             1}}
    [rn/flat-list
-    {:flex                      1
+    {:style                     {:flex 1}
      :keyboardShouldPersistTaps :always
      :header                    [cool-preview]
      :key-fn                    str}]])