- #2084 - discover dapp profile pixel perfect nice haves

src/status_im/ui/screens/discover/dapp_details/views.cljs

@@ -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/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}]]
+                                         :style           styles/dapp-details-open-icon
+                                         :container-style styles/dapp-details-open-icon-background}]]
         [react/view styles/dapp-details-action-name-container
-        [react/touchable-highlight {:on-press #(re-frame/dispatch [:open-chat-with-contact dapp])}
          [react/view
           [react/text {:font  :medium
                        :style styles/dapp-details-action-name-text} (i18n/label :t/open)]]]]]

src/status_im/ui/screens/discover/styles.cljs

@@ -348,17 +348,17 @@
    :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
    :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
+(defstyle dapp-details-action-container
   {:flex-direction   :row
    :margin-top       15
    :margin-bottom    15
-   :android        {:height 64}
+   :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
-   :color       styles/color-blue4
+   :android     {:font-size 16
-   :android     {:font-size 16}
+                 :color     styles/color-gray6}
    :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
   {:background-color styles/color-white
    :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
   {: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)
+