diff --git a/src/quo2/components/settings/settings_item/style.cljs b/src/quo2/components/settings/settings_item/style.cljs index 07d02d0fa2..3c72c4ca34 100644 --- a/src/quo2/components/settings/settings_item/style.cljs +++ b/src/quo2/components/settings/settings_item/style.cljs @@ -1,22 +1,18 @@ (ns quo2.components.settings.settings-item.style (:require [quo2.foundations.colors :as colors])) -(defn find-icon-height - [description tag image] - (let [icon-height (if (= image :icon-avatar) 32 20) - icon-height (if description 40 icon-height)] - (if tag 72 icon-height))) - (defn container - [{:keys [in-card? tag container-style]}] - (merge {:padding-horizontal 12 - :padding-top (if in-card? 12 13) - :padding-bottom (if in-card? 12 13) - :flex-direction :row - :justify-content :space-between - :height (if tag 96 48)} + [{:keys [container-style]}] + (merge {:padding 12 + :flex-direction :row + :justify-content :space-between} container-style)) +(defn left-sub-container + [{:keys [tag description]}] + {:flex-direction :row + :align-items (if (or tag description) :flex-start :center)}) + (def sub-container {:flex-direction :row :align-items :center}) @@ -24,12 +20,12 @@ (def left-container {:margin-left 12 :height "100%" - :justify-content :center}) + :justify-content :flex-start}) (defn image-container - [description tag image] - {:height (find-icon-height description tag image) - :justify-content :flex-start}) + [image tag description] + {:height (if (= image :icon-avatar) 32 20) + :margin-top (if (or tag description) 1 0)}) (def status-container {:flex-direction :row @@ -57,3 +53,8 @@ :height 15 :border-radius 12 :background-color background-color}) + +(def status-tag-container + {:margin-top 7 + :margin-bottom 2 + :margin-left -1}) diff --git a/src/quo2/components/settings/settings_item/view.cljs b/src/quo2/components/settings/settings_item/view.cljs index 9b6813bca6..9d7252f3cc 100644 --- a/src/quo2/components/settings/settings_item/view.cljs +++ b/src/quo2/components/settings/settings_item/view.cljs @@ -65,7 +65,7 @@ :label (:label tag-props) :no-icon? true :size :small - :container-style {:margin-top 8}}] + :container-style style/status-tag-container}] :context [context-tag/view (merge tag-props {:type :icon @@ -105,7 +105,7 @@ {:style (style/container props) :on-press on-press :accessibility-label accessibility-label} - [rn/view {:style style/sub-container} + [rn/view {:style (style/left-sub-container props)} [image-component props] [rn/view {:style style/left-container} [text/text {:weight :medium} title] diff --git a/src/status_im2/contexts/syncing/device/style.cljs b/src/status_im2/contexts/syncing/device/style.cljs index 4bf7747684..4cb1de6222 100644 --- a/src/status_im2/contexts/syncing/device/style.cljs +++ b/src/status_im2/contexts/syncing/device/style.cljs @@ -5,4 +5,4 @@ {:border-color colors/white-opa-5 :border-radius 16 :border-width 1 - :margin-top 12}) + :margin-top 11}) diff --git a/src/status_im2/contexts/syncing/device/view.cljs b/src/status_im2/contexts/syncing/device/view.cljs index a59db907c8..79d69a78e7 100644 --- a/src/status_im2/contexts/syncing/device/view.cljs +++ b/src/status_im2/contexts/syncing/device/view.cljs @@ -16,6 +16,7 @@ (cond-> {:container-style style/device-container :title name + :blur? true :image :icon :image-props (cond (#{:mobile :ios :android} (keyword device-type)) :i/mobile