From 8352f622d66c25b90392bfc44897011fdb0ba200 Mon Sep 17 00:00:00 2001 From: Ibrahem Khalil <33176106+ibrkhalil@users.noreply.github.com> Date: Sat, 27 Aug 2022 12:12:24 +0200 Subject: [PATCH] [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 | 102 ++++++++++++++++++++ src/quo2/foundations/colors.cljs | 33 ++++--- src/quo2/screens/main.cljs | 4 + src/quo2/screens/wallet_user_avatar.cljs | 71 ++++++++++++++ 4 files changed, 196 insertions(+), 14 deletions(-) create mode 100644 src/quo2/components/wallet_user_avatar.cljs create mode 100644 src/quo2/screens/wallet_user_avatar.cljs diff --git a/src/quo2/components/wallet_user_avatar.cljs b/src/quo2/components/wallet_user_avatar.cljs new file mode 100644 index 0000000000..f4f2362d80 --- /dev/null +++ b/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))]])) \ No newline at end of file diff --git a/src/quo2/foundations/colors.cljs b/src/quo2/foundations/colors.cljs index f0c3933162..3e7e63596c 100644 --- a/src/quo2/foundations/colors.cljs +++ b/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 "#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?)) diff --git a/src/quo2/screens/main.cljs b/src/quo2/screens/main.cljs index d01e3459b8..fe36c4e0bc 100644 --- a/src/quo2/screens/main.cljs +++ b/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} diff --git a/src/quo2/screens/wallet_user_avatar.cljs b/src/quo2/screens/wallet_user_avatar.cljs new file mode 100644 index 0000000000..e5b4375629 --- /dev/null +++ b/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}]]) \ No newline at end of file