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

fix: quo2 reaction styles (size + colors) (#17224)

This commit is contained in:
Lungu Cristian 2023-09-14 12:21:11 +03:00 committed by GitHub
parent 0003800f05
commit 5d4fbe7ef1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 39 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/quo2/components/reactions/reaction.cljs
View File

@ -12,31 +12,32 @@
[rn/touchable-opacity
{:on-press on-press
:accessibility-label :emoji-reaction-add
:style (style/add-reaction)}
:style (style/add-reaction theme)}
[icons/icon :i/add-reaction
{:size 20
:color (colors/theme-colors colors/neutral-50 colors/white theme)}]])
:color (colors/theme-colors colors/neutral-50
colors/neutral-40
theme)}]])
(defn reaction
(def add-reaction (theme/with-theme add-reaction-internal))
(defn reaction-internal
"Add your emoji as a param here"
[{:keys [emoji clicks neutral? on-press accessibility-label on-long-press]}]
[{:keys [emoji clicks neutral? on-press accessibility-label on-long-press theme]}]
(let [numeric-value (int clicks)]
[rn/touchable-opacity
{:on-press on-press
:on-long-press on-long-press
:accessibility-label accessibility-label
:style (style/reaction neutral?)}
:style (style/reaction neutral? theme)}
[rn/image
{:style {:width 16 :height 16}
:accessibility-label :emoji
:source (resource/get-reaction emoji)}]
[text/text
{:size :paragraph-2
:weight :semi-bold
:flex-direction :row
:align-items :center
:justify-content :center}
(when (pos? numeric-value)
(str " " numeric-value))]]))
{:size :paragraph-2
:weight :semi-bold
:style style/reaction-count}
(str (if (pos? numeric-value) numeric-value 1))]]))
(def add-reaction (theme/with-theme add-reaction-internal))
(def reaction (theme/with-theme reaction-internal))

33
src/quo2/components/reactions/style.cljs
View File

@ -10,25 +10,24 @@
:height 24})
(defn add-reaction
[]
[theme]
(merge reaction-styling
{:padding-horizontal 9
{:padding-horizontal 8
:border-width 1
:border-color (colors/theme-colors colors/neutral-30 colors/neutral-70)}))
:border-color (colors/theme-colors colors/neutral-20
colors/neutral-70
theme)}))
(defn reaction
[neutral?]
[neutral? theme]
(merge reaction-styling
(cond->
{:background-color (colors/theme-colors (if neutral?
colors/neutral-30
:transparent)
(if neutral?
colors/neutral-70
:transparent))}
(and (colors/dark?) (not neutral?))
(assoc :border-color colors/neutral-70
:border-width 1)
(and (not (colors/dark?)) (not neutral?))
(assoc :border-color colors/neutral-30
:border-width 1))))
{:border-color (colors/theme-colors colors/neutral-20
colors/neutral-80
theme)
:border-width 1
:background-color (if neutral?
(colors/theme-colors colors/neutral-10
colors/neutral-80-opa-40)
:transparent)}))
(def reaction-count {:margin-left 4})

15
src/status_im2/contexts/quo_preview/reactions/react.cljs
View File

@ -1,6 +1,6 @@
(ns status-im2.contexts.quo-preview.reactions.react
(:require [clojure.string :as string]
[quo2.components.reactions.reaction :as quo2.reaction]
[quo2.core :as quo]
[react-native.core :as rn]
[reagent.core :as reagent]
[status-im2.constants :as constants]
@ -27,11 +27,14 @@
[preview/preview-container
{:state state
:descriptor descriptor}
[rn/view {:padding-bottom 150}
[rn/view
{:padding-bottom 150
:align-items :center}
[rn/view
{:padding-vertical 60
:justify-content :center
{:width 100
:padding-vertical 60
:justify-content :space-evenly
:flex-direction :row
:align-items :center}
[quo2.reaction/reaction @state]
[quo2.reaction/add-reaction @state]]]])))
[quo/reaction @state]
[quo/add-reaction]]]])))