diff --git a/resources/images/icons2/20x20/keycard@2x.png b/resources/images/icons2/20x20/keycard@2x.png index a1af87178d..b392d7b7dc 100644 Binary files a/resources/images/icons2/20x20/keycard@2x.png and b/resources/images/icons2/20x20/keycard@2x.png differ diff --git a/resources/images/icons2/20x20/keycard@3x.png b/resources/images/icons2/20x20/keycard@3x.png index d0bf37bf69..e972a36b3c 100644 Binary files a/resources/images/icons2/20x20/keycard@3x.png and b/resources/images/icons2/20x20/keycard@3x.png differ diff --git a/src/quo2/components/avatars/user_avatar.cljs b/src/quo2/components/avatars/user_avatar.cljs index 01b115b902..5fb0916913 100644 --- a/src/quo2/components/avatars/user_avatar.cljs +++ b/src/quo2/components/avatars/user_avatar.cljs @@ -141,7 +141,7 @@ (if profile-picture ;; display image [fast-image/fast-image - {:source {:uri profile-picture} + {:source profile-picture :style (container-styling inner-dimensions outer-dimensions)}] ;; else display initials [container inner-dimensions outer-dimensions diff --git a/src/quo2/components/buttons/button.cljs b/src/quo2/components/buttons/button.cljs index 852afbdf87..540df5959b 100644 --- a/src/quo2/components/buttons/button.cljs +++ b/src/quo2/components/buttons/button.cljs @@ -138,7 +138,8 @@ (defn shape-style-container [type icon size] - {:border-radius (if (and icon (#{:primary :secondary :danger} type)) + {:height size + :border-radius (if (and icon (#{:primary :secondary :danger} type)) 24 (case size 56 12 diff --git a/src/quo2/components/profile/profile_card/style.cljs b/src/quo2/components/profile/profile_card/style.cljs new file mode 100644 index 0000000000..a670a31ed9 --- /dev/null +++ b/src/quo2/components/profile/profile_card/style.cljs @@ -0,0 +1,40 @@ +(ns quo2.components.profile.profile-card.style + (:require [quo2.foundations.colors :as colors])) + +(defn card-container + [customization-color] + {:flex-direction :column + :padding 12 + :flex 1 + :border-radius 16 + :background-color (colors/custom-color customization-color 50 40)}) + +(def card-header + {:flex-direction :row + :justify-content :space-between}) + +(def name-container + {:flex-direction :row + :margin-top 8 + :margin-bottom 2 + :align-items :center + :padding-right 12}) + +(def user-name + {:margin-right 4 + :color colors/white}) + +(def emoji-hash + {:margin-top 10}) + +(def user-hash + {:color colors/white-opa-60}) + +(def sign-button + {:margin-top 14}) + +(def keycard-icon + {:color colors/white-opa-40}) + +(def option-button + {:background-color colors/white-opa-5}) diff --git a/src/quo2/components/profile/profile_card/view.cljs b/src/quo2/components/profile/profile_card/view.cljs new file mode 100644 index 0000000000..d7fb59e205 --- /dev/null +++ b/src/quo2/components/profile/profile_card/view.cljs @@ -0,0 +1,64 @@ +(ns quo2.components.profile.profile-card.view + (:require + [quo2.components.profile.profile-card.style :as style] + [quo2.foundations.colors :as colors] + [quo2.components.avatars.user-avatar :as user-avatar] + [quo2.components.icon :as icon] + [quo2.components.markdown.text :as text] + [quo2.components.buttons.button :as button] + [react-native.core :as rn])) + + +(defn profile-card + [{:keys [show-sign-profile? key-card? profile-picture name hash customization-color sign-label + emoji-hash on-press-dots on-press-sign show-emoji-hash?] + :or {show-sign-profile? false + show-emoji-hash? false + customization-color :turquoise + key-card? false}}] + [rn/view + {:style (style/card-container customization-color)} + [rn/view + {:style style/card-header} + [user-avatar/user-avatar + {:full-name name + :profile-picture profile-picture + :override-theme :dark + :size :medium + :status-indicator? false + :ring? true}] + [button/button + {:size 32 + :type :blur-bg + :icon true + :override-theme :dark + :style style/option-button + :on-press on-press-dots} + :i/options]] + [rn/view + {:style style/name-container} + [text/text + {:size :heading-2 + :weight :semi-bold + :number-of-lines 1 + :style style/user-name} name] + (when key-card? + (icon/icon + :i/keycard + style/keycard-icon))] + [text/text + {:weight :monospace + :number-of-lines 1 + :style style/user-hash} hash] + (when (and show-emoji-hash? emoji-hash) + [text/text + {:weight :monospace + :number-of-lines 1 + :style style/emoji-hash} emoji-hash]) + (when show-sign-profile? + [button/button + {:on-press on-press-sign + :type :community + :community-color (colors/custom-color customization-color 60) + :community-text-color colors/white + :style style/sign-button} sign-label])]) diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index aaba2a2bb6..942f011646 100644 --- a/src/quo2/core.cljs +++ b/src/quo2/core.cljs @@ -52,6 +52,7 @@ quo2.components.tabs.tabs quo2.components.tags.context-tags quo2.components.tags.status-tags + quo2.components.profile.profile-card.view quo2.components.tags.tags)) (def toast quo2.components.notifications.toast/toast) @@ -127,6 +128,9 @@ (def notification-dot quo2.components.notifications.notification-dot/notification-dot) (def count-down-circle quo2.components.notifications.count-down-circle/circle-timer) +;;;; PROFILE +(def profile-card quo2.components.profile.profile-card.view/profile-card) + ;;;; 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 9acb097941..42fe1368bc 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/src/status_im2/contexts/quo_preview/main.cljs @@ -45,11 +45,13 @@ [status-im2.contexts.quo-preview.notifications.activity-logs :as activity-logs] [status-im2.contexts.quo-preview.notifications.toast :as toast] [status-im2.contexts.quo-preview.posts-and-attachments.messages-skeleton :as messages-skeleton] + [status-im2.contexts.quo-preview.profile.profile-card :as profile-card] [status-im2.contexts.quo-preview.reactions.react :as react] [status-im2.contexts.quo-preview.record-audio.record-audio :as record-audio] [status-im2.contexts.quo-preview.selectors.disclaimer :as disclaimer] [status-im2.contexts.quo-preview.selectors.filter :as filter] [status-im2.contexts.quo-preview.selectors.selectors :as selectors] + [status-im2.contexts.quo-preview.settings.accounts :as accounts] [status-im2.contexts.quo-preview.settings.privacy-option :as privacy-option] [status-im2.contexts.quo-preview.switcher.switcher-cards :as switcher-cards] [status-im2.contexts.quo-preview.tabs.account-selector :as account-selector] @@ -63,7 +65,6 @@ [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 @@ -175,6 +176,9 @@ :posts-and-attachments [{:name :messages-skeleton :insets {:top false} :component messages-skeleton/preview-messages-skeleton}] + :profile [{:name :profile-card + :insets {:top false} + :component profile-card/preview-profile-card}] :reactions [{:name :react :insets {:top false} :component react/preview-react}] diff --git a/src/status_im2/contexts/quo_preview/preview.cljs b/src/status_im2/contexts/quo_preview/preview.cljs index d86535777d..2270f58e74 100644 --- a/src/status_im2/contexts/quo_preview/preview.cljs +++ b/src/status_im2/contexts/quo_preview/preview.cljs @@ -108,6 +108,7 @@ :show-cancel false :style {:border-radius 4 :border-width 1 + :color (colors/theme-colors colors/neutral-100 colors/white) :border-color (colors/theme-colors colors/neutral-100 colors/white)} :on-change-text #(do (reset! state* (if (and suffix (> (count %) (count @state*))) diff --git a/src/status_im2/contexts/quo_preview/profile/profile_card.cljs b/src/status_im2/contexts/quo_preview/profile/profile_card.cljs new file mode 100644 index 0000000000..463e8f3bbf --- /dev/null +++ b/src/status_im2/contexts/quo_preview/profile/profile_card.cljs @@ -0,0 +1,94 @@ +(ns status-im2.contexts.quo-preview.profile.profile-card + (:require [quo2.foundations.colors :as colors] + [react-native.core :as rn] + [reagent.core :as reagent] + [quo2.core :as quo] + [status-im.react-native.resources :as resources] + [status-im2.contexts.quo-preview.preview :as preview])) + +(def descriptor + [{:label "Show: Sign in to this profile?" + :key :show-sign-profile? + :type :boolean} + {:label "Show: Is from key card?" + :key :key-card? + :type :boolean} + {:label "Show: Emoji hash?" + :key :show-emoji-hash? + :type :boolean} + {:label "Customization Color" + :key :customization-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"}]} + {:label "Name" + :key :name + :type :text} + {:label "Hash" + :key :hash + :type :text} + {:label "Emoji hash" + :key :emoji-hash + :type :text} + {:label "Sign button label" + :key :sign-label + :type :text}]) + +(defn cool-preview + [] + (let [state (reagent/atom {:show-sign-profile? true + :key-card? true + :name "Matt Grote" + :sign-label "Sign in to this profile" + :on-press-dots nil + :on-press-sign nil + :customization-color :turquoise + :profile-picture (resources/get-mock-image :user-picture-male5) + :show-emoji-hash? true + :hash "zQ3k83euenmcikw7474hfu73t5N" + :emoji-hash "πŸ˜„πŸ˜‚πŸ«£πŸ‘πŸ˜‡πŸ€’πŸ˜»πŸ₯·πŸ»πŸ¦ΈπŸ»β€β™€οΈπŸ¦ΈπŸ»πŸ¦ΈπŸ»β€β™‚οΈπŸ¦ΉπŸ»β€β™€οΈπŸ§‘πŸ»β€πŸŽ„πŸŽ…πŸ»"})] + (fn [] + [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [rn/view {:padding-bottom 150} + [rn/view {:flex 1} + [preview/customizer state descriptor]] + [rn/view + {:padding-vertical 60 + :flex-direction :row + :margin-horizontal 20 + :justify-content :center} + [quo/profile-card @state]]]]))) + +(defn preview-profile-card + [] + [rn/view + {:background-color (colors/theme-colors colors/white + colors/neutral-90) + :flex 1} + [rn/flat-list + {:flex 1 + :keyboardShouldPersistTaps :always + :header [cool-preview] + :key-fn str}]])