[13562] Wallet user avatar component (#13681)
* wallet user avatar component Conflicto Clean Mergo * linting Clean * rename is-theme-dark? * Conflicts resolve Clean * Linting * comments Clean * rename colors * Clean * Lint * Remove whitespace * Clean * Clen * Improve colors and used quo2.text Rebase * Consistent coloring Coloring * Rebase Rebase * [13565] icon-avatar component (#13692) * icon-avatar component Rebase * Add more colors Clean Clean * Linting Rebase * clean podfile.lock * Revert podfile * Conflicto solvado Add 20% opacity colors * Comments * Refactor to another folder * Improve colors * Lint * Merge develop Co-authored-by: Ibrahem Khalil <33176106+vampirekiddo@users.noreply.github.com> Clean Merge Co-authored-by: Ibrahem Khalil <33176106+vampirekiddo@users.noreply.github.com>
This commit is contained in:
Ibrahem Khalil
GitHub
parent
43861e0c15
commit
8352f622d6
|
|
@ -0,0 +1,102 @@
|
|||
(ns quo2.components.wallet-user-avatar
|
||||
(:require [quo.react-native :as rn]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.text :as text]
|
||||
[clojure.string :as clojure-string]))
|
||||
|
||||
(def themes {:light {:primary {:text-color colors/primary-50
|
||||
:background-color colors/primary-20}
|
||||
:purple {:text-color colors/purple-50
|
||||
:background-color colors/purple-20}
|
||||
:indigo {:text-color colors/indigo-50
|
||||
:background-color colors/indigo-20}
|
||||
:turquoise {:text-color colors/turquoise-50
|
||||
:background-color colors/turquoise-20}
|
||||
:blue {:text-color colors/blue-50
|
||||
:background-color colors/blue-20}
|
||||
:green {:text-color colors/green-50
|
||||
:background-color colors/green-20}
|
||||
:yellow {:text-color colors/yellow-50
|
||||
:background-color colors/yellow-20}
|
||||
:orange {:text-color colors/orange-50
|
||||
:background-color colors/orange-20}
|
||||
:red {:text-color colors/red-50
|
||||
:background-color colors/red-20}
|
||||
:pink {:text-color colors/pink-50
|
||||
:background-color colors/pink-20}
|
||||
:brown {:text-color colors/brown-50
|
||||
:background-color colors/brown-20}
|
||||
:beige {:text-color colors/beige-50
|
||||
:background-color colors/beige-20}}
|
||||
:dark {:primary {:text-color colors/primary-60
|
||||
:background-color colors/primary-50-opa-20}
|
||||
:purple {:text-color colors/purple-60
|
||||
:background-color colors/purple-20}
|
||||
:indigo {:text-color colors/indigo-60
|
||||
:background-color colors/indigo-20}
|
||||
:turquoise {:text-color colors/turquoise-60
|
||||
:background-color colors/turquoise-20}
|
||||
:blue {:text-color colors/blue-60
|
||||
:background-color colors/blue-20}
|
||||
:green {:text-color colors/green-60
|
||||
:background-color colors/green-20}
|
||||
:yellow {:text-color colors/yellow-60
|
||||
:background-color colors/yellow-20}
|
||||
:orange {:text-color colors/orange-60
|
||||
:background-color colors/orange-20}
|
||||
:red {:text-color colors/red-60
|
||||
:background-color colors/red-20}
|
||||
:pink {:text-color colors/pink-60
|
||||
:background-color colors/pink-20}
|
||||
:brown {:text-color colors/brown-60
|
||||
:background-color colors/brown-20}
|
||||
:beige {:text-color colors/beige-60
|
||||
:background-color colors/beige-20}}})
|
||||
|
||||
(def circle-sizes {:small 20
|
||||
:medium 32
|
||||
:large 48
|
||||
:x-large 80})
|
||||
|
||||
(def font-sizes {:small :label
|
||||
:medium :paragraph-2
|
||||
:large :paragraph-1
|
||||
:x-large :heading-1})
|
||||
|
||||
(def font-weights {:small :medium
|
||||
:medium :semi-bold
|
||||
:large :semi-bold
|
||||
:x-large :medium})
|
||||
|
||||
(defn wallet-user-avatar
|
||||
"params, first name, last name, color, size
|
||||
and if it's dark or not!"
|
||||
[{:keys [f-name l-name color size] :or {f-name "John"
|
||||
l-name "Doe"
|
||||
color :red
|
||||
size :x-large}}]
|
||||
(let [circle-size (size circle-sizes)
|
||||
dark? (colors/dark?)
|
||||
small? (= size :small)
|
||||
f-name-initial (-> f-name
|
||||
clojure-string/upper-case
|
||||
(subs 0 1))
|
||||
l-name-initial (-> l-name
|
||||
clojure-string/upper-case
|
||||
(subs 0 1))
|
||||
theme (if dark? :dark :light)
|
||||
circle-color (get-in themes [theme color :background-color])
|
||||
text-color (get-in themes [theme color :text-color])]
|
||||
[rn/view {:style {:width circle-size
|
||||
:height circle-size
|
||||
:border-radius circle-size
|
||||
:text-align :center
|
||||
:justify-content :center
|
||||
:align-items :center
|
||||
:background-color circle-color}}
|
||||
[text/text {:size (size font-sizes)
|
||||
:weight (size font-weights)
|
||||
:style {:color text-color}}
|
||||
(if small?
|
||||
(str f-name-initial)
|
||||
(str f-name-initial l-name-initial))]]))
|
||||
|
|
@ -184,38 +184,38 @@
|
|||
(def info-50-opa-40 (alpha info-50 0.4))
|
||||
|
||||
;; Customization
|
||||
(def purple-50 "#8661C1")
|
||||
(def purple-20 (alpha "#8661C1" 0.2))
|
||||
(def purple-50 "#8661C1")
|
||||
(def purple-60 (alpha "#8661C1" 0.6))
|
||||
(def indigo-50 "#496289")
|
||||
(def indigo-20 (alpha "#496289" 0.2))
|
||||
(def indigo-50 "#496289")
|
||||
(def indigo-60 (alpha "#496289" 0.6))
|
||||
(def turquoise-50 "#448EA2")
|
||||
(def turquoise-20 (alpha "#448EA2" 0.2))
|
||||
(def turquoise-50 "#448EA2")
|
||||
(def turquoise-60 (alpha "#448EA2" 0.6))
|
||||
(def blue-50 "#4CB4EF")
|
||||
(def blue-20 (alpha "#4CB4EF" 0.2))
|
||||
(def blue-50 "#4CB4EF")
|
||||
(def blue-60 (alpha "#4CB4EF" 0.6))
|
||||
(def green-50 "#5BCC95")
|
||||
(def green-20 (alpha "#5BCC95" 0.2))
|
||||
(def green-50 "#5BCC95")
|
||||
(def green-60 (alpha "#5BCC95" 0.6))
|
||||
(def yellow-50 "#FFCB53")
|
||||
(def yellow-20 (alpha "#FFCB53" 0.2))
|
||||
(def yellow-50 "#FFCB53")
|
||||
(def yellow-60 (alpha "#FFCB53" 0.6))
|
||||
(def orange-20 (alpha "#FB8F61" 0.2))
|
||||
(def orange-50 "#FB8F61")
|
||||
(def orange-20 (alpha "#FFCB53" 0.2))
|
||||
(def orange-60 "#D37851")
|
||||
(def red-50 "#F46666")
|
||||
(def orange-60 (alpha "#FB8F61" 0.6))
|
||||
(def red-20 (alpha "#F46666" 0.2))
|
||||
(def red-50 "#F46666")
|
||||
(def red-60 (alpha "#F46666" 0.6))
|
||||
(def pink-20 (alpha "#FC7BAB" 0.2))
|
||||
(def pink-50 "#FC7BAB")
|
||||
(def pink-20 (alpha "#FC7BAA" 0.2))
|
||||
(def pink-60 (alpha "#FC7BAA" 0.6))
|
||||
(def brown-50 "#99604D")
|
||||
(def pink-60 (alpha "#FC7BAB" 0.6))
|
||||
(def brown-20 (alpha "#99604D" 0.2))
|
||||
(def brown-60 (alpha "#99604D" 0.6))
|
||||
(def beige-50 "#CAAE93")
|
||||
(def brown-50 "#99604D")
|
||||
(def brown-60 (alpha "#805141" 0.6))
|
||||
(def beige-20 (alpha "#CAAE93" 0.2))
|
||||
(def beige-50 "#CAAE93")
|
||||
(def beige-60 (alpha "#CAAE93" 0.6))
|
||||
|
||||
(def customization
|
||||
|
|
@ -246,6 +246,7 @@
|
|||
(get-in customization [theme color]))
|
||||
|
||||
;;;;Switcher
|
||||
|
||||
(def switcher-background "#040B14")
|
||||
|
||||
;;switcher-screen with transparency
|
||||
|
|
@ -271,3 +272,7 @@
|
|||
|
||||
(defn theme-colors [light dark]
|
||||
(if (theme/dark?) dark light))
|
||||
|
||||
(defn dark?
|
||||
[]
|
||||
(theme/dark?))
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@
|
|||
[quo2.screens.activity-logs :as activity-logs]
|
||||
[quo2.screens.token-tag :as token-tag]
|
||||
[quo2.screens.counter :as counter]
|
||||
[quo2.screens.wallet-user-avatar :as wallet-user-avatar]
|
||||
[quo2.screens.icon-avatar :as icon-avatar]
|
||||
[quo2.screens.segmented :as segmented]
|
||||
[quo2.screens.info-message :as info-message]
|
||||
|
|
@ -23,6 +24,9 @@
|
|||
(def screens [{:name :quo2-texts
|
||||
:insets {:top false}
|
||||
:component text/preview-text}
|
||||
{:name :quo2-wallet-user-avatar
|
||||
:insets {:top false}
|
||||
:component wallet-user-avatar/preview-wallet-user-avatar}
|
||||
{:name :quo2-button
|
||||
:insets {:top false}
|
||||
:component button/preview-button}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,71 @@
|
|||
(ns quo2.screens.wallet-user-avatar
|
||||
(:require [quo.react-native :as rn]
|
||||
[quo.previews.preview :as preview]
|
||||
[reagent.core :as reagent]
|
||||
[quo2.components.wallet-user-avatar :as quo2]
|
||||
[quo.design-system.colors :as colors]))
|
||||
|
||||
(def descriptor [{:label "First name"
|
||||
:key :f-name
|
||||
:type :text}
|
||||
{:label "Last name"
|
||||
:key :l-name
|
||||
:type :text}
|
||||
{:label "Size"
|
||||
:key :size
|
||||
:type :select
|
||||
:options [{:key :small
|
||||
:value "Small"}
|
||||
{:key :medium
|
||||
:value "Medium"}
|
||||
{:key :large
|
||||
:value "Large"}
|
||||
{:key :x-large
|
||||
:value "X Large"}]}
|
||||
{: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 {:first-name "empty"
|
||||
:last-name "name"
|
||||
:size :x-large
|
||||
:color :indigo})]
|
||||
(fn []
|
||||
[rn/view {:margin-bottom 50
|
||||
:padding 16}
|
||||
[preview/customizer state descriptor]
|
||||
[rn/view {:padding-vertical 60}
|
||||
[quo2/wallet-user-avatar @state]]])))
|
||||
|
||||
(defn preview-wallet-user-avatar []
|
||||
[rn/view {:background-color (:ui-background @colors/theme)
|
||||
:flex 1}
|
||||
[rn/flat-list {:flex 1
|
||||
:keyboardShouldPersistTaps :always
|
||||
:header [cool-preview]
|
||||
:key-fn str}]])
|
||||
Loading…
Reference in New Issue