Add profile ui to quo_preview (#14652)

Add profile ui to quo_preview (#14652)

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

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

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

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

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)

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

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*)))

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