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

chore: updating theming in quo2 components and chat (#17199)

This commit is contained in:
Jamie Caprani 2023-09-21 00:41:00 +02:00 committed by GitHub
parent ddd0796381
commit 0ae1e9bc5a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
26 changed files with 232 additions and 230 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/quo2/components/animated_header_flatlist/style.cljs
View File

@ -12,18 +12,19 @@
:height view-height})
(defn button-container
[position]
[{:keys [left right theme]}]
(merge
{:width 32
:height 32
:border-radius 10
:justify-content :center
:align-items :center
: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 theme)
:position :absolute
:top 56
:z-index 3}
position))
:z-index 3
:left left
:right right}))
(defn blur-view
[animation]
@ -38,7 +39,7 @@
:overflow :hidden}))
(defn entity-picture
[animation]
[animation theme]
(reanimated/apply-animations-to-style
{:width animation
:height animation}
@ -49,11 +50,11 @@
:left 20
:justify-content :center
:align-items :center
:background-color (colors/theme-colors colors/white colors/neutral-100)
:background-color (colors/theme-colors colors/white colors/neutral-100 theme)
:overflow :hidden}))
(defn header-bottom-part
[animation]
[animation theme]
(reanimated/apply-animations-to-style
{:border-top-right-radius animation
:border-top-left-radius animation}
@ -62,7 +63,7 @@
:height 86
:left 0
:right 0
:background-color (colors/theme-colors colors/white colors/neutral-100)}))
:background-color (colors/theme-colors colors/white colors/neutral-100 theme)}))
(defn header-comp
[y-animation opacity-animation]

25
src/quo2/components/animated_header_flatlist/view.cljs
View File

@ -9,7 +9,8 @@
[reagent.core :as reagent]
[quo2.foundations.colors :as colors]
[quo2.components.animated-header-flatlist.style :as style]
[oops.core :as oops]))
[oops.core :as oops]
[quo2.theme :as quo.theme]))
(def header-height 234)
(def cover-height 192)
@ -30,7 +31,7 @@
(reanimated/set-shared-value scroll-y current-y)))
(defn header
[{:keys [theme-color f-display-picture-comp cover-uri title-comp]} top-inset scroll-y]
[{:keys [theme-color f-display-picture-comp cover-uri title-comp theme]} top-inset scroll-y]
(let [input-range [0 (* threshold 0.33)]
picture-scale-down 0.4
size-animation (interpolate scroll-y input-range [80 (* 80 picture-scale-down)])
@ -38,21 +39,23 @@
border-animation (interpolate scroll-y input-range [12 0])]
[rn/view
{:style {:height header-height
:background-color (or theme-color (colors/theme-colors colors/white colors/neutral-95))
:background-color (or theme-color
(colors/theme-colors colors/white colors/neutral-95 theme))
:margin-top (when platform/ios? (- top-inset))}}
(when cover-uri
[fast-image/fast-image
{:style {:width "100%"
:height cover-height}
:source {:uri cover-uri}}])
[reanimated/view {:style (style/header-bottom-part border-animation)}
[reanimated/view {:style (style/header-bottom-part border-animation theme)}
[title-comp]]
[reanimated/view {:style (style/entity-picture size-animation)}
[reanimated/view {:style (style/entity-picture size-animation theme)}
[:f> f-display-picture-comp image-animation]]]))
(defn- f-animated-header-list
[{:keys [header-comp main-comp back-button-on-press] :as params}]
(let [window-height (:height (rn/get-window))
(let [theme (quo.theme/use-theme-value)
window-height (:height (rn/get-window))
{:keys [top bottom]} (safe-area/get-insets)
;; view height calculation is different because window height is different on iOS and Android:
view-height (if platform/ios?
@ -69,12 +72,12 @@
[rn/touchable-opacity
{:active-opacity 1
:on-press back-button-on-press
:style (style/button-container {:left 20})}
[quo/icon :i/arrow-left {:size 20 :color (colors/theme-colors colors/black colors/white)}]]
:style (style/button-container {:left 20 :theme theme})}
[quo/icon :i/arrow-left {:size 20 :color (colors/theme-colors colors/black colors/white theme)}]]
[rn/touchable-opacity
{:active-opacity 1
:style (style/button-container {:right 20})}
[quo/icon :i/options {:size 20 :color (colors/theme-colors colors/black colors/white)}]]
:style (style/button-container {:right 20 :theme theme})}
[quo/icon :i/options {:size 20 :color (colors/theme-colors colors/black colors/white theme)}]]
[reanimated/blur-view
{:blurAmount 32
:blurType :light
@ -86,7 +89,7 @@
{:data [nil]
:render-fn main-comp
:key-fn str
:header (reagent/as-element (header params top scroll-y))
:header (reagent/as-element (header (assoc params :theme theme) top scroll-y))
;; TODO: https://github.com/status-im/status-mobile/issues/14924
:scroll-event-throttle 8
:on-scroll (fn [event] (scroll-handler event initial-y scroll-y))}]]))

19
src/quo2/components/header.cljs
View File

@ -3,6 +3,7 @@
[quo2.components.buttons.button.view :as button]
[quo2.components.markdown.text :as text]
[quo2.foundations.colors :as colors]
[quo2.theme :as quo.theme]
[react-native.core :as rn]
[react-native.reanimated :as reanimated]
[reagent.core :as reagent]))
@ -10,11 +11,12 @@
(def header-height 56)
(defn header-wrapper-style
[{:keys [height border-bottom background]}]
[{:keys [height border-bottom background theme]}]
(merge
{:background-color (colors/theme-colors
colors/neutral-5
colors/neutral-95)
colors/neutral-95
theme)
:height height}
(when background
{:background-color background})
@ -22,7 +24,8 @@
{:border-bottom-width 1
:border-bottom-color (colors/theme-colors
colors/neutral-5
colors/neutral-95)})))
colors/neutral-95
theme)})))
(def absolute-fill
{:position :absolute
@ -129,7 +132,7 @@
:size :large}
title])])
(defn header
(defn- header-internal
[{:keys [left-width right-width]}]
(let [layout (reagent/atom {:left {:width (or left-width 8)
:height header-height}
@ -153,7 +156,7 @@
[{:keys [left-accessories left-component border-bottom
right-accessories right-component insets get-layout
title subtitle title-component style title-align
background]
background theme]
:or {title-align :center
border-bottom false}}]
(let [status-bar-height (get insets :top 0)
@ -161,7 +164,8 @@
[reanimated/view
{:style (header-wrapper-style {:height height
:background background
:border-bottom border-bottom})}
:border-bottom border-bottom
:theme theme})}
[rn/view
{:pointer-events :box-none
:height status-bar-height}]
@ -192,7 +196,6 @@
:subtitle subtitle
:title-align title-align
:component title-component}]]
[rn/view
{:style right-style
:on-layout (handle-layout :right get-layout)
@ -200,3 +203,5 @@
[header-actions
{:accessories right-accessories
:component right-component}]]]]]]))))
(def header (quo.theme/with-theme header-internal))

20
src/quo2/components/loaders/skeleton.cljs
View File

@ -3,7 +3,8 @@
[react-native.core :as rn]
[react-native.masked-view :as masked-view]
[react-native.reanimated :as reanimated]
[reagent.core :as reagent]))
[reagent.core :as reagent]
[quo2.theme :as quo.theme]))
(def message-skeleton-height 54)
@ -22,10 +23,10 @@
;; Standlone message skeleton
(defn- f-message-skeleton
{:deprecated "quo2.components.loaders.skeleton-list.view should be used instead"}
[]
[{:keys [theme]}]
(let [color (colors/theme-colors colors/neutral-5 colors/neutral-70)
loading-color (colors/theme-colors colors/neutral-10 colors/neutral-60)
(let [color (colors/theme-colors colors/neutral-5 colors/neutral-70 theme)
loading-color (colors/theme-colors colors/neutral-10 colors/neutral-60 theme)
content-width (rand-nth message-content-width)
author-width (content-width :author)
message-width (content-width :message)
@ -76,14 +77,17 @@
:end {:x 1 :y 0}
:style animated-gradient-style}]]]))
(defn skeleton
[parent-height]
(defn- view-internal
[{:keys [parent-height theme]}]
(let [number-of-skeletons (int (Math/floor (/ parent-height message-skeleton-height)))]
[rn/view
{:style {:background-color (colors/theme-colors
colors/white
colors/neutral-90)
colors/neutral-90
theme)
:flex 1}}
(doall
(for [n (range number-of-skeletons)]
[:f> f-message-skeleton {:key n}]))]))
[:f> f-message-skeleton {:key n :theme theme}]))]))
(def view (quo.theme/with-theme view-internal))

11
src/quo2/components/loaders/skeleton_list/view.cljs
View File

@ -34,8 +34,8 @@
:color color})}])]])
(defn- f-animated-skeleton-view
[{:keys [style color skeleton-height animated? translate-x window-width] :as data}]
(let [loading-color (colors/theme-colors colors/neutral-10 colors/neutral-60)]
[{:keys [style color skeleton-height animated? translate-x window-width theme] :as data}]
(let [loading-color (colors/theme-colors colors/neutral-10 colors/neutral-60 theme)]
(rn/use-effect
(fn []
@ -73,10 +73,9 @@
:height "100%"})
skeleton-height (get-in constants/layout-dimensions [content :height])
number-of-skeletons (int (Math/ceil (/ parent-height skeleton-height)))
color (cond
(and blur? (= theme :dark)) colors/white-opa-5
(= theme :dark) colors/neutral-90
:else colors/neutral-5)
color (if (and blur? (= theme :dark))
colors/white-opa-5
(colors/theme-colors colors/neutral-5 colors/neutral-90 theme))
component (if animated? animated-skeleton-view static-skeleton-view)]
[rn/view
{:style {:padding 8}

30
src/quo2/components/settings/style.cljs → src/quo2/components/settings/privacy_option/style.cljs
View File

@ -1,4 +1,4 @@
(ns quo2.components.settings.style
(ns quo2.components.settings.privacy-option.style
(:require [quo2.foundations.colors :as colors]))
(def bullet-container
@ -8,8 +8,8 @@
:align-self :flex-start})
(defn bullet
[]
{:background-color (colors/theme-colors colors/neutral-40 colors/neutral-50)
[theme]
{:background-color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)
:border-radius 100
:width 8
:height 8
@ -28,23 +28,23 @@
:padding-horizontal 12})
(defn selection-indicator-container
[active?]
[active? theme]
{:height 20
:width 20
:border-radius 20
:border-width 1
:border-color (if active?
(colors/theme-colors colors/primary-50 colors/primary-60)
(colors/theme-colors colors/neutral-20 colors/neutral-80))})
(colors/theme-colors colors/primary-50 colors/primary-60 theme)
(colors/theme-colors colors/neutral-20 colors/neutral-80 theme))})
(defn selection-indicator
[active?]
[active? theme]
{:margin-left :auto
:height 14
:width 14
:background-color (if active?
(colors/theme-colors colors/primary-50 colors/primary-60)
(colors/theme-colors colors/white-opa-40 colors/neutral-80-opa-40))
(colors/theme-colors colors/primary-50 colors/primary-60 theme)
(colors/theme-colors colors/white-opa-40 colors/neutral-80-opa-40 theme))
:border-radius 20
:margin-right :auto
:margin-top :auto
@ -60,7 +60,7 @@
:align-self :center})
(defn card-footer
[]
[theme]
{:flex 1
:flex-direction :row
:justify-content :space-between
@ -70,8 +70,8 @@
:padding-vertical 12
:border-radius 12
:border-width 1
:background-color (colors/theme-colors colors/neutral-5 colors/neutral-90)
:border-color (colors/theme-colors colors/neutral-10 colors/neutral-80)})
:background-color (colors/theme-colors colors/neutral-5 colors/neutral-90 theme)
:border-color (colors/theme-colors colors/neutral-10 colors/neutral-80 theme)})
(def card-header-container
{:flex-direction :row
@ -85,9 +85,9 @@
:margin-left 4})
(defn privacy-option-card
[active?]
[active? theme]
{:border-radius 16
:border-width 1
:border-color (if active?
(colors/theme-colors colors/primary-50 colors/primary-60)
(colors/theme-colors colors/neutral-10 colors/neutral-80))})
(colors/theme-colors colors/primary-50 colors/primary-60 theme)
(colors/theme-colors colors/neutral-10 colors/neutral-80 theme))})

47
src/quo2/components/settings/privacy_option.cljs → src/quo2/components/settings/privacy_option/view.cljs
View File

@ -1,29 +1,30 @@
(ns quo2.components.settings.privacy-option
(ns quo2.components.settings.privacy-option.view
(:require [quo2.components.icon :as icons]
[quo2.components.markdown.text :as text]
[quo2.components.selectors.selectors.view :as selectors]
[quo2.components.settings.style :as style]
[quo2.components.settings.privacy-option.style :as style]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]))
[react-native.core :as rn]
[quo2.theme :as quo.theme]))
(defn- bullet
[]
[theme]
[rn/view {:style style/bullet-container}
[rn/view {:style (style/bullet)}]])
[rn/view {:style (style/bullet theme)}]])
(defn- unordered-list
[container-style list-items]
[{:keys [container-style theme]} list-items]
[rn/view {:style (merge style/list-container container-style)}
(for [item list-items]
^{:key (hash item)}
[rn/view {:style style/list-item}
[bullet]
[bullet theme]
[text/text {:size :paragraph-2} item]])])
(defn- card-footer
[{:keys [active? label on-toggle]}]
[{:keys [active? label on-toggle theme]}]
[rn/touchable-without-feedback
[rn/view {:style (style/card-footer)}
[rn/view {:style (style/card-footer theme)}
[rn/view {:style style/card-footer-label-container}
[text/text {:size :paragraph-2} label]]
[rn/view {:style style/card-footer-toggle-container}
@ -32,36 +33,42 @@
:on-change on-toggle}]]]])
(defn- selection-indicator
[active?]
[rn/view {:style (style/selection-indicator-container active?)}
[rn/view {:style (style/selection-indicator active?)}]])
[active? theme]
[rn/view {:style (style/selection-indicator-container active? theme)}
[rn/view {:style (style/selection-indicator active? theme)}]])
(defn- card-header
[{:keys [icon label active?]}]
[{:keys [icon label active? theme]}]
[rn/view {:style style/card-header-container}
[icons/icon icon
{:size 20
:color (colors/theme-colors colors/neutral-50 colors/neutral-40)}]
:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}]
[rn/view {:style style/card-header-label-container}
[text/text {:weight :semi-bold} label]]
[selection-indicator active?]])
(defn card
[{:keys [active? header footer list-items icon on-select on-toggle]
(defn- view-internal
[{:keys [active? header footer list-items icon on-select on-toggle theme]
:or {icon :i/world
active? false}}]
[rn/touchable-without-feedback
{:on-press on-select
:accessibility-label :privacy-option-card
:testID :privacy-option-card}
[rn/view (style/privacy-option-card active?)
[rn/view (style/privacy-option-card active? theme)
[card-header
{:active? active?
{:theme theme
:active? active?
:icon icon
:label header}]
[unordered-list (when-not footer {:margin-bottom 8}) list-items]
[unordered-list
{:theme theme
:container-style (when-not footer {:margin-bottom 8})} list-items]
(when footer
[card-footer
{:active? active?
{:theme theme
:active? active?
:label footer
:on-toggle on-toggle}])]])
(def view (quo.theme/with-theme view-internal))

2
src/quo2/components/wallet/keypair/view.cljs
View File

@ -67,7 +67,7 @@
[rn/view {:style {:margin-left 4}}
[icon/icon :i/keycard-card
{:size 16
:color (colors/theme-colors colors/neutral-50 colors/neutral-40)}]])])
:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}]])])
(defn- view-internal
[]

4
src/quo2/components/wallet/network_bridge/style.cljs
View File

@ -13,9 +13,9 @@
:opacity (when (= state :disabled) 0.3)})
(defn add-container
[]
[theme]
{:border-style :dashed
:border-color (colors/theme-colors colors/neutral-30 colors/neutral-70)
:border-color (colors/theme-colors colors/neutral-30 colors/neutral-70 theme)
:justify-content :center
:align-items :center
:padding-vertical 0

4
src/quo2/components/wallet/network_bridge/view.cljs
View File

@ -11,8 +11,8 @@
(defn network-bridge-add
[{:keys [network state]}]
[rn/view {:style (merge (style/container network state) (style/add-container))}
[{:keys [network state theme]}]
[rn/view {:style (merge (style/container network state) (style/add-container theme))}
[icon/icon :i/add-circle {:size 12 :no-color true}]])
(defn view-internal

4
src/quo2/core.cljs
View File

@ -100,7 +100,7 @@
quo2.components.selectors.selectors.view
quo2.components.settings.accounts.view
quo2.components.settings.data-item.view
quo2.components.settings.privacy-option
quo2.components.settings.privacy-option.view
quo2.components.settings.reorder-item.view
quo2.components.settings.settings-item.view
quo2.components.settings.category.view
@ -306,7 +306,7 @@
(def checkbox quo2.components.selectors.selectors.view/checkbox)
;;;; Settings
(def privacy-option quo2.components.settings.privacy-option/card)
(def privacy-option quo2.components.settings.privacy-option.view/view)
(def account quo2.components.settings.accounts.view/account)
(def settings-item quo2.components.settings.settings-item.view/view)
(def reorder-item quo2.components.settings.reorder-item.view/reorder-item)

52
src/status_im/ui/components/search_input/view.cljs
View File

@ -1,61 +1,9 @@
(ns status-im.ui.components.search-input.view
(:require [quo.core :as quo]
[quo.design-system.colors :as colors]
[quo2.foundations.colors :as quo2.colors]
[reagent.core :as reagent]
[utils.i18n :as i18n]))
(defn search-input
[{:keys [search-active?]}]
(let [input-ref (atom nil)
search-active? (or search-active? (reagent/atom nil))]
(fn [{:keys [on-focus on-change on-blur on-cancel search-filter auto-focus]}]
[quo/text-input
{:placeholder (i18n/label :t/search)
:accessibility-label :search-input
:blur-on-submit true
:multiline false
:get-ref #(reset! input-ref %)
:default-value search-filter
:auto-focus auto-focus
:on-cancel on-cancel
:show-cancel true
:auto-correct false
:auto-capitalize :none
:container-style {:border-radius 10
:border-width 1
:border-color (:ui-01 @colors/theme)
:background-color (quo2.colors/theme-colors quo2.colors/white
quo2.colors/neutral-90)
:overflow :hidden}
:input-style {:height 32
:padding-top 2
:padding-bottom 2
:background-color (quo2.colors/theme-colors quo2.colors/white
quo2.colors/neutral-90)}
:before {:icon :main-icons/search2
:style {:padding-horizontal 8
:background-color (quo2.colors/theme-colors
quo2.colors/white
quo2.colors/neutral-90)}
:on-press #(some-> ^js @input-ref
(.focus))
:icon-opts {:color (quo2.colors/theme-colors quo2.colors/neutral-50
quo2.colors/white)}}
:on-focus #(do
(when on-focus
(on-focus search-filter))
(reset! search-active? true))
:on-blur #(do
(when on-blur
(on-blur))
(reset! search-active? false))
:on-change (fn [e]
(let [^js native-event (.-nativeEvent ^js e)
text (.-text native-event)]
(when on-change
(on-change text))))}])))
(defn search-input-old
[{:keys [search-active?]}]
(let [input-ref (atom nil)

27
src/status_im2/contexts/chat/composer/style.cljs
View File

@ -3,15 +3,16 @@
[quo2.foundations.typography :as typography]
[react-native.platform :as platform]
[react-native.reanimated :as reanimated]
[status-im2.contexts.chat.composer.constants :as constants]))
[status-im2.contexts.chat.composer.constants :as constants]
[quo2.theme :as quo.theme]))
(defn shadow
[focused?]
[focused? theme]
(if platform/ios?
{:shadow-radius 20
:shadow-opacity (colors/theme-colors 0.1 0.7)
:shadow-opacity (colors/theme-colors 0.1 0.7 theme)
:shadow-color colors/neutral-100
:shadow-offset {:width 0 :height (colors/theme-colors -4 -8)}}
:shadow-offset {:width 0 :height (colors/theme-colors -4 -8 theme)}}
{:elevation (if @focused? 10 0)}))
(def composer-sheet-and-jump-to-container
@ -21,17 +22,17 @@
:right 0})
(defn sheet-container
[insets {:keys [focused?]} {:keys [container-opacity]}]
[insets {:keys [focused?]} {:keys [container-opacity]} theme]
(reanimated/apply-animations-to-style
{:opacity container-opacity}
(merge
{:border-top-left-radius 20
:border-top-right-radius 20
:padding-horizontal 20
:background-color (colors/theme-colors colors/white colors/neutral-95)
:background-color (colors/theme-colors colors/white colors/neutral-95 theme)
:z-index 3
:padding-bottom (:bottom insets)}
(shadow focused?))))
(shadow focused? theme))))
(def bar-container
{:height constants/bar-container-height
@ -43,11 +44,11 @@
:align-items :center})
(defn bar
[]
[theme]
{:width 32
:height 4
:border-radius 100
:background-color (colors/theme-colors colors/neutral-100-opa-5 colors/white-opa-10)})
:background-color (colors/theme-colors colors/neutral-100-opa-5 colors/white-opa-10 theme)})
(defn input-container
[height max-height]
@ -67,9 +68,9 @@
[{:keys [saved-emoji-kb-extra-height]}
{:keys [focused? maximized?]}
{:keys [link-previews? images]}
max-height]
{:keys [max-height theme]}]
(merge typography/paragraph-1
{:color (colors/theme-colors :black :white)
{:color (colors/theme-colors :black :white theme)
:text-align-vertical :top
:position (if @saved-emoji-kb-extra-height :relative :absolute)
:top 0
@ -105,10 +106,10 @@
:overflow :hidden}))
(defn blur-view
[]
[theme]
{:style {:flex 1}
:blur-radius (if platform/ios? 20 10)
:blur-type (colors/theme-colors :light :dark)
:blur-type (quo.theme/theme-value :light :dark theme)
:blur-amount 20})
(defn shell-button

12
src/status_im2/contexts/chat/composer/sub_view.cljs
View File

@ -10,18 +10,18 @@
[utils.re-frame :as rf]))
(defn bar
[]
[theme]
[rn/view {:style style/bar-container}
[rn/view {:style (style/bar)}]])
[rn/view {:style (style/bar theme)}]])
(defn f-blur-view
[layout-height focused?]
[{:keys [layout-height focused? theme]}]
[reanimated/view {:style (style/blur-container layout-height focused?)}
[blur/view (style/blur-view)]])
[blur/view (style/blur-view theme)]])
(defn blur-view
[layout-height focused?]
[:f> f-blur-view layout-height focused?])
[props]
[:f> f-blur-view props])
(defn- f-shell-button
[{:keys [focused?]} scroll-to-bottom-fn show-floating-scroll-down-button?]

24
src/status_im2/contexts/chat/composer/view.cljs
View File

@ -23,7 +23,7 @@
[status-im2.contexts.chat.composer.handlers :as handler]
[status-im2.contexts.chat.composer.gradients.view :as gradients]
[status-im2.contexts.chat.composer.selection :as selection]
[quo2.theme :as theme]))
[quo2.theme :as quo.theme]))
(defn sheet-component
[{:keys [insets
@ -32,7 +32,8 @@
window-height
blur-height
opacity
background-y]} props state]
background-y
theme]} props state]
(let [{:keys [chat-screen-loaded?]
:as subscriptions} (utils/init-subs)
content-height (reagent/atom (or (:input-content-height
@ -87,7 +88,7 @@
{:gesture
(drag-gesture/drag-gesture props state animations subscriptions dimensions keyboard-shown)}
[reanimated/view
{:style (style/sheet-container insets state animations)
{:style (style/sheet-container insets state animations theme)
:on-layout #(handler/layout % state blur-height)}
[sub-view/bar]
(when chat-screen-loaded?
@ -119,13 +120,17 @@
:on-change-text #(handler/change-text % props state)
:on-selection-change #(handler/selection-change % props state)
:on-selection #(selection/on-selection % props state)
:keyboard-appearance (theme/theme-value :light :dark)
:keyboard-appearance (quo.theme/theme-value :light :dark)
:max-height max-height
:max-font-size-multiplier 1
:multiline true
:placeholder (i18n/label :t/type-something)
:placeholder-text-color (colors/theme-colors colors/neutral-30 colors/neutral-50)
:style (style/input-text props state subscriptions max-height)
:style (style/input-text props
state
subscriptions
{:max-height max-height
:theme theme})
:max-length constants/max-text-size
:accessibility-label :chat-message-input}]]
(when chat-screen-loaded?
@ -139,6 +144,7 @@
(defn composer
[{:keys [insets scroll-to-bottom-fn show-floating-scroll-down-button?]}]
(let [window-height (:height (rn/get-window))
theme (quo.theme/use-theme-value)
opacity (reanimated/use-shared-value 0)
background-y (reanimated/use-shared-value (- window-height))
blur-height (reanimated/use-shared-value (+ constants/composer-default-height
@ -149,10 +155,14 @@
:show-floating-scroll-down-button? show-floating-scroll-down-button?
:blur-height blur-height
:opacity opacity
:background-y background-y}
:background-y background-y
:theme theme}
props (utils/init-props)
state (utils/init-state)]
[rn/view (when platform/ios? {:style {:z-index 1}})
[reanimated/view {:style (style/background opacity background-y window-height)}]
[sub-view/blur-view blur-height (:focused? state)]
[sub-view/blur-view
{:layout-height blur-height
:focused? (:focused? state)
:theme theme}]
[:f> sheet-component extra-params props state]]))

4
src/status_im2/contexts/chat/home/contact_request/style.cljs
View File

@ -9,11 +9,11 @@
:align-items :center})
(defn contact-requests-icon
[]
[theme]
{:justify-content :center
:align-items :center
:width 32
:height 32
:border-radius 16
:border-width 1
:border-color (colors/theme-colors colors/neutral-20 colors/neutral-80)})
:border-color (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)})

19
src/status_im2/contexts/chat/home/contact_request/view.cljs
View File

@ -6,7 +6,8 @@
[react-native.core :as rn]
[status-im2.contexts.shell.activity-center.notification-types :as notification-types]
[status-im2.contexts.chat.home.contact-request.style :as style]
[utils.re-frame :as rf]))
[utils.re-frame :as rf]
[quo2.theme :as quo.theme]))
(defn get-display-name
[{:keys [chat-id message]}]
@ -32,8 +33,8 @@
" " (- (count requests) 2)
" " (i18n/label :t/more))))
(defn contact-requests
[requests]
(defn- view-internal
[{:keys [theme requests]}]
(let [customization-color (rf/sub [:profile/customization-color])]
[rn/touchable-opacity
{:active-opacity 1
@ -43,20 +44,22 @@
{:filter-status :unread
:filter-type notification-types/contact-request}]))
:style style/contact-requests}
[rn/view {:style (style/contact-requests-icon)}
[quo/icon :i/pending-user {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)}]]
[rn/view {:style (style/contact-requests-icon theme)}
[quo/icon :i/pending-user
{:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}]]
[rn/view {:style {:margin-left 8 :flex 1}}
[quo/text
{:size :paragraph-1
:weight :semi-bold
:style {:color (colors/theme-colors colors/neutral-100 colors/white)}}
:weight :semi-bold}
(i18n/label :t/pending-requests)]
[quo/text
{:size :paragraph-2
:style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)}}
:style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
(requests-summary requests)]]
[quo/counter
{:container-style {:margin-right 2}
:customization-color customization-color
:accessibility-label :pending-contact-requests-count}
(count requests)]]))
(def view (quo.theme/with-theme view-internal))

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

@ -97,8 +97,8 @@
:header [:<>
[common.header-spacing/view]
(when (seq pending-contact-requests)
[contact-request/contact-requests
pending-contact-requests])]
[contact-request/view
{:requests pending-contact-requests}])]
:sections items
:sticky-section-headers-enabled false
:render-section-header-fn contact-list/contacts-section-header

16
src/status_im2/contexts/chat/messages/content/view.cljs
View File

@ -25,7 +25,8 @@
[utils.datetime :as datetime]
[reagent.core :as reagent]
[utils.address :as address]
[react-native.gesture :as gesture]))
[react-native.gesture :as gesture]
[quo2.theme :as quo.theme]))
(def delivery-state-showing-time-ms 3000)
@ -107,10 +108,10 @@
(declare on-long-press)
(defn user-message-content
(defn- user-message-content-internal
[]
(let [show-delivery-state? (reagent/atom false)]
(fn [{:keys [message-data context keyboard-shown? show-reactions? show-user-info?]}]
(fn [{:keys [message-data context keyboard-shown? show-reactions? show-user-info? theme]}]
(let [{:keys [content-type quoted-message content
outgoing outgoing-status pinned-by]} message-data
first-image (first (:album message-data))
@ -133,7 +134,7 @@
{:accessibility-label (if (and outgoing (= outgoing-status :sending))
:message-sending
:message-sent)
:underlay-color (colors/theme-colors colors/neutral-5 colors/neutral-90)
:underlay-color (colors/theme-colors colors/neutral-5 colors/neutral-90 theme)
:style (style/user-message-content
{:first-in-group? (:first-in-group? message-data)
:outgoing outgoing
@ -194,12 +195,15 @@
(when show-reactions?
[reactions/message-reactions-row message-data
[rn/view {:pointer-events :none}
[user-message-content
{:message-data message-data
[user-message-content-internal
{:theme theme
:message-data message-data
:context context
:keyboard-shown? keyboard-shown?
:show-reactions? false}]]])]]))))
(def user-message-content (quo.theme/with-theme user-message-content-internal))
(defn on-long-press
[message-data context keyboard-shown?]
(rf/dispatch [:dismiss-keyboard])

13
src/status_im2/contexts/chat/messages/list/style.cljs
View File

@ -18,29 +18,30 @@
{:padding-vertical 16})
(defn header-container
[show?]
[show? theme]
{:display (if show? :flex :none)
:background-color (colors/theme-colors colors/white colors/neutral-100)
:background-color (colors/theme-colors colors/white colors/neutral-100 theme)
:top (- overscroll-cover-height)
:margin-bottom (- overscroll-cover-height)})
(defn header-cover
[cover-bg-color]
[cover-bg-color theme]
{:flex 1
:height (+ overscroll-cover-height cover-height)
:background-color (colors/theme-colors
(colors/custom-color cover-bg-color 50 20)
(colors/custom-color cover-bg-color 50 40))})
(colors/custom-color cover-bg-color 50 40)
theme)})
(defn header-bottom-part
[animation]
[animation theme]
(reanimated/apply-animations-to-style
{:border-top-right-radius animation
:border-top-left-radius animation}
{:top -16
:margin-bottom -16
:padding-bottom 24
:background-color (colors/theme-colors colors/white colors/neutral-95)}))
:background-color (colors/theme-colors colors/white colors/neutral-95 theme)}))
(def header-avatar
{:top header-avatar-top-offset

52
src/status_im2/contexts/chat/messages/list/view.cljs
View File

@ -19,7 +19,8 @@
[status-im2.contexts.chat.messages.navigation.style :as navigation.style]
[status-im2.contexts.shell.jump-to.constants :as jump-to.constants]
[utils.i18n :as i18n]
[utils.re-frame :as rf]))
[utils.re-frame :as rf]
[quo2.theme :as quo.theme]))
(defonce ^:const threshold-percentage-to-show-floating-scroll-down-button 75)
(defonce ^:const loading-indicator-extra-spacing 250)
@ -83,8 +84,8 @@
on-loaded])
(if platform/low-device? 700 100)))))
(defn contact-icon
[{:keys [ens-verified added?]}]
(defn- contact-icon
[{:keys [ens-verified added?]} theme]
(when (or ens-verified added?)
[rn/view
{:style {:padding-left 10
@ -93,18 +94,21 @@
[quo/icon :i/verified
{:no-color true
:size 20
:color (colors/theme-colors colors/success-50 colors/success-60)}]
:color (colors/theme-colors
(colors/custom-color :success 50)
(colors/custom-color :success 60)
theme)}]
(when added?
[quo/icon :i/contact
{:no-color true
:size 20
:color (colors/theme-colors colors/primary-50 colors/primary-60)}]))]))
:color (colors/theme-colors colors/primary-50 colors/primary-60 theme)}]))]))
(def header-extrapolation-option
{:extrapolateLeft "clamp"
:extrapolateRight "clamp"})
(defn skeleton-list-props
(defn- skeleton-list-props
[content parent-height animated?]
{:content content
:parent-height parent-height
@ -128,9 +132,9 @@
[quo/skeleton-list (skeleton-list-props :messages parent-height true)]])))
(defn list-header
[insets able-to-send-message?]
[insets able-to-send-message? theme]
[rn/view
{:background-color (colors/theme-colors colors/white colors/neutral-95)
{:background-color (colors/theme-colors colors/white colors/neutral-95 theme)
:height (+ (if able-to-send-message?
(+ composer.constants/composer-default-height
jump-to.constants/floating-shell-button-height
@ -190,7 +194,7 @@
chat-id]))}]}]))
(defn f-list-footer
[{:keys [chat scroll-y cover-bg-color on-layout]}]
[{:keys [chat scroll-y cover-bg-color on-layout theme]}]
(let [{:keys [chat-id chat-name emoji chat-type
group-chat]} chat
all-loaded? (rf/sub [:chats/all-loaded? chat-id])
@ -211,10 +215,10 @@
header-extrapolation-option)]
[rn/view (add-inverted-y-android {:flex 1})
[rn/view
{:style (style/header-container all-loaded?)
{:style (style/header-container all-loaded? theme)
:on-layout on-layout}
[rn/view {:style (style/header-cover cover-bg-color)}]
[reanimated/view {:style (style/header-bottom-part border-animation)}
[rn/view {:style (style/header-cover cover-bg-color theme)}]
[reanimated/view {:style (style/header-bottom-part border-animation theme)}
[rn/view {:style style/header-avatar}
[rn/view {:style {:align-items :flex-start}}
(when-not group-chat
@ -229,7 +233,7 @@
:style {:margin-top (if group-chat 54 12)}
:number-of-lines 1}
display-name
[contact-icon contact]]
[contact-icon contact theme]]
(when bio
[quo/text {:style style/bio}
bio])
@ -251,11 +255,12 @@
(reset! messages-view-header-height (+ height y))))
(defn render-fn
[{:keys [type value content-type] :as message-data} _ _
[{:keys [type value content-type theme] :as message-data} _ _
{:keys [context keyboard-shown?]}]
(when (not= content-type constants/content-type-contact-request)
[rn/view
(add-inverted-y-android {:background-color (colors/theme-colors colors/white colors/neutral-95)})
(add-inverted-y-android
{:background-color (colors/theme-colors colors/white colors/neutral-95 theme)})
(cond
(= type :datemark)
[quo/divider-date value]
@ -275,7 +280,8 @@
(defn f-messages-list-content
[{:keys [chat insets scroll-y content-height cover-bg-color keyboard-shown?]}]
(let [{window-height :height} (rn/get-window)
(let [theme (quo.theme/use-theme-value)
{window-height :height} (rn/get-window)
{:keys [keyboard-height]} (hooks/use-keyboard)
context (rf/sub [:chats/current-chat-message-list-view-context])
messages (rf/sub [:chats/raw-chat-messages-stream (:chat-id chat)])
@ -286,16 +292,18 @@
{:key-fn list-key-fn
:ref list-ref
:header [:<>
[list-header insets (:able-to-send-message? context)]
[list-header insets (:able-to-send-message? context) theme]
(when (= (:chat-type chat) constants/private-group-chat-type)
[list-group-chat-header chat])]
:footer [list-footer
{:chat chat
{:theme theme
:chat chat
:scroll-y scroll-y
:cover-bg-color cover-bg-color
:on-layout footer-on-layout}]
:data messages
:render-data {:context context
:render-data {:theme theme
:context context
:keyboard-shown? keyboard-shown?
:insets insets}
:render-fn render-fn
@ -341,10 +349,12 @@
20)
(colors/custom-color cover-bg-color
50
40))
40)
theme)
(colors/theme-colors
colors/white
colors/neutral-95))})
colors/neutral-95
theme))})
;;TODO(rasom) https://github.com/facebook/react-native/issues/30034
:inverted (when platform/ios? true)
:on-layout (fn [e]

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

@ -1,7 +1,7 @@
(ns status-im2.contexts.chat.messages.navigation.view
(:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[quo2.theme :as theme]
[quo2.theme :as quo.theme]
[re-frame.db]
[react-native.blur :as blur]
[react-native.core :as rn]
@ -108,4 +108,4 @@
[params]
[:f> f-view params])
(def navigation-view (theme/with-theme internal-navigation-view))
(def navigation-view (quo.theme/with-theme internal-navigation-view))

4
src/status_im2/contexts/shell/jump_to/components/floating_screens/style.cljs
View File

@ -5,7 +5,7 @@
(defn screen
[{:keys [screen-left screen-top screen-width screen-height screen-border-radius screen-z-index]}
screen-id]
{:keys [screen-id theme]}]
(reanimated/apply-animations-to-style
{:left screen-left
:top screen-top
@ -13,7 +13,7 @@
:height screen-height
:border-radius screen-border-radius
:z-index screen-z-index}
{:background-color (colors/theme-colors colors/white colors/neutral-95)
{:background-color (colors/theme-colors colors/white colors/neutral-95 theme)
:overflow :hidden
;; KeyboardAvoidingView which is used for chat screen composer,
;; not working when we use :absolute layout. One fix is to add

36
src/status_im2/contexts/shell/jump_to/components/floating_screens/view.cljs
View File

@ -8,27 +8,31 @@
[status-im2.contexts.shell.jump-to.animation :as animation]
[status-im2.contexts.shell.jump-to.constants :as shell.constants]
[status-im2.contexts.communities.overview.view :as communities.overview]
[status-im2.contexts.shell.jump-to.components.floating-screens.style :as style]))
[status-im2.contexts.shell.jump-to.components.floating-screens.style :as style]
[quo2.theme :as quo.theme]))
(def screens-map
{shell.constants/community-screen communities.overview/overview
shell.constants/chat-screen chat/chat})
(defn f-screen
[screen-id {:keys [id animation clock] :as screen-param}]
;; First render screen, then animate (smoother animation)
(rn/use-effect
(fn []
(animation/animate-floating-screen screen-id screen-param))
[animation id clock])
[reanimated/view
{:style (style/screen (get @state/shared-values-atom screen-id) screen-id)}
[rn/view
{:style (style/screen-container (utils/dimensions))
:accessibility-label (str screen-id "-floating-screen")
:accessible true
:key id}
[(get screens-map screen-id) id]]])
[{:keys [screen-id id animation clock] :as screen-param}]
(let [theme (quo.theme/use-theme-value)]
;; First render screen, then animate (smoother animation)
(rn/use-effect
(fn []
(animation/animate-floating-screen screen-id screen-param))
[animation id clock])
[reanimated/view
{:style (style/screen (get @state/shared-values-atom screen-id)
{:theme theme
:screen-id screen-id})}
[rn/view
{:style (style/screen-container (utils/dimensions))
:accessibility-label (str screen-id "-floating-screen")
:accessible true
:key id}
[(get screens-map screen-id) id]]]))
;; Currently chat screen and events both depends on current-chat-id, once we remove
;; use of current-chat-id from view then we can keep last chat loaded, for fast navigation
@ -36,7 +40,7 @@
[screen-id]
(let [screen-param (rf/sub [:shell/floating-screen screen-id])]
(when screen-param
[:f> f-screen screen-id screen-param])))
[:f> f-screen (assoc screen-param :screen-id screen-id)])))
(defn view
[]

4
src/status_im2/contexts/shell/jump_to/components/home_stack/style.cljs
View File

@ -4,7 +4,7 @@
[status-im2.contexts.shell.jump-to.utils :as utils]))
(defn home-stack
[shared-values {:keys [width height]}]
[shared-values {:keys [width height theme]}]
(reanimated/apply-animations-to-style
{:top (:home-stack-top shared-values)
:left (:home-stack-left shared-values)
@ -14,7 +14,7 @@
:transform [{:scale (:home-stack-scale shared-values)}]}
{:border-bottom-left-radius 20
:border-bottom-right-radius 20
:background-color (colors/theme-colors colors/white colors/neutral-95)
:background-color (colors/theme-colors colors/white colors/neutral-95 theme)
:overflow :hidden
:position :absolute
:width width

8
src/status_im2/contexts/shell/jump_to/components/home_stack/view.cljs
View File

@ -8,7 +8,8 @@
[status-im2.contexts.communities.home.view :as communities]
[status-im2.contexts.shell.jump-to.constants :as shell.constants]
[status-im2.contexts.shell.jump-to.components.home-stack.style :as style]
[status-im.ui.screens.browser.stack :as browser.stack]))
[status-im.ui.screens.browser.stack :as browser.stack]
[quo2.theme :as quo.theme]))
(defn load-stack?
[stack-id]
@ -44,8 +45,9 @@
(defn f-home-stack
[]
(let [shared-values @state/shared-values-atom]
[reanimated/view {:style (style/home-stack shared-values (utils/dimensions))}
(let [shared-values @state/shared-values-atom
theme (quo.theme/use-theme-value)]
[reanimated/view {:style (style/home-stack shared-values (assoc (utils/dimensions) :theme theme))}
[lazy-screen :communities-stack shared-values]
[lazy-screen :chats-stack shared-values]
[lazy-screen :browser-stack shared-values]