fix: image preview padding (#17545)

* fix: image preview padding

* fix: clear icon

* fix: revert clear icon color

src/status_im2/contexts/chat/composer/images/style.cljs

@@ -6,19 +6,29 @@
    :padding-bottom 8
    :padding-right  12})
 
-(def remove-photo-container
+(defn remove-photo-container
+  [theme]
+  {:width            16
+   :height           16
+   :border-radius    8
+   :background-color (colors/theme-colors colors/white colors/neutral-95 theme)
+   :position         :absolute
+   :top              5
+   :right            9
+   :justify-content  :center
+   :align-items      :center
+  })
+
+(def remove-photo-inner-container
   {:width            14
    :height           14
    :border-radius    7
    :background-color colors/neutral-50
-   :position         :absolute
-   :top              5
-   :right            5
    :justify-content  :center
    :align-items      :center})
 
 (def small-image
   {:width         56
    :height        56
-   :border-radius 8})
+   :border-radius 12})
 

src/status_im2/contexts/chat/composer/images/view.cljs

@@ -1,6 +1,7 @@
 (ns status-im2.contexts.chat.composer.images.view
   (:require [quo2.core :as quo]
             [quo2.foundations.colors :as colors]
+            [quo2.theme :as quo.theme]
             [react-native.core :as rn]
             [react-native.gesture :as gesture]
             [react-native.reanimated :as reanimated]
@@ -9,23 +10,25 @@
             [status-im2.contexts.chat.composer.constants :as constants]))
 
 (defn image
-  [item]
+  [item theme]
   [rn/view style/image-container
    [rn/image
     {:source {:uri (:resized-uri (val item))}
      :style  style/small-image}]
    [rn/touchable-opacity
     {:on-press #(rf/dispatch [:chat.ui/image-unselected (val item)])
-     :style    style/remove-photo-container
+     :style    (style/remove-photo-container theme)
      :hit-slop {:right  5
                 :left   5
                 :top    10
                 :bottom 10}}
-    [quo/icon :i/close {:color colors/white :size 12}]]])
+    [rn/view {:style style/remove-photo-inner-container}
+     [quo/icon :i/clear {:size 20 :color colors/neutral-50 :color-2 colors/white}]]]])
 
 (defn f-images-list
   []
-  (let [images (rf/sub [:chats/sending-image])
+  (let [theme  (quo.theme/use-theme-value)
+        images (rf/sub [:chats/sending-image])
         height (reanimated/use-shared-value (if (seq images) constants/images-container-height 0))]
     (rn/use-effect (fn []
                      (reanimated/animate height
@@ -37,7 +40,8 @@
                                                     :z-index           1})}
      [gesture/flat-list
       {:key-fn                            first
-       :render-fn                         image
+       :render-fn                         (fn [item]
+                                            (image item theme))
        :data                              images
        :content-container-style           {:padding-horizontal 20}
        :horizontal                        true

src/status_im2/contexts/chat/composer/style.cljs

@@ -54,12 +54,12 @@
   [height max-height]
   (reanimated/apply-animations-to-style
    {:height height}
-   {:max-height max-height
-    :overflow   :hidden}))
+   {:max-height max-height}))
 
 (defn input-view
   [{:keys [recording?]}]
-  {:z-index    1
+  {:overflow   :hidden
+   :z-index    1
    :flex       1
    :display    (if @recording? :none :flex)
    :min-height constants/input-height})