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

- #2084 - discover dapp profile pixel perfect nice haves

This commit is contained in:
Goran Jovic 2017-10-18 08:44:20 +02:00 committed by Oskar Thorén
parent eaa63c265e
commit bd7f256e83
2 changed files with 56 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/status_im/ui/screens/discover/dapp_details/views.cljs
View File

@ -16,27 +16,29 @@
[react/text {:font :small
:style styles/dapp-details-section-title-text} title]]
[react/view styles/dapp-details-section-body-container
[react/text {:font :medium} content]]])
[react/text {:font :medium
:style styles/dapp-details-section-content-text} content]]])
(defview dapp-details []
(letsubs [{:keys [photo-path name dapp-url] :as dapp} [:get :discover-current-dapp]]
[react/view styles/discover-container
[react/view styles/dapp-details-container
[toolbar/toolbar2 {}
toolbar/default-nav-back
[toolbar/content-title (i18n/label :t/dapp-profile)]]
[react/view styles/dapp-details-container
[react/view styles/dapp-details-inner-container
[react/view styles/dapp-details-header
[react/view styles/dapp-details-icon
[chat-icon.screen/chat-icon photo-path {:size 56}]]
[react/view styles/dapp-details-name-container
[react/text {:font :medium
:style styles/dapp-details-name-text} name]]]
[react/view styles/dapp-details-action-container
[react/view styles/dapp-details-action-icon-container
[vector-icons/icon :icons/open {:color :active
:style styles/dapp-details-open-icon}]]
[react/view styles/dapp-details-action-name-container
[react/touchable-highlight {:on-press #(re-frame/dispatch [:open-chat-with-contact dapp])}
[react/touchable-highlight {:on-press #(re-frame/dispatch [:open-chat-with-contact dapp])}
[react/view styles/dapp-details-action-container
[react/view styles/dapp-details-action-icon-container
[vector-icons/icon :icons/open {:color :active
:style styles/dapp-details-open-icon
:container-style styles/dapp-details-open-icon-background}]]
[react/view styles/dapp-details-action-name-container
[react/view
[react/text {:font :medium
:style styles/dapp-details-action-name-text} (i18n/label :t/open)]]]]]

69
src/status_im/ui/screens/discover/styles.cljs
View File

@ -348,17 +348,17 @@
:margin-left 5})
(def dapp-details-container
{:flex-direction :column
:background-color styles/color-light-gray})
(def dapp-details-inner-container
{:flex-direction :column})
(def dapp-details-header
(defstyle dapp-details-header
{:flex-direction :row
:justify-content :flex-start
:align-items :center
:height 80
:background-color styles/color-white
:margin-top 4})
:margin-top 4
:android {:elevation 2}})
(def dapp-details-icon
{:flex 0.2
@ -370,51 +370,64 @@
:background-color styles/color-white})
(defstyle dapp-details-name-text
{:android {:font-size 16}
{:android {:font-size 16
:color styles/color-gray6}
:ios {:font-size 17}})
(def dapp-details-action-container
{:flex-direction :row
:margin-top 15
:margin-bottom 15
:android {:height 64}
:ios {:height 72}})
(defstyle dapp-details-action-container
{:flex-direction :row
:margin-top 15
:margin-bottom 15
:align-items :center
:background-color styles/color-white
:android {:height 64
:elevation 2}
:ios {:height 72}})
(def dapp-details-action-icon-container
{:height 80
{:padding-left 10
:flex 0.2
:justify-content :center
:align-items :center
:background-color styles/color-white})
(defstyle dapp-details-open-icon-background
{:ios {:background-color styles/color-blue4-transparent
:height 40
:width 40
:border-radius 20
:justify-content :center
:align-items :center}})
(defstyle dapp-details-open-icon
{:margin-left 10
:width 24
{:width 24
:height 24})
(def dapp-details-action-name-container
{:height 80
:flex 0.80
{:flex 0.80
:background-color styles/color-white
:flex-direction :row
:justify-content :flex-start
:align-items :center})
(defstyle dapp-details-action-name-text
{:margin-left 10
:color styles/color-blue4
:android {:font-size 16}
{:color styles/color-blue4
:android {:font-size 16
:color styles/color-gray6}
:ios {:font-size 17}})
(def dapp-details-section-container
{:background-color styles/color-white})
(defstyle dapp-details-section-container
{:background-color styles/color-white
:android {:elevation 2}})
(def dapp-details-section-title-container
{:background-color styles/color-white
:padding 10})
(def dapp-details-section-title-text
{:color styles/color-gray})
(defstyle dapp-details-section-title-text
{:color styles/color-gray
:ios {:font-size 14}
:android {:font-size 12}})
(def dapp-details-section-body-container
{:background-color styles/color-white
@ -422,6 +435,11 @@
:padding-right 10
:padding-bottom 16})
(defstyle dapp-details-section-content-text
{:ios {:font-size 17}
:android {:font-size 16
:color styles/color-gray6}})
(def empty-section-container
{:flex-direction :row
:justify-content :center
@ -448,3 +466,6 @@
(def all-recent-container all-dapps-container)
(def all-popular-container all-dapps-container)
;; TODO(goranjovic): Using the same style in dapp-details screen - reconcile later
(def dapp-details-container all-dapps-container)