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

[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
This commit is contained in:
Mohamed Javid 2022-09-15 19:38:17 +08:00 committed by GitHub
parent 38bbf84de4
commit 5a55c6ccb2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 215 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
src/quo2/components/dividers/new_messages.cljs Normal file
View File

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

90
src/quo2/foundations/colors.cljs
View File

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

56
src/quo2/screens/dividers/new_messages.cljs Normal file
View File

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

4
src/quo2/screens/main.cljs
View File

@ -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}

3
translations/en.json
View File

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