[#17300] fix: syncing device indicator color and some alignment (#17340)

Author: mohsen-ghafouri

src/quo2/components/settings/settings_item/style.cljs

@@ -1,35 +1,31 @@
 (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})
 
 (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})

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]

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

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