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 [react/text {:font :small
:style styles/dapp-details-section-title-text} title]] :style styles/dapp-details-section-title-text} title]]
[react/view styles/dapp-details-section-body-container [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 [] (defview dapp-details []
(letsubs [{:keys [photo-path name dapp-url] :as dapp} [:get :discover-current-dapp]] (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/toolbar2 {}
toolbar/default-nav-back toolbar/default-nav-back
[toolbar/content-title (i18n/label :t/dapp-profile)]] [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-header
[react/view styles/dapp-details-icon [react/view styles/dapp-details-icon
[chat-icon.screen/chat-icon photo-path {:size 56}]] [chat-icon.screen/chat-icon photo-path {:size 56}]]
[react/view styles/dapp-details-name-container [react/view styles/dapp-details-name-container
[react/text {:font :medium [react/text {:font :medium
:style styles/dapp-details-name-text} name]]] :style styles/dapp-details-name-text} name]]]
[react/view styles/dapp-details-action-container [react/touchable-highlight {:on-press #(re-frame/dispatch [:open-chat-with-contact dapp])}
[react/view styles/dapp-details-action-icon-container [react/view styles/dapp-details-action-container
[vector-icons/icon :icons/open {:color :active [react/view styles/dapp-details-action-icon-container
:style styles/dapp-details-open-icon}]] [vector-icons/icon :icons/open {:color :active
[react/view styles/dapp-details-action-name-container :style styles/dapp-details-open-icon
[react/touchable-highlight {:on-press #(re-frame/dispatch [:open-chat-with-contact dapp])} :container-style styles/dapp-details-open-icon-background}]]
[react/view styles/dapp-details-action-name-container
[react/view [react/view
[react/text {:font :medium [react/text {:font :medium
:style styles/dapp-details-action-name-text} (i18n/label :t/open)]]]]] :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}) :margin-left 5})
(def dapp-details-container (def dapp-details-inner-container
{:flex-direction :column {:flex-direction :column})
:background-color styles/color-light-gray})
(def dapp-details-header (defstyle dapp-details-header
{:flex-direction :row {:flex-direction :row
:justify-content :flex-start :justify-content :flex-start
:align-items :center :align-items :center
:height 80 :height 80
:background-color styles/color-white :background-color styles/color-white
:margin-top 4}) :margin-top 4
:android {:elevation 2}})
(def dapp-details-icon (def dapp-details-icon
{:flex 0.2 {:flex 0.2
@ -370,51 +370,64 @@
:background-color styles/color-white}) :background-color styles/color-white})
(defstyle dapp-details-name-text (defstyle dapp-details-name-text
{:android {:font-size 16} {:android {:font-size 16
:color styles/color-gray6}
:ios {:font-size 17}}) :ios {:font-size 17}})
(def dapp-details-action-container (defstyle dapp-details-action-container
{:flex-direction :row {:flex-direction :row
:margin-top 15 :margin-top 15
:margin-bottom 15 :margin-bottom 15
:android {:height 64} :align-items :center
:ios {:height 72}}) :background-color styles/color-white
:android {:height 64
:elevation 2}
:ios {:height 72}})
(def dapp-details-action-icon-container (def dapp-details-action-icon-container
{:height 80 {:padding-left 10
:flex 0.2 :flex 0.2
:justify-content :center :justify-content :center
:align-items :center :align-items :center
:background-color styles/color-white}) :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 (defstyle dapp-details-open-icon
{:margin-left 10 {:width 24
:width 24
:height 24}) :height 24})
(def dapp-details-action-name-container (def dapp-details-action-name-container
{:height 80 {:flex 0.80
:flex 0.80
:background-color styles/color-white :background-color styles/color-white
:flex-direction :row :flex-direction :row
:justify-content :flex-start :justify-content :flex-start
:align-items :center}) :align-items :center})
(defstyle dapp-details-action-name-text (defstyle dapp-details-action-name-text
{:margin-left 10 {:color styles/color-blue4
:color styles/color-blue4 :android {:font-size 16
:android {:font-size 16} :color styles/color-gray6}
:ios {:font-size 17}}) :ios {:font-size 17}})
(def dapp-details-section-container (defstyle dapp-details-section-container
{:background-color styles/color-white}) {:background-color styles/color-white
:android {:elevation 2}})
(def dapp-details-section-title-container (def dapp-details-section-title-container
{:background-color styles/color-white {:background-color styles/color-white
:padding 10}) :padding 10})
(def dapp-details-section-title-text (defstyle dapp-details-section-title-text
{:color styles/color-gray}) {:color styles/color-gray
:ios {:font-size 14}
:android {:font-size 12}})
(def dapp-details-section-body-container (def dapp-details-section-body-container
{:background-color styles/color-white {:background-color styles/color-white
@ -422,6 +435,11 @@
:padding-right 10 :padding-right 10
:padding-bottom 16}) :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 (def empty-section-container
{:flex-direction :row {:flex-direction :row
:justify-content :center :justify-content :center
@ -448,3 +466,6 @@
(def all-recent-container all-dapps-container) (def all-recent-container all-dapps-container)
(def all-popular-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)