Icon added to disclaimer component (#20309)

src/quo/components/selectors/disclaimer/component_spec.cljs

@@ -28,3 +28,9 @@
       (h/render [disclaimer/view {:checked? false} "test"])
       (h/is-null (h/query-by-label-text :checkbox-on))
       (h/is-truthy (h/query-by-label-text :checkbox-off)))))
+
+(h/test "Renders icon"
+  (let [text "I accept this disclaimer"]
+    (h/render [disclaimer/view {:icon :i/locked} text])
+    (h/is-truthy (h/query-by-label-text :disclaimer-icon))))
+

src/quo/components/selectors/disclaimer/style.cljs

@@ -16,3 +16,7 @@
 
 (def text
   {:margin-left 8})
+
+(def icon-container
+  {:align-items :flex-end
+   :flex        1})

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

@@ -1,13 +1,15 @@
 (ns quo.components.selectors.disclaimer.view
   (:require
+    [quo.components.icon :as icons]
     [quo.components.markdown.text :as text]
     [quo.components.selectors.disclaimer.style :as style]
     [quo.components.selectors.selectors.view :as selectors]
+    [quo.foundations.colors :as colors]
     [quo.theme]
     [react-native.core :as rn]))
 
 (defn view
-  [{:keys [checked? blur? accessibility-label container-style on-change]} label]
+  [{:keys [checked? blur? accessibility-label container-style on-change icon customization-color]} label]
   (let [theme (quo.theme/use-theme)]
     [rn/touchable-without-feedback
      {:on-press            on-change
@@ -18,8 +20,18 @@
         :accessibility-label accessibility-label
         :blur?               blur?
         :checked?            checked?
-        :on-change           on-change}]
+        :on-change           on-change
+        :customization-color customization-color}]
       [text/text
        {:size  :paragraph-2
         :style style/text}
-       label]]]))
+       label]
+      (when icon
+        [rn/view {:style style/icon-container}
+         [icons/icon icon
+          {:accessibility-label :disclaimer-icon
+           :color               (if blur?
+                                  (colors/white-opa-70)
+                                  (colors/theme-colors colors/neutral-50
+                                                       colors/neutral-40
+                                                       theme))}]])]]))

src/quo/components/selectors/selectors/style.cljs

@@ -6,18 +6,14 @@
   [customization-color theme]
   {:normal {:checked   (colors/resolve-color customization-color theme)
             :unchecked (colors/theme-colors colors/neutral-30 colors/neutral-80 theme)}
-   :blur   {:checked   (colors/theme-colors (colors/resolve-color customization-color theme)
+   :blur   {:checked   (colors/resolve-color customization-color :light)
-                                            colors/white-opa-70
-                                            theme)
             :unchecked (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-10 theme)}})
 
 (defn- radio-border-color
   [customization-color theme]
   {:normal {:checked   (colors/resolve-color customization-color theme)
             :unchecked (colors/theme-colors colors/neutral-30 colors/neutral-70 theme)}
-   :blur   {:checked   (colors/theme-colors (colors/resolve-color customization-color theme)
+   :blur   {:checked   (colors/resolve-color customization-color :light)
-                                            colors/white
-                                            theme)
             :unchecked (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-40 theme)}})
 
 (defn- radio-background-unchecked-color
@@ -28,11 +24,9 @@
 (defn- checkbox-background-color
   [customization-color theme]
   {:normal {:checked   (colors/resolve-color customization-color theme)
-            :unchecked (colors/theme-colors colors/white-opa-40 colors/neutral-80-opa-40 theme)}
+            :unchecked nil}
-   :blur   {:checked   (colors/theme-colors (colors/resolve-color customization-color theme)
+   :blur   {:checked   (colors/resolve-color customization-color :light)
-                                            colors/white
+            :unchecked nil}})
-                                            theme)
-            :unchecked colors/white-opa-5}})
 
 (defn- checkbox-border-unchecked-color
   [theme]
@@ -42,7 +36,7 @@
 (defn- filled-checkbox-background-color
   [theme]
   {:normal (colors/theme-colors colors/neutral-30 colors/neutral-80 theme)
-   :blur   (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)})
+   :blur   (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 theme)})
 
 (defn- get-color
   [color-map & [blur? checked?]]
@@ -114,11 +108,9 @@
     {:height size :width size}))
 
 (defn checkbox-check
-  [_checked? blur? theme]
+  [_checked? _blur? _theme]
   {:size  20
-   :color (if blur?
+   :color colors/white})
-            (colors/theme-colors colors/white colors/neutral-100 theme)
-            colors/white)})
 
 (defn filled-checkbox
   [{:keys [disabled? blur? container-style theme]}]

src/quo/components/selectors/selectors/view.cljs

@@ -7,9 +7,9 @@
 
 (defn- base-selector
   [{:keys [default-checked? checked? disabled? blur? customization-color on-change container-style
-           label-prefix outer-style-fn inner-style-fn icon-style-fn]
+           label-prefix outer-style-fn inner-style-fn icon-style-fn]}]
-    :or   {customization-color :blue}}]
   (let [theme                   (quo.theme/use-theme)
+        customization-color     (if customization-color customization-color :blue)
         controlled-component?   (some? checked?)
         [internal-checked?
          set-internal-checked?] (rn/use-state (when-not controlled-component?

src/status_im/contexts/preview/quo/selectors/disclaimer.cljs

@@ -1,33 +1,48 @@
 (ns status-im.contexts.preview.quo.selectors.disclaimer
   (:require
     [quo.core :as quo]
+    [quo.theme :as quo.theme]
     [react-native.core :as rn]
     [reagent.core :as reagent]
     [status-im.contexts.preview.quo.preview :as preview]))
 
 (def descriptor
   [{:key :checked? :type :boolean}
-   {:key :blur? :type :boolean}
+   {:key :text :type :text}
-   {:key :text :type :text}])
+   {:key :icon :type :boolean}
+   (preview/customization-color-option)])
 
 (defn view
   []
-  (let [state (reagent/atom {:checked? false
+  (let [state (reagent/atom {:checked?            false
-                             :blur?    true
+                             :blur?               false
-                             :text     "I agree with the community rules"})]
+                             :text                "I agree with the community rules"
+                             :icon                false
+                             :customization-color :blue})]
     (fn []
-      (let [{:keys [blur? checked? text]} @state]
+      (let [{:keys [blur? checked? text icon customization-color]} @state
+            theme                                                  (quo.theme/use-theme)
+            blur?                                                  (if (= :light theme) false blur?)]
         [preview/preview-container
          {:state                     state
-          :descriptor                descriptor
+          :descriptor                (if (= :light theme)
+                                       descriptor
+                                       (vec (conj descriptor {:key :blur? :type :boolean})))
           :blur?                     blur?
           :show-blur-background?     true
           :component-container-style {:padding 20}}
          [rn/view {:style {:margin-bottom 20}}
           [quo/disclaimer
-           {:blur?     blur?
+           {:blur?               blur?
-            :checked?  checked?
+            :checked?            checked?
-            :on-change #(swap! state update :checked? not)}
+            :icon                (when icon
+                                   (if checked?
+                                     :i/locked
+                                     :i/unlocked))
+            :on-change           #(swap! state update :checked? not)
+            :customization-color customization-color}
            text]]
-         [quo/button {:disabled? (not checked?)}
+         [quo/button
+          {:disabled?           (not checked?)
+           :customization-color customization-color}
           "submit"]]))))