design review

status-im · Sep 27, 2023 · 9fe6ee2 · 9fe6ee2
1 parent acd97cb
commit 9fe6ee2
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 15 deletions.
diff --git a/ios/Podfile.lock b/ios/Podfile.lock
@@ -772,7 +772,7 @@ SPEC CHECKSUMS:
   RNLanguages: 962e562af0d34ab1958d89bcfdb64fafc37c513e
   RNPermissions: ad71dd4f767ec254f2cd57592fbee02afee75467
   RNReactNativeHapticFeedback: 2566b468cc8d0e7bb2f84b23adc0f4614594d071
-  RNReanimated: 43adb0307a62c1ce9694f36f124ca3b51a15272a
+  RNReanimated: 06a228c5a245ef7b5b03f0efc29d76ce4db9031c
   RNShare: d82e10f6b7677f4b0048c23709bd04098d5aee6c
   RNStaticSafeAreaInsets: 055ddbf5e476321720457cdaeec0ff2ba40ec1b8
   RNSVG: 80584470ff1ffc7994923ea135a3e5ad825546b9

diff --git a/src/quo2/components/wallet/token_input/style.cljs b/src/quo2/components/wallet/token_input/style.cljs
@@ -20,11 +20,13 @@
   {:width  32
    :height 32})
 
-(def text-input
+(defn text-input
+  [theme]
   (merge typography/heading-1
          {:font-weight  "600"
-          :margin-left  4
+          :margin-left  8
           :margin-right (if platform/ios? 6 4)
+          :color        (colors/theme-colors colors/neutral-100 colors/white theme)
           :padding      0
           :text-align   :center
           :height       "100%"}))
@@ -39,6 +41,6 @@
 (def data-container
   {:padding-top        4
    :padding-horizontal 20
-   :height             28
    :flex-direction     :row
-   :justify-content    :space-between})
+   :justify-content    :space-between
+   :align-items        :center})
diff --git a/src/quo2/components/wallet/token_input/view.cljs b/src/quo2/components/wallet/token_input/view.cljs
@@ -10,7 +10,8 @@
     [reagent.core :as reagent]
     [quo2.foundations.common :as common]
     [quo2.components.wallet.token-input.style :as style]
-    [quo2.components.tags.network-tags.view :as network-tag]))
+    [quo2.components.tags.network-tags.view :as network-tag]
+    [quo2.components.dividers.divider-line.view :as divider-line]))
 
 (defn calc-value
   [crypto? currency token value conversion]
@@ -24,7 +25,7 @@
         value     (reagent/atom 0)
         crypto?   (reagent/atom true)
         input-ref (atom nil)]
-    (fn [{:keys [theme token currency conversion networks title]}]
+    (fn [{:keys [theme token currency conversion networks title customization-color]}]
       [rn/view {:style (style/main-container width)}
        [rn/view {:style style/amount-container}
         [rn/pressable
@@ -43,11 +44,14 @@
            :max-length             12
            :default-value          @value
            :on-change-text         #(reset! value %)
-           :style                  style/text-input}]
+           :style                  (style/text-input theme)
+           :selection-color        customization-color}]
          [text/text
           {:size   :paragraph-2
            :weight :semi-bold
-           :style  {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
+           :style  {:color          (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
+                    :margin-right   8
+                    :padding-bottom 1}}
           (string/upper-case (clj->js (if @crypto? token currency)))]]
         [button/button
          {:icon                true
@@ -57,7 +61,7 @@
           :type                :outline
           :accessibility-label :reorder}
          :i/reorder]]
-       [rn/view {:style (style/divider width theme)}]
+       [divider-line/view {:container-style {:margin-vertical 8}}]
        [rn/view {:style style/data-container}
         [network-tag/view {:networks networks :title title}]
         [text/text

diff --git a/src/status_im2/contexts/quo_preview/wallet/token_input.cljs b/src/status_im2/contexts/quo_preview/wallet/token_input.cljs
@@ -31,11 +31,12 @@
 
 (defn preview
   []
-  (let [state (reagent/atom {:token      :eth
-                             :currency   :usd
-                             :conversion 0.02
-                             :networks   networks
-                             :title      title})]
+  (let [state (reagent/atom {:token               :eth
+                             :currency            :usd
+                             :conversion          0.02
+                             :networks            networks
+                             :title               title
+                             :customization-color :blue})]
     (fn []
       [preview/preview-container
        {:state      state