diff --git a/src/quo2/components/avatars/account_avatar.cljs b/src/quo2/components/avatars/account_avatar.cljs index 2a22f3dd83..1edf39754d 100644 --- a/src/quo2/components/avatars/account_avatar.cljs +++ b/src/quo2/components/avatars/account_avatar.cljs @@ -1,13 +1,8 @@ (ns quo2.components.avatars.account-avatar (:require [quo2.components.icon :as icons] [quo2.foundations.colors :as colors] - [quo2.theme :as theme] [react-native.core :as rn])) -(def icon-color-value - {:dark (get-in colors/customization [:dark :purple]) - :light (get-in colors/customization [:light :purple])}) - (defn get-border-radius [size] (case size @@ -27,12 +22,11 @@ 20 11)) (defn account-avatar - [{:keys [size icon] - :or {size 80 - icon :main-icons/placeholder}}] - (let [icon-color (if (theme/dark?) - (:dark icon-color-value) - (:light icon-color-value)) + [{:keys [size icon color] + :or {size 80 + icon :i/placeholder + color :purple}}] + (let [icon-color (colors/custom-color-by-theme color 50 60) avatar-border-radius (get-border-radius size) inner-icon-size (get-inner-icon-sizes size)] [rn/view diff --git a/src/quo2/components/settings/accounts/style.cljs b/src/quo2/components/settings/accounts/style.cljs new file mode 100644 index 0000000000..e0de4d6dc0 --- /dev/null +++ b/src/quo2/components/settings/accounts/style.cljs @@ -0,0 +1,71 @@ +(ns quo2.components.settings.accounts.style + (:require [quo2.foundations.colors :as colors])) + +(def card + {:position :relative + :padding 8 + :border-radius 16 + :height 160 + :width 160}) + +(defn background-top + [custom-color] + {:position :absolute + :top 0 + :border-top-left-radius 16 + :border-top-right-radius 16 + :width 160 + :height 64 + :background-color (-> colors/customization + (get-in [custom-color 50]) + (colors/alpha 0.2))}) + +(defn background-bottom + [] + {:position :absolute + :top 40 + :border-radius 16 + :width 160 + :height 120 + :background-color (colors/theme-colors + colors/white + colors/neutral-90)}) + +(defn avatar-border + [] + {:margin 2 + :justify-content :center + :align-items :center + :width 52 + :height 52 + :border-radius 14 + :border-width 2 + :border-color (colors/theme-colors + colors/white + colors/neutral-90)}) + +(def menu-button-container + {:justify-content :center + :align-items :center + :align-self :flex-start}) +(defn menu-button-color + [] + {:background-color (colors/theme-colors + colors/white-opa-40 + colors/neutral-80-opa-40)}) + +(defn address-text + [] + {:color (colors/theme-colors + colors/neutral-50 + colors/neutral-40)}) + +(def card-top + {:flex-direction :row + :align-items :center + :justify-content :space-between}) + +(def card-bottom + {:flex 1 + :margin-horizontal 4 + :margin-top 4}) diff --git a/src/quo2/components/settings/accounts/view.cljs b/src/quo2/components/settings/accounts/view.cljs new file mode 100644 index 0000000000..cf3ccb7cae --- /dev/null +++ b/src/quo2/components/settings/accounts/view.cljs @@ -0,0 +1,46 @@ +(ns quo2.components.settings.accounts.view + (:require [quo2.components.avatars.account-avatar :as account-avatar] + [quo2.components.buttons.button :as button] + [quo2.components.markdown.text :as text] + [quo2.components.settings.accounts.style :as style] + [react-native.core :as rn])) + +(defn card-background + [{:keys [custom-color]}] + [:<> + [rn/view {:style (style/background-top custom-color)}] + [rn/view {:style (style/background-bottom)}]]) + +(defn avatar + [avatar-props] + [rn/view {:style (style/avatar-border)} + [account-avatar/account-avatar (assoc avatar-props :size 48)]]) + +(defn menu-button + [{:keys [on-press]}] + [rn/view {:style style/menu-button-container} + [button/button + {:style (style/menu-button-color) + :type :gray + :icon true + :size 24 + :on-press on-press} + :i/more]]) + +(defn account + [{:keys [account-name account-address avatar-icon custom-color on-press-menu]}] + [rn/view {:style style/card} + [card-background {:custom-color custom-color}] + [rn/view {:style style/card-top} + [avatar + {:color custom-color + :icon avatar-icon}] + [menu-button {:on-press on-press-menu}]] + [rn/view {:style style/card-bottom} + [text/text {:size :paragraph-1 :weight :semi-bold} + account-name] + [text/text + {:style (style/address-text) + :size :paragraph-2 + :weight :medium} + account-address]]]) diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index e65c4b4c24..aaba2a2bb6 100644 --- a/src/quo2/core.cljs +++ b/src/quo2/core.cljs @@ -46,6 +46,7 @@ quo2.components.selectors.filter.view quo2.components.selectors.selectors quo2.components.separator + quo2.components.settings.accounts.view quo2.components.settings.privacy-option quo2.components.tabs.account-selector quo2.components.tabs.tabs @@ -128,3 +129,4 @@ ;;;; SETTINGS (def privacy-option quo2.components.settings.privacy-option/card) +(def account quo2.components.settings.accounts.view/account) diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index 28f1138059..9acb097941 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/src/status_im2/contexts/quo_preview/main.cljs @@ -63,6 +63,7 @@ [status-im2.contexts.quo-preview.wallet.lowest-price :as lowest-price] [status-im2.contexts.quo-preview.wallet.network-amount :as network-amount] [status-im2.contexts.quo-preview.wallet.network-breakdown :as network-breakdown] + [status-im2.contexts.quo-preview.settings.accounts :as accounts] [status-im2.contexts.quo-preview.wallet.token-overview :as token-overview])) (def screens-categories @@ -194,7 +195,10 @@ :component selectors/preview-selectors}] :settings [{:name :privacy-option :insets {:top false} - :component privacy-option/preview-options}] + :component privacy-option/preview-options} + {:name :accounts + :insets {:top false} + :component accounts/preview-accounts}] :tabs [{:name :segmented :insets {:top false} :component segmented/preview-segmented} diff --git a/src/status_im2/contexts/quo_preview/settings/accounts.cljs b/src/status_im2/contexts/quo_preview/settings/accounts.cljs new file mode 100644 index 0000000000..e5cb19f7ce --- /dev/null +++ b/src/status_im2/contexts/quo_preview/settings/accounts.cljs @@ -0,0 +1,51 @@ +(ns status-im2.contexts.quo-preview.settings.accounts + (:require [clojure.string :as string] + [quo2.components.settings.accounts.view :as quo] + [quo2.foundations.colors :as colors] + [react-native.core :as rn] + [reagent.core :as reagent] + [status-im2.contexts.quo-preview.preview :as preview])) + +(def descriptor + [{:label "Custom color" + :key :custom-color + :type :select + :options (map (fn [[k _]] + {:key k :value (string/capitalize (name k))}) + colors/customization)} + {:label "Account name" + :key :account-name + :type :text} + {:label "Account address" + :key :account-address + :type :text}]) + +(defn cool-preview + [] + (let [state (reagent/atom {:custom-color :blue + :account-name "Booze for Dubai" + :account-address "0x21a ... 49e" + :avatar-icon :i/placeholder + :on-press-menu (fn [] + (js/alert "Menu button pressed"))})] + (fn [] + [rn/view + {:margin-bottom 50 + :padding 16} + [preview/customizer state descriptor] + [rn/view + {:padding-vertical 100 + :align-items :center + :background-color (colors/theme-colors + colors/neutral-30 + colors/neutral-95)} + [quo/account @state]]]))) + +(defn preview-accounts + [] + [rn/view {:style {:flex 1}} + [rn/flat-list + {:flex 1 + :keyboardShouldPersistTaps :always + :header [cool-preview] + :key-fn str}]])