status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Update navigation bar to support dark mode (#16762) 

* Dark mode top bar

* Fixes

* Style fix
This commit is contained in:
Alexander 2023-07-26 09:48:51 +02:00 committed by GitHub
parent e49a3ab5cd
commit 57c538e9d0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 15 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/status_im2/contexts/chat/messages/navigation/style.cljs
View File

@ -16,23 +16,24 @@
:background-color (colors/theme-colors colors/white-opa-40 colors/neutral-80-opa-40)} :background-color (colors/theme-colors colors/white-opa-40 colors/neutral-80-opa-40)}
position)) position))
(def background-view (defn background-view
[theme]
{:position :absolute {:position :absolute
:top 0 :top 0
:left 0 :left 0
:right 0 :right 0
:height navigation-bar-height :height navigation-bar-height
:background-color (colors/theme-colors colors/white-opa-70 :transparent) :background-color (colors/theme-colors colors/white-opa-70 colors/neutral-100-opa-70 theme)
:display :flex :display :flex
:flex-direction :row :flex-direction :row
:overflow :hidden}) :overflow :hidden})
(defn animated-background-view (defn animated-background-view
[enabled? animation] [enabled? animation theme]
(reanimated/apply-animations-to-style (reanimated/apply-animations-to-style
(when enabled? (when enabled?
{:opacity animation}) {:opacity animation})
background-view)) (background-view theme)))
(def blur-view (def blur-view
{:position :absolute {:position :absolute

11
src/status_im2/contexts/chat/messages/navigation/view.cljs
View File

@ -1,6 +1,7 @@
(ns status-im2.contexts.chat.messages.navigation.view (ns status-im2.contexts.chat.messages.navigation.view
(:require [quo2.core :as quo] (:require [quo2.core :as quo]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[quo2.theme :as theme]
[re-frame.db] [re-frame.db]
[react-native.blur :as blur] [react-native.blur :as blur]
[react-native.core :as rn] [react-native.core :as rn]
@ -14,7 +15,7 @@
[utils.i18n :as i18n] [utils.i18n :as i18n]
[status-im2.common.home.actions.view :as actions])) [status-im2.common.home.actions.view :as actions]))
(defn f-navigation-view (defn f-view
[{:keys [scroll-y]}] [{:keys [scroll-y]}]
(let [{:keys [group-chat chat-id chat-name emoji (let [{:keys [group-chat chat-id chat-name emoji
chat-type] chat-type]
@ -55,7 +56,7 @@
:extrapolateRight "clamp"})] :extrapolateRight "clamp"})]
[rn/view {:style style/navigation-view} [rn/view {:style style/navigation-view}
[reanimated/view [reanimated/view
{:style (style/animated-background-view all-loaded? opacity-animation)}] {:style (style/animated-background-view all-loaded? opacity-animation nil)}]
[reanimated/view {:style (style/animated-blur-view all-loaded? opacity-animation)} [reanimated/view {:style (style/animated-blur-view all-loaded? opacity-animation)}
[blur/view [blur/view
@ -114,3 +115,9 @@
:opacity-animation banner-opacity-animation :opacity-animation banner-opacity-animation
:all-loaded? all-loaded? :all-loaded? all-loaded?
:top-offset style/navigation-bar-height}]])) :top-offset style/navigation-bar-height}]]))
(defn- internal-navigation-view
[params]
[:f> f-view params])
(def navigation-view (theme/with-theme internal-navigation-view))

4
src/status_im2/contexts/chat/messages/view.cljs
View File

@ -17,9 +17,7 @@
{:cover-bg-color :turquoise {:cover-bg-color :turquoise
:chat chat :chat chat
:header-comp (fn [{:keys [scroll-y]}] :header-comp (fn [{:keys [scroll-y]}]
[:f> [messages.navigation/navigation-view {:scroll-y scroll-y}])
messages.navigation/f-navigation-view
{:scroll-y scroll-y}])
:footer-comp (fn [{:keys [insets]}] :footer-comp (fn [{:keys [insets]}]
(if-not able-to-send-message? (if-not able-to-send-message?
[contact-requests.bottom-drawer/view chat-id contact-request-state [contact-requests.bottom-drawer/view chat-id contact-request-state