diff --git a/src/status_im/react_native/resources.cljs b/src/status_im/react_native/resources.cljs index 0251a83095..0d8fd276de 100644 --- a/src/status_im/react_native/resources.cljs +++ b/src/status_im/react_native/resources.cljs @@ -26,4 +26,6 @@ :empty-recent (js/require "./resources/images/ui/empty-recent.png") :analytics-image (js/require "./resources/images/ui/analytics-image.png") :welcome-image (js/require "./resources/images/ui/welcome-image.png") - :lock (js/require "./resources/images/ui/lock.png")}) + :lock {:image (js/require "./resources/images/ui/lock.png") + :width 993 + :height 933}}) diff --git a/src/status_im/ui/components/common/common.cljs b/src/status_im/ui/components/common/common.cljs index 1d27782cfe..63595f057c 100644 --- a/src/status_im/ui/components/common/common.cljs +++ b/src/status_im/ui/components/common/common.cljs @@ -1,6 +1,7 @@ (ns status-im.ui.components.common.common (:require-macros [status-im.utils.views :refer [defview letsubs]]) - (:require [status-im.i18n :as i18n] + (:require [reagent.core :as reagent] + [status-im.i18n :as i18n] [status-im.ui.components.react :as react] [status-im.ui.components.icons.vector-icons :as vector-icons] [status-im.ui.components.common.styles :as styles] @@ -87,9 +88,15 @@ (assoc :accessibility-label accessibility-label)) value]])) -(defn image-contain - ([source] (image-contain nil source)) - ([{:keys [style]} source] - [react/view {:style (merge styles/image-contain - style)} - [react/image {:source source :resizeMode :contain :style styles/image-contain-image}]])) +(defn image-contain [_ _] + (let [content-width (reagent/atom 0)] + (reagent/create-class + {:reagent-render + (fn [{:keys [container-style style]} {:keys [image width height]}] + [react/view {:style (merge styles/image-contain container-style) + :on-layout #(reset! content-width (-> % .-nativeEvent .-layout .-width))} + [react/image {:source image + :resize-mode :contain + :style (merge style + {:width @content-width + :height (/ (* @content-width height) width)})}]])}))) \ No newline at end of file diff --git a/src/status_im/ui/components/common/styles.cljs b/src/status_im/ui/components/common/styles.cljs index 4f7dcb6b51..aa4901d775 100644 --- a/src/status_im/ui/components/common/styles.cljs +++ b/src/status_im/ui/components/common/styles.cljs @@ -164,12 +164,4 @@ :color colors/white}) (def image-contain - {:flex-direction :row - :flex 1 - :align-items :center - :justify-content :center - :flex-wrap :wrap}) - -(def image-contain-image - {:flex-direction :row - :flex 1}) + {:align-self :stretch}) diff --git a/src/status_im/ui/screens/profile/seed/styles.cljs b/src/status_im/ui/screens/profile/seed/styles.cljs index 66d68fe270..d4d04b0a89 100644 --- a/src/status_im/ui/screens/profile/seed/styles.cljs +++ b/src/status_im/ui/screens/profile/seed/styles.cljs @@ -4,10 +4,11 @@ (def intro-container {:flex 1 :align-items :center + :justify-content :center :margin-horizontal 26}) (def intro-image - {:padding-vertical 25}) + {:padding-bottom 10}) (def intro-text {:text-align :center @@ -26,8 +27,7 @@ (def intro-button {:flex-direction :row - :margin-top 16 - :margin-bottom 32}) + :margin-top 16}) (def six-words-container {:flex 1 diff --git a/src/status_im/ui/screens/profile/seed/views.cljs b/src/status_im/ui/screens/profile/seed/views.cljs index 89f8880c1d..932ec92bdf 100644 --- a/src/status_im/ui/screens/profile/seed/views.cljs +++ b/src/status_im/ui/screens/profile/seed/views.cljs @@ -36,7 +36,7 @@ (defn intro [] [react/view {:style styles/intro-container} - [components.common/image-contain {:style styles/intro-image} + [components.common/image-contain {:container-style styles/intro-image} (:lock resources/ui)] [react/text {:style styles/intro-text} (i18n/label :t/your-data-belongs-to-you)]