Add advanced settings UI

src/status_im/translations/en.cljs

@@ -161,6 +161,7 @@
    :dev-mode                             "Development mode"
    :backup-your-recovery-phrase          "Backup your recovery phrase"
    :version                              "Version {{version}}"
+   :advanced-settings                    "Advanced settings"
 
    ;;recovery phrase
    :your-data-belongs-to-you             "If you lose your recovery phrase you lose your data and funds"

src/status_im/ui/screens/desktop/main/tabs/profile/styles.cljs

@@ -9,14 +9,14 @@
    :align-items   :center
    :margin-bottom 16})
 
-(def logout-row
+(def profile-row
   {:justify-content   :space-between
    :flex-direction    :row
    :margin-horizontal 24
    :align-self        :stretch
-   :margin-top        60})
+   :margin-top   40})
 
-(defn logout-row-text [color]
+(defn profile-row-text [color]
   {:color     color
    :font-size 16})
 
@@ -36,6 +36,7 @@
    :height            45
    :width             240
    :margin-horizontal 50
+   :margin-bottom     20
    :border-radius     8
    :background-color  (colors/alpha colors/blue 0.1)})
 
@@ -133,3 +134,18 @@
    :border-left-color  :transparent
    :border-right-color :transparent
    :border-top-color   colors/tooltip-green})
+
+(def advanced-settings-title
+  {:margin        24
+   :font-size     20
+   :font-weight  "600"})
+
+(def title-separator
+  {:height            1
+   :background-color  colors/gray-light})
+
+(def mailserver-title
+  {:margin-left      24
+   :margin-top       36
+   :margin-bottom    16
+   :font-size        16})

src/status_im/ui/screens/desktop/main/tabs/profile/views.cljs

@@ -10,6 +10,7 @@
             [status-im.ui.components.icons.vector-icons :as vector-icons]
             [taoensso.timbre :as log]
             [clojure.string :as string]
+            [status-im.ui.screens.offline-messaging-settings.views :as offline-messaging.views]
             [status-im.ui.components.qr-code-viewer.views :as qr-code-viewer]
             [status-im.ui.screens.desktop.main.tabs.profile.styles :as styles]
             [status-im.ui.screens.profile.user.views :as profile]))
@@ -55,6 +56,20 @@
         [react/text {:style styles/qr-code-copy-text}
          (i18n/label :copy-qr)]]]]]))
 
+(views/defview advanced-settings []
+  (views/letsubs [current-wnode-id [:settings/current-wnode]
+                  wnodes           [:settings/network-wnodes]]
+    (let [render-fn (offline-messaging.views/render-row current-wnode-id)]
+      [react/view
+       [react/text {:style styles/advanced-settings-title} (i18n/label :advanced-settings)]
+       [react/view {:style styles/title-separator}]
+       [react/text {:style styles/mailserver-title} (i18n/label :offline-messaging)]
+       [react/view
+        (for [node (vals wnodes)]
+          ^{:key (:id node)}
+          [react/view {:style {:margin-vertical 8}}
+           [render-fn node]])]])))
+
 (defn share-contact-code []
   [react/touchable-highlight {:on-press #(re-frame/dispatch [:navigate-to :qr-code])}
    [react/view {:style styles/share-contact-code}
@@ -69,10 +84,14 @@
   [react/view styles/profile-view
    [profile-badge user]
    [share-contact-code]
-   [react/view {:style styles/logout-row}
+   [react/view {:style styles/profile-row}
+    [react/touchable-highlight {:on-press #(re-frame/dispatch [:navigate-to :advanced-settings])}
+     [react/text {:style (styles/profile-row-text colors/black)} (i18n/label :t/advanced-settings)]]
+    [vector-icons/icon :icons/forward {:style {:tint-color colors/gray}}]]
+   [react/view {:style styles/profile-row}
     [react/touchable-highlight {:on-press #(re-frame/dispatch [:logout])}
-     [react/text {:style (styles/logout-row-text colors/red)} (i18n/label :t/logout)]]
+     [react/text {:style (styles/profile-row-text colors/red)} (i18n/label :t/logout)]]
-    [react/view [react/text {:style (styles/logout-row-text colors/gray)} "V" build/version " (" build/commit-sha ")"]]]])
+    [react/view [react/text {:style (styles/profile-row-text colors/gray)} "V" build/version " (" build/commit-sha ")"]]]])
 
 (views/defview profile-data []
   (views/letsubs

src/status_im/ui/screens/desktop/main/views.cljs

@@ -28,6 +28,7 @@
                       :chat         chat.views/chat-view
                       :new-contact  add-new.views/new-contact
                       :qr-code      profile.views/qr-code
+                      :advanced-settings profile.views/advanced-settings
                       :chat-profile chat.views/chat-profile
                       status-view)]
       [react/view {:style {:flex 1}}

src/status_im/ui/screens/desktop/views.cljs

@@ -17,7 +17,11 @@
                       :accounts accounts.views/accounts
                       :recover recover.views/recover
                       :create-account create.views/create-account
-                      (:new-contact :chat :home :qr-code :chat-profile) main.views/main-views
+                      (:new-contact
+                       :advanced-settings
+                       :chat :home
+                       :qr-code
+                       :chat-profile) main.views/main-views
                       :login login.views/login
                       react/view)]
       [react/view {:style {:flex 1}}

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

@@ -1,5 +1,6 @@
 (ns status-im.ui.screens.offline-messaging-settings.styles
-  (:require [status-im.ui.components.colors :as colors])
+  (:require [status-im.ui.components.colors :as colors]
+            [status-im.utils.platform :as platform])
   (:require-macros [status-im.utils.styles :refer [defstyle]]))
 
 (def wrapper
@@ -22,6 +23,7 @@
    :ios     {:font-size      17
              :letter-spacing -0.2
              :line-height    20}
+   :desktop {:font-size 16}
    :android {:font-size 16}})
 
 (defstyle wnode-item-connected-text
@@ -32,7 +34,7 @@
    :android {:font-size  12
              :margin-top 2}})
 
-(defn wnode-icon [connected?]
+(defn wnode-icon-container [connected?]
   {:width            40
    :height           40
    :border-radius    20
@@ -41,3 +43,6 @@
                        colors/gray-light)
    :align-items      :center
    :justify-content  :center})
+
+(defn wnode-icon [connected?]
+  (hash-map (if platform/desktop? :tint-color :color) (if connected? :white :gray)))

src/status_im/ui/screens/offline_messaging_settings/views.cljs

@@ -12,8 +12,9 @@
             [status-im.ui.screens.offline-messaging-settings.styles :as styles]))
 
 (defn- wnode-icon [connected?]
-  [react/view (styles/wnode-icon connected?)
+  [react/view {:style (styles/wnode-icon-container connected?)}
-   [vector-icons/icon :icons/wnode {:color (if connected? :white :gray)}]])
+   [vector-icons/icon :icons/wnode
+    {:style (styles/wnode-icon connected?)}]])
 
 (defn connect-to-mailserver [id]
   (re-frame/dispatch [:connect-wnode id]))
@@ -21,7 +22,7 @@
 (defn navigate-to-add-mailserver [wnode-id]
   (re-frame/dispatch [:edit-mailserver wnode-id]))
 
-(defn- render-row [current-wnode-id]
+(defn render-row [current-wnode-id]
   (fn [{:keys [name id user-defined]}]
     (let [connected? (= id current-wnode-id)]
       [react/touchable-highlight