#2083 - dapp profile styling must haves

src/status_im/translations/en.cljs

@@ -172,6 +172,7 @@
    :soon                                  "Soon"
    :public-chat-user-count                "{{count}} people"
    :dapps                                 "DApps"
+   :dapp-profile                          "DApp Profile"
    :no-statuses-discovered                "No statuses discovered"
    :no-statuses-discovered-body           "When somebody posts a status\nyou will see it here."
    :no-hashtags-discovered-title          "No hashtags discovered"

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

@@ -23,7 +23,7 @@
     [react/view styles/discover-container
      [toolbar/toolbar2 {}
       toolbar/default-nav-back
-      [react/view]]
+      [toolbar/content-title (i18n/label :t/dapp-profile)]]
      [react/view styles/dapp-details-container
       [react/view styles/dapp-details-header
        [react/view styles/dapp-details-icon
@@ -33,7 +33,8 @@
                      :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}]]
+        [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/view

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

@@ -350,19 +350,21 @@
    :justify-content  :flex-start
    :align-items      :center
    :height           80
-   :background-color styles/color-white})
+   :background-color styles/color-white
+   :margin-top       4})
 
 (def dapp-details-icon
-  {:flex             0.15
+  {:flex             0.2
    :background-color styles/color-white
-   :padding-left     10})
+   :margin-left      10})
 
 (def dapp-details-name-container
-  {:flex             0.85
+  {:flex             0.8
    :background-color styles/color-white})
 
-(def dapp-details-name-text
-  {:margin-left 10})
+(defstyle dapp-details-name-text
+  {:android {:font-size 16}
+   :ios     {:font-size 17}})
 
 (def dapp-details-action-container
   {:flex-direction :row
@@ -371,14 +373,21 @@
 
 (def dapp-details-action-icon-container
   {:height           80
-   :flex             0.15
+   :flex             0.2
    :justify-content  :center
    :align-items      :center
    :background-color styles/color-white})
 
+(defstyle dapp-details-open-icon
+  {:margin-left      10
+   :android {:width  72
+             :height 72}
+   :ios     {:width  64
+             :height 64}})
+
 (def dapp-details-action-name-container
   {:height           80
-   :flex             0.85
+   :flex             0.80
    :background-color styles/color-white
    :flex-direction   :row
    :justify-content  :flex-start
@@ -386,7 +395,7 @@
 
 (def dapp-details-action-name-text
   {:margin-left 10
-   :color       styles/color-blue})
+   :color       styles/color-blue4})
 
 (def dapp-details-section-container
   {:background-color styles/color-white})
@@ -401,7 +410,8 @@
 (def dapp-details-section-body-container
   {:background-color styles/color-white
    :padding-left     10
-   :padding-right    10})
+   :padding-right    10
+   :padding-bottom   16})
 
 (def empty-section-container
   {:flex-direction   :row