Better height

src/quo2/components/info/nfc_prompt.cljs

@@ -0,0 +1,75 @@
+(ns quo2.components.info.nfc-prompt
+  (:require [quo.react-native :as rn]
+            [quo.theme :as theme]
+            [quo2.foundations.colors :as colors]
+            [status-im.ui.components.icons.icons :as icons]))
+
+(defn nfc-prompt
+  [{:keys [prompt-status on-press]}]
+  (let [dark?               (theme/dark?)
+        ready?              (= :ready prompt-status)
+        connected?          (= :connected prompt-status)
+        success?            (= :success prompt-status)
+        ready-or-connected? (or ready? connected?)]
+    [rn/view {:style {:height         400
+                      :flex-direction "column-reverse"}}
+     [rn/view {:style {:background-color (if dark?
+                                           colors/dark-prompt-bg
+                                           colors/white)
+                       :width            "100%"
+                       :justify-content  :center
+                       :align-items      :center
+                       :height           "100%"}}
+      [rn/view {:style (cond-> {:flex-direction  :row
+                                :justify-content :center
+                                :align-items     :center}
+                         success? (assoc :display :none))}
+       [rn/text {:style {:font-size   26
+                         :font-weight "400"
+                         :color       (if dark?
+                                        colors/dark-prompt-title
+                                        colors/light-prompt-title)
+                         :line-height 31
+                         :text-align  :center}}
+        "Ready to Scan"]]
+      [rn/view {:style {:justify-content :center
+                        :align-items     :center
+                        :margin-top      29}}
+       [icons/icon (if success?
+                     :main-icons/nfc-prompt-success
+                     (when ready-or-connected?
+                       :main-icons/nfc-prompt))
+        {:width  114
+         :color  "nil"
+         :height 114}]
+       [rn/view {:style {:width           291
+                         :height          95
+                         :justify-content :center
+                         :align-items     :center}}
+        [rn/text {:style {:font-size   16
+                          :font-weight "400"
+                          :color       (if dark?
+                                         colors/white
+                                         colors/neutral-95)
+                          :line-height 20}}
+         (if success?
+           "Success"
+           (if (= :ready prompt-status)
+             "Hold your iPhone near a Status Keycard"
+             "Connected. Don’t move your card."))]]
+       [rn/touchable-opacity {:style    (cond-> {:padding-vertical   18
+                                                 :padding-horizontal 10
+                                                 :align-items        :center
+                                                 :justify-content    :center
+                                                 :width              291
+                                                 :border-radius      10
+                                                 :background-color   (if dark?
+                                                                       colors/dark-prompt-button
+                                                                       colors/light-prompt-button)
+                                                 :height             52}
+                                          success? (assoc :display :none))
+                              :on-press (fn [] on-press)}
+        [rn/text {:style {:color (if dark?
+                                   colors/white
+                                   colors/neutral-95)}}
+         "Cancel"]]]]]))

src/quo2/foundations/colors.cljs

@@ -188,6 +188,12 @@
    (let [theme (or override-theme (theme/get-theme))]
      (if (= theme :light) light dark))))
 
+(def dark-prompt-bg "#1C1C1E")
+(def dark-prompt-title "#9F9FA5")
+(def dark-prompt-button "#8E8E93")
+(def light-prompt-title "#8F8E94")
+(def light-prompt-button "#D5D4DB")
+
 (defn dark?
   []
   (theme/dark?))

src/quo2/screens/info/nfc_prompt.cljs

@@ -0,0 +1,33 @@
+(ns quo2.screens.info.nfc-prompt
+  (:require [quo.react-native :as rn]
+            [reagent.core :as reagent]
+            [quo.previews.preview :as preview]
+            [quo2.foundations.colors :as colors]
+            [quo2.components.info.nfc-prompt :as quo2]))
+
+(def descriptor [{:label   "Prompt status"
+                  :key     :prompt-status
+                  :type    :select
+                  :options [{:key   :ready
+                             :value "Ready"}
+                            {:key   :connected
+                             :value "Connected"}
+                            {:key   :success
+                             :value "Success"}]}])
+
+(defn cool-preview []
+  (let [state (reagent/atom {:on-press identity
+                             :prompt-status :ready})]
+    (fn []
+      [rn/view {:margin-bottom 50
+                :padding-vertical 16}
+       [preview/customizer state descriptor]
+       [quo2/nfc-prompt @state]])))
+
+(defn preview-nfc-prompt []
+  [rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)
+            :flex             1}
+   [rn/flat-list {:flex                      1
+                  :keyboardShouldPersistTaps :always
+                  :header                    [cool-preview]
+                  :key-fn                    str}]])

src/quo2/screens/main.cljs

@@ -43,6 +43,7 @@
             [quo2.screens.wallet.token-overview :as token-overview]
             [quo2.screens.wallet.network-breakdown :as network-breakdown]
             [quo2.screens.wallet.network-amount :as network-amount]
+            [quo2.screens.info.nfc-prompt :as nfc-prompt]
             [re-frame.core :as re-frame]))
 
 (def screens-categories
@@ -84,7 +85,10 @@
            :component info-message/preview-info-message}
           {:name      :information-box
            :insets    {:top false}
-           :component information-box/preview-information-box}]
+           :component information-box/preview-information-box}
+          {:name      :nfc-prompt
+           :insets    {:top false}
+           :component nfc-prompt/preview-nfc-prompt}]
    :list-items [{:name      :channel
                  :insets    {:top false}
                  :component channel/preview-channel}