[#19178] fix: jump card responsive (#19600)

src/status_im/contexts/shell/jump_to/components/jump_to_screen/view.cljs

@@ -60,7 +60,7 @@
 (def empty-cards (repeat 6 {:type shell.constants/empty-card}))
 
 (defn jump-to-list
-  [switcher-cards shell-margin]
+  [switcher-cards]
   (let [data (if (seq switcher-cards) switcher-cards empty-cards)]
     [:<>
      [rn/flat-list
@@ -70,7 +70,7 @@
        :header                            (jump-to-text)
        :ref                               #(reset! state/jump-to-list-ref %)
        :num-columns                       2
-       :column-wrapper-style              {:margin-horizontal shell-margin
+       :column-wrapper-style              {:margin-horizontal 20
                                            :justify-content   :space-between
                                            :margin-bottom     16}
        :style                             style/jump-to-list
@@ -89,9 +89,7 @@
 (defn view
   []
   (let [switcher-cards (rf/sub [:shell/sorted-switcher-cards])
-        width          (rf/sub [:dimensions/window-width])
-        top            (safe-area/get-top)
-        shell-margin   (/ (- width (* 2 shell.constants/switcher-card-size)) 3)]
+        top            (safe-area/get-top)]
     [theme/provider {:theme :dark}
      [rn/view
       {:style {:top              0
@@ -100,7 +98,7 @@
                :bottom           -1
                :position         :absolute
                :background-color colors/neutral-100}}
-      [jump-to-list switcher-cards shell-margin]
+      [jump-to-list switcher-cards]
       [top-nav-blur-overlay top]
       [common.top-nav/view
        {:jump-to?        true

src/status_im/contexts/shell/jump_to/components/switcher_cards/style.cljs

@@ -12,22 +12,23 @@
    :community-channel            colors/white})
 
 (defn base-container
-  [background-color]
-  {:width            160
-   :height           160
+  [background-color card-size]
+  {:width            card-size
+   :height           card-size
    :border-radius    16
    :overflow         :hidden
    :background-color (colors/alpha background-color 0.4)})
 
 (defn empty-card
-  []
+  [card-size]
   (merge
-   (base-container nil)
+   (base-container nil card-size)
    {:background-color colors/neutral-95}))
 
-(def secondary-container
-  {:width            160
-   :height           120
+(defn secondary-container
+  [card-size]
+  {:width            card-size
+   :height           (- card-size 40)
    :border-radius    16
    :bottom           0
    :position         :absolute

src/status_im/contexts/shell/jump_to/components/switcher_cards/view.cljs

@@ -220,7 +220,7 @@
   []
   (let [card-ref (atom nil)]
     (fn [{:keys [avatar-params title type customization-color
-                 content banner id channel-id profile-customization-color]}]
+                 content banner id channel-id profile-customization-color]} card-size]
       (let [color-50 (colors/custom-color customization-color 50)]
         [rn/touchable-opacity
          {:on-press       #(calculate-card-position-and-open-screen
@@ -230,13 +230,13 @@
                             channel-id)
           :ref            #(reset! card-ref %)
           :active-opacity 1}
-         [rn/view {:style (style/base-container color-50)}
+         [rn/view {:style (style/base-container color-50 card-size)}
           (when banner
             [rn/image
              {:source banner
               :style  {:width  160
                        :height 65}}])
-          [rn/view {:style style/secondary-container}
+          [rn/view {:style (style/secondary-container card-size)}
            [quo/text
             {:size            :paragraph-1
              :weight          :semi-bold
@@ -284,8 +284,8 @@
   [:<>])
 
 (defn empty-card
-  []
-  [rn/view {:style (style/empty-card)}])
+  [card-size]
+  [rn/view {:style (style/empty-card card-size)}])
 
 ;; Home Card
 (defn communities-discover
@@ -294,32 +294,35 @@
 
 (defn card
   [{:keys [type] :as data}]
-  (cond
-    (= type shell.constants/empty-card) ; Placeholder
-    [empty-card]
+  (let [screen-width (:width (rn/get-window))
+        ;; 2 column, 20px horizontal margin, 15px gap
+        card-size    (/ (- screen-width 55) 2)]
+    (cond
+      (= type shell.constants/empty-card) ; Placeholder
+      [empty-card card-size]
 
-    ;; Screens Card
-    (#{shell.constants/one-to-one-chat-card
-       shell.constants/private-group-chat-card
-       shell.constants/community-card
-       shell.constants/community-channel-card}
-     type)
-    [screens-card data]
+      ;; Screens Card
+      (#{shell.constants/one-to-one-chat-card
+         shell.constants/private-group-chat-card
+         shell.constants/community-card
+         shell.constants/community-channel-card}
+       type)
+      [screens-card data card-size]
 
-    (= type shell.constants/browser-card) ; Browser Card
-    [browser-card data]
+      (= type shell.constants/browser-card) ; Browser Card
+      [browser-card data]
 
-    (= type shell.constants/wallet-card) ; Wallet Card
-    [wallet-card data]
+      (= type shell.constants/wallet-card) ; Wallet Card
+      [wallet-card data]
 
-    (= type shell.constants/wallet-collectible) ; Wallet Card
-    [wallet-collectible data]
+      (= type shell.constants/wallet-collectible) ; Wallet Card
+      [wallet-collectible data]
 
-    (= type shell.constants/wallet-graph) ; Wallet Card
-    [wallet-graph data]
+      (= type shell.constants/wallet-graph) ; Wallet Card
+      [wallet-graph data]
 
-    (= type shell.constants/communities-discover) ; Home Card
-    [communities-discover data]
+      (= type shell.constants/communities-discover) ; Home Card
+      [communities-discover data]
 
-    :else
-    nil))
+      :else
+      nil)))