From 5a55c6ccb2e669c1646eca1bf7bb1ed47910769a Mon Sep 17 00:00:00 2001 From: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com> Date: Thu, 15 Sep 2022 19:38:17 +0800 Subject: [PATCH] [Feature][#13915] Added New Messages component * [Feature][#13915] Added New Messages component * [Feature] [#13915] Rename component new-messages to new-messages-header * [Improvements][#13915] Using theme-colors for fetching light/dark colors * [Improvements][#13915] Moved text to translations and added Quo2 colors for background * [Fixes][#13915] Naming Conventions and Grouping for New Messages Component --- .../components/dividers/new_messages.cljs | 74 +++++++++++++++ src/quo2/foundations/colors.cljs | 90 ++++++++++++++++--- src/quo2/screens/dividers/new_messages.cljs | 56 ++++++++++++ src/quo2/screens/main.cljs | 4 + translations/en.json | 3 +- 5 files changed, 215 insertions(+), 12 deletions(-) create mode 100644 src/quo2/components/dividers/new_messages.cljs create mode 100644 src/quo2/screens/dividers/new_messages.cljs diff --git a/src/quo2/components/dividers/new_messages.cljs b/src/quo2/components/dividers/new_messages.cljs new file mode 100644 index 0000000000..e379de6a4f --- /dev/null +++ b/src/quo2/components/dividers/new_messages.cljs @@ -0,0 +1,74 @@ +(ns quo2.components.dividers.new-messages + (:require [quo.react-native :as rn] + [quo2.components.markdown.text :as text] + [quo2.foundations.colors :as colors] + [status-im.i18n.i18n :as i18n] + [status-im.ui.components.react :as react])) + +(def themes + {:light {:primary {:text-color colors/primary-50 + :background-color colors/primary-50-opa-5} + :purple {:text-color colors/purple-50 + :background-color colors/purple-50-opa-5} + :indigo {:text-color colors/indigo-50 + :background-color colors/indigo-50-opa-5} + :turquoise {:text-color colors/turquoise-50 + :background-color colors/turquoise-50-opa-5} + :blue {:text-color colors/blue-50 + :background-color colors/blue-50-opa-5} + :green {:text-color colors/green-50 + :background-color colors/green-50-opa-5} + :yellow {:text-color colors/yellow-50 + :background-color colors/yellow-50-opa-5} + :orange {:text-color colors/orange-50 + :background-color colors/orange-50-opa-5} + :red {:text-color colors/red-50 + :background-color colors/red-50-opa-5} + :pink {:text-color colors/pink-50 + :background-color colors/pink-50-opa-5} + :brown {:text-color colors/brown-50 + :background-color colors/brown-50-opa-5} + :beige {:text-color colors/beige-50 + :background-color colors/beige-50-opa-5}} + :dark {:primary {:text-color colors/primary-60 + :background-color colors/primary-60-opa-5} + :purple {:text-color colors/purple-60 + :background-color colors/purple-60-opa-5} + :indigo {:text-color colors/indigo-60 + :background-color colors/indigo-60-opa-5} + :turquoise {:text-color colors/turquoise-60 + :background-color colors/turquoise-60-opa-5} + :blue {:text-color colors/blue-60 + :background-color colors/blue-60-opa-5} + :green {:text-color colors/green-60 + :background-color colors/green-60-opa-5} + :yellow {:text-color colors/yellow-60 + :background-color colors/yellow-60-opa-5} + :orange {:text-color colors/orange-60 + :background-color colors/orange-60-opa-5} + :red {:text-color colors/red-60 + :background-color colors/red-60-opa-5} + :pink {:text-color colors/pink-60 + :background-color colors/pink-60-opa-5} + :brown {:text-color colors/brown-60 + :background-color colors/brown-60-opa-5} + :beige {:text-color colors/beige-60 + :background-color colors/beige-60-opa-5}}}) + +(defn new-messages + "new-messages params - label, color" + [{:keys [label color] :or {label (i18n/label :new-messages-header) + color :primary}}] + (let [colors (colors/theme-colors (themes :light) (themes :dark)) + bg-color (get-in colors [color :background-color]) + text-color (get-in colors [color :text-color])] + [react/linear-gradient {:colors [bg-color "rgba(0,0,0,0)"] + :start {:x 0 :y 0} :end {:x 0 :y 1}} + [rn/view {:style {:padding-left 60 + :padding-vertical 12 + :padding-right 24}} + [text/text + {:size :paragraph-2 + :weight :medium + :style {:color text-color}} + label]]])) \ No newline at end of file diff --git a/src/quo2/foundations/colors.cljs b/src/quo2/foundations/colors.cljs index 21feab5501..409a55255f 100644 --- a/src/quo2/foundations/colors.cljs +++ b/src/quo2/foundations/colors.cljs @@ -105,6 +105,9 @@ (def primary-50-opa-30 (alpha primary-50 0.3)) (def primary-50-opa-40 (alpha primary-50 0.4)) +;;60 with transparency +(def primary-60-opa-5 (alpha primary-60 0.05)) + ;;;;Success ;;Solid @@ -186,39 +189,104 @@ (def info-50-opa-40 (alpha info-50 0.4)) ;; Customization +;;;;Purple (def purple-20 (alpha "#8661C1" 0.2)) (def purple-50 "#8661C1") -(def purple-60 (alpha "#8661C1" 0.6)) +(def purple-60 "#5E478C") + +;;with transparency +(def purple-50-opa-5 (alpha purple-50 0.05)) +(def purple-60-opa-5 (alpha purple-60 0.05)) + +;;;;Indigo (def indigo-20 (alpha "#496289" 0.2)) (def indigo-50 "#496289") -(def indigo-60 (alpha "#496289" 0.6)) +(def indigo-60 "#3D5273") + +;;with transparency +(def indigo-50-opa-5 (alpha indigo-50 0.05)) +(def indigo-60-opa-5 (alpha indigo-60 0.05)) + +;;;;Turquoise (def turquoise-20 (alpha "#448EA2" 0.2)) (def turquoise-50 "#448EA2") -(def turquoise-60 (alpha "#448EA2" 0.6)) +(def turquoise-60 "#397788") + +;;with transparency +(def turquoise-50-opa-5 (alpha turquoise-50 0.05)) +(def turquoise-60-opa-5 (alpha turquoise-60 0.05)) + +;;;;Blue (def blue-20 (alpha "#4CB4EF" 0.2)) (def blue-50 "#4CB4EF") -(def blue-60 (alpha "#4CB4EF" 0.6)) +(def blue-60 "#4097C9") + +;;with transparency +(def blue-50-opa-5 (alpha blue-50 0.05)) +(def blue-60-opa-5 (alpha blue-60 0.05)) + +;;;;Green (def green-20 (alpha "#5BCC95" 0.2)) (def green-50 "#5BCC95") -(def green-60 (alpha "#5BCC95" 0.6)) +(def green-60 "#4CAB7D") + +;;with transparency +(def green-50-opa-5 (alpha green-50 0.05)) +(def green-60-opa-5 (alpha green-60 0.05)) + +;;;;Yellow (def yellow-20 (alpha "#FFCB53" 0.2)) (def yellow-50 "#FFCB53") -(def yellow-60 (alpha "#FFCB53" 0.6)) +(def yellow-60 "#D6AA46") + +;;with transparency +(def yellow-50-opa-5 (alpha yellow-50 0.05)) +(def yellow-60-opa-5 (alpha yellow-60 0.05)) + +;;;;Orange (def orange-20 (alpha "#FB8F61" 0.2)) (def orange-50 "#FB8F61") -(def orange-60 (alpha "#FB8F61" 0.6)) +(def orange-60 "#D37851") + +;;with transparency +(def orange-50-opa-5 (alpha orange-50 0.05)) +(def orange-60-opa-5 (alpha orange-60 0.05)) + +;;;;Red (def red-20 (alpha "#F46666" 0.2)) (def red-50 "#F46666") -(def red-60 (alpha "#F46666" 0.6)) +(def red-60 "#CD5656") + +;;with transparency +(def red-50-opa-5 (alpha red-50 0.05)) +(def red-60-opa-5 (alpha red-60 0.05)) + +;;;;Pink (def pink-20 (alpha "#FC7BAB" 0.2)) (def pink-50 "#FC7BAB") -(def pink-60 (alpha "#FC7BAB" 0.6)) +(def pink-60 "#D46790") + +;;with transparency +(def pink-50-opa-5 (alpha pink-50 0.05)) +(def pink-60-opa-5 (alpha pink-60 0.05)) + +;;;;Brown (def brown-20 (alpha "#99604D" 0.2)) (def brown-50 "#99604D") -(def brown-60 (alpha "#805141" 0.6)) +(def brown-60 "#805141") + +;;with transparency +(def brown-50-opa-5 (alpha brown-50 0.05)) +(def brown-60-opa-5 (alpha brown-60 0.05)) + +;;;;Beige (def beige-20 (alpha "#CAAE93" 0.2)) (def beige-50 "#CAAE93") -(def beige-60 (alpha "#CAAE93" 0.6)) +(def beige-60 "#AA927C") + +;;with transparency +(def beige-50-opa-5 (alpha beige-50 0.05)) +(def beige-60-opa-5 (alpha beige-60 0.05)) (def shadow "rgba(9,16,28,0.04)") diff --git a/src/quo2/screens/dividers/new_messages.cljs b/src/quo2/screens/dividers/new_messages.cljs new file mode 100644 index 0000000000..2e74c0b94a --- /dev/null +++ b/src/quo2/screens/dividers/new_messages.cljs @@ -0,0 +1,56 @@ +(ns quo2.screens.dividers.new-messages + (:require [quo.react-native :as rn] + [reagent.core :as reagent] + [quo.previews.preview :as preview] + [quo2.foundations.colors :as colors] + [quo2.components.dividers.new-messages :as new-messages])) + +(def descriptor [{:label "Label" + :key :label + :type :text} + {:label "Color" + :key :color + :type :select + :options [{:key :primary + :value "Primary"} + {:key :purple + :value "Purple"} + {:key :indigo + :value "Indigo"} + {:key :turquoise + :value "Turquoise"} + {:key :blue + :value "Blue"} + {:key :green + :value "Green"} + {:key :yellow + :value "yellow"} + {:key :orange + :value "Orange"} + {:key :red + :value "Red"} + {:key :pink + :value "Pink"} + {:key :brown + :value "Brown"} + {:key :beige + :value "Beige"}]}]) +(defn cool-preview [] + (let [state (reagent/atom {:label "New messages" + :color :primary})] + (fn [] + [rn/view {:margin-bottom 50 + :padding 16} + [preview/customizer state descriptor] + [rn/view {:padding-vertical 60} + [new-messages/new-messages @state]]]))) + +(defn preview-new-messages [] + [rn/view {:background-color (colors/theme-colors + colors/white + colors/neutral-90) + :flex 1} + [rn/flat-list {:flex 1 + :keyboardShouldPersistTaps :always + :header [cool-preview] + :key-fn str}]]) \ No newline at end of file diff --git a/src/quo2/screens/main.cljs b/src/quo2/screens/main.cljs index ad7700692c..4e14f43647 100644 --- a/src/quo2/screens/main.cljs +++ b/src/quo2/screens/main.cljs @@ -13,6 +13,7 @@ [quo2.screens.buttons.button :as button] [quo2.screens.counter.counter :as counter] [quo2.screens.community.community-card-view :as community-card] + [quo2.screens.dividers.new-messages :as new-messages] [quo2.screens.info.info-message :as info-message] [quo2.screens.info.information-box :as information-box] [quo2.screens.markdown.text :as text] @@ -57,6 +58,9 @@ :counter [{:name :counter :insets {:top false} :component counter/preview-counter}] + :dividers [{:name :new-messages + :insets {:top false} + :component new-messages/preview-new-messages}] :info [{:name :info-message :insets {:top false} :component info-message/preview-info-message} diff --git a/translations/en.json b/translations/en.json index 47e85cec66..0d00e89b44 100644 --- a/translations/en.json +++ b/translations/en.json @@ -1778,6 +1778,7 @@ "music": "Music", "lifestyle": "Lifestyle", "podcasts": "Podcasts", - "NFT":"NFT" + "NFT":"NFT", + "new-messages-header": "New Messages" }