[#17393] fix: visibility status sheet blur effect

status-im · Dec 12, 2023 · 47fab40 · 47fab40
1 parent 52530c2
commit 47fab40
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 5 deletions.
diff --git a/src/quo/components/drawers/action_drawers/style.cljs b/src/quo/components/drawers/action_drawers/style.cljs
@@ -12,14 +12,16 @@
    :flex-direction   :row})
 
 (defn container
-  [{:keys [sub-label disabled? state customization-color theme]}]
+  [{:keys [sub-label disabled? state customization-color blur? theme]}]
   (merge
    {:border-radius     12
     :height            (if sub-label 56 48)
     :opacity           (when disabled? 0.3)
     :margin-horizontal 8}
    (when (= state :selected)
-     {:background-color (colors/resolve-color customization-color theme 5)})))
+     {:background-color (if blur?
+                          colors/white-opa-5
+                          (colors/resolve-color customization-color theme 5))})))
 
 (defn row-container
   [sub-label]

diff --git a/src/quo/components/drawers/action_drawers/view.cljs b/src/quo/components/drawers/action_drawers/view.cljs
@@ -41,7 +41,8 @@
            icon-color
            no-icon-color?
            state
-           customization-color]}]
+           customization-color
+           blur?]}]
   [:<>
    (when add-divider?
      [divider theme])
@@ -51,6 +52,7 @@
                                             :disabled?           disabled?
                                             :state               state
                                             :customization-color customization-color
+                                            :blur?               blur?
                                             :theme               theme})
      :underlay-color      (colors/theme-colors colors/neutral-5 colors/neutral-90 theme)
      :on-press            on-press}
@@ -102,7 +104,9 @@
             :accessible          true
             :accessibility-label :right-icon-for-action}
            [icon/icon :i/check
-            {:color (colors/resolve-color customization-color theme)
+            {:color (if blur?
+                      colors/white
+                      (colors/resolve-color customization-color theme))
              :size  20}]])])]]])
 
 (def ^:private action (quo.theme/with-theme action-internal))

diff --git a/src/status_im2/contexts/profile/settings/header/view.cljs b/src/status_im2/contexts/profile/settings/header/view.cljs
@@ -44,7 +44,9 @@
          :no-icon-color? true
          :icon-name      (:icon (header.utils/visibility-status-type-data status))
          :on-press       #(rf/dispatch [:show-bottom-sheet
-                                        {:content (fn [] [visibility-sheet/view
+                                        {:shell?  true
+                                         :theme   :dark
+                                         :content (fn [] [visibility-sheet/view
                                                           {:customization-color customization-color
                                                            :status-type         (:status-type
                                                                                  status)}])}])}

diff --git a/src/status_im2/contexts/profile/settings/visibility_sheet/view.cljs b/src/status_im2/contexts/profile/settings/visibility_sheet/view.cljs
@@ -15,13 +15,15 @@
   [quo/action-drawer
    [[{:icon                :i/online
       :no-icon-color?      true
+      :blur?               true
       :state               (when (= status-type constants/visibility-status-always-online) :selected)
       :customization-color customization-color
       :accessibility-label :online
       :label               (i18n/label :t/online)
       :on-press            #(change-visibility-status constants/visibility-status-always-online)}
      {:icon                :i/offline
       :no-icon-color?      true
+      :blur?               true
       :state               (when (= status-type constants/visibility-status-inactive) :selected)
       :accessibility-label :offline
       :customization-color customization-color
@@ -30,6 +32,7 @@
       :on-press            #(change-visibility-status constants/visibility-status-inactive)}
      {:icon                :i/automatic
       :no-icon-color?      true
+      :blur?               true
       :state               (when (= status-type constants/visibility-status-automatic) :selected)
       :accessibility-label :automatic
       :customization-color customization-color