From cf71c5b7ffe50d145ccd477be0330f17a50fbc7d Mon Sep 17 00:00:00 2001
From: Milad <mmilad.sanati@gmail.com>
Date: Fri, 28 Jul 2023 13:41:07 +0330
Subject: [PATCH] refactor preview

---
 .../numbered_keyboard/keyboard_key.cljs       | 52 +++++++++++--------
 1 file changed, 30 insertions(+), 22 deletions(-)

diff --git a/src/status_im2/contexts/quo_preview/numbered_keyboard/keyboard_key.cljs b/src/status_im2/contexts/quo_preview/numbered_keyboard/keyboard_key.cljs
index c10c0b3bda0..81ba86a10b3 100644
--- a/src/status_im2/contexts/quo_preview/numbered_keyboard/keyboard_key.cljs
+++ b/src/status_im2/contexts/quo_preview/numbered_keyboard/keyboard_key.cljs
@@ -5,39 +5,47 @@
             [reagent.core :as reagent]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
-
 (def descriptor
   [{:label "Blur:"
     :key   :blur?
     :type  :boolean}
    {:label "Disable:"
     :key   :disabled?
-    :type  :boolean}])
+    :type  :boolean}
+   {:label   "Type"
+    :type    :select
+    :key     :type
+    :options [{:key   :digit
+               :value "Digit"}
+              {:key   :key
+               :value "Key"}
+              {:key   :derivation-path
+               :value "Derivation Path"}]}])
 
 (defn cool-preview
   []
   (let [state (reagent/atom {:disabled? false
-                             :on-press  #(js/alert "pressed")
-                             :blur?     false})]
+                             :on-press  #(js/alert "pressed" %)
+                             :blur?     false
+                             :type      :digit})]
     (fn []
-      [rn/view {:style {:padding-bottom 150}}
-       [rn/view {:style {:flex 1}}
-        [preview/customizer state descriptor]]
-       [preview/blur-view
-        {:style                 {:flex              1
-                                 :margin-horizontal 20}
-         :show-blur-background? (:blur? @state)
-         :blur-view-props       (when (:blur? @state)
-                                  {:overlay-color colors/neutral-80-opa-80})}
-        [rn/view
-         {:style {:flex-direction  :row
-                  :width           220
-                  :padding         20
-                  :justify-content :space-between
-                  :flex            1}}
-         [quo/keyboard-key (assoc @state :type :digit) 1]
-         [quo/keyboard-key (assoc @state :type :key) :i/delete]
-         [quo/keyboard-key (assoc @state :type :derivation-path)]]]])))
+      (let [value (case (:type @state)
+                    :key             :i/delete
+                    :derivation-path nil
+                    :digit           1
+                    nil)]
+        [rn/view {:style {:padding-bottom 150}}
+         [rn/view {:style {:flex 1}}
+          [preview/customizer state descriptor]]
+         [preview/blur-view
+          {:style                 {:flex              1
+                                   :align-self        :center
+                                   :justify-self      :center
+                                   :margin-horizontal 20}
+           :show-blur-background? (:blur? @state)
+           :blur-view-props       (when (:blur? @state)
+                                    {:overlay-color colors/neutral-80-opa-80})}
+          [quo/keyboard-key @state value]]]))))
 
 (defn preview-keyboard-key
   []