[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>

src/quo2/components/wallet_user_avatar.cljs

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

src/quo2/foundations/colors.cljs

@@ -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 (alpha "#FB8F61" 0.6))
-(def orange-60 "#D37851")
-(def red-50 "#F46666")
 (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 "#FC7BAB" 0.6))
-(def pink-60 (alpha "#FC7BAA" 0.6))
-(def brown-50 "#99604D")
 (def brown-20 (alpha "#99604D" 0.2))
-(def brown-60 (alpha "#99604D" 0.6))
+(def brown-50 "#99604D")
-(def beige-50 "#CAAE93")
+(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?))

src/quo2/screens/main.cljs

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

src/quo2/screens/wallet_user_avatar.cljs

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