diff --git a/src/quo2/components/avatars/group_avatar/view.cljs b/src/quo2/components/avatars/group_avatar/view.cljs index e69de29bb2..0b15ea3121 100644 --- a/src/quo2/components/avatars/group_avatar/view.cljs +++ b/src/quo2/components/avatars/group_avatar/view.cljs @@ -0,0 +1,41 @@ +(ns quo2.components.avatars.group-avatar.view + (:require [quo2.components.icon :as icon] + [quo2.theme :as theme] + [quo2.foundations.colors :as colors] + [react-native.core :as rn] + [react-native.fast-image :as fast-image] + [quo2.components.avatars.group-avatar.style :as style])) + +(def sizes + {:icon {:x-small 12 + :small 16 + :medium 16 + :large 20 + :x-large 32} + :container {:x-small 20 + :small 28 + :medium 32 + :large 48 + :x-large 80}}) + +(defn- view-internal + [_] + (fn [{:keys [size theme customization-color picture] + :or {size :x-small + customization-color :blue}}] + (let [container-size (get-in sizes [:container size]) + icon-size (get-in sizes [:icon size])] + [rn/view + {:style (style/container {:container-size container-size + :customization-color customization-color + :theme theme})} + (if picture + [fast-image/fast-image + {:source picture + :style {:width container-size + :height container-size}}] + [icon/icon :i/group + {:size icon-size + :color colors/white-opa-70}])]))) + +(def view (theme/with-theme view-internal)) diff --git a/src/status_im2/contexts/quo_preview/avatars/group_avatar.cljs b/src/status_im2/contexts/quo_preview/avatars/group_avatar.cljs index 9c71de8fad..83027403b6 100644 --- a/src/status_im2/contexts/quo_preview/avatars/group_avatar.cljs +++ b/src/status_im2/contexts/quo_preview/avatars/group_avatar.cljs @@ -21,9 +21,9 @@ {:key :x-large :value "x-Large"}]} {:label "Avatar" - :key :avatar? + :key :picture? :type :boolean} - (preview/customization-color-option)]) ; TODO: this is temporary only. Issue: https://github.com/status-im/status-mobile/issues/14566 + (preview/customization-color-option)]) (def avatar (resources/get-mock-image :user-picture-male4)) @@ -32,29 +32,28 @@ (let [state (reagent/atom {:theme :light :customization-color :blue :size :small - :avatar? false})] + :picture? false})] (fn [] [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} - [rn/view {:padding-bottom 150} - [rn/view {:flex 1} + [rn/view {:style {:padding-bottom 150}} + [rn/view {:style {:flex 1}} [preview/customizer state descriptor]] [rn/view - {:padding-vertical 60 - :flex-direction :row - :justify-content :center} - (let [{:keys [avatar?]} @state - params (cond-> @state - (boolean avatar?) - (assoc :avatar? avatar))] - (println params) + {:style {:padding-vertical 60 + :flex-direction :row + :justify-content :center}} + (let [{:keys [picture?]} @state + params (cond-> @state + (picture?) + (assoc :picture avatar))] [quo2/group-avatar params])]]]))) (defn preview-group-avatar [] [rn/view - {:background-color (colors/theme-colors colors/white - colors/neutral-90) - :flex 1} + {:style {:background-color (colors/theme-colors colors/white + colors/neutral-90) + :flex 1}} [rn/flat-list {:flex 1 :keyboard-should-persist-taps :always