Skip to content

Commit 3f6edbf

Browse files
smohamedjavidsmohamedjavid
committed
[Refactor] Bottom Sheet to use Theme Context
Signed-off-by: Mohamed Javid <[email protected]>
1 parent e99f6de commit 3f6edbf

File tree

9 files changed

+145
-150
lines changed

9 files changed

+145
-150
lines changed

Diff for: ‎src/quo2/components/drawers/action_drawers/style.cljs

+4-4
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22
(:require [quo2.foundations.colors :as colors]))
33

44
(defn divider
5-
[]
5+
[theme]
66
{:border-top-width 1
7-
:border-top-color (colors/theme-colors colors/neutral-10 colors/neutral-90)
7+
:border-top-color (colors/theme-colors colors/neutral-10 colors/neutral-90 theme)
88
:margin-top 8
99
:margin-bottom 7
1010
:align-items :center
@@ -45,6 +45,6 @@
4545
:width 20})
4646

4747
(defn right-text
48-
[override-theme]
49-
{:color (colors/theme-colors colors/neutral-50 colors/neutral-40 override-theme)
48+
[theme]
49+
{:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
5050
:margin-right 12})

Diff for: ‎src/quo2/components/drawers/action_drawers/view.cljs

+64-62
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,21 @@
11
(ns quo2.components.drawers.action-drawers.view
2-
(:require [quo2.components.icon :as icon]
2+
(:require [react-native.core :as rn]
3+
[quo2.components.drawers.action-drawers.style :as style]
4+
[quo2.components.icon :as icon]
35
[quo2.components.markdown.text :as text]
46
[quo2.foundations.colors :as colors]
5-
[react-native.core :as rn]
6-
[quo2.components.drawers.action-drawers.style :as style]))
7+
[quo2.theme :as theme]))
78

89
(defn- get-icon-color
9-
[danger? override-theme]
10+
[danger? theme]
1011
(if danger?
11-
colors/danger-60
12-
(colors/theme-colors colors/neutral-50 colors/neutral-40 override-theme)))
12+
(colors/theme-colors colors/danger-50 colors/danger-60 theme)
13+
(colors/theme-colors colors/neutral-50 colors/neutral-40 theme)))
1314

1415
(defn- divider
15-
[]
16+
[theme]
1617
[rn/view
17-
{:style (style/divider)
18+
{:style (style/divider theme)
1819
:accessible true
1920
:accessibility-label :divider}])
2021

@@ -24,7 +25,7 @@
2425
[rn/view (dissoc props :on-press) child]
2526
[rn/touchable-highlight props child]))
2627

27-
(defn- action
28+
(defn- action-internal
2829
[{:keys [icon
2930
label
3031
sub-label
@@ -34,65 +35,66 @@
3435
disabled?
3536
on-press
3637
add-divider?
37-
override-theme
38+
theme
3839
accessibility-label
39-
icon-color]
40-
:as action-props}]
41-
(when action-props
42-
[:<> {:key label}
43-
(when add-divider?
44-
[divider])
45-
[maybe-pressable disabled?
46-
{:accessibility-label accessibility-label
47-
:style (style/container sub-label disabled?)
48-
:underlay-color (colors/theme-colors colors/neutral-5 colors/neutral-90 override-theme)
49-
:on-press on-press}
50-
[rn/view
51-
{:style (style/row-container sub-label)}
52-
[rn/view
53-
{:accessibility-label :left-icon-for-action
54-
:accessible true
55-
:style style/left-icon}
56-
[icon/icon icon
57-
{:color (or icon-color (get-icon-color danger? override-theme))
58-
:size 20}]]
59-
[rn/view
60-
{:style style/text-container}
40+
icon-color]}]
41+
[:<>
42+
(when add-divider?
43+
[divider theme])
44+
[maybe-pressable disabled?
45+
{:accessibility-label accessibility-label
46+
:style (style/container sub-label disabled?)
47+
:underlay-color (colors/theme-colors colors/neutral-5 colors/neutral-90 theme)
48+
:on-press on-press}
49+
[rn/view
50+
{:style (style/row-container sub-label)}
51+
[rn/view
52+
{:accessibility-label :left-icon-for-action
53+
:accessible true
54+
:style style/left-icon}
55+
[icon/icon icon
56+
{:color (or icon-color (get-icon-color danger? theme))
57+
:size 20}]]
58+
[rn/view
59+
{:style style/text-container}
60+
[text/text
61+
{:size :paragraph-1
62+
:weight :medium
63+
:style {:color
64+
(cond
65+
danger? (colors/theme-colors colors/danger-50 colors/danger-60 theme)
66+
:else (colors/theme-colors colors/neutral-100 colors/white theme))}}
67+
label]
68+
(when sub-label
6169
[text/text
62-
{:size :paragraph-1
63-
:weight :medium
64-
:style {:color
65-
(cond
66-
danger? (colors/theme-colors colors/danger-50 colors/danger-60 override-theme)
67-
:else (colors/theme-colors colors/neutral-100 colors/white override-theme))}}
68-
label]
69-
(when sub-label
70+
{:size :paragraph-2
71+
:style {:color
72+
(colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
73+
sub-label])]
74+
(when (or right-text right-icon)
75+
[rn/view {:style style/right-side-container}
76+
(when right-text
7077
[text/text
71-
{:size :paragraph-2
72-
:style {:color
73-
(colors/theme-colors colors/neutral-50 colors/neutral-40 override-theme)}}
74-
sub-label])]
75-
(when (or right-text right-icon)
76-
[rn/view {:style style/right-side-container}
77-
(when right-text
78-
[text/text
79-
{:accessibility-label :right-text-for-action
80-
:size :paragraph-1
81-
:style (style/right-text override-theme)}
82-
right-text])
83-
(when right-icon
84-
[rn/view
85-
{:style style/right-icon
86-
:accessible true
87-
:accessibility-label :right-icon-for-action}
88-
[icon/icon right-icon
89-
{:color (get-icon-color danger? override-theme)
90-
:size 20}]])])]]]))
78+
{:accessibility-label :right-text-for-action
79+
:size :paragraph-1
80+
:style (style/right-text theme)}
81+
right-text])
82+
(when right-icon
83+
[rn/view
84+
{:style style/right-icon
85+
:accessible true
86+
:accessibility-label :right-icon-for-action}
87+
[icon/icon right-icon
88+
{:color (get-icon-color danger? theme)
89+
:size 20}]])])]]])
90+
91+
(def ^:private action (theme/with-theme action-internal))
9192

9293
(defn action-drawer
9394
[sections]
9495
[:<>
9596
(doall
9697
(for [actions sections]
97-
(doall
98-
(map action actions))))])
98+
(let [filtered-actions (filter some? actions)]
99+
(doall
100+
(map #(with-meta [action %] {:key (:label %)}) filtered-actions)))))])

Diff for: ‎src/quo2/components/profile/profile_card/view.cljs

+1-3
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,6 @@
5454
[user-avatar/user-avatar
5555
{:full-name name
5656
:profile-picture profile-picture
57-
:override-theme :dark
5857
:size :medium
5958
:status-indicator? false
6059
:customization-color customization-color
@@ -66,7 +65,7 @@
6665
:size 32
6766
:blurred? true
6867
:labelled? true
69-
:resource :main-icons2/check
68+
:resource :i/check
7069
:accessibility-label :logged-in-tag
7170
:icon-color colors/success-50
7271
:override-theme :dark
@@ -76,7 +75,6 @@
7675
{:size 32
7776
:type :blur-bg
7877
:icon true
79-
:override-theme :dark
8078
:style style/option-button
8179
:on-press on-options-press
8280
:accessibility-label :profile-card-options}

Diff for: ‎src/status_im2/common/bottom_sheet/style.cljs

+7-7
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,17 @@
44
[status-im.utils.platform :as platform]))
55

66
(defn handle
7-
[override-theme]
7+
[theme]
88
{:width 32
99
:height 4
10-
:background-color (colors/theme-colors colors/neutral-100 colors/white override-theme)
11-
:opacity (theme/theme-value 0.05 0.1)
10+
:background-color (colors/theme-colors colors/neutral-100 colors/white theme)
11+
:opacity (theme/theme-value 0.05 0.1 theme)
1212
:border-radius 100
1313
:align-self :center
1414
:margin-vertical 8})
1515

1616
(defn sheet
17-
[{:keys [top bottom]} window-height override-theme padding-bottom-override shell?]
17+
[{:keys [top bottom]} window-height theme padding-bottom-override shell?]
1818
{:position :absolute
1919
:max-height (- window-height top)
2020
:z-index 1
@@ -28,7 +28,7 @@
2828
:padding-bottom (or padding-bottom-override (+ bottom 8))
2929
:background-color (if shell?
3030
:transparent
31-
(colors/theme-colors colors/white colors/neutral-90 override-theme))})
31+
(colors/theme-colors colors/white colors/neutral-95 theme))})
3232

3333
(def shell-bg
3434
{:position :absolute
@@ -39,7 +39,7 @@
3939
:bottom 0})
4040

4141
(defn selected-item
42-
[override-theme window-height sheet-height {:keys [top]}]
42+
[theme window-height sheet-height {:keys [top]}]
4343
{:position :absolute
4444
:bottom 10
4545
:max-height (- window-height sheet-height top)
@@ -48,4 +48,4 @@
4848
:right 0
4949
:border-radius 12
5050
:margin-horizontal 8
51-
:background-color (colors/theme-colors colors/white colors/neutral-90 override-theme)})
51+
:background-color (colors/theme-colors colors/white colors/neutral-95 theme)})

Diff for: ‎src/status_im2/common/bottom_sheet/view.cljs

+13-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
(ns status-im2.common.bottom-sheet.view
22
(:require [oops.core :as oops]
33
[quo2.foundations.colors :as colors]
4+
[quo2.theme :as theme]
45
[react-native.blur :as blur]
56
[react-native.core :as rn]
67
[react-native.gesture :as gesture]
@@ -52,11 +53,11 @@
5253
(show translate-y bg-opacity)
5354
(hide translate-y bg-opacity window-height on-close))))))
5455

55-
(defn f-view
56+
(defn- f-view
5657
[_ _]
5758
(let [sheet-height (reagent/atom 0)]
58-
(fn [{:keys [hide? insets]}
59-
{:keys [content override-theme selected-item padding-bottom-override on-close shell?]}]
59+
(fn [{:keys [hide? insets theme]}
60+
{:keys [content selected-item padding-bottom-override on-close shell?]}]
6061
(let [{window-height :height} (rn/get-window)
6162
bg-opacity (reanimated/use-shared-value 0)
6263
translate-y (reanimated/use-shared-value window-height)
@@ -85,18 +86,24 @@
8586
{:transform [{:translateY translate-y}]}
8687
(style/sheet insets
8788
window-height
88-
override-theme
89+
theme
8990
padding-bottom-override
9091
shell?))
9192
:on-layout #(reset! sheet-height (oops/oget % "nativeEvent" "layout" "height"))}
9293
(when shell?
9394
[blur/ios-view {:style style/shell-bg}])
9495
(when selected-item
9596
[rn/view
96-
[rn/view {:style (style/selected-item override-theme window-height @sheet-height insets)}
97+
[rn/view {:style (style/selected-item theme window-height @sheet-height insets)}
9798
[selected-item]]])
9899

99100
;; handle
100-
[rn/view {:style (style/handle override-theme)}]
101+
[rn/view {:style (style/handle theme)}]
101102
;; content
102103
[content]]]]))))
104+
105+
(defn- internal-view
106+
[args sheet]
107+
[:f> f-view args sheet])
108+
109+
(def view (theme/with-theme internal-view))

0 commit comments

Comments
 (0)