diff --git a/src/quo2/components/avatar/avatar_themes.cljs b/src/quo2/components/avatar/avatar_themes.cljs new file mode 100644 index 0000000000..e92b57a0fc --- /dev/null +++ b/src/quo2/components/avatar/avatar_themes.cljs @@ -0,0 +1,51 @@ +(ns quo2.components.avatar.avatar-themes + (:require [quo2.foundations.colors :as colors])) + +(def themes {:light {:primary {:icon-color colors/primary-50 + :background-color colors/primary-20} + :purple {:icon-color colors/purple-50 + :background-color colors/purple-20} + :indigo {:icon-color colors/indigo-50 + :background-color colors/indigo-20} + :turquoise {:icon-color colors/turquoise-50 + :background-color colors/turquoise-20} + :blue {:icon-color colors/blue-50 + :background-color colors/blue-20} + :green {:icon-color colors/green-50 + :background-color colors/green-20} + :yellow {:icon-color colors/yellow-50 + :background-color colors/yellow-20} + :orange {:icon-color colors/orange-50 + :background-color colors/orange-20} + :red {:icon-color colors/red-50 + :background-color colors/red-20} + :pink {:icon-color colors/pink-50 + :background-color colors/pink-20} + :brown {:icon-color colors/brown-50 + :background-color colors/brown-20} + :beige {:icon-color colors/beige-50 + :background-color colors/beige-20}} + :dark {:primary {:icon-color colors/primary-60 + :background-color colors/primary-50-opa-20} + :purple {:icon-color colors/purple-60 + :background-color colors/purple-20} + :indigo {:icon-color colors/indigo-60 + :background-color colors/indigo-20} + :turquoise {:icon-color colors/turquoise-60 + :background-color colors/turquoise-20} + :blue {:icon-color colors/blue-60 + :background-color colors/blue-20} + :green {:icon-color colors/green-60 + :background-color colors/green-20} + :yellow {:icon-color colors/yellow-60 + :background-color colors/yellow-20} + :orange {:icon-color colors/orange-60 + :background-color colors/orange-20} + :red {:icon-color colors/red-60 + :background-color colors/red-20} + :pink {:icon-color colors/pink-60 + :background-color colors/pink-20} + :brown {:icon-color colors/brown-60 + :background-color colors/brown-20} + :beige {:icon-color colors/beige-60 + :background-color colors/beige-20}}}) \ No newline at end of file diff --git a/src/quo2/components/icon_avatar.cljs b/src/quo2/components/icon_avatar.cljs new file mode 100644 index 0000000000..ead9d298e9 --- /dev/null +++ b/src/quo2/components/icon_avatar.cljs @@ -0,0 +1,30 @@ +(ns quo2.components.icon-avatar + (:require [quo.react-native :as rn] + [quo.theme :as theme] + [quo2.components.avatar.avatar-themes :refer [themes]] + [status-im.ui.components.icons.icons :as icons])) + +(def sizes + {:big 48 + :medium 32 + :small 20}) + +(defn icon-avatar + [{:keys [size icon color]}] + (let [component-size (size sizes) + theme (theme/get-theme) + circle-color (get-in themes [theme color :background-color]) + icon-color (get-in themes [theme color :icon-color]) + icon-size (case size + :big 20 + :medium 16 + :small 12)] + [rn/view {:style {:width component-size + :height component-size + :border-radius component-size + :background-color circle-color + :justify-content :center + :align-items :center}} + [icons/icon icon {:container-style {:width icon-size + :height icon-size} + :color icon-color}]])) diff --git a/src/quo2/foundations/colors.cljs b/src/quo2/foundations/colors.cljs index 89a0fc3a80..f0c3933162 100644 --- a/src/quo2/foundations/colors.cljs +++ b/src/quo2/foundations/colors.cljs @@ -185,27 +185,38 @@ ;; Customization (def purple-50 "#8661C1") -(def purple-60 "#5E478C") +(def purple-20 (alpha "#8661C1" 0.2)) +(def purple-60 (alpha "#8661C1" 0.6)) (def indigo-50 "#496289") -(def indigo-60 "#3D5273") +(def indigo-20 (alpha "#496289" 0.2)) +(def indigo-60 (alpha "#496289" 0.6)) (def turquoise-50 "#448EA2") -(def turquoise-60 "#397788") +(def turquoise-20 (alpha "#448EA2" 0.2)) +(def turquoise-60 (alpha "#448EA2" 0.6)) (def blue-50 "#4CB4EF") -(def blue-60 "#4097C9") +(def blue-20 (alpha "#4CB4EF" 0.2)) +(def blue-60 (alpha "#4CB4EF" 0.6)) (def green-50 "#5BCC95") -(def green-60 "#4CAB7D") +(def green-20 (alpha "#5BCC95" 0.2)) +(def green-60 (alpha "#5BCC95" 0.6)) (def yellow-50 "#FFCB53") -(def yellow-60 "#D6AA46") +(def yellow-20 (alpha "#FFCB53" 0.2)) +(def yellow-60 (alpha "#FFCB53" 0.6)) (def orange-50 "#FB8F61") +(def orange-20 (alpha "#FFCB53" 0.2)) (def orange-60 "#D37851") (def red-50 "#F46666") -(def red-60 "#CD565") +(def red-20 (alpha "#F46666" 0.2)) +(def red-60 (alpha "#F46666" 0.6)) (def pink-50 "#FC7BAB") -(def pink-60 "#D46790") +(def pink-20 (alpha "#FC7BAA" 0.2)) +(def pink-60 (alpha "#FC7BAA" 0.6)) (def brown-50 "#99604D") -(def brown-60 "#805141") +(def brown-20 (alpha "#99604D" 0.2)) +(def brown-60 (alpha "#99604D" 0.6)) (def beige-50 "#CAAE93") -(def beige-60 "#AA927C") +(def beige-20 (alpha "#CAAE93" 0.2)) +(def beige-60 (alpha "#CAAE93" 0.6)) (def customization {:dark {:purple purple-60 diff --git a/src/quo2/screens/icon_avatar.cljs b/src/quo2/screens/icon_avatar.cljs new file mode 100644 index 0000000000..3b718be104 --- /dev/null +++ b/src/quo2/screens/icon_avatar.cljs @@ -0,0 +1,72 @@ +(ns quo2.screens.icon-avatar + (:require [reagent.core :as reagent] + [quo.react-native :as rn] + [quo.previews.preview :as preview] + [quo.design-system.colors :as colors] + [quo2.components.icon-avatar :as quo2])) + +(def descriptor [{:label "Size" + :key :size + :type :select + :options [{:key :small + :value "Small"} + {:key :medium + :value "Medium"} + {:key :big + :value "Big"}]} + {:label "Icon" + :key :icon + :type :select + :options [{:key :main-icons/placeholder20 + :value "Placeholder"} + {:key :main-icons/walelt + :value "Wallet"} + {:key :main-icons/play + :value "Play"}]} + {: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 {:size :big + :icon :main-icons/placeholder20 + :color :primary})] + (fn [] + [rn/view {:margin-bottom 50 + :padding 16} + [preview/customizer state descriptor] + [rn/view {:padding-vertical 60 + :align-items :center} + [quo2/icon-avatar @state]]]))) + +(defn preview-icon-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 diff --git a/src/quo2/screens/main.cljs b/src/quo2/screens/main.cljs index 527b1dd931..d01e3459b8 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.icon-avatar :as icon-avatar] [quo2.screens.segmented :as segmented] [quo2.screens.info-message :as info-message] [quo2.screens.information-box :as information-box] @@ -28,6 +29,9 @@ {:name :quo2-token-overview :insets {:top false} :component token-overview/preview-token-overview} + {:name :quo2-icon-avatar + :insets {:top false} + :component icon-avatar/preview-icon-avatar} {:name :quo2-status-tags :insets {:top false} :component status-tags/preview-status-tags}