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

Refactor `Bottom Sheet` to use Theme Context (#16710) 

This commit updates "Bottom Sheet" to use the theme (for theme provider) provided on the bottom sheet args when dispatching. This will ensure the theme is passed down to its child components where it can consume and render based on the theme.

Changes done:

In Bottom Sheet:
 - Fix Bottom Sheet to use the correct background colour (neutral-95) for dark mode (as per Figma)
 - Fix the Icon colour for danger in light mode
 - Updated Quo2 Preview to provide an option for the bottom sheet theme

In Action Drawer:
 - Refactor the Action Drawer component to consume theme context

Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>
This commit is contained in:
Mohamed Javid 2023-07-20 22:13:17 +08:00 committed by GitHub
parent b14757b120
commit 9731e7039c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 153 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/quo2/components/drawers/action_drawers/style.cljs
View File

@ -2,9 +2,9 @@
(:require [quo2.foundations.colors :as colors]))
(defn divider
[]
[theme]
{:border-top-width 1
:border-top-color (colors/theme-colors colors/neutral-10 colors/neutral-90)
:border-top-color (colors/theme-colors colors/neutral-10 colors/neutral-90 theme)
:margin-top 8
:margin-bottom 7
:align-items :center
@ -45,6 +45,6 @@
:width 20})
(defn right-text
[override-theme]
{:color (colors/theme-colors colors/neutral-50 colors/neutral-40 override-theme)
[theme]
{:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
:margin-right 12})

126
src/quo2/components/drawers/action_drawers/view.cljs
View File

@ -1,20 +1,21 @@
(ns quo2.components.drawers.action-drawers.view
(:require [quo2.components.icon :as icon]
(:require [react-native.core :as rn]
[quo2.components.drawers.action-drawers.style :as style]
[quo2.components.icon :as icon]
[quo2.components.markdown.text :as text]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[quo2.components.drawers.action-drawers.style :as style]))
[quo2.theme :as quo.theme]))
(defn- get-icon-color
[danger? override-theme]
[danger? theme]
(if danger?
colors/danger-60
(colors/theme-colors colors/neutral-50 colors/neutral-40 override-theme)))
(colors/theme-colors colors/danger-50 colors/danger-60 theme)
(colors/theme-colors colors/neutral-50 colors/neutral-40 theme)))
(defn- divider
[]
[theme]
[rn/view
{:style (style/divider)
{:style (style/divider theme)
:accessible true
:accessibility-label :divider}])
@ -24,7 +25,7 @@
[rn/view (dissoc props :on-press) child]
[rn/touchable-highlight props child]))
(defn- action
(defn- action-internal
[{:keys [icon
label
sub-label
@ -34,65 +35,66 @@
disabled?
on-press
add-divider?
override-theme
theme
accessibility-label
icon-color]
:as action-props}]
(when action-props
[:<> {:key label}
(when add-divider?
[divider])
[maybe-pressable disabled?
{:accessibility-label accessibility-label
:style (style/container sub-label disabled?)
:underlay-color (colors/theme-colors colors/neutral-5 colors/neutral-90 override-theme)
:on-press on-press}
[rn/view
{:style (style/row-container sub-label)}
[rn/view
{:accessibility-label :left-icon-for-action
:accessible true
:style style/left-icon}
[icon/icon icon
{:color (or icon-color (get-icon-color danger? override-theme))
:size 20}]]
[rn/view
{:style style/text-container}
icon-color]}]
[:<>
(when add-divider?
[divider theme])
[maybe-pressable disabled?
{:accessibility-label accessibility-label
:style (style/container sub-label disabled?)
:underlay-color (colors/theme-colors colors/neutral-5 colors/neutral-90 theme)
:on-press on-press}
[rn/view
{:style (style/row-container sub-label)}
[rn/view
{:accessibility-label :left-icon-for-action
:accessible true
:style style/left-icon}
[icon/icon icon
{:color (or icon-color (get-icon-color danger? theme))
:size 20}]]
[rn/view
{:style style/text-container}
[text/text
{:size :paragraph-1
:weight :medium
:style {:color
(cond
danger? (colors/theme-colors colors/danger-50 colors/danger-60 theme)
:else (colors/theme-colors colors/neutral-100 colors/white theme))}}
label]
(when sub-label
[text/text
{:size :paragraph-1
:weight :medium
:style {:color
(cond
danger? (colors/theme-colors colors/danger-50 colors/danger-60 override-theme)
:else (colors/theme-colors colors/neutral-100 colors/white override-theme))}}
label]
(when sub-label
{:size :paragraph-2
:style {:color
(colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
sub-label])]
(when (or right-text right-icon)
[rn/view {:style style/right-side-container}
(when right-text
[text/text
{:size :paragraph-2
:style {:color
(colors/theme-colors colors/neutral-50 colors/neutral-40 override-theme)}}
sub-label])]
(when (or right-text right-icon)
[rn/view {:style style/right-side-container}
(when right-text
[text/text
{:accessibility-label :right-text-for-action
:size :paragraph-1
:style (style/right-text override-theme)}
right-text])
(when right-icon
[rn/view
{:style style/right-icon
:accessible true
:accessibility-label :right-icon-for-action}
[icon/icon right-icon
{:color (get-icon-color danger? override-theme)
:size 20}]])])]]]))
{:accessibility-label :right-text-for-action
:size :paragraph-1
:style (style/right-text theme)}
right-text])
(when right-icon
[rn/view
{:style style/right-icon
:accessible true
:accessibility-label :right-icon-for-action}
[icon/icon right-icon
{:color (get-icon-color danger? theme)
:size 20}]])])]]])
(def ^:private action (quo.theme/with-theme action-internal))
(defn action-drawer
[sections]
[:<>
(doall
(for [actions sections]
(doall
(map action actions))))])
(let [filtered-actions (filter some? actions)]
(doall
(map #(with-meta [action %] {:key (:label %)}) filtered-actions)))))])

6
src/quo2/components/list_items/menu_item.cljs
View File

@ -7,11 +7,11 @@
(defn themes
[type]
(case type
:main {:icon-color (theme-colors colors/neutral-50 colors/neutral-10)
:background (theme-colors colors/white colors/neutral-90)
:main {:icon-color (theme-colors colors/neutral-50 colors/neutral-40)
:background (theme-colors colors/white colors/neutral-95)
:text-color (theme-colors colors/neutral-100 colors/white)}
:danger {:icon-color (theme-colors colors/danger-50 colors/danger-60)
:background (theme-colors colors/white colors/neutral-90)
:background (theme-colors colors/white colors/neutral-95)
:text-color (theme-colors colors/danger-50 colors/danger-60)}
:transparent {:icon-color (theme-colors colors/neutral-50 colors/neutral-10)
:text-color (theme-colors colors/neutral-100 colors/white)}))

4
src/quo2/components/profile/profile_card/view.cljs
View File

@ -54,7 +54,6 @@
[user-avatar/user-avatar
{:full-name name
:profile-picture profile-picture
:override-theme :dark
:size :medium
:status-indicator? false
:customization-color customization-color
@ -66,7 +65,7 @@
:size 32
:blurred? true
:labelled? true
:resource :main-icons2/check
:resource :i/check
:accessibility-label :logged-in-tag
:icon-color colors/success-50
:override-theme :dark
@ -76,7 +75,6 @@
{:size 32
:type :blur-bg
:icon true
:override-theme :dark
:style style/option-button
:on-press on-options-press
:accessibility-label :profile-card-options}

14
src/status_im2/common/bottom_sheet/style.cljs
View File

@ -4,17 +4,17 @@
[status-im.utils.platform :as platform]))
(defn handle
[override-theme]
[theme]
{:width 32
:height 4
:background-color (colors/theme-colors colors/neutral-100 colors/white override-theme)
:opacity (theme/theme-value 0.05 0.1)
:background-color (colors/theme-colors colors/neutral-100 colors/white theme)
:opacity (theme/theme-value 0.05 0.1 theme)
:border-radius 100
:align-self :center
:margin-vertical 8})
(defn sheet
[{:keys [top bottom]} window-height override-theme padding-bottom-override shell?]
[{:keys [top bottom]} window-height theme padding-bottom-override shell?]
{:position :absolute
:max-height (- window-height top)
:z-index 1
@ -28,7 +28,7 @@
:padding-bottom (or padding-bottom-override (+ bottom 8))
:background-color (if shell?
:transparent
(colors/theme-colors colors/white colors/neutral-90 override-theme))})
(colors/theme-colors colors/white colors/neutral-95 theme))})
(def shell-bg
{:position :absolute
@ -39,7 +39,7 @@
:bottom 0})
(defn selected-item
[override-theme window-height sheet-height {:keys [top]}]
[theme window-height sheet-height {:keys [top]}]
{:position :absolute
:bottom 10
:max-height (- window-height sheet-height top)
@ -48,4 +48,4 @@
:right 0
:border-radius 12
:margin-horizontal 8
:background-color (colors/theme-colors colors/white colors/neutral-90 override-theme)})
:background-color (colors/theme-colors colors/white colors/neutral-95 theme)})

19
src/status_im2/common/bottom_sheet/view.cljs
View File

@ -1,6 +1,7 @@
(ns status-im2.common.bottom-sheet.view
(:require [oops.core :as oops]
[quo2.foundations.colors :as colors]
[quo2.theme :as theme]
[react-native.blur :as blur]
[react-native.core :as rn]
[react-native.gesture :as gesture]
@ -52,11 +53,11 @@
(show translate-y bg-opacity)
(hide translate-y bg-opacity window-height on-close))))))
(defn f-view
(defn- f-view
[_ _]
(let [sheet-height (reagent/atom 0)]
(fn [{:keys [hide? insets]}
{:keys [content override-theme selected-item padding-bottom-override on-close shell?]}]
(fn [{:keys [hide? insets theme]}
{:keys [content selected-item padding-bottom-override on-close shell?]}]
(let [{window-height :height} (rn/get-window)
bg-opacity (reanimated/use-shared-value 0)
translate-y (reanimated/use-shared-value window-height)
@ -85,7 +86,7 @@
{:transform [{:translateY translate-y}]}
(style/sheet insets
window-height
override-theme
theme
padding-bottom-override
shell?))
:on-layout #(reset! sheet-height (oops/oget % "nativeEvent" "layout" "height"))}
@ -93,10 +94,16 @@
[blur/ios-view {:style style/shell-bg}])
(when selected-item
[rn/view
[rn/view {:style (style/selected-item override-theme window-height @sheet-height insets)}
[rn/view {:style (style/selected-item theme window-height @sheet-height insets)}
[selected-item]]])
;; handle
[rn/view {:style (style/handle override-theme)}]
[rn/view {:style (style/handle theme)}]
;; content
[content]]]]))))
(defn- internal-view
[args sheet]
[:f> f-view args sheet])
(def view (theme/with-theme internal-view))

3
src/status_im2/contexts/onboarding/create_profile/view.cljs
View File

@ -122,7 +122,8 @@
[:show-bottom-sheet
{:content
(fn []
[method-menu/view on-change-profile-pic])}]))
[method-menu/view on-change-profile-pic])
:theme :dark}]))
:image-picker-props {:profile-picture (when @profile-pic {:uri @profile-pic})
:full-name (if (seq @full-name)
@full-name

2
src/status_im2/contexts/onboarding/select_photo/method_menu/view.cljs
View File

@ -62,10 +62,8 @@
[[{:icon :i/camera
:accessibility-label :take-photo-button
:label (i18n/label :t/profile-pic-take)
:override-theme :dark
:on-press #(take-pic update-profile-pic-callback)}
{:icon :i/image
:override-theme :dark
:accessibility-label :select-from-gallery-button
:label (i18n/label :t/profile-pic-pick)
:on-press #(pick-pic update-profile-pic-callback)}]]])

78
src/status_im2/contexts/quo_preview/drawers/action_drawers.cljs
View File

@ -16,58 +16,47 @@
{:label "Show red options?"
:key :show-red-options?
:type :boolean}
{:label "Override theme"
:key :override-theme
{:label "Drawer theme"
:key :theme
:type :select
:options [{:key :dark :value "Dark"}
{:key :light :value "Light"}
{:key nil :value "System"}]}])
(defn options-with-consequences
[override-theme]
[{:icon :i/delete
:danger? true
:label "Clear history"
:override-theme override-theme
:add-divider? true
:on-press #(js/alert "clear history")}])
(def options-with-consequences
[{:icon :i/delete
:danger? true
:label "Clear history"
:add-divider? true
:on-press #(js/alert "clear history")}])
(defn render-action-sheet
[state]
(let [override-theme (:override-theme @state)]
[rn/view
{:height 300
:background-color (colors/theme-colors colors/white colors/neutral-95)}
[quo/action-drawer
(cond->
[[{:icon :i/friend
:label "View channel members and details"
:override-theme override-theme
:on-press #(js/alert "View channel members and details")}
{:icon :i/communities
:label "Mark as read"
:override-theme override-theme
:disabled? (:mark-as-read-disabled? @state)
:on-press #(js/alert "Mark as read")}
{:icon :i/muted
:label (if (:muted? @state) "Unmute channel" "Mute channel")
:override-theme override-theme
:on-press #(js/alert (if (:muted? @state) "Unmute channel" "Mute channel"))
:right-icon :i/chevron-right
:sub-label (when (:muted? @state) "Muted for 15 min")}
{:icon :i/scan
:on-press #(js/alert "Fetch messages")
:override-theme override-theme
:right-icon :i/chevron-right
:right-text "3"
:label "Fetch messages"}
{:icon :i/add-user
:override-theme override-theme
:on-press #(js/alert "Share link to the channel")
:label "Share link to the channel"}]]
[quo/action-drawer
(cond->
[[{:icon :i/friend
:label "View channel members and details"
:on-press #(js/alert "View channel members and details")}
{:icon :i/communities
:label "Mark as read"
:disabled? (:mark-as-read-disabled? @state)
:on-press #(js/alert "Mark as read")}
{:icon :i/muted
:label (if (:muted? @state) "Unmute channel" "Mute channel")
:on-press #(js/alert (if (:muted? @state) "Unmute channel" "Mute channel"))
:right-icon :i/chevron-right
:sub-label (when (:muted? @state) "Muted for 15 min")}
{:icon :i/scan
:on-press #(js/alert "Fetch messages")
:right-icon :i/chevron-right
:right-text "3"
:label "Fetch messages"}
{:icon :i/add-user
:on-press #(js/alert "Share link to the channel")
:label "Share link to the channel"}]]
(:show-red-options? @state)
(conj (options-with-consequences override-theme)))]]))
(:show-red-options? @state)
(conj options-with-consequences))])
(defn cool-preview
[]
@ -80,7 +69,8 @@
[quo/button
{:style {:margin-horizontal 40}
:on-press #(rf/dispatch [:show-bottom-sheet
{:content (fn [] [render-action-sheet state])}])}
{:content (fn [] [render-action-sheet state])
:theme (:theme @state)}])}
"See in bottom sheet"]
[rn/view {:padding-vertical 60}
[render-action-sheet state]]]])))

4
src/status_im2/contexts/shell/activity_center/notification/contact_verification/view.cljs
View File

@ -83,8 +83,8 @@
(defn- prepare-challenge-reply
[props]
(rf/dispatch [:show-bottom-sheet
{:content view
:override-theme :dark}
{:content view
:theme :dark}
(assoc props :replying? true)]))
(defn- send-challenge-reply

31
src/status_im2/contexts/shell/activity_center/view.cljs
View File

@ -39,19 +39,18 @@
[]
(let [unread-count (rf/sub [:activity-center/unread-count])]
[quo/action-drawer
[[{:icon :i/mark-as-read
:override-theme :dark
:label (i18n/label :t/mark-all-notifications-as-read)
:disabled? (zero? unread-count)
:on-press (fn []
(rf/dispatch [:activity-center.notifications/mark-all-as-read-locally
(fn []
{:icon :up-to-date
:icon-color colors/success-50
:text (i18n/label :t/notifications-marked-as-read
{:count unread-count})
:override-theme :dark})])
(rf/dispatch [:hide-bottom-sheet]))}]]]))
[[{:icon :i/mark-as-read
:label (i18n/label :t/mark-all-notifications-as-read)
:disabled? (zero? unread-count)
:on-press (fn []
(rf/dispatch [:activity-center.notifications/mark-all-as-read-locally
(fn []
{:icon :up-to-date
:icon-color colors/success-50
:text (i18n/label :t/notifications-marked-as-read
{:count unread-count})
:override-theme :dark})])
(rf/dispatch [:hide-bottom-sheet]))}]]]))
(defn empty-tab
[]
@ -144,7 +143,6 @@
:type :blur-bg
:size 32
:accessibility-label :close-activity-center
:override-theme :dark
:on-press #(rf/dispatch [:navigate-back])}
:i/close]
[quo/button
@ -152,10 +150,9 @@
:type :blur-bg
:size 32
:accessibility-label :activity-center-open-more
:override-theme :dark
:on-press #(rf/dispatch [:show-bottom-sheet
{:content options-bottom-sheet-content
:override-theme :dark}])}
{:content options-bottom-sheet-content
:theme :dark}])}
:i/options]]
[quo/text
{:size :heading-1

7
src/status_im2/contexts/syncing/setup_syncing/view.cljs
View File

@ -131,7 +131,6 @@
{:label (i18n/label :t/have-a-sync-code?)
:increase-padding-top? true}]
[quo/action-drawer
[[{:icon :i/scan
:override-theme :dark
:on-press #(rf/dispatch [:navigate-to :scan-sync-code-page])
:label (i18n/label :t/scan-or-enter-sync-code)}]]]]]])))
[[{:icon :i/scan
:on-press #(rf/dispatch [:navigate-to :scan-sync-code-page])
:label (i18n/label :t/scan-or-enter-sync-code)}]]]]]])))

11
src/status_im2/navigation/view.cljs
View File

@ -75,10 +75,11 @@
(def bottom-sheet
(reagent/reactify-component
(fn []
(let [{:keys [sheets hide? theme]} (rf/sub [:bottom-sheet])
sheet (last sheets)
insets (safe-area/get-insets)
user-theme (theme/get-theme)]
(let [{:keys [sheets hide?]} (rf/sub [:bottom-sheet])
sheet (last sheets)
{:keys [theme]} sheet
insets (safe-area/get-insets)
user-theme (theme/get-theme)]
^{:key (str "sheet" @reloader/cnt)}
[theme/provider {:theme (or theme user-theme)}
[inactive]
@ -86,7 +87,7 @@
{:style {:position :relative :flex 1}
:keyboard-vertical-offset (- (max 20 (:bottom insets)))}
(when sheet
[:f> bottom-sheet/f-view {:insets insets :hide? hide?}
[bottom-sheet/view {:insets insets :hide? hide?}
sheet])]]))))
(def toasts (reagent/reactify-component toasts/toasts))