diff --git a/src/status_im/components/common/common.cljs b/src/status_im/components/common/common.cljs index 26c914e44b..bb39e16352 100644 --- a/src/status_im/components/common/common.cljs +++ b/src/status_im/components/common/common.cljs @@ -16,7 +16,7 @@ {:style st/gradient-top :colors st/gradient-top-colors}])) -(defn separator [style wrapper-style] +(defn separator [style & [wrapper-style]] [view (merge st/separator-wrapper wrapper-style) [view (merge st/separator style)]]) diff --git a/src/status_im/components/text_input_with_label/styles.cljs b/src/status_im/components/text_input_with_label/styles.cljs index cffa1805d0..874002017a 100644 --- a/src/status_im/components/text_input_with_label/styles.cljs +++ b/src/status_im/components/text_input_with_label/styles.cljs @@ -33,10 +33,8 @@ (defstyle description-text {:color common/color-gray4 :android {:margin-top 6 - :height 14 :font-size 12} :ios {:margin-top 4 - :height 16 :font-size 14 :letter-spacing -0.2}}) diff --git a/src/status_im/transactions/screens/pending-transactions.cljs b/src/status_im/transactions/screens/pending-transactions.cljs index 5380533b01..8eb52088c5 100644 --- a/src/status_im/transactions/screens/pending-transactions.cljs +++ b/src/status_im/transactions/screens/pending-transactions.cljs @@ -45,10 +45,8 @@ [transactions [:transactions] {:keys [password]} [:get :confirm-transactions] confirmed? [:get-in [:transactions-list-ui-props :confirmed?]]] - {:component-did-update #(when-not (seq transactions) (rf/dispatch [:navigate-back])) :component-will-unmount #(rf/dispatch [:set-in [:transactions-list-ui-props :confirmed?] false])} - [(if platform/ios? rn/keyboard-avoiding-view rn/view) (merge {:behavior :padding} st/transactions-screen) [status-bar/status-bar {:type (if platform/ios? :transparent :main)}] [toolbar-view transactions] diff --git a/src/status_im/transactions/screens/transaction-details.cljs b/src/status_im/transactions/screens/transaction-details.cljs index a8d7ad2a15..ed019f4c92 100644 --- a/src/status_im/transactions/screens/transaction-details.cljs +++ b/src/status_im/transactions/screens/transaction-details.cljs @@ -39,7 +39,7 @@ [current-account [:get-current-account] recipient [:contact-by-address to]] (let [recipient-name (or (:name recipient) to)] - [rn/view + [rn/view st/details-container [detail-item (i18n/label :t/to) recipient-name true] [detail-item (i18n/label :t/from) (:name current-account) true] [detail-data data]])) @@ -48,16 +48,14 @@ [{:keys [id] :as transaction} [:get :selected-transaction] {:keys [password]} [:get :confirm-transactions] confirmed? [:get-in [:transaction-details-ui-props :confirmed?]]] - {:component-did-update #(when-not transaction (rf/dispatch [:navigate-to-modal :pending-transactions])) :component-will-unmount #(rf/dispatch [:set-in [:transaction-details-ui-props :confirmed?] false])} - [(if platform/ios? rn/keyboard-avoiding-view rn/view) (merge {:behavior :padding} st/transactions-screen) [status-bar/status-bar {:type (if platform/ios? :transparent :main)}] [toolbar-view] [rn/scroll-view st/details-screen-content-container [transactions-list-item/view transaction #(rf/dispatch [:navigate-to-modal :pending-transactions])] - (when platform/ios? [common/separator {} st/details-separator]) + [common/separator st/details-separator st/details-separator-wrapper] [details transaction]] (when confirmed? [password-form/view 1]) (let [confirm-text (if confirmed? diff --git a/src/status_im/transactions/styles/list_item.cljs b/src/status_im/transactions/styles/list_item.cljs index c29d298dcd..62de0d6e10 100644 --- a/src/status_im/transactions/styles/list_item.cljs +++ b/src/status_im/transactions/styles/list_item.cljs @@ -3,7 +3,7 @@ (:require [status-im.components.styles :as st])) (def item - {:padding-vertical 20 + {:padding-vertical 19 :padding-horizontal 16 :flex 1 :flex-direction :row diff --git a/src/status_im/transactions/styles/password_form.cljs b/src/status_im/transactions/styles/password_form.cljs index 003f151ab1..a23c78715e 100644 --- a/src/status_im/transactions/styles/password_form.cljs +++ b/src/status_im/transactions/styles/password_form.cljs @@ -1,30 +1,9 @@ (ns status-im.transactions.styles.password-form - (:require-macros [status-im.utils.styles :refer [defnstyle defstyle]]) - (:require [status-im.components.styles :as st])) + (:require-macros [status-im.utils.styles :refer [defstyle]]) + (:require [status-im.components.styles :as common])) -(defnstyle password-container [error?] - {:margin-bottom (if error? 42 24) - :padding-left 16 - :ios {:border-top-width 1 - :border-top-color st/color-white-transparent-2}}) - -(def password-title - {:color st/color-white - :font-size 15 - :margin-top 16 - :margin-bottom 12}) - -(def password-input-wrapper - {:position :relative - :height 52 - :padding-top 0 - :padding-bottom 0 - :margin-bottom 0}) - -(defstyle password-input - {:color :white - :height 52 - :padding-left 0 - :padding-top 24 - :android {:font-size 16} - :ios {:font-size 17}}) +(defstyle password-container + {:android {:margin-bottom 27} + :ios {:margin-bottom 20 + :border-top-width 1 + :border-top-color common/color-white-transparent-2}}) diff --git a/src/status_im/transactions/styles/screens.cljs b/src/status_im/transactions/styles/screens.cljs index dd3d9437ad..88c2d75dd4 100644 --- a/src/status_im/transactions/styles/screens.cljs +++ b/src/status_im/transactions/styles/screens.cljs @@ -1,13 +1,13 @@ (ns status-im.transactions.styles.screens (:require-macros [status-im.utils.styles :refer [defstyle]]) - (:require [status-im.components.styles :as st] + (:require [status-im.components.styles :as common] [status-im.utils.platform :as platform])) ;; common (def transactions-toolbar-background (if platform/ios? - st/color-dark-blue-2 - st/color-dark-blue-1)) + common/color-dark-blue-2 + common/color-dark-blue-1)) (defstyle toolbar-title-container {:flex 1 @@ -19,25 +19,25 @@ :padding-bottom 16}}) (def toolbar-title-text - {:color st/color-white + {:color common/color-white :font-size 17}) (defstyle toolbar-title-count - {:color st/color-white + {:color common/color-white :font-size 17 :margin-left 8 :android {:opacity 0.2} :ios {:opacity 0.6}}) (defstyle toolbar-border - {:ios {:background-color st/color-white + {:ios {:background-color common/color-white :opacity 0.1}}) ;; pending-transactions (def transactions-screen {:flex 1 - :background-color st/color-dark-blue-2}) + :background-color common/color-dark-blue-2}) (def transactions-screen-content-container {:flex 1 @@ -57,11 +57,18 @@ {:flex 1 :android {:padding-top 8}}) +(def details-separator-wrapper + {:background-color common/color-dark-blue-2}) + (def details-separator - {:margin-bottom 10 - :margin-left 16 + {:margin-left 16 + :background-color common/color-white :opacity 0.1}) +(defstyle details-container + {:ios {:margin-top 10} + :android {:margin-top 0}}) + (def details-item {:margin-top 10 :padding-left 16 @@ -71,7 +78,7 @@ (defstyle details-item-title {:width 80 :font-size 15 - :color st/color-white + :color common/color-white :android {:opacity 0.2 :margin-right 24} :ios {:opacity 0.5 @@ -81,30 +88,30 @@ (defn details-item-content [name?] {:font-size 15 :flex-shrink 1 - :color (if name? st/color-light-blue st/color-white)}) + :color (if name? common/color-light-blue common/color-white)}) (defstyle details-data - {:margin-top 16 - :padding 16 - :background-color st/color-dark-blue-3 + {:padding 16 + :margin-top 16 + :background-color common/color-dark-blue-3 :ios {:margin-horizontal 16}}) (defstyle details-data-title {:font-size 15 - :color st/color-white + :color common/color-white :android {:opacity 0.2} :ios {:opacity 0.5}}) (def details-data-content {:font-size 15 - :color st/color-white + :color common/color-white :margin-top 8}) ;; confirmation-success (def success-screen {:flex 1 - :background-color st/color-dark-blue-2}) + :background-color common/color-dark-blue-2}) (def success-screen-content-container {:flex 1 @@ -112,7 +119,7 @@ :justify-content :center}) (def success-icon-container - {:background-color st/color-light-blue + {:background-color common/color-light-blue :border-radius 100 :height 133 :width 133 @@ -125,5 +132,5 @@ (def success-text {:font-size 17 - :color st/color-light-blue3 + :color common/color-light-blue3 :margin-top 26}) diff --git a/src/status_im/transactions/views/list_item.cljs b/src/status_im/transactions/views/list_item.cljs index b20f70a32e..da8a0784a7 100644 --- a/src/status_im/transactions/views/list_item.cljs +++ b/src/status_im/transactions/views/list_item.cljs @@ -25,8 +25,8 @@ [rn/touchable-highlight {:on-press #(do (rf/dispatch [:deny-transaction transaction-id]) (when on-deny (on-deny)))} [rn/view {:style st/item-deny-btn} - [rn/image {:source {:uri :icon_close_white} - :style st/item-deny-btn-icon}]]]) + [rn/image {:source {:uri :icon_close_white} + :style st/item-deny-btn-icon}]]]) (defview view [{:keys [to value id] :as transaction} on-deny] [recipient [:contact-by-address to]] diff --git a/src/status_im/transactions/views/password_form.cljs b/src/status_im/transactions/views/password_form.cljs index 3d6387e424..3b7573423f 100644 --- a/src/status_im/transactions/views/password_form.cljs +++ b/src/status_im/transactions/views/password_form.cljs @@ -2,28 +2,20 @@ (:require-macros [status-im.utils.views :refer [defview]]) (:require [re-frame.core :as rf] [status-im.components.react :as rn] - [status-im.components.styles :as common-st] - [status-im.components.text-field.view :as text-field] + [status-im.components.text-input-with-label.view :refer [text-input-with-label]] [status-im.transactions.styles.password-form :as st] [status-im.i18n :as i18n])) (defview view [transaction-quantity] [wrong-password? [:wrong-password?]] (let [error? wrong-password?] - [rn/view (st/password-container error?) - [rn/text {:style st/password-title} - (i18n/label-pluralize transaction-quantity :t/enter-password-transactions)] - [text-field/text-field - {:editable true - :secure-text-entry true - :label-hidden? true - :error (when error? (i18n/label :t/wrong-password)) - :error-color common-st/color-light-red2 - :placeholder (i18n/label :t/password) - :placeholder-text-color common-st/color-white-transparent - :line-color common-st/color-light-blue - :focus-line-height 2 - :wrapper-style st/password-input-wrapper - :input-style st/password-input - :auto-focus true - :on-change-text #(rf/dispatch [:set-in [:confirm-transactions :password] %])}]])) + [rn/view st/password-container + [text-input-with-label + {:label (i18n/label :t/password) + :description (i18n/label-pluralize transaction-quantity :t/enter-password-transactions) + :on-change-text #(rf/dispatch [:set-in [:confirm-transactions :password] %]) + :style {:color :white} + :auto-focus true + :secure-text-entry true + :error (when error? (i18n/label :t/wrong-password))}]])) + diff --git a/src/status_im/translations/en.cljs b/src/status_im/translations/en.cljs index 13cb5507a4..2a363a3a74 100644 --- a/src/status_im/translations/en.cljs +++ b/src/status_im/translations/en.cljs @@ -278,8 +278,8 @@ :zero "No transactions confirmed"} :transaction "Transaction" :pending-transactions "Pending transactions" - :enter-password-transactions {:one "Enter your password to confirm the transaction" - :other "Enter your password to confirm the transactions"} + :enter-password-transactions {:one "Confirm transaction by entering your password" + :other "Confirm transactions by entering your password"} :status "Status" :pending-confirmation "Pending confirmation" :recipient "Recipient"