Fixing designer notes

status-im · Jun 10, 2024 · cfd475b · cfd475b
1 parent e1648d6
commit cfd475b
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 37 deletions.
diff --git a/src/quo/components/selectors/disclaimer/view.cljs b/src/quo/components/selectors/disclaimer/view.cljs
@@ -9,7 +9,7 @@
     [react-native.core :as rn]))
 
 (defn view
-  [{:keys [checked? blur? accessibility-label container-style on-change icon]} 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
@@ -20,7 +20,8 @@
         :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}
@@ -29,4 +30,8 @@
         [rn/view {:style style/icon-container}
          [icons/icon icon
           {:accessibility-label :disclaimer-icon
-           :color               (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}]])]]))
+           :color               (if blur?
+                                  (colors/white-opa-70)
+                                  (colors/theme-colors colors/neutral-50
+                                                       colors/neutral-40
+                                                       theme))}]])]]))
diff --git a/src/quo/components/selectors/selectors/style.cljs b/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)
-                                            colors/white-opa-70
-                                            theme)
+   :blur   {:checked   (colors/resolve-color customization-color :light)
             :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)
-                                            colors/white
-                                            theme)
+   :blur   {:checked   (colors/resolve-color customization-color :light)
             :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)}
-   :blur   {:checked   (colors/theme-colors (colors/resolve-color customization-color theme)
-                                            colors/white
-                                            theme)
-            :unchecked colors/white-opa-5}})
+            :unchecked nil}
+   :blur   {:checked   (colors/resolve-color customization-color :light)
+            :unchecked nil}})
 
 (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?
-            (colors/theme-colors colors/white colors/neutral-100 theme)
-            colors/white)})
+   :color colors/white})
 
 (defn filled-checkbox
   [{:keys [disabled? blur? container-style theme]}]

diff --git a/src/quo/components/selectors/selectors/view.cljs b/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]
-    :or   {customization-color :blue}}]
+           label-prefix outer-style-fn inner-style-fn icon-style-fn]}]
   (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?

diff --git a/src/status_im/contexts/preview/quo/selectors/disclaimer.cljs b/src/status_im/contexts/preview/quo/selectors/disclaimer.cljs
@@ -1,39 +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 :icon :type :boolean}])
+   {:key :icon :type :boolean}
+   (preview/customization-color-option)])
 
 (defn view
   []
-  (let [state (reagent/atom {:checked? false
-                             :blur?    true
-                             :text     "I agree with the community rules"
-                             :icon     false})]
+  (let [state (reagent/atom {:checked?            false
+                             :blur?               false
+                             :text                "I agree with the community rules"
+                             :icon                false
+                             :customization-color :blue})]
     (fn []
-      (let [{:keys [blur? checked? text icon]} @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?
-            :checked?  checked?
-            :icon      (when icon
-                         (if checked?
-                           :i/locked
-                           :i/unlocked))
-            :on-change #(swap! state update :checked? not)}
+           {:blur?               blur?
+            :checked?            checked?
+            :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"]]))))