Quo2: Settings item blur (#17258)

* quo2: settings item blur

src/status_im2/contexts/quo_preview/preview.cljs

@@ -231,11 +231,19 @@
 
 
 (defn preview-container
-  [{:keys [state descriptor blur?
+  [{:keys [state descriptor blur? blur-dark-only?
            component-container-style
            blur-container-style blur-view-props blur-height show-blur-background?]
     :or   {blur-height 200}}
    & children]
+  [:f>
+   (fn []
+     (rn/use-effect (fn []
+                      (when blur-dark-only?
+                        (if blur?
+                          (quo.theme/set-theme :dark)
+                          (quo.theme/set-theme :light))))
+                    [blur? blur-dark-only?])
      [rn/view
       {:style {:top  (safe-area/get-top)
                :flex 1}}
@@ -262,4 +270,4 @@
                                                  blur-view-props)}]
                  children)]
           (into [rn/view {:style (merge style/component-container component-container-style)}]
-             children))]]])
+                children))]]])])

src/status_im2/contexts/quo_preview/settings/settings_item.cljs

@@ -56,7 +56,9 @@
               {:key   :positive
                :value :positive}
               {:key   :context
-               :value :context}]}])
+               :value :context}]}
+   {:key  :blur?
+    :type :boolean}])
 
 (def communities-list
   [{:source (resources/get-mock-image :coinbase)}
@@ -111,6 +113,7 @@
        {:state                 state
         :descriptor            descriptor
         :blur?                 (:blur? @state)
-        :show-blur-background? true}
+        :show-blur-background? true
+        :blur-dark-only?       true}
        [rn/view {:style {:flex 1}}
         [quo/settings-item (get-props @state)]]])))