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

[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>
This commit is contained in:
Ibrahem Khalil 2022-08-27 11:16:04 +02:00 committed by GitHub
parent 5df202753f
commit 43861e0c15
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 178 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/quo2/components/avatar/avatar_themes.cljs Normal file
View File

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

30
src/quo2/components/icon_avatar.cljs Normal file
View File

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

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

@ -185,27 +185,38 @@
;; Customization ;; Customization
(def purple-50 "#8661C1") (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-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-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-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-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-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-50 "#FB8F61")
(def orange-20 (alpha "#FFCB53" 0.2))
(def orange-60 "#D37851") (def orange-60 "#D37851")
(def red-50 "#F46666") (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-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-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-50 "#CAAE93")
(def beige-60 "#AA927C") (def beige-20 (alpha "#CAAE93" 0.2))
(def beige-60 (alpha "#CAAE93" 0.6))
(def customization (def customization
{:dark {:purple purple-60 {:dark {:purple purple-60

72
src/quo2/screens/icon_avatar.cljs Normal file
View File

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

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

@ -13,6 +13,7 @@
[quo2.screens.activity-logs :as activity-logs] [quo2.screens.activity-logs :as activity-logs]
[quo2.screens.token-tag :as token-tag] [quo2.screens.token-tag :as token-tag]
[quo2.screens.counter :as counter] [quo2.screens.counter :as counter]
[quo2.screens.icon-avatar :as icon-avatar]
[quo2.screens.segmented :as segmented] [quo2.screens.segmented :as segmented]
[quo2.screens.info-message :as info-message] [quo2.screens.info-message :as info-message]
[quo2.screens.information-box :as information-box] [quo2.screens.information-box :as information-box]
@ -28,6 +29,9 @@
{:name :quo2-token-overview {:name :quo2-token-overview
:insets {:top false} :insets {:top false}
:component token-overview/preview-token-overview} :component token-overview/preview-token-overview}
{:name :quo2-icon-avatar
:insets {:top false}
:component icon-avatar/preview-icon-avatar}
{:name :quo2-status-tags {:name :quo2-status-tags
:insets {:top false} :insets {:top false}
:component status-tags/preview-status-tags} :component status-tags/preview-status-tags}