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 [rn/touchable-opacity
{:on-press on-press {:on-press on-press
:accessibility-label :emoji-reaction-add :accessibility-label :emoji-reaction-add
:style (style/add-reaction)} :style (style/add-reaction theme)}
[icons/icon :i/add-reaction [icons/icon :i/add-reaction
{:size 20 {: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" "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)] (let [numeric-value (int clicks)]
[rn/touchable-opacity [rn/touchable-opacity
{:on-press on-press {:on-press on-press
:on-long-press on-long-press :on-long-press on-long-press
:accessibility-label accessibility-label :accessibility-label accessibility-label
:style (style/reaction neutral?)} :style (style/reaction neutral? theme)}
[rn/image [rn/image
{:style {:width 16 :height 16} {:style {:width 16 :height 16}
:accessibility-label :emoji :accessibility-label :emoji
:source (resource/get-reaction emoji)}] :source (resource/get-reaction emoji)}]
[text/text [text/text
{:size :paragraph-2 {:size :paragraph-2
:weight :semi-bold :weight :semi-bold
:flex-direction :row :style style/reaction-count}
:align-items :center (str (if (pos? numeric-value) numeric-value 1))]]))
:justify-content :center}
(when (pos? numeric-value)
(str " " numeric-value))]]))
(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}) :height 24})
(defn add-reaction (defn add-reaction
[] [theme]
(merge reaction-styling (merge reaction-styling
{:padding-horizontal 9 {:padding-horizontal 8
:border-width 1 :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 (defn reaction
[neutral?] [neutral? theme]
(merge reaction-styling (merge reaction-styling
(cond-> {:border-color (colors/theme-colors colors/neutral-20
{:background-color (colors/theme-colors (if neutral? colors/neutral-80
colors/neutral-30 theme)
:transparent) :border-width 1
(if neutral? :background-color (if neutral?
colors/neutral-70 (colors/theme-colors colors/neutral-10
:transparent))} colors/neutral-80-opa-40)
(and (colors/dark?) (not neutral?)) :transparent)}))
(assoc :border-color colors/neutral-70
:border-width 1) (def reaction-count {:margin-left 4})
(and (not (colors/dark?)) (not neutral?))
(assoc :border-color colors/neutral-30
:border-width 1))))

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

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