diff --git a/src/quo2/components/avatars/account_avatar/style.cljs b/src/quo2/components/avatars/account_avatar/style.cljs index 73a2c63c51..419b4ffabb 100644 --- a/src/quo2/components/avatars/account_avatar/style.cljs +++ b/src/quo2/components/avatars/account_avatar/style.cljs @@ -6,16 +6,20 @@ (def default-padding 16) (def default-emoji-size 36) +(def ^:private container-size + {:size-64 64}) + (defn get-border-radius [size] (case size - 80 16 - 48 12 - 32 10 - 28 8 - 24 8 - 20 6 - 16 4 + 80 16 + :size-64 16 + 48 12 + 32 10 + 28 8 + 24 8 + 20 6 + 16 4 default-border-radius)) (defn get-padding @@ -33,29 +37,32 @@ (defn get-emoji-size [size] (case size - 80 36 - 48 24 - 32 15 - 28 12 - 24 11 - 20 11 - 16 11 + 80 36 + :size-64 30 + 48 24 + 32 15 + 28 12 + 24 11 + 20 11 + 16 11 default-emoji-size)) (defn get-border-width [size] - (case size - 16 0.8 ;; 0.8 px is for only size 16 - ;; Rest of the size will have 1 px - 1)) + (if (= size 16) + 0.8 ;; 0.8 px is for only size 16 + 1)) ;; Rest of the size will have 1 px + (defn root-container [{:keys [type size theme customization-color] :or {size default-size customization-color :blue}}] - (let [watch-only? (= type :watch-only)] - (cond-> {:width size - :height size + (let [watch-only? (= type :watch-only) + width (cond-> size + (keyword? size) (container-size size))] + (cond-> {:width width + :height width :background-color (colors/custom-color-by-theme customization-color 50 60 nil nil theme) :border-radius (get-border-radius size) :border-color (if (= theme :light) colors/neutral-80-opa-5 colors/white-opa-5) diff --git a/src/quo2/components/avatars/channel_avatar/component_spec.cljs b/src/quo2/components/avatars/channel_avatar/component_spec.cljs index b1abee5439..7c103e9554 100644 --- a/src/quo2/components/avatars/channel_avatar/component_spec.cljs +++ b/src/quo2/components/avatars/channel_avatar/component_spec.cljs @@ -11,7 +11,7 @@ (h/test "with emoji, no lock set, large size" (let [emoji "🍓"] - (h/render [component/view {:emoji emoji :size :size/l}]) + (h/render [component/view {:emoji emoji :size :size-32}]) (h/is-null (h/query-by-label-text :initials)) (h/is-truthy (h/query-by-text emoji)) (h/is-null (h/query-by-label-text :lock)))) @@ -31,5 +31,5 @@ (h/test "no emoji, large size" (h/render [component/view {:full-name "Status Mobile" - :size :size/l}]) + :size :size-32}]) (h/is-truthy (h/query-by-text "SM")))) diff --git a/src/quo2/components/avatars/channel_avatar/style.cljs b/src/quo2/components/avatars/channel_avatar/style.cljs index 0ebc8f771f..b669f32c7d 100644 --- a/src/quo2/components/avatars/channel_avatar/style.cljs +++ b/src/quo2/components/avatars/channel_avatar/style.cljs @@ -5,17 +5,27 @@ (defn outer-container [{:keys [size color]}] - (let [size (if (= size :size/l) 32 24)] - {:width size - :height size - :border-radius size + (let [container-size (case size + :size-64 64 + :size-32 32 + 24)] + {:width container-size + :height container-size + :border-radius container-size :justify-content :center :align-items :center :background-color (colors/theme-alpha color 0.1 0.1)})) +(defn emoji-size + [size] + {:font-size (case size + :size-64 24 + :size-32 15 + 11)}) + (defn lock-container [size] - (let [distance (if (= size :size/l) 20 12)] + (let [distance (if (= size :size-32) 20 12)] {:position :absolute :left distance :top distance diff --git a/src/quo2/components/avatars/channel_avatar/view.cljs b/src/quo2/components/avatars/channel_avatar/view.cljs index 15e56275a6..80ed007369 100644 --- a/src/quo2/components/avatars/channel_avatar/view.cljs +++ b/src/quo2/components/avatars/channel_avatar/view.cljs @@ -5,17 +5,19 @@ [quo2.components.markdown.text :as text] [quo2.foundations.colors :as colors] [react-native.core :as rn] - utils.string)) + [utils.string])) (defn- initials [full-name size color] - (let [amount-initials (if (= size :size/l) 2 1) + (let [amount-initials (if (#{:size-32 :size-64} size) 2 1) channel-name (string/replace full-name "#" "")] [text/text - {:accessibility-label :initials - :size :paragraph-2 - :weight :semi-bold - :style {:color color}} + (cond-> {:accessibility-label :initials + :style {:color color} + :size :paragraph-2 + :weight :semi-bold} + (= size :size-64) (assoc :size :heading-1 + :weight :medium)) (utils.string/get-initials channel-name amount-initials)])) (defn- lock @@ -54,8 +56,8 @@ :style (style/outer-container {:size size :color customization-color})} (if (string/blank? emoji) [initials full-name size customization-color] - [text/text - {:accessibility-label :emoji - :size (if (= size :size/l) :paragraph-1 :label)} + [rn/text + {:style (style/emoji-size size) + :accessibility-label :emoji} (string/trim emoji)]) [lock locked? size]]) diff --git a/src/quo2/components/avatars/user_avatar/style.cljs b/src/quo2/components/avatars/user_avatar/style.cljs index b25fb00142..2b512cbeb2 100644 --- a/src/quo2/components/avatars/user_avatar/style.cljs +++ b/src/quo2/components/avatars/user_avatar/style.cljs @@ -2,48 +2,54 @@ (:require [quo2.foundations.colors :as colors])) (def sizes - {:big {:dimensions 80 - :status-indicator 12 - :status-indicator-border 4 - :status-indicator-center-to-edge 12 - :font-size :heading-1 - :ring-width 4} - :medium {:dimensions 48 - :status-indicator 8 - :status-indicator-border 2 - :status-indicator-center-to-edge 6 - :font-size :heading-2 - :ring-width 2} - :small {:dimensions 32 - :status-indicator 8 - :status-indicator-border 2 - :status-indicator-center-to-edge 4 - :font-size :paragraph-2 - :ring-width 2} - 28 {:dimensions 28 - :status-indicator 0 - :status-indicator-border 0 - :status-indicator-center-to-edge 0 - :font-size :paragraph-2 - :ring-width 0} - :xs {:dimensions 24 - :status-indicator 0 - :status-indicator-border 0 - :status-indicator-center-to-edge 0 - :font-size :paragraph-2 - :ring-width 2} - :xxs {:dimensions 20 - :status-indicator 0 - :status-indicator-border 0 - :status-indicator-center-to-edge 0 - :font-size :label - :ring-width 2} - :xxxs {:dimensions 16 - :status-indicator 0 - :status-indicator-border 0 - :status-indicator-center-to-edge 0 - :font-size :label - :ring-width 2}}) + {:big {:dimensions 80 + :status-indicator 12 + :status-indicator-border 4 + :status-indicator-center-to-edge 12 + :font-size :heading-1 + :ring-width 4} + :size-64 {:dimensions 64 + :status-indicator 8 + :status-indicator-border 2 + :status-indicator-center-to-edge 6 + :font-size :heading-1 + :ring-width 2} + :medium {:dimensions 48 + :status-indicator 8 + :status-indicator-border 2 + :status-indicator-center-to-edge 6 + :font-size :heading-2 + :ring-width 2} + :small {:dimensions 32 + :status-indicator 8 + :status-indicator-border 2 + :status-indicator-center-to-edge 4 + :font-size :paragraph-2 + :ring-width 2} + 28 {:dimensions 28 + :status-indicator 0 + :status-indicator-border 0 + :status-indicator-center-to-edge 0 + :font-size :paragraph-2 + :ring-width 0} + :xs {:dimensions 24 + :status-indicator 0 + :status-indicator-border 0 + :status-indicator-center-to-edge 0 + :font-size :paragraph-2 + :ring-width 2} + :xxs {:dimensions 20 + :status-indicator 0 + :status-indicator-border 0 + :status-indicator-center-to-edge 0 + :font-size :label + :ring-width 2} + :xxxs {:dimensions 16 + :status-indicator 0 + :status-indicator-border 0 + :status-indicator-center-to-edge 0 + :font-size :label + :ring-width 2}}) (defn initials-avatar [size customization-color theme] diff --git a/src/quo2/components/avatars/wallet_user_avatar.cljs b/src/quo2/components/avatars/wallet_user_avatar.cljs index 47874af004..b989334e5f 100644 --- a/src/quo2/components/avatars/wallet_user_avatar.cljs +++ b/src/quo2/components/avatars/wallet_user_avatar.cljs @@ -8,18 +8,21 @@ {:small 20 :medium 32 :large 48 + :size-64 64 :x-large 80}) (def font-sizes {:small :label :medium :paragraph-2 :large :paragraph-1 + :size-64 :heading-1 :x-large :heading-1}) (def font-weights {:small :medium :medium :semi-bold :large :semi-bold + :size-64 :medium :x-large :medium}) (defn wallet-user-avatar diff --git a/src/quo2/components/list_items/channel/view.cljs b/src/quo2/components/list_items/channel/view.cljs index 7bf2d64f65..ac51aaa8a6 100644 --- a/src/quo2/components/list_items/channel/view.cljs +++ b/src/quo2/components/list_items/channel/view.cljs @@ -38,7 +38,7 @@ :on-press-in #(reset! pressed? true) :on-press-out #(reset! pressed? false)} [channel-avatar/view - {:size :size/l + {:size :size-32 :locked? locked? :full-name name :customization-color customization-color diff --git a/src/status_im2/contexts/quo_preview/avatars/account_avatar.cljs b/src/status_im2/contexts/quo_preview/avatars/account_avatar.cljs index e54d8eafa9..17159c7764 100644 --- a/src/status_im2/contexts/quo_preview/avatars/account_avatar.cljs +++ b/src/status_im2/contexts/quo_preview/avatars/account_avatar.cljs @@ -11,21 +11,16 @@ {:key :watch-only}]} {:key :size :type :select - :options [{:key 16 - :value "16"} - {:key 20 - :value "20"} - {:key 24 - :value "24"} - {:key 28 - :value "28"} - {:key 32 - :value "32"} - {:key 48 - :value "48"} - {:key 80 - :value "80"}]} - {:key :emoji :type :text} + :options [{:key 16} + {:key 20} + {:key 24} + {:key 28} + {:key 32} + {:key 48} + {:key :size-64} + {:key 80}]} + {:key "Emoji" + :type :text} (preview/customization-color-option)]) (defn view @@ -40,7 +35,8 @@ :descriptor descriptor :component-container-style {:align-items :center :justify-content :center}} - [quo/account-avatar @state] + [quo/account-avatar @state + ] [quo/button {:type :grey :container-style {:margin-top 30} diff --git a/src/status_im2/contexts/quo_preview/avatars/channel_avatar.cljs b/src/status_im2/contexts/quo_preview/avatars/channel_avatar.cljs index 8bcfb9d7a6..8002f98b0e 100644 --- a/src/status_im2/contexts/quo_preview/avatars/channel_avatar.cljs +++ b/src/status_im2/contexts/quo_preview/avatars/channel_avatar.cljs @@ -7,7 +7,8 @@ (def descriptor [{:key :size :type :select - :options [{:key :size/l :value "Large"} + :options [{:key :size-64} + {:key :size-32} {:key :default}]} {:key :emoji :type :text} @@ -22,7 +23,7 @@ (defn view [] - (let [state (reagent/atom {:size :size/l + (let [state (reagent/atom {:size :size-32 :locked-state :not-set :emoji "🍑" :full-name "Some channel" diff --git a/src/status_im2/contexts/quo_preview/avatars/user_avatar.cljs b/src/status_im2/contexts/quo_preview/avatars/user_avatar.cljs index fa4adac2ce..0a50433b64 100644 --- a/src/status_im2/contexts/quo_preview/avatars/user_avatar.cljs +++ b/src/status_im2/contexts/quo_preview/avatars/user_avatar.cljs @@ -8,6 +8,7 @@ [{:key :size :type :select :options [{:key :big} + {:key :size-64} {:key :medium} {:key :small} {:key :xs} diff --git a/src/status_im2/contexts/quo_preview/avatars/wallet_user_avatar.cljs b/src/status_im2/contexts/quo_preview/avatars/wallet_user_avatar.cljs index 9c165b6f42..6ad247b64f 100644 --- a/src/status_im2/contexts/quo_preview/avatars/wallet_user_avatar.cljs +++ b/src/status_im2/contexts/quo_preview/avatars/wallet_user_avatar.cljs @@ -15,6 +15,7 @@ :options [{:key :small} {:key :medium} {:key :large} + {:key :size-64} {:key :x-large :value "X Large"}]} (preview/customization-color-option {:key :color})])