status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

[#6815] restyle sent-transaction screen 

Signed-off-by: Goran Jovic <goranjovic@gmail.com>
This commit is contained in:
Bruce Hauman 2018-11-21 07:11:41 -05:00 committed by Goran Jovic
parent f7c9f8631d
commit 880d1da3d1
No known key found for this signature in database
GPG Key ID: D429D1A9B2EB8A8E
5 changed files with 76 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
resources/icons/tiny_check.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="22" height="17" viewBox="0 0 22 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.58878 11.8584L18.4388 1.30002C19.1842 0.574736 20.39 0.572269 21.1439 1.30585C21.8925 2.03435 21.8964 3.21169 21.1499 3.93816L8.9383 15.8215C8.5677 16.1821 8.08323 16.364 7.59708 16.3656C7.0965 16.3619 6.61065 16.1829 6.24577 15.8278L0.798739 10.5272C0.0570162 9.8054 0.0573936 8.63479 0.81124 7.90121C1.55987 7.1727 2.77805 7.177 3.50976 7.88904L7.58878 11.8584Z" fill="#4360DF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 537 B

1
src/status_im/ui/components/icons/vector_icons.cljs
View File

@ -170,6 +170,7 @@
:icons/logo (components.svg/slurp-svg "./resources/icons/logo.svg")
:icons/camera (components.svg/slurp-svg "./resources/icons/camera.svg")
:icons/check (components.svg/slurp-svg "./resources/icons/check.svg")
:icons/tiny-check (components.svg/slurp-svg "./resources/icons/tiny_check.svg")
:icons/dots (components.svg/slurp-svg "./resources/icons/dots.svg")
:icons/warning (components.svg/slurp-svg "./resources/icons/warning.svg")
:icons/settings (components.svg/slurp-svg "./resources/icons/settings.svg")

47
src/status_im/ui/screens/wallet/transaction_sent/styles.cljs
View File

@ -1,41 +1,18 @@
(ns status-im.ui.screens.wallet.transaction-sent.styles
(:require-macros [status-im.utils.styles :refer [defnstyle defstyle]])
(:require [status-im.ui.components.colors :as colors]))
(def transaction-sent-container
{:align-items :center})
(def ok-icon-container
{:width 56
:height 56
:border-radius 28
:background-color :white
:align-items :center
:justify-content :center
:margin-top 57
:margin-bottom 16})
(:require [status-im.ui.components.colors :as colors]
[status-im.utils.platform :as platform]))
(def transaction-sent
{:color :white
:font-size 17})
(def gap
{:height 8})
{:color colors/white
:font-weight :bold
:line-height 27
:font-size (if platform/android? 23 22)
:margin-bottom 8})
(def transaction-sent-description
{:color :white
:opacity 0.6
{:color "rgba(255,255,255,0.6)"
:font-size (if platform/android? 17 15)
:line-height 22
:text-align :center
:padding-horizontal 16})
(def transaction-details
{:color :white
:font-size 15})
(def got-it-container
{:align-items :center
:padding-vertical 18})
(def got-it
{:color :white
:font-size 15})
:padding-horizontal 30
:margin-bottom 35})

85
src/status_im/ui/screens/wallet/transaction_sent/views.cljs
View File

@ -3,38 +3,71 @@
(:require [status-im.ui.components.react :as react]
[status-im.ui.components.status-bar.view :as status-bar]
[status-im.ui.components.icons.vector-icons :as vi]
[status-im.ui.screens.wallet.styles :as wallet.styles]
[status-im.react-native.resources :as resources]
[status-im.ui.screens.wallet.transaction-sent.styles :as styles]
[status-im.ui.components.styles :as components.styles]
[re-frame.core :as re-frame]
[status-im.ui.screens.wallet.components.views :as components]
[status-im.i18n :as i18n]
[status-im.utils.platform :as platform]
[status-im.ui.components.colors :as colors]))
(defview transaction-sent [& [modal?]]
(defn- ok-circle []
[react/view {:background-color colors/black-transparent
:width 160
:height 160
:border-radius 81
:align-items :center
:justify-content :center}
[react/view {:background-color colors/white
:width 80
:height 80
:border-radius 41
:shadow-radius 4
:shadow-offset {:width 0 :height 2}
:shadow-opacity 0.8
:shadow-color "rgba(43, 59, 71, 0.12)"
:align-items :center
:justify-content :center}
[vi/icon :icons/tiny-check {:color colors/blue}]]])
(defn- transaction-sent-message []
[react/view {:align-items :center}
[react/text {:style styles/transaction-sent
:font (if platform/android? :medium :default)
:accessibility-label :transaction-sent-text}
(i18n/label :t/transaction-sent)]
[react/i18n-text {:style styles/transaction-sent-description
:key :transaction-description}]])
(defn- bottom-action-button [on-next]
[react/touchable-highlight {:on-press on-next
:style {:border-top-width 1
:border-color colors/white-light-transparent}
:accessibility-label :got-it-button}
[react/view {:align-items :center
:padding-vertical 18}
[react/text {:style {:color colors/white
:font-size 15}
:font (if platform/android? :medium :default)
:uppercase? true}
(i18n/label :t/done)]]])
(defn- sent-screen [{:keys [on-next]}]
{:pre [(fn? on-next)]}
[react/view {:flex 1}
[react/view {:flex 0.7}] ;; spacer
[react/view {:align-items :center} (ok-circle)]
[react/view {:flex 1}] ;; spacer
(transaction-sent-message)
(bottom-action-button on-next)])
(defview transaction-sent []
(letsubs [chat-id [:chats/current-chat-id]]
[react/view wallet.styles/wallet-modal-container
[status-bar/status-bar {:type (if modal? :modal-wallet :transparent)}]
[react/view styles/transaction-sent-container
[react/view styles/ok-icon-container
[vi/icon :icons/ok {:color colors/blue}]]
[react/text {:style styles/transaction-sent
:font (if platform/android? :medium :default)
:accessibility-label :transaction-sent-text}
(i18n/label :t/transaction-sent)]
[react/view styles/gap]
[react/i18n-text {:style styles/transaction-sent-description
:key :transaction-description}]]
[react/view components.styles/flex]
[components/separator]
[react/touchable-highlight {:on-press #(re-frame/dispatch [:close-transaction-sent-screen chat-id])
:accessibility-label :got-it-button}
[react/view styles/got-it-container
[react/text {:style styles/got-it
:font (if platform/android? :medium :default)
:uppercase? true}
(i18n/label :t/got-it)]]]]))
[react/view {:flex 1 :background-color colors/blue}
[status-bar/status-bar {:type :transparent}]
(sent-screen {:on-next #(re-frame/dispatch [:close-transaction-sent-screen chat-id])})]))
(defview transaction-sent-modal []
[transaction-sent true])
(letsubs [chat-id [:chats/current-chat-id]]
[react/view {:flex 1 :background-color colors/blue}
[status-bar/status-bar {:type :modal-wallet}]
(sent-screen {:on-next #(re-frame/dispatch [:close-transaction-sent-screen chat-id])})]))

2
translations/en.json
View File

@ -567,7 +567,7 @@
"no-statuses-found": "No statuses found",
"extension-address": "Extension address",
"can-not-add-yourself": "You can't add yourself",
"transaction-description": "Transactions with 12 confirmations can be considered irreversible",
"transaction-description": "Consider it complete after 12 confirmations on the network.",
"add-to-contacts": "Add to contacts",
"available": "Available",
"currency-display-name-jpy": "Japanese Yen",