diff --git a/src/status_im/ui/components/colors.cljs b/src/status_im/ui/components/colors.cljs index 0c69df734e..7c691a3d73 100644 --- a/src/status_im/ui/components/colors.cljs +++ b/src/status_im/ui/components/colors.cljs @@ -14,6 +14,7 @@ (def gray-transparent "rgba(184, 193, 199, 0.5)") ;; Used for tabs (def gray-border "#ececf0") (def blue "#4360df") ;; Used as main wallet color, and ios home add button +(def blue-dark "#3147ac") ;; Used as secondary wallet color (icon background) (def red "#ff2d55") ;; Used to highlight errors or "dangerous" actions (def red-light "#ffe5ea") ;; error tooltip (def text-light-gray "#212121") ;; Used for labels (home items) diff --git a/src/status_im/ui/screens/wallet/send/styles.cljs b/src/status_im/ui/screens/wallet/send/styles.cljs index 7a0be786cc..b9fc9044d1 100644 --- a/src/status_im/ui/screens/wallet/send/styles.cljs +++ b/src/status_im/ui/screens/wallet/send/styles.cljs @@ -89,7 +89,7 @@ :margin-left 4}) (def advanced-fees-text - {:color colors/white}) + {:color colors/white}) (def advanced-fees-details-text {:color colors/white-lighter-transparent}) @@ -98,7 +98,24 @@ {:flex-direction :row}) (def transaction-fee-info - {:margin 15}) + {:flex-direction :row + :margin 15}) + +(def transaction-fee-info-text-wrapper + {:flex-shrink 1}) + +(def transaction-fee-info-icon + {:border-radius 25 + :width 25 + :height 25 + :margin-right 15 + :align-items :center + :justify-content :center + :background-color colors/blue-dark}) + +(def transaction-fee-info-icon-text + {:color colors/white + :font-size 14}) (def transaction-fee-input {:keyboard-type :numeric diff --git a/src/status_im/ui/screens/wallet/send/views.cljs b/src/status_im/ui/screens/wallet/send/views.cljs index bf42418abe..7a24812344 100644 --- a/src/status_im/ui/screens/wallet/send/views.cljs +++ b/src/status_im/ui/screens/wallet/send/views.cljs @@ -137,8 +137,11 @@ [wallet.components/cartouche-secondary-text (i18n/label :t/gwei)]]]] [react/view styles/transaction-fee-info - [react/text {:style styles/advanced-fees-text} - (i18n/label :t/wallet-transaction-fee-details)]] + [react/view styles/transaction-fee-info-icon + [react/text {:style styles/transaction-fee-info-icon-text} "?"]] + [react/view styles/transaction-fee-info-text-wrapper + [react/text {:style styles/advanced-fees-text} + (i18n/label :t/wallet-transaction-fee-details)]]] [components/separator] [react/view styles/transaction-fee-block-wrapper [wallet.components/cartouche {:disabled? true}