diff --git a/src/quo/components/overlay/style.cljs b/src/quo/components/overlay/style.cljs new file mode 100644 index 000000000000..9adc53261c79 --- /dev/null +++ b/src/quo/components/overlay/style.cljs @@ -0,0 +1,13 @@ +(ns quo.components.overlay.style) + +(defn overlay-background + [background-color] + {:position :absolute + :top 0 + :left 0 + :right 0 + :bottom 0 + :background-color background-color}) + +(def container-style + {:flex 1}) diff --git a/src/quo/components/overlay/view.cljs b/src/quo/components/overlay/view.cljs new file mode 100644 index 000000000000..ce8be1e509f5 --- /dev/null +++ b/src/quo/components/overlay/view.cljs @@ -0,0 +1,23 @@ +(ns quo.components.overlay.view + (:require + [quo.components.overlay.style :as style] + [quo.foundations.colors :as colors] + [react-native.blur :as blur] + [react-native.core :as rn])) + +(defn view + [{:keys [type]} child] + (let [background-color (case type + :shell colors/neutral-80-opa-80-blur + :drawer colors/neutral-100-opa-70-blur)] + [rn/view + {:style (style/overlay-background background-color)} + (if (= type :shell) + [blur/view + {:blur-amount 20 + :blur-type :transparent + :style style/container-style} + child] + [rn/view + {:style style/container-style} + child])])) diff --git a/src/quo/core.cljs b/src/quo/core.cljs index 79a6f094e57d..b1808dca2718 100644 --- a/src/quo/core.cljs +++ b/src/quo/core.cljs @@ -100,6 +100,7 @@ quo.components.numbered-keyboard.keyboard-key.view quo.components.numbered-keyboard.numbered-keyboard.view quo.components.onboarding.small-option-card.view + quo.components.overlay.view quo.components.password.tips.view quo.components.profile.collectible.view quo.components.profile.profile-card.view @@ -314,6 +315,9 @@ (def notification quo.components.notifications.notification.view/notification) (def toast quo.components.notifications.toast.view/toast) +;;;; Overlay +(def overlay quo.components.overlay.view/view) + ;;;; Password (def tips quo.components.password.tips.view/view)