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

refactor - moved main wallet screen into its own package; merged wallet components into one ns 

Signed-off-by: Goran Jovic <goranjovic@gmail.com>
This commit is contained in:
Goran Jovic 2018-08-03 15:45:27 +02:00
parent a8f267e662
commit 17ec7cb2ec
No known key found for this signature in database
GPG Key ID: D429D1A9B2EB8A8E
11 changed files with 298 additions and 303 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/status_im/ui/screens/main_tabs/views.cljs
View File

@ -7,7 +7,7 @@
[status-im.ui.components.status-bar.view :as status-bar.view]
[status-im.ui.components.styles :as common.styles]
[status-im.ui.screens.home.views :as home]
[status-im.ui.screens.wallet.views :as wallet]
[status-im.ui.screens.wallet.main.views :as wallet.main]
[status-im.ui.screens.main-tabs.styles :as styles]
[status-im.ui.screens.profile.user.views :as profile.user]
[status-im.ui.components.common.common :as components.common]))
@ -73,7 +73,7 @@
(case view-id
:home [home/home]
:wallet [wallet/wallet]
:wallet [wallet.main/wallet]
:my-profile [profile.user/my-profile])
(when tab-bar-visible?

4
src/status_im/ui/screens/views.cljs
View File

@ -25,7 +25,7 @@
[status-im.ui.screens.profile.contact.views :as profile.contact]
[status-im.ui.screens.profile.group-chat.views :as profile.group-chat]
[status-im.ui.screens.profile.photo-capture.views :refer [profile-photo-capture]]
[status-im.ui.screens.wallet.views :refer [wallet-modal]]
[status-im.ui.screens.wallet.main.views :as wallet.main]
[status-im.ui.screens.wallet.collectibles.views :refer [collectibles-list]]
[status-im.ui.screens.wallet.send.views :refer [send-transaction send-transaction-modal sign-message-modal]]
[status-im.ui.screens.wallet.choose-recipient.views :refer [choose-recipient]]
@ -104,7 +104,7 @@
(case modal-view
:qr-scanner qr-scanner
:profile-qr-viewer profile.user/qr-viewer
:wallet-modal wallet-modal
:wallet-modal wallet.main/wallet-modal
:wallet-transactions-filter wallet-transactions/filter-history
:wallet-settings-assets wallet-settings/manage-assets
:wallet-send-transaction-modal send-transaction-modal

86
src/status_im/ui/screens/wallet/components.cljs
View File

@ -1,86 +0,0 @@
(ns status-im.ui.screens.wallet.components
"
Higher-level components used in the wallet screens.
"
(:require [status-im.utils.core :as utils]
[status-im.ui.components.colors :as colors]
[status-im.ui.components.icons.vector-icons :as vector-icons]
[status-im.ui.components.react :as react]
[status-im.ui.components.status-bar.view :as status-bar]
[status-im.ui.components.toolbar.actions :as actions]
[status-im.ui.components.toolbar.view :as toolbar]
[status-im.ui.screens.wallet.styles :as styles]))
;; Wallet tab has a different coloring scheme (dark) that forces color changes (background, text)
;; It might be replaced by some theme mechanism
(defn text-input [props text]
[react/text-input (utils/deep-merge {:placeholder-text-color colors/white-lighter-transparent
:selection-color colors/white
:style {:color colors/white
:font-size 15
:height 52
:letter-spacing -0.2}}
props)
text])
(def default-action (actions/back-white actions/default-handler))
(defn- toolbar
([title] (toolbar {} title))
([props title] (toolbar props default-action title))
([props action title] (toolbar props action title nil))
([props action title options]
[toolbar/toolbar (utils/deep-merge {:style styles/toolbar}
props)
[toolbar/nav-button action]
[toolbar/content-title {:color :white}
title]
options]))
(defn- top-view [avoid-keyboard?]
(if avoid-keyboard?
react/keyboard-avoiding-view
react/view))
(defn simple-screen
([toolbar content] (simple-screen nil toolbar content))
([{:keys [avoid-keyboard? status-bar-type]} toolbar content]
[(top-view avoid-keyboard?) {:flex 1 :background-color colors/blue}
[status-bar/status-bar {:type (or status-bar-type :wallet)}]
toolbar
content]))
(defn- cartouche-content [{:keys [disabled?]} content]
[react/view {:style (styles/cartouche-content-wrapper disabled?)}
[react/view {:flex 1}
content]])
(defn cartouche [{:keys [disabled? on-press icon icon-opts] :or {icon :icons/forward} :as m} header content]
[react/view {:style styles/cartouche-container}
[react/text {:style styles/cartouche-header}
header]
(if (or disabled? (nil? on-press))
[cartouche-content m content]
[react/touchable-highlight {:on-press on-press}
[react/view
[cartouche-content m
(if-not (true? disabled?)
[react/view styles/cartouche-icon-wrapper
[react/view {:flex 1} ;; Let content shrink if needed
content]
[vector-icons/icon icon (merge {:color :white} icon-opts)]]
content)]]])])
(defn- cartouche-primary-text [s]
[react/text {:style styles/cartouche-primary-text}
s])
(defn- cartouche-secondary-text [s]
[react/text {:style styles/cartouche-secondary-text}
s])
(defn cartouche-text-content [primary secondary]
[react/view styles/cartouche-text-wrapper
[cartouche-primary-text primary]
[cartouche-secondary-text secondary]])

40
src/status_im/ui/screens/wallet/components/styles.cljs
View File

@ -3,6 +3,46 @@
(:require [status-im.ui.components.colors :as colors]
[status-im.ui.components.styles :as styles]))
;; Components
(def cartouche-container
{:flex 1
:margin-top 16
:margin-horizontal 16})
(def cartouche-header
{:color colors/white})
(defn cartouche-content-wrapper [disabled?]
(merge
{:flex-direction :row
:margin-top 8
:border-radius styles/border-radius
:padding-left 14
:padding-right 8}
(if disabled?
{:border-color colors/white-light-transparent
:border-width 1}
{:background-color colors/white-transparent})))
(def cartouche-icon-wrapper
{:flex 1
:flex-direction :row
:justify-content :space-between
:align-items :center})
(def cartouche-text-wrapper
{:flex-direction :row
:justify-content :space-between
:padding-horizontal 15
:padding-vertical 15})
(def cartouche-primary-text
{:color colors/white})
(def cartouche-secondary-text
{:color colors/white-transparent})
(def text-content
{:color colors/white})

130
src/status_im/ui/screens/wallet/components/views.cljs
View File

@ -12,10 +12,8 @@
[status-im.ui.components.list-selection :as list-selection]
[status-im.ui.components.react :as react]
[status-im.ui.components.styles :as components.styles]
[status-im.ui.screens.wallet.components :as components]
[status-im.ui.screens.wallet.components.styles :as styles]
[status-im.ui.screens.wallet.choose-recipient.views :as choose-recipient]
[status-im.ui.screens.wallet.views :as wallet]
[status-im.ui.screens.wallet.styles :as wallet.styles]
[status-im.ui.screens.wallet.utils :as wallet.utils]
[status-im.utils.ethereum.core :as ethereum]
@ -23,7 +21,87 @@
[status-im.utils.money :as money]
[status-im.utils.platform :as platform]
[status-im.ui.components.tooltip.views :as tooltip]
[status-im.utils.utils :as utils]))
[status-im.ui.components.colors :as colors]
[status-im.utils.core :as utils.core]
[status-im.utils.utils :as utils.utils]
[status-im.ui.components.toolbar.actions :as actions]
[status-im.ui.components.toolbar.view :as toolbar]
[status-im.ui.components.status-bar.view :as status-bar]
[status-im.ui.components.icons.vector-icons :as vector-icons]))
;; Wallet tab has a different coloring scheme (dark) that forces color changes (background, text)
;; It might be replaced by some theme mechanism
(defn text-input [props text]
[react/text-input (utils.core/deep-merge {:placeholder-text-color colors/white-lighter-transparent
:selection-color colors/white
:style {:color colors/white
:font-size 15
:height 52
:letter-spacing -0.2}}
props)
text])
(def default-action (actions/back-white actions/default-handler))
(defn- toolbar
([title] (toolbar {} title))
([props title] (toolbar props default-action title))
([props action title] (toolbar props action title nil))
([props action title options]
[toolbar/toolbar (utils.core/deep-merge {:style wallet.styles/toolbar}
props)
[toolbar/nav-button action]
[toolbar/content-title {:color :white}
title]
options]))
(defn- top-view [avoid-keyboard?]
(if avoid-keyboard?
react/keyboard-avoiding-view
react/view))
(defn simple-screen
([toolbar content] (simple-screen nil toolbar content))
([{:keys [avoid-keyboard? status-bar-type]} toolbar content]
[(top-view avoid-keyboard?) {:flex 1 :background-color colors/blue}
[status-bar/status-bar {:type (or status-bar-type :wallet)}]
toolbar
content]))
(defn- cartouche-content [{:keys [disabled?]} content]
[react/view {:style (styles/cartouche-content-wrapper disabled?)}
[react/view {:flex 1}
content]])
(defn cartouche [{:keys [disabled? on-press icon icon-opts] :or {icon :icons/forward} :as m} header content]
[react/view {:style styles/cartouche-container}
[react/text {:style styles/cartouche-header}
header]
(if (or disabled? (nil? on-press))
[cartouche-content m content]
[react/touchable-highlight {:on-press on-press}
[react/view
[cartouche-content m
(if-not (true? disabled?)
[react/view styles/cartouche-icon-wrapper
[react/view {:flex 1} ;; Let content shrink if needed
content]
[vector-icons/icon icon (merge {:color :white} icon-opts)]]
content)]]])])
(defn- cartouche-primary-text [s]
[react/text {:style styles/cartouche-primary-text}
s])
(defn- cartouche-secondary-text [s]
[react/text {:style styles/cartouche-secondary-text}
s])
(defn cartouche-text-content [primary secondary]
[react/view styles/cartouche-text-wrapper
[cartouche-primary-text primary]
[cartouche-secondary-text secondary]])
(defn view-asset [symbol]
[react/view
@ -54,8 +132,8 @@
(views/defview assets [type]
(views/letsubs [assets [:wallet/transferrable-assets-with-amount]]
[components/simple-screen
[components/toolbar (i18n/label :t/wallet-assets)]
[simple-screen
[toolbar (i18n/label :t/wallet-assets)]
[react/view {:style (assoc components.styles/flex :background-color :white)}
[list/flat-list {:default-separator? true
:data assets
@ -79,7 +157,7 @@
network [:network]]
(let [{:keys [name icon decimals]} (tokens/asset-for (ethereum/network->chain-keyword network) symbol)]
[react/view
[components/cartouche {:disabled? disabled? :on-press #(re-frame/dispatch [:navigate-to (type->view type)])}
[cartouche {:disabled? disabled? :on-press #(re-frame/dispatch [:navigate-to (type->view type)])}
(i18n/label :t/wallet-asset)
[react/view {:style styles/asset-content-container
:accessibility-label :choose-asset-button}
@ -129,8 +207,8 @@
(views/defview recent-recipients []
(views/letsubs [contacts [:all-added-people-contacts]]
[components/simple-screen
[components/toolbar (i18n/label :t/recipient)]
[simple-screen
[toolbar (i18n/label :t/recipient)]
[react/view styles/recent-recipients
[list/flat-list {:data contacts
:key-fn :address
@ -139,18 +217,18 @@
(defn contact-code []
(let [content (reagent/atom nil)]
(fn []
[components/simple-screen {:avoid-keyboard? true}
[components/toolbar {:style wallet.styles/toolbar-bottom-line}
components/default-action
[simple-screen {:avoid-keyboard? true}
[toolbar {:style wallet.styles/toolbar-bottom-line}
default-action
(i18n/label :t/recipient)]
[react/view components.styles/flex
[components/cartouche {}
[cartouche {}
(i18n/label :t/recipient)
[components/text-input {:multiline true
:style styles/contact-code-text-input
:placeholder (i18n/label :t/recipient-code)
:on-change-text #(reset! content %)
:accessibility-label :recipient-address-input}]]
[text-input {:multiline true
:style styles/contact-code-text-input
:placeholder (i18n/label :t/recipient-code)
:on-change-text #(reset! content %)
:accessibility-label :recipient-address-input}]]
[bottom-buttons/bottom-button
[button/button {:disabled? (string/blank? @content)
:on-press #(re-frame/dispatch [:wallet/fill-request-from-url @content :code])
@ -163,10 +241,10 @@
(defn- request-camera-permissions []
(re-frame/dispatch [:request-permissions {:permissions [:camera]
:on-allowed #(re-frame/dispatch [:navigate-to :recipient-qr-code])
:on-denied #(utils/set-timeout
:on-denied #(utils.utils/set-timeout
(fn []
(utils/show-popup (i18n/label :t/error)
(i18n/label :t/camera-access-error)))
(utils.utils/show-popup (i18n/label :t/error)
(i18n/label :t/camera-access-error)))
50)}]))
(defn- on-choose-recipient [contact-only?]
@ -181,10 +259,10 @@
:action #(re-frame/dispatch [:navigate-to :contact-code])}]))}))
(defn recipient-selector [{:keys [name address disabled? contact-only? request?]}]
[components/cartouche {:on-press #(on-choose-recipient contact-only?)
:disabled? disabled?
:icon :icons/dots-horizontal
:icon-opts {:accessibility-label :choose-contact-button}}
[cartouche {:on-press #(on-choose-recipient contact-only?)
:disabled? disabled?
:icon :icons/dots-horizontal
:icon-opts {:accessibility-label :choose-contact-button}}
(i18n/label :t/wallet-choose-recipient)
[react/view {:accessibility-label :choose-recipient-button}
(if name
@ -195,7 +273,7 @@
{:keys [symbol decimals]}]
[react/view {:style components.styles/flex
:accessibility-label :specify-amount-button}
[components/text-input
[text-input
(merge
input-options
;; We only auto-correct and prettify user's input when it is valid and positive.
@ -214,7 +292,7 @@
(defn amount-selector [{:keys [error disabled?] :as m} token]
[react/view
[components/cartouche {:disabled? disabled?}
[cartouche {:disabled? disabled?}
(i18n/label :t/amount)
[amount-input m token]]
(when error

136
src/status_im/ui/screens/wallet/main/styles.cljs Normal file
View File

@ -0,0 +1,136 @@
(ns status-im.ui.screens.wallet.main.styles
(:require-macros [status-im.utils.styles :refer [defstyle]])
(:require [status-im.ui.components.colors :as colors]))
;; Main section
(defstyle main-section
{:flex 1
:android {:background-color colors/white}
:ios {:background-color colors/blue}})
(defstyle scroll-bottom
{:background-color colors/white
:zIndex -1
:position :absolute
:left 0
:right 0
:android {:height 0}
:ios {:height 9999}})
(def section
{:background-color colors/blue})
(def backup-seed-phrase-container
{:flex-direction :row
:align-items :center
:border-radius 8
:margin 16
:background-color colors/black-darker-transparent
:padding-top 10
:padding-bottom 10
:padding-left 14
:padding-right 12})
(def backup-seed-phrase-text-container
{:flex 1})
(def backup-seed-phrase-title
{:font-size 15
:line-height 20
:color colors/white})
(def backup-seed-phrase-description
{:line-height 20
:color colors/white-lighter-transparent})
(def total-balance-container
{:align-items :center
:justify-content :center})
(def total-balance
{:flex-direction :row})
(def total-balance-value
{:font-size 37
:color colors/white})
(def total-value
{:color colors/white-transparent})
(defstyle total-balance-currency
{:font-size 37
:margin-left 9
:color colors/white-lighter-transparent
:android {:letter-spacing 1.5}
:ios {:letter-spacing 1.16}})
;; Actions section
(def action-section
{:background-color colors/blue})
(def action
{:background-color colors/white-transparent
:width 40
:height 40
:border-radius 50})
(def action-label
{:color :white})
(def action-separator
{:height 1
:background-color colors/white-light-transparent
:margin-left 70})
;; Assets section
(def asset-section
{:flex 1
:padding-top 16
:background-color colors/white})
(def asset-item-container
{:flex 1
:flex-direction :row
:align-items :center
:justify-content :space-between})
(def asset-item-value-container
{:flex 1
:flex-direction :row
:align-items :center})
(def asset-item-value
{:flex -1
:font-size 16
:color colors/black})
(def asset-item-currency
{:font-size 16
:color colors/gray
:margin-left 6})
(def asset-item-price
{:font-size 16
:color colors/gray
:margin-left 6})
(def wallet-address
{:color :white
:text-align :center
:font-size 15
:letter-spacing -0.2
:line-height 20})
(def address-section
(merge
section
{:flex-grow 1
:align-items :center
:padding 20}))
(def modal-history
{:flex 1
:background-color :white})

9
src/status_im/ui/screens/wallet/views.cljs → src/status_im/ui/screens/wallet/main/views.cljs
View File

@ -1,4 +1,4 @@
(ns status-im.ui.screens.wallet.views
(ns status-im.ui.screens.wallet.main.views
(:require-macros [status-im.utils.views :as views])
(:require [reagent.core :as reagent]
[re-frame.core :as re-frame]
@ -8,7 +8,8 @@
[status-im.ui.components.toolbar.view :as toolbar]
[status-im.ui.components.icons.vector-icons :as vector-icons]
[status-im.ui.screens.wallet.onboarding.views :as onboarding.views]
[status-im.ui.screens.wallet.styles :as styles]
[status-im.ui.screens.wallet.styles :as wallet.styles]
[status-im.ui.screens.wallet.main.styles :as styles]
[status-im.ui.screens.wallet.utils :as wallet.utils]
[status-im.utils.money :as money]
[status-im.ui.components.toolbar.actions :as action]
@ -20,7 +21,7 @@
[status-im.ui.screens.wallet.transactions.views :as transactions.views]))
(defn toolbar-view []
[toolbar/toolbar {:style styles/toolbar :flat? true}
[toolbar/toolbar {:style wallet.styles/toolbar :flat? true}
nil
[toolbar/content-wrapper]
[toolbar/actions
@ -33,7 +34,7 @@
(defn toolbar-modal [modal-history?]
[react/view
[status-bar.view/status-bar {:type :modal-wallet}]
[toolbar/toolbar {:style styles/toolbar :flat? true}
[toolbar/toolbar {:style wallet.styles/toolbar :flat? true}
[toolbar/nav-button (action/close-white action/default-handler)]
[toolbar/content-wrapper]
[toolbar/actions

2
src/status_im/ui/screens/wallet/onboarding/setup/views.cljs
View File

@ -6,7 +6,7 @@
[status-im.react-native.resources :as resources]
[status-im.ui.components.react :as react]
[status-im.ui.components.styles :as components.styles]
[status-im.ui.screens.wallet.components :as wallet.components]
[status-im.ui.screens.wallet.components.views :as wallet.components]
[status-im.ui.screens.wallet.onboarding.setup.styles :as styles]
[status-im.ui.components.bottom-buttons.view :as bottom-buttons]
[status-im.ui.components.button.view :as button]

12
src/status_im/ui/screens/wallet/request/views.cljs
View File

@ -15,7 +15,7 @@
[status-im.ui.screens.wallet.request.styles :as styles]
[status-im.ui.screens.wallet.styles :as wallet.styles]
[status-im.ui.components.styles :as components.styles]
[status-im.ui.screens.wallet.components :as comp]
[status-im.ui.screens.wallet.components.views :as wallet.components]
[status-im.ui.screens.wallet.components.views :as components]
[status-im.utils.ethereum.core :as ethereum]
[status-im.utils.ethereum.eip681 :as eip681]
@ -31,8 +31,8 @@
{:keys [amount amount-error amount-text symbol]} [:wallet.request/transaction]
scroll (atom nil)]
(let [{:keys [decimals] :as token} (tokens/asset-for (ethereum/network->chain-keyword network) symbol)]
[comp/simple-screen {:avoid-keyboard? true}
[comp/toolbar (i18n/label :t/new-request)]
[wallet.components/simple-screen {:avoid-keyboard? true}
[wallet.components/toolbar (i18n/label :t/new-request)]
[react/view components.styles/flex
[common/network-info {:text-color :white}]
[react/scroll-view {:ref #(reset! scroll %) :keyboardShouldPersistTaps :always}
@ -70,9 +70,9 @@
(views/defview request-transaction []
(views/letsubs [address-hex [:get-current-account-hex]
chain-id [:get-network-id]]
[comp/simple-screen
[comp/toolbar {}
comp/default-action
[wallet.components/simple-screen
[wallet.components/toolbar {}
wallet.components/default-action
(i18n/label :t/receive)
[toolbar/actions [{:icon :icons/share
:icon-opts {:color :white

2
src/status_im/ui/screens/wallet/send/views.cljs
View File

@ -15,7 +15,7 @@
[status-im.ui.components.tooltip.views :as tooltip]
[status-im.ui.screens.wallet.components.styles :as wallet.components.styles]
[status-im.ui.screens.wallet.components.views :as components]
[status-im.ui.screens.wallet.components :as wallet.components]
[status-im.ui.screens.wallet.components.views :as wallet.components]
[status-im.ui.screens.wallet.send.animations :as send.animations]
[status-im.ui.screens.wallet.send.styles :as styles]
[status-im.ui.screens.wallet.styles :as wallet.styles]

176
src/status_im/ui/screens/wallet/styles.cljs
View File

@ -1,7 +1,6 @@
(ns status-im.ui.screens.wallet.styles
(:require-macros [status-im.utils.styles :refer [defstyle]])
(:require [status-im.ui.components.colors :as colors]
[status-im.ui.components.styles :as styles]))
(:require [status-im.ui.components.colors :as colors]))
;; wallet
@ -21,176 +20,3 @@
(def wallet-modal-container
{:flex 1
:background-color colors/blue})
;; Components
(def cartouche-container
{:flex 1
:margin-top 16
:margin-horizontal 16})
(def cartouche-header
{:color colors/white})
(defn cartouche-content-wrapper [disabled?]
(merge
{:flex-direction :row
:margin-top 8
:border-radius styles/border-radius
:padding-left 14
:padding-right 8}
(if disabled?
{:border-color colors/white-light-transparent
:border-width 1}
{:background-color colors/white-transparent})))
(def cartouche-icon-wrapper
{:flex 1
:flex-direction :row
:justify-content :space-between
:align-items :center})
(def cartouche-text-wrapper
{:flex-direction :row
:justify-content :space-between
:padding-horizontal 15
:padding-vertical 15})
(def cartouche-primary-text
{:color colors/white})
(def cartouche-secondary-text
{:color colors/white-transparent})
;; Main section
(defstyle main-section
{:flex 1
:android {:background-color colors/white}
:ios {:background-color colors/blue}})
(defstyle scroll-bottom
{:background-color colors/white
:zIndex -1
:position :absolute
:left 0
:right 0
:android {:height 0}
:ios {:height 9999}})
(def section
{:background-color colors/blue})
(def backup-seed-phrase-container
{:flex-direction :row
:align-items :center
:border-radius 8
:margin 16
:background-color colors/black-darker-transparent
:padding-top 10
:padding-bottom 10
:padding-left 14
:padding-right 12})
(def backup-seed-phrase-text-container
{:flex 1})
(def backup-seed-phrase-title
{:font-size 15
:line-height 20
:color colors/white})
(def backup-seed-phrase-description
{:line-height 20
:color colors/white-lighter-transparent})
(def total-balance-container
{:align-items :center
:justify-content :center})
(def total-balance
{:flex-direction :row})
(def total-balance-value
{:font-size 37
:color colors/white})
(def total-value
{:color colors/white-transparent})
(defstyle total-balance-currency
{:font-size 37
:margin-left 9
:color colors/white-lighter-transparent
:android {:letter-spacing 1.5}
:ios {:letter-spacing 1.16}})
;; Actions section
(def action-section
{:background-color colors/blue})
(def action
{:background-color colors/white-transparent
:width 40
:height 40
:border-radius 50})
(def action-label
{:color :white})
(def action-separator
{:height 1
:background-color colors/white-light-transparent
:margin-left 70})
;; Assets section
(def asset-section
{:flex 1
:padding-top 16
:background-color colors/white})
(def asset-item-container
{:flex 1
:flex-direction :row
:align-items :center
:justify-content :space-between})
(def asset-item-value-container
{:flex 1
:flex-direction :row
:align-items :center})
(def asset-item-value
{:flex -1
:font-size 16
:color colors/black})
(def asset-item-currency
{:font-size 16
:color colors/gray
:margin-left 6})
(def asset-item-price
{:font-size 16
:color colors/gray
:margin-left 6})
(def wallet-address
{:color :white
:text-align :center
:font-size 15
:letter-spacing -0.2
:line-height 20})
(def address-section
(merge
section
{:flex-grow 1
:align-items :center
:padding 20}))
(def modal-history
{:flex 1
:background-color :white})