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

update theming for profile-input, empty state and predictive keyboard components (#16423) 

* chore: remove override-prop from empty-state component

* chore: remove override-prop from profile-input and title-input components

* chore: remove override-prop from predictive-keyboard component
This commit is contained in:
Jamie Caprani 2023-07-03 12:26:33 +01:00 committed by GitHub
parent 88884064b1
commit e64ff76e0b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 59 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/quo2/components/buttons/predictive_keyboard/view.cljs
View File

@ -2,6 +2,7 @@
(:require [react-native.core :as rn]
[quo2.components.buttons.predictive-keyboard.style :as style]
[quo2.components.info.info-message :as info-message]
[quo2.theme :as theme]
[react-native.linear-gradient :as linear-gradient]
[quo2.foundations.colors :as colors]
[quo2.components.buttons.button :as button]))
@ -12,32 +13,33 @@
:blur [colors/white-opa-5 colors/white-opa-0]})
(defn- word-component
[word _ _ {:keys [blur? on-press]}]
[word _ _ {:keys [on-press]}]
[button/button
(merge {:type :blur-bg
{:type :blur-bg
:size 32
:on-press #(on-press word)}
(when blur? {:override-theme :dark}))
word])
(defn- separator
[]
[rn/view {:style {:width 8}}])
(defn view
(defn- view-internal
"Options
- `type` `:words`/`:error`/`:info`/`:empty`.
- `blur?` Boolean to enable blur background support.
- `text` error/info text.
- `words` List of words to display in the keyboard.
- `on-press` Callback called when a word is pressed `(fn [word])`."
[{:keys [type blur? text words on-press]}]
- `on-press` Callback called when a word is pressed `(fn [word])`
- `theme` :light or :dark, received from with-theme HOC."
[{:keys [type blur? text words on-press theme]}]
[linear-gradient/linear-gradient
{:style {:flex-direction :row}
:accessibility-label :predictive-keyboard
:colors (if blur?
(gradients :blur)
(colors/theme-colors (gradients :light) (gradients :dark)))}
(colors/theme-colors (gradients :light) (gradients :dark) theme))}
[rn/view {:style (style/wrapper type)}
(case type
:words
@ -46,8 +48,7 @@
:data words
:content-container-style style/word-list
:render-fn word-component
:render-data {:blur? blur?
:on-press on-press}
:render-data {:on-press on-press}
:shows-horizontal-scroll-indicator false
:separator [separator]
:horizontal true
@ -70,3 +71,5 @@
:icon-color colors/white-opa-70}))
text]
nil)]])
(def view (theme/with-theme view-internal))

14
src/quo2/components/empty_state/empty_state/view.cljs
View File

@ -3,9 +3,10 @@
[quo2.components.empty-state.empty-state.styles :as styles]
[quo2.components.markdown.text :as text]
[react-native.core :as rn]
[react-native.fast-image :as fast-image]))
[react-native.fast-image :as fast-image]
[quo2.theme :as theme]))
(defn empty-state
(defn- empty-state-internal
[{:keys [customization-color image title description blur?]
upper-button :upper-button
lower-button :lower-button
@ -32,19 +33,18 @@
upper-button-on-press :on-press} upper-button]
[rn/view {:style styles/button-container}
[button/button
(cond-> {:type :primary
{:type :primary
:size 32
:override-background-color (styles/upper-button-color customization-color)
:on-press upper-button-on-press}
blur? (assoc :override-theme :dark))
upper-button-text]
(when-let [{lower-button-text :text
lower-button-on-press :on-press} lower-button]
[button/button
(cond-> {:style {:margin-top 12}
{:style {:margin-top 12}
:size 32
:type :blur-bg
:on-press lower-button-on-press}
blur? (assoc :override-theme :dark))
lower-button-text])])])
(def empty-state (theme/with-theme empty-state-internal))

2
src/quo2/components/inputs/profile_input/view.cljs
View File

@ -37,7 +37,6 @@
[buttons/button
{:accessibility-label :select-profile-picture-button
:type :grey
:override-theme :dark
:override-background-color (colors/alpha colors/white 0.05)
:on-press on-press
:icon-size 20
@ -50,6 +49,5 @@
[title-input/title-input
(merge title-input-props
{:blur? true
:override-theme :dark
:placeholder placeholder
:customization-color customization-color})]]])

36
src/quo2/components/inputs/title_input/style.cljs
View File

@ -3,50 +3,50 @@
[react-native.platform :as platform]))
(defn get-focused-placeholder-color
[blur? override-theme]
[blur? theme]
(if blur?
(colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 override-theme)
(colors/theme-colors colors/neutral-30 colors/neutral-60 override-theme))
(colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 theme)
(colors/theme-colors colors/neutral-30 colors/neutral-60 theme))
)
(defn get-placeholder-color
[blur? override-theme]
[blur? theme]
(if blur?
(colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-30 override-theme)
(colors/theme-colors colors/neutral-40 colors/neutral-50 override-theme)))
(colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-30 theme)
(colors/theme-colors colors/neutral-40 colors/neutral-50 theme)))
(defn- get-disabled-color
[blur? override-theme]
[blur? theme]
(if blur?
(colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-30)
(colors/theme-colors colors/neutral-40 colors/neutral-50 override-theme)))
(colors/theme-colors colors/neutral-40 colors/neutral-50 theme)))
(defn- get-char-count-color
[blur? override-theme]
[blur? theme]
(if blur?
(colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40)
(colors/theme-colors colors/neutral-40 colors/neutral-50 override-theme)))
(colors/theme-colors colors/neutral-40 colors/neutral-50 theme)))
(defn get-selection-color
[customization-color blur? override-theme]
[customization-color blur? theme]
(colors/alpha (if blur?
(colors/theme-colors colors/neutral-100 colors/white override-theme)
(colors/theme-colors colors/neutral-100 colors/white theme)
(colors/custom-color customization-color
(if (or (= :dark override-theme) colors/dark?) 60 50)))
(if (or (= :dark theme) colors/dark?) 60 50)))
(if platform/ios? 1 0.2)))
(def text-input-container {:flex 1})
(defn title-text
[disabled? blur? override-theme]
[disabled? blur? theme]
{:text-align-vertical :bottom
:color (if disabled?
(get-disabled-color blur? override-theme)
(colors/theme-colors colors/neutral-100 colors/white override-theme))})
(get-disabled-color blur? theme)
(colors/theme-colors colors/neutral-100 colors/white theme))})
(defn char-count
[blur? override-theme]
{:color (get-char-count-color blur? override-theme)})
[blur? theme]
{:color (get-char-count-color blur? theme)})
(def container
{:flex-direction :row

20
src/quo2/components/inputs/title_input/view.cljs
View File

@ -12,14 +12,14 @@
(str 0 value)
value))
(defn title-input
(defn- title-input-internal
[{:keys [blur?
on-change-text
auto-focus
placeholder
max-length
default-value
override-theme]
theme]
:or {max-length 0
auto-focus false
default-value ""}}]
@ -38,10 +38,10 @@
(text/text-style
{:size :heading-2
:weight :semi-bold
:style (style/title-text disabled? blur? override-theme)})
:style (style/title-text disabled? blur? theme)})
:default-value default-value
:accessibility-label :profile-title-input
:keyboard-appearance (theme/theme-value :light :dark override-theme)
:keyboard-appearance (theme/theme-value :light :dark theme)
:on-focus #(swap! focused? (constantly true))
:on-blur #(swap! focused? (constantly false))
:auto-focus auto-focus
@ -50,22 +50,24 @@
:editable (not disabled?)
:max-length max-length
:placeholder placeholder
:selection-color (style/get-selection-color customization-color blur? override-theme)
:selection-color (style/get-selection-color customization-color blur? theme)
:placeholder-text-color (if @focused?
(style/get-focused-placeholder-color blur? override-theme)
(style/get-placeholder-color blur? override-theme))}]]
(style/get-focused-placeholder-color blur? theme)
(style/get-placeholder-color blur? theme))}]]
[rn/view
{:style style/counter-container}
[text/text
[text/text
{:style (style/char-count blur? override-theme)
{:style (style/char-count blur? theme)
:size :paragraph-2}
(pad-0
(str
(count @value)))]
[text/text
{:style (style/char-count blur? override-theme)
{:style (style/char-count blur? theme)
:size :paragraph-2}
(str "/"
(pad-0
(str max-length)))]]]])))
(def title-input (theme/with-theme title-input-internal))

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

@ -120,8 +120,7 @@
(rf/dispatch [:dismiss-keyboard])
(rf/dispatch
[:show-bottom-sheet
{:override-theme :dark
:content
{:content
(fn []
[method-menu/view on-change-profile-pic])}]))
:image-picker-props {:profile-picture (when @profile-pic {:uri @profile-pic})

3
src/status_im2/navigation/screens.cljs
View File

@ -145,7 +145,8 @@
:component generating-keys/generating-keys}
{:name :enter-seed-phrase
:options {:layout options/onboarding-layout}
:options {:theme :dark
:layout options/onboarding-layout}
:component enter-seed-phrase/enter-seed-phrase}
{:name :enable-notifications