[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

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]]]))

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)")
 

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}]])

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}

translations/en.json

@@ -1778,6 +1778,7 @@
     "music": "Music",
     "lifestyle": "Lifestyle",
     "podcasts": "Podcasts",
-    "NFT":"NFT"
+    "NFT":"NFT",
+    "new-messages-header": "New Messages"
     
 }