[ISSUE #3321] Migrated group chat creation flow

Signed-off-by: Julien Eluard <julien.eluard@gmail.com>

.re-natal

@@ -29,7 +29,6 @@
     "identicon.js",
     "react-native-fs",
     "react-native-dialogs",
-    "react-native-sortable-listview",
     "react-native-image-resizer",
     "react-native-image-crop-picker",
     "react-native-webview-bridge",

package-lock.json

@@ -7064,11 +7064,6 @@
       "resolved": "https://registry.npmjs.org/react-native-scrollable-mixin/-/react-native-scrollable-mixin-1.0.1.tgz",
       "integrity": "sha1-NKMhZ7ZCSFlBVP0NaosD8idAVI4="
     },
-    "react-native-sortable-listview": {
-      "version": "0.2.6",
-      "resolved": "https://registry.npmjs.org/react-native-sortable-listview/-/react-native-sortable-listview-0.2.6.tgz",
-      "integrity": "sha1-0e1rtVL6UZCZTlB8A95aKSFojKY="
-    },
     "react-native-splash-screen": {
       "version": "3.0.6",
       "resolved": "https://registry.npmjs.org/react-native-splash-screen/-/react-native-splash-screen-3.0.6.tgz",

package.json

@@ -67,7 +67,6 @@
     "react-native-os": "1.1.0",
     "react-native-qrcode": "0.2.6",
     "react-native-randombytes": "3.0.0",
-    "react-native-sortable-listview": "0.2.6",
     "react-native-splash-screen": "3.0.6",
     "react-native-svg": "6.0.1-rc.3",
     "react-native-tcp": "3.3.0",

react-native/src/status_im/react_native/js_dependencies.cljs

@@ -21,7 +21,6 @@
 (def random-bytes           (js/require "react-native-randombytes"))
 (def react-native           (js/require "react-native"))
 (def realm                  (js/require "realm"))
-(def sortable-listview      (js/require "react-native-sortable-listview"))
 (def vector-icons           (js/require "react-native-vector-icons/Ionicons"))
 (def webview-bridge         (js/require "react-native-webview-bridge"))
 (def svg                    (js/require "react-native-svg"))

src/status_im/chat/styles/input/input.cljs

@@ -14,7 +14,7 @@
    :margin-bottom    margin-bottom
    :flex-direction   :column
    :border-top-width border-height
-   :border-top-color colors/light-gray
+   :border-top-color colors/gray-light
    :elevation        2})
 
 (def input-container

src/status_im/chat/styles/input/parameter_box.cljs

@@ -4,6 +4,6 @@
 
 (def root
   {:background-color common/color-white
-   :border-top-color colors/light-gray
+   :border-top-color colors/gray-light
    :border-top-width 1})
 

src/status_im/chat/styles/input/result_box.cljs

@@ -4,7 +4,7 @@
 
 (defn root [height bottom]
   {:background-color common/color-white
-   :border-top-color colors/light-gray
+   :border-top-color colors/gray-light
    :border-top-width 1
    :flex-direction   :column
    :height           height

src/status_im/chat/styles/input/suggestions.cljs

@@ -9,7 +9,7 @@
 
 (def root
   {:background-color common/color-white
-   :border-top-color colors/light-gray
+   :border-top-color colors/gray-light
    :border-top-width 1})
 
 (defn item-suggestion-container [last?]
@@ -18,7 +18,7 @@
    :height              item-height
    :margin-left         14
    :padding-right       14
-   :border-bottom-color colors/light-gray
+   :border-bottom-color colors/gray-light
    :border-bottom-width (if last? 0 border-height)})
 
 (def item-suggestion-name

src/status_im/translations/en.cljs

@@ -150,6 +150,7 @@
    :invite-friends                        "Invite friends"
    :chats                                 "Chats"
    :delete-chat                           "Delete chat"
+   :group-chat                            "Group chat"
    :new-group-chat                        "New group chat"
    :new-public-group-chat                 "Join public chat"
    :edit-chats                            "Edit chats"
@@ -157,6 +158,7 @@
    :empty-topic                           "Empty topic"
    :topic-format                          "Wrong format [a-z0-9\\-]+"
    :public-group-topic                    "Topic"
+   :set-a-topic                           "Set a topic"
 
    ;;discover
    :discover                              "Discover"
@@ -200,6 +202,7 @@
    ;;group-settings
    :remove                                "Remove"
    :save                                  "Save"
+   :create                                "Create"
    :delete                                "Delete"
    :clear-history                         "Clear history"
    :mute-notifications                    "Mute notifications"

src/status_im/ui/components/checkbox/styles.cljs

@@ -1,21 +1,17 @@
 (ns status-im.ui.components.checkbox.styles
-  (:require-macros [status-im.utils.styles :refer [defnstyle]])
+  (:require [status-im.ui.components.colors :as colors]))
-  (:require [status-im.ui.components.styles :as styles]))
 
 (def wrapper
   {:padding 16})
 
-(defnstyle icon-check-container [checked?]
+(defn icon-check-container [checked?]
-  {:background-color (if checked? styles/color-light-blue styles/color-gray5)
+  {:background-color (if checked? colors/blue colors/gray-lighter)
    :alignItems     :center
    :justifyContent :center
-   :android        {:border-radius 2
+   :border-radius  2
-                    :width         17
+   :width          24
-                    :height        17}
+   :height         24})
-   :ios            {:border-radius 50
-                    :width         24
-                    :height        24}})
 
 (def check-icon
   {:width  12
-   :height 12})
+   :height 12})

src/status_im/ui/components/checkbox/view.cljs

@@ -6,7 +6,8 @@
 ;; https://facebook.github.io/react-native/docs/checkbox.html
 
 (defn checkbox [{:keys [on-value-change checked?]}]
-  [react/touchable-highlight {:style styles/wrapper :on-press #(do (when on-value-change (on-value-change (not checked?))))}
+  [react/touchable-highlight (merge {:style styles/wrapper}
+                                    (when on-value-change {:on-press #(on-value-change (not checked?))}))
    [react/view (styles/icon-check-container checked?)
     (when checked?
-      [react/icon :check_on styles/check-icon])]])
+      [react/icon :check_on styles/check-icon])]])

src/status_im/ui/components/colors.cljs

@@ -7,9 +7,8 @@
 (def black "#000000") ;; Used as the default text color
 (def black-transparent "#00000020") ;; Used as background color for rounded button on dark background
 (def gray "#939ba1") ;; Used as a background for a light foreground and as section header and secondary text color
-(def gray-light "#d9dae1") ;; Used as divider color
+(def gray-light "#e8ebec") ;; Used as divider color
 (def gray-lighter "#eef2f5")  ;; Used as a background or shadow
 (def blue "#4360df") ;; Used as main wallet color
 (def red "#ff2d55") ;; Used to highlight errors or "dangerous" actions
-(def light-gray "#e8ebec")  ;; Used as a background or shadow
 (def text-light-gray "#212121") ;; Used for labels (home items)

src/status_im/ui/components/contact/contact.cljs

@@ -4,6 +4,7 @@
             [status-im.ui.components.react :as react]
             [status-im.ui.components.icons.vector-icons :as vector-icons]
             [status-im.ui.components.chat-icon.screen :as chat-icon]
+            [status-im.ui.components.checkbox.view :as checkbox]
             [status-im.ui.components.contact.styles :as styles]
             [status-im.ui.components.list-selection :as list-selection]
             [status-im.utils.gfycat.core :as gfycat]))
@@ -24,11 +25,11 @@
        [react/text {:style styles/info-text}
         info])]]))
 
-(defn contact-view [{:keys [contact extended? on-press extend-options info show-forward?]}]
+(defn contact-view [{:keys [style contact extended? on-press extend-options info show-forward?]}]
   [react/touchable-highlight (when-not extended?
                                {:on-press (when on-press #(on-press contact))})
     [react/view styles/contact-container
-     [contact-inner-view {:contact contact :info info}]
+     [contact-inner-view {:contact contact :info info :style style}]
      (when show-forward?
        [react/view styles/forward-btn
         [vector-icons/icon :icons/forward]])
@@ -40,10 +41,7 @@
 
 (views/defview toogle-contact-view [{:keys [whisper-identity] :as contact} selected-key on-toggle-handler]
   (views/letsubs [checked [selected-key whisper-identity]]
-    [react/touchable-highlight {:on-press #(on-toggle-handler checked whisper-identity)}
+    [react/view styles/contact-container
-      [react/view (merge styles/contact-container (when checked {:style styles/selected-contact}))
+     [contact-inner-view {:contact contact}]
-       [contact-inner-view (merge {:contact contact}
+     [checkbox/checkbox {:checked?         checked
-                                  (when checked {:style styles/selected-contact}))]
+                         :on-value-change  #(on-toggle-handler checked whisper-identity)}]]))
-       [react/view (styles/icon-check-container checked)
-        (when checked
-          [vector-icons/icon :icons/ok {:style styles/check-icon}])]]]))

src/status_im/ui/components/contact/styles.cljs

@@ -1,6 +1,7 @@
 (ns status-im.ui.components.contact.styles
-  (:require-macros [status-im.utils.styles :refer [defstyle defnstyle]])
+  (:require-macros [status-im.utils.styles :refer [defstyle]])
-  (:require [status-im.ui.components.styles :as common]
+  (:require [status-im.ui.components.colors :as colors]
+            [status-im.ui.components.styles :as common]
             [status-im.utils.platform]))
 
 (defstyle contact-inner-container
@@ -8,7 +9,7 @@
    :flex-direction   :row
    :align-items      :center
    :padding-left     16
-   :background-color common/color-white
+   :background-color colors/white
    :android          {:height 56}
    :ios              {:height 63}})
 
@@ -33,7 +34,7 @@
 (def contact-container
   {:flex-direction   :row
    :align-items      :center
-   :background-color common/color-white})
+   :background-color colors/white})
 
 (def forward-btn
   {:opacity        0.4
@@ -47,28 +48,3 @@
 
 (def more-btn
   {:padding 16})
-
-(def selected-contact
-  {:background-color common/selected-contact-color})
-
-(def toggle-container
-  {:width          56
-   :height         56
-   :alignItems     :center
-   :justifyContent :center})
-
-(defnstyle icon-check-container [checked]
-  {:background-color (if checked common/color-light-blue common/color-gray5)
-   :alignItems       :center
-   :justifyContent   :center
-   :margin-right     16
-   :android          {:border-radius 2
-                      :width         17
-                      :height        17}
-   :ios              {:border-radius 50
-                      :width         24
-                      :height        24}})
-
-(def check-icon
-  {:width  12
-   :height 12})

src/status_im/ui/components/list/styles.cljs

@@ -96,3 +96,10 @@
                      :margin-bottom 3}
    :ios             {:margin-top    10
                      :margin-bottom 2}})
+
+(def list-with-label-wrapper
+  {:margin-top        26
+   :margin-horizontal 16})
+
+(def label
+  {:color colors/gray})

src/status_im/ui/components/list/views.cljs

@@ -170,3 +170,9 @@
           {:sections            (clj->js (map wrap-per-section-render-fn sections))
            :renderSectionHeader (wrap-render-section-header-fn render-section-header-fn)}
           (when platform/ios? {:SectionSeparatorComponent (fn [] (reagent/as-element section-separator))}))])
+
+(defn list-with-label [{:keys [style]} label list]
+  [react/view (merge styles/list-with-label-wrapper style)
+   [react/text {:style styles/label}
+    label]
+   list])

src/status_im/ui/components/react.cljs

@@ -189,9 +189,8 @@
                             (if (or (nil? timeout)
                                     (> 100 timeout))
                               (reset! loading false)
-                              (utils/set-timeout (fn []
+                              (utils/set-timeout #(reset! loading false)
-                                                  (reset! loading false))
+                                                 timeout)))}
-                                             timeout)))}
     (if (and (not enabled?) @loading)
       (or preview
           [view {:style (or style {:justify-content :center

src/status_im/ui/components/sortable_list_view.cljs

@@ -1,20 +0,0 @@
-(ns status-im.ui.components.sortable-list-view
-  (:require [reagent.core :as reagent]
-            [status-im.ui.components.react :as react]
-            [status-im.react-native.js-dependencies :as js-dependencies]))
-
-(def sortable-listview-class
-  (reagent/adapt-react-class js-dependencies/sortable-listview))
-
-(defn sortable-list-view [{:keys [on-row-moved render-row] :as props}]
-  [sortable-listview-class
-   (assoc props :on-row-moved #(on-row-moved (js->clj % :keywordize-keys true))
-                :render-row #(render-row (js->clj % :keywordize-keys true)))])
-
-(defn- touchable [inner]
-  [react/touchable-highlight (js->clj (.-props (reagent/current-component)))
-   [react/view
-    inner]])
-
-(defn sortable-item [inner]
-  (react/list-item [touchable inner]))

src/status_im/ui/components/styles.cljs

@@ -10,7 +10,6 @@
 (def color-blue4 "#4360df") ; colors/blue
 (def color-blue4-faded "rgba(67,96,222,0.87)")
 (def color-blue4-transparent "rgba(67, 96, 223, 0.10)")
-(def color-blue5 "#3c56c8")
 (def color-blue6 "#3745AF")
 (def color-blue-transparent "#7099e632")
 (def color-black "#000000")
@@ -27,7 +26,6 @@
 (def color-gray5 "#d9dae1")
 (def color-gray6 "#212121")
 (def color-gray7 "#9fa3b4")
-(def color-gray8 "#6E777E")
 (def color-gray9 "#E9EBEC")
 (def color-gray10 "#9BA3A8")
 (def color-gray11 "#EEF1F5")
@@ -43,12 +41,7 @@
 (def color-white-transparent-6 "rgba(255, 255, 255, 0.6)")
 (def color-light-blue "#628fe3")
 (def color-light-blue-transparent "#628fe333")
-(def color-light-blue2 "#eff3fc")
-(def color-light-blue3 "#a0bcf0")
-(def color-light-blue4 "#f1f4f5")
-(def color-light-blue5 "#d9dff9")
 (def color-light-blue6 "#e3ebfa")
-(def color-light-blue7 "#dcd6fb")
 (def color-dark-blue-1 "#252c4a")
 (def color-dark-blue-2 "#1f253f")
 (def color-dark-blue-3 "#191f37")
@@ -64,7 +57,6 @@
 (def color-red-3 "#FFC1BD")
 (def color-red-4 "#8A3832")
 (def color-light-red "#e86363")
-(def color-light-red2 "#f47979")
 (def color-green-1 "#a8f4d4")
 (def color-green-2 "#448469")
 (def color-green-3 "#44d058")
@@ -75,9 +67,7 @@
 (def color-separator "#D6D6D6")
 
 (def text1-color color-black)
-(def text1-disabled-color "#555555")
 (def text2-color color-gray)
-(def text3-color color-blue)
 (def text4-color color-gray4)
 (def icon-dark-color color-dark)
 (def icon-gray-color color-gray7)
@@ -86,7 +76,6 @@
 (def new-messages-count-color color-blue-transparent)
 (def chat-background color-light-gray)
 (def selected-message-color "#E4E9ED")
-(def selected-contact-color color-light-blue2)
 (def separator-color "#0000001f")
 (def default-chat-color color-purple)
 

src/status_im/ui/components/toolbar/view.cljs

@@ -109,19 +109,19 @@
 
 (defn toolbar
   ([props nav-item content-item] (toolbar props nav-item content-item [actions [{:image :blank}]]))
-  ([{:keys [background-color style flat?]}
+  ([{:keys [background-color style flat? title-centered?]}
     nav-item
     content-item
     action-items]
    [react/view {:style (merge (styles/toolbar background-color flat?) style)}
     ;; On iOS title must be centered. Current solution is a workaround and eventually this will be sorted out using flex
-    (when platform/ios?
+    (when (or title-centered? platform/ios?)
       [react/view styles/ios-content-item
        content-item])
     (when nav-item
       [react/view {:style (styles/toolbar-nav-actions-container 0)}
        nav-item])
-    (if platform/ios?
+    (if (or title-centered? platform/ios?)
       [react/view components.styles/flex]
       content-item)
     action-items]))
@@ -129,4 +129,4 @@
 (defn simple-toolbar
   "A simple toolbar composed of a nav-back item and a single line title."
   ([] (simple-toolbar nil))
-  ([title] (toolbar nil default-nav-back [content-title title])))
+  ([title] (toolbar nil default-nav-back [content-title title])))

src/status_im/ui/screens/add_new/new_chat/views.cljs

@@ -1,36 +1,35 @@
 (ns status-im.ui.screens.add-new.new-chat.views
   (:require-macros [status-im.utils.views :as views])
-  (:require [status-im.ui.components.react :as react]
+  (:require [re-frame.core :as re-frame]
-            [status-im.ui.components.list.views :as list]
+            [status-im.i18n :as i18n]
+            [status-im.ui.components.colors :as colors]
             [status-im.ui.components.contact.contact :as contact-view]
-            [re-frame.core :as re-frame]
+            [status-im.ui.components.icons.vector-icons :as vector-icons]
+            [status-im.ui.components.list.views :as list]
+            [status-im.ui.components.react :as react]
             [status-im.ui.components.status-bar.view :as status-bar]
             [status-im.ui.components.toolbar.view :as toolbar.view]
-            [status-im.i18n :as i18n]
+            [status-im.ui.screens.add-new.styles :as add-new.styles]
-            [status-im.ui.components.common.common :as components]
-            [status-im.ui.screens.add-new.open-dapp.styles :as open-dapp.styles]
-            [status-im.ui.components.icons.vector-icons :as vector-icons]
             [status-im.ui.screens.add-new.new-chat.styles :as styles]
-            [status-im.ui.components.colors :as colors]))
+            [status-im.ui.screens.add-new.open-dapp.styles :as open-dapp.styles]))
 
-(defn render-row [row _ _]
+(defn- render-row [row _ _]
   [contact-view/contact-view {:contact       row
-                              :on-press      #(re-frame/dispatch [:open-chat-with-contact %])
+                              :on-press      #(re-frame/dispatch [:show-profile (:whisper-identity %)])
                               :show-forward? true}])
 
 (views/defview new-chat []
-  (views/letsubs [contacts [:all-added-people-contacts]
+  (views/letsubs [contacts      [:all-added-people-contacts]
                   error-message [:new-contact-error-message]]
     [react/keyboard-avoiding-view open-dapp.styles/main-container
      [status-bar/status-bar]
      [toolbar.view/simple-toolbar (i18n/label :t/new-chat)]
-     [components/separator]
+     [react/view add-new.styles/input-container
-     [react/view open-dapp.styles/enter-url
       [react/text-input {:on-change-text    #(re-frame/dispatch [:set :contacts/new-identity %])
                          :on-submit-editing #(when-not error-message
                                                (re-frame/dispatch [:add-contact-handler]))
                          :placeholder       (i18n/label :t/enter-contact-code)
-                         :style             open-dapp.styles/url-input}]
+                         :style             add-new.styles/input}]
       [react/touchable-highlight {:on-press #(re-frame/dispatch [:scan-qr-code
                                                                  {:toolbar-title (i18n/label :t/new-contact)}
                                                                  :set-contact-identity-from-qr])
@@ -45,4 +44,4 @@
                       :render-fn                 render-row
                       :default-separator?        true
                       :enableEmptySections       true
-                      :keyboardShouldPersistTaps :always}]]))
+                      :keyboardShouldPersistTaps :always}]]))

src/status_im/ui/screens/add_new/open_dapp/events.cljs

@@ -1,2 +0,0 @@
-(ns status-im.ui.screens.add-new.open-dapp.events
- (:require status-im.ui.screens.add-new.open-dapp.navigation))

src/status_im/ui/screens/add_new/open_dapp/navigation.cljs

@@ -1,6 +0,0 @@
-(ns status-im.ui.screens.add-new.open-dapp.navigation
-  (:require [status-im.ui.screens.navigation :as navigation]))
-
-(defmethod navigation/preload-data! :dapp-description
-  [db [_ _ {:keys [dapp]}]]
-  (assoc db :new/open-dapp dapp))

src/status_im/ui/screens/add_new/open_dapp/styles.cljs

@@ -1,24 +1,9 @@
 (ns status-im.ui.screens.add-new.open-dapp.styles
-  (:require-macros [status-im.utils.styles :refer [defstyle defnstyle]])
   (:require [status-im.ui.components.colors :as colors]))
 
-(def main-container {:flex 1})
+(def main-container
-
+  {:flex             1
-(def enter-url
+   :background-color colors/white})
-  {:flex-direction    :row
-   :align-items       :center
-   :border-radius     8
-   :height            52
-   :background-color  colors/light-gray
-   :margin-horizontal 14
-   :margin-top        24})
-
-(defstyle url-input
-  {:flex               1
-   :font-size          15
-   :letter-spacing     -0.2
-   :padding-horizontal 14
-   :android            {:padding 0}})
 
 (def gray-label
   {:font-size      14
@@ -46,4 +31,4 @@
 
 (def description-container
   {:margin-top        26
-   :margin-horizontal 16})
+   :margin-horizontal 16})

src/status_im/ui/screens/add_new/open_dapp/views.cljs

@@ -1,20 +1,21 @@
 (ns status-im.ui.screens.add-new.open-dapp.views
   (:require-macros [status-im.utils.views :as views])
-  (:require [status-im.ui.components.react :as react]
+  (:require [re-frame.core :as re-frame]
-            [status-im.ui.screens.add-new.open-dapp.styles :as styles]
-            [status-im.ui.components.status-bar.view :as status-bar]
-            [status-im.ui.components.toolbar.view :as toolbar.view]
             [status-im.i18n :as i18n]
-            [re-frame.core :as re-frame]
+            [status-im.ui.components.react :as react]
             [status-im.ui.components.action-button.action-button :as action-button]
             [status-im.ui.components.common.common :as components]
+            [status-im.ui.components.status-bar.view :as status-bar]
+            [status-im.ui.components.toolbar.view :as toolbar.view]
             [status-im.ui.components.list.views :as list]
             [status-im.ui.components.contact.contact :as contact-view]
-            [status-im.ui.components.chat-icon.screen :as chat-icon.screen]))
+            [status-im.ui.components.chat-icon.screen :as chat-icon.screen]
+            [status-im.ui.screens.add-new.styles :as add-new.styles]
+            [status-im.ui.screens.add-new.open-dapp.styles :as styles]))
 
 (defn render-row [row _ _]
   [contact-view/contact-view {:contact       row
-                              :on-press      #(re-frame/dispatch [:navigate-to :dapp-description {:dapp row}])
+                              :on-press      #(re-frame/dispatch [:navigate-to :dapp-description row])
                               :show-forward? true}])
 
 (views/defview open-dapp []
@@ -24,7 +25,7 @@
      [status-bar/status-bar]
      [toolbar.view/simple-toolbar (i18n/label :t/open-dapp)]
      [components/separator]
-     [react/view styles/enter-url
+     [react/view add-new.styles/input-container
       [react/text-input {:on-change-text    #(reset! url-text %)
                          :on-submit-editing #(do
                                                (re-frame/dispatch [:navigate-to-clean :home])
@@ -32,7 +33,7 @@
                          :placeholder       (i18n/label :t/enter-url)
                          :auto-capitalize   :none
                          :auto-correct      false
-                         :style             styles/url-input}]]
+                         :style             add-new.styles/input}]]
      [react/text {:style styles/list-title}
       (i18n/label :t/selected-dapps)]
      [list/flat-list {:data                      dapps
@@ -42,7 +43,7 @@
                       :keyboardShouldPersistTaps :always}]]))
 
 (views/defview dapp-description []
-  (views/letsubs [{:keys [name dapp-url] :as dapp} [:get :new/open-dapp]]
+  (views/letsubs [{:keys [name dapp-url] :as dapp} [:get-screen-params]]
     [react/keyboard-avoiding-view styles/main-container
      [status-bar/status-bar]
      [toolbar.view/simple-toolbar]

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

@@ -0,0 +1,20 @@
+(ns status-im.ui.screens.add-new.styles
+  (:require-macros [status-im.utils.styles :refer [defstyle]])
+  (:require [status-im.ui.components.colors :as colors]
+            [status-im.ui.components.styles :as styles]))
+
+(def input-container
+  {:flex-direction    :row
+   :align-items       :center
+   :border-radius     styles/border-radius
+   :height            52
+   :background-color  colors/gray-lighter
+   :margin-horizontal 14
+   :margin-top        24})
+
+(defstyle input
+  {:flex               1
+   :font-size          15
+   :letter-spacing     -0.2
+   :padding-horizontal 14
+   :android            {:padding 0}})

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

@@ -32,7 +32,7 @@
 
 (def background
   {:flex             1
-   :background-color colors/light-gray
+   :background-color colors/gray-lighter
    :align-items      :center
    :justify-content  :center})
 
@@ -51,7 +51,7 @@
    :flex               1
    :border-radius      4
    :height             36
-   :background-color   colors/light-gray
+   :background-color   colors/gray-lighter
    :padding-horizontal 12
    :android            {:align-items    :flex-start
                         :margin-left    (if show-actions 66 18)
@@ -67,4 +67,4 @@
 
 (def toolbar-content-dapp
   {:flex-direction    :row
-   :margin-horizontal 10})
+   :margin-horizontal 10})

src/status_im/ui/screens/db.cljs

@@ -103,7 +103,7 @@
 (spec/def :navigation.screen-params/edit-contact-group (allowed-keys :opt-un [:navigation.screen-params.edit-contact-group/group
                                                                               :navigation.screen-params.edit-contact-group/group-type]))
 (spec/def :navigation.screen-params.dapp-description/dapp :new/open-dapp)
-(spec/def :navigation.screen-params/dapp-description (allowed-keys :opt-un [:navigation.screen-params.dapp-description/dapp]))
+(spec/def :navigation.screen-params/dapp-description map?)
 
 (spec/def :navigation/screen-params (spec/nilable (allowed-keys :opt-un [:navigation.screen-params/network-details
                                                                          :navigation.screen-params/browser

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

@@ -83,8 +83,8 @@
 
         (when-not me?
           (chat-button whisper-id))]]
-       (when show-separator?
+      (when show-separator?
-         [react/view styles/separator])]]))
+        [react/view styles/separator])]]))
 
 ;; NOTE(oskarth): Should possibly be merged with discover-list-item-full, but
 ;; there are too many differences between preview item (main screen) and full

src/status_im/ui/screens/events.cljs

@@ -23,7 +23,6 @@
             status-im.ui.screens.wallet.transactions.events
             status-im.ui.screens.wallet.choose-recipient.events
             status-im.ui.screens.browser.events
-            status-im.ui.screens.add-new.open-dapp.events
             status-im.ui.screens.offline-messaging-settings.events
             [re-frame.core :as re-frame]
             [status-im.native-module.core :as status]

src/status_im/ui/screens/group/add_contacts/views.cljs

@@ -1,70 +1,57 @@
 (ns status-im.ui.screens.group.add-contacts.views
   (:require-macros [status-im.utils.views :refer [defview letsubs]])
   (:require [re-frame.core :as re-frame]
+            [status-im.i18n :as i18n]
             [status-im.ui.components.contact.contact :refer [toogle-contact-view]]
             [status-im.ui.components.list.views :as list]
             [status-im.ui.components.react :as react]
-            [status-im.ui.components.sticky-button :refer [sticky-button]]
             [status-im.ui.components.status-bar.view :refer [status-bar]]
             [status-im.ui.components.toolbar.view :as toolbar]
             [status-im.ui.screens.group.styles :as styles]
-            [status-im.ui.screens.contacts.styles :as contacts.styles]
+            [status-im.ui.screens.contacts.styles :as contacts.styles]))
-            [status-im.i18n :as i18n]
-            [status-im.ui.screens.contacts.styles :as cstyles]
-            [status-im.i18n :refer [label]]
-            [status-im.ui.components.contact.contact :refer [toogle-contact-view]]))
 
-(defn on-toggle [checked? whisper-identity]
+(defn- on-toggle [checked? whisper-identity]
   (let [action (if checked? :deselect-contact :select-contact)]
     (re-frame/dispatch [action whisper-identity])))
 
-(defn on-toggle-participant [checked? whisper-identity]
+(defn- on-toggle-participant [checked? whisper-identity]
   (let [action (if checked? :deselect-participant :select-participant)]
     (re-frame/dispatch [action whisper-identity])))
 
-(defn group-toggle-contact [{:keys [whisper-identity] :as contact}]
+(defn- group-toggle-contact [contact]
   [toogle-contact-view contact :is-contact-selected? on-toggle])
 
-(defn group-toggle-participant [{:keys [whisper-identity] :as contact}]
+(defn- group-toggle-participant [contact]
   [toogle-contact-view contact :is-participant-selected? on-toggle-participant])
 
-(defn toggle-list-toolbar [title contacts-count]
+(defn- toggle-list-toolbar [{:keys [handler count label]} title]
   [toolbar/toolbar {}
    toolbar/default-nav-back
-   [react/view styles/toolbar-container
+   [toolbar/content-title title]
-    [react/view styles/toolbar-title-with-count
+   (when (pos? count)
-     [react/text {:style styles/toolbar-title-with-count-text
+     [toolbar/text-action {:handler handler}
-                  :font  :toolbar-title}
+      label])])
-      title]
-     (when (pos? contacts-count)
-       [react/view styles/toolbar-title-with-count-container
-        [react/text {:style styles/toolbar-title-with-count-text-count
-                     :font  :toolbar-title}
-         contacts-count]])]]])
 
 (defn toggle-list [contacts render-function]
   [react/view {:flex 1}
    [list/flat-list {:style                     contacts.styles/contacts-list
                     :data                      contacts
-                    :render-fn                 (fn [contact] [render-function contact])
+                    :render-fn                 render-function
-                    :footer                    list/default-footer
-                    :header                    list/default-header
                     :keyboardShouldPersistTaps :always}]])
 
 (defview contact-toggle-list []
-  (letsubs [contacts [:all-added-contacts]
+  (letsubs [contacts [:all-added-people-contacts]
             selected-contacts-count [:selected-contacts-count]
             group-type [:get-group-type]]
     [react/keyboard-avoiding-view {:style styles/group-container}
      [status-bar]
-     [toggle-list-toolbar
+     [toggle-list-toolbar {:handler #(re-frame/dispatch [:navigate-to :new-group])
+                           :label   (i18n/label :t/next)
+                           :count   (pos? selected-contacts-count)}
       (i18n/label (if (= group-type :contact-group)
                     :t/new-group
-                    :t/new-group-chat))
+                    :t/group-chat))]
-      selected-contacts-count]
+     [toggle-list contacts group-toggle-contact]]))
-     [toggle-list contacts group-toggle-contact]
-     (when (pos? selected-contacts-count)
-       [sticky-button (i18n/label :t/next) #(re-frame/dispatch [:navigate-to :new-group])])]))
 
 (defview add-contacts-toggle-list []
   (letsubs [contacts [:all-group-not-added-contacts]
@@ -72,12 +59,13 @@
             selected-contacts-count [:selected-contacts-count]]
     [react/keyboard-avoiding-view {:style styles/group-container}
      [status-bar]
-     [toggle-list-toolbar (:name group) selected-contacts-count]
+     [toggle-list-toolbar {:count   selected-contacts-count
-     [toggle-list contacts group-toggle-contact]
+                           :handler #(do
-     (when (pos? selected-contacts-count)
+                                       (re-frame/dispatch [:add-selected-contacts-to-group])
-       [sticky-button (i18n/label :t/save) #(do
+                                       (re-frame/dispatch [:navigate-back]))
-                                             (re-frame/dispatch [:add-selected-contacts-to-group])
+                           :label   (i18n/label :t/save)}
-                                             (re-frame/dispatch [:navigate-back]))])]))
+      (:name group)]
+     [toggle-list contacts group-toggle-contact]]))
 
 (defview add-participants-toggle-list []
   (letsubs [contacts [:all-new-contacts]
@@ -85,9 +73,10 @@
             selected-contacts-count [:selected-participants-count]]
     [react/keyboard-avoiding-view {:style styles/group-container}
      [status-bar]
-     [toggle-list-toolbar chat-name selected-contacts-count]
+     [toggle-list-toolbar {:count   selected-contacts-count
-     [toggle-list contacts group-toggle-participant]
+                           :handler #(do
-     (when (pos? selected-contacts-count)
+                                       (re-frame/dispatch [:add-new-group-chat-participants])
-       [sticky-button (i18n/label :t/save) #(do
+                                       (re-frame/dispatch [:navigate-back]))
-                                             (re-frame/dispatch [:add-new-group-chat-participants])
+                           :label   (i18n/label :t/save)}
-                                             (re-frame/dispatch [:navigate-back]))])]))
+      chat-name]
+     [toggle-list contacts group-toggle-participant]]))

src/status_im/ui/screens/group/navigation.cljs

@@ -12,10 +12,3 @@
 (defmethod nav/preload-data! :new-public-chat
   [db]
   (dissoc db :public-group-topic))
-
-(defmethod nav/preload-data! :reorder-groups
-  [db [_ _]]
-  (assoc db :group/groups-order (->> (vals (:group/contact-groups db))
-                                     (remove :pending?)
-                                     (sort-by :order >)
-                                     (map :group-id))))

src/status_im/ui/screens/group/reorder/views.cljs

@@ -1,61 +0,0 @@
-(ns status-im.ui.screens.group.reorder.views
-  (:require-macros [status-im.utils.views :refer [defview letsubs]])
-  (:require [reagent.core :as reagent]
-            [re-frame.core :refer [dispatch dispatch-sync]]
-            [status-im.ui.components.react :refer [view text list-item]]
-            [status-im.ui.components.icons.vector-icons :as vi]
-            [status-im.ui.components.sticky-button :refer [sticky-button]]
-            [status-im.ui.components.status-bar.view :refer [status-bar]]
-            [status-im.ui.components.toolbar.view :as toolbar]
-            [status-im.ui.components.sortable-list-view :refer [sortable-list-view sortable-item]]
-            [status-im.ui.components.common.common :as common]
-            [status-im.ui.screens.group.styles :as styles]
-            [status-im.i18n :refer [label label-pluralize]]))
-
-
-(defn toolbar-view []
-  [toolbar/simple-toolbar
-   (label :t/reorder-groups)])
-
-(defn group-item [{:keys [name contacts] :as group}]
-  (let [cnt (count contacts)]
-    [view styles/order-item-container
-     [view styles/order-item-inner-container
-      [text {:style styles/order-item-label}
-       name]
-      [text {:style styles/order-item-contacts}
-       (str cnt " " (label-pluralize cnt :t/contact-s))]
-      [view {:flex 1}]
-      [view styles/order-item-icon
-       [vi/icon :icons/grab]]]]))
-
-(defn render-separator [last]
-  (fn [_ row-id _]
-    (list-item
-      (if (= row-id last)
-        ^{:key "bottom-shadow"}
-        [common/bottom-shadow]
-        ^{:key row-id}
-        [view styles/order-item-separator-wrapper
-         [view styles/order-item-separator]]))))
-
-(defview reorder-groups []
-  (letsubs [groups [:get-contact-groups]
-            order  [:get :group/groups-order]]
-    (let [this (reagent/current-component)]
-      [view styles/reorder-groups-container
-       [status-bar]
-       [toolbar-view]
-       [view styles/reorder-list-container
-        [common/top-shadow]
-        [sortable-list-view
-         {:data             groups
-          :order            order
-          :on-row-moved     #(do (dispatch-sync [:change-contact-group-order (:from %) (:to %)])
-                                 (.forceUpdate this))
-          :render-row       (fn [row]
-                             (sortable-item [group-item row]))
-          :render-separator (render-separator (last order))}]]
-       [sticky-button (label :t/save) #(do
-                                         (dispatch [:save-contact-group-order])
-                                         (dispatch [:navigate-to-clean :contact-list]))]])))

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

@@ -12,18 +12,10 @@
    :flex-direction   :column
    :background-color common/color-white})
 
-(def reorder-groups-container
-  {:flex             1
-   :flex-direction   :column
-   :background-color common/color-light-gray})
-
 (defstyle reorder-list-container
   {:flex    1
    :android {:padding-top 16}})
 
-(def group-name-container
-  {:margin-top 10})
-
 (def add-button-container
   {:margin-left 16})
 
@@ -98,6 +90,9 @@
    :ios             {:height 63}
    :android         {:height 56}})
 
+(def contact
+  {:padding-left 0})
+
 (defstyle settings-group-container
   {:ios     {:margin-top 25}
    :android {:margin-top 23}})
@@ -167,21 +162,6 @@
    :android {:padding-left 18}
    :ios     {:align-items :center}})
 
-(def toolbar-title-with-count-text
-  {:color          common/text1-color
-   :letter-spacing -0.2
-   :font-size      17})
-
-(def toolbar-title-with-count-text-count
-  (merge toolbar-title-with-count-text
-         {:color common/color-light-blue}))
-
-(def toolbar-title-with-count
-  {:flex-direction :row})
-
-(def toolbar-title-with-count-container
-  {:padding-left 6})
-
 (def separator
   {:background-color common/color-gray5
    :height           1
@@ -190,7 +170,3 @@
 (def list-view-container
   {:flex       1
    :margin-top 10})
-
-
-
-

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

@@ -1,166 +1,173 @@
 (ns status-im.ui.screens.group.views
   (:require-macros [status-im.utils.views :refer [defview letsubs]])
-  (:require [re-frame.core :refer [dispatch]]
+  (:require [cljs.spec.alpha :as spec]
+            [re-frame.core :as re-frame]
+            [status-im.i18n :as i18n]
             [status-im.ui.screens.contacts.styles :as cstyles]
             [status-im.ui.components.common.common :as common]
             [status-im.ui.components.action-button.action-button :refer [action-button action-separator]]
-            [status-im.ui.components.react :refer [view text touchable-highlight
+            [status-im.ui.components.react :as react]
-                                                   keyboard-avoiding-view]]
             [status-im.ui.components.icons.vector-icons :as vi]
             [status-im.ui.components.list.views :as list]
             [status-im.ui.components.text-input-with-label.view :refer [text-input-with-label]]
-            [status-im.ui.components.status-bar.view :refer [status-bar]]
+            [status-im.ui.components.status-bar.view :as status-bar]
+            [status-im.ui.components.styles :as components.styles]
             [status-im.ui.components.toolbar.view :as toolbar]
-            [status-im.utils.platform :refer [platform-specific ios?]]
+            [status-im.utils.platform :as platform :refer [platform-specific ios?]]
             [status-im.ui.components.sticky-button :refer [sticky-button]]
             [status-im.ui.components.contact.contact :refer [contact-view]]
+            [status-im.ui.screens.add-new.styles :as add-new.styles]
             [status-im.ui.screens.group.styles :as styles]
-            [status-im.i18n :refer [label]]
-            [cljs.spec.alpha :as spec]
             [status-im.ui.screens.group.db :as v]
             [status-im.utils.utils :as utils]))
 
 (defn group-toolbar [group-type edit?]
-  [view
+  [react/view
-   [status-bar]
+   [status-bar/status-bar]
    [toolbar/simple-toolbar
-    (label
+    (i18n/label
       (if (= group-type :contact-group)
         (if edit? :t/edit-group :t/new-group)
-        (if edit? :t/chat-settings :t/new-group-chat)))]])
+        (if edit? :t/chat-settings :t/group-chat)))]])
 
 (defview group-name-view []
   (letsubs [new-group-name [:get :new-chat-name]]
-    [view styles/group-name-container
+    [react/view add-new.styles/input-container
-     [text-input-with-label
+     [react/text-input
-      {:auto-focus        true
+      {:auto-focus     true
-       :label             (label :t/name)
+       :on-change-text #(re-frame/dispatch [:set :new-chat-name %])
-       :on-change-text    #(dispatch [:set :new-chat-name %])
+       :default-value  new-group-name
-       :default-value     new-group-name}]]))
+       :placeholder    (i18n/label :t/set-a-topic)
+       :style          add-new.styles/input}]]))
 
 (defn add-btn [on-press]
-  [action-button {:label     (label :t/add-members)
+  [action-button {:label     (i18n/label :t/add-members)
                   :icon      :icons/add
                   :icon-opts {:color :blue}
                   :on-press  on-press}])
 
 (defn delete-btn [on-press]
-  [view styles/settings-group-container
+  [react/view styles/settings-group-container
-   [touchable-highlight {:on-press on-press}
+   [react/touchable-highlight {:on-press on-press}
-    [view styles/settings-group-item
+    [react/view styles/settings-group-item
-     [view styles/delete-icon-container
+     [react/view styles/delete-icon-container
       [vi/icon :icons/close {:color :red}]]
-     [view styles/settings-group-text-container
+     [react/view styles/settings-group-text-container
-      [text {:style styles/delete-group-text}
+      [react/text {:style styles/delete-group-text}
-       (label :t/delete-group)]
+       (i18n/label :t/delete-group)]
-      [text {:style styles/delete-group-prompt-text}
+      [react/text {:style styles/delete-group-prompt-text}
-       (label :t/delete-group-prompt)]]]]])
+       (i18n/label :t/delete-group-prompt)]]]]])
 
 (defn group-chat-settings-btns []
-  [view styles/settings-group-container
+  [react/view styles/settings-group-container
-   [view {:opacity 0.4}
+   [react/view {:opacity 0.4}
-    [touchable-highlight {:on-press #()}
+    [react/touchable-highlight {:on-press #()}
-     [view styles/settings-group-item
+     [react/view styles/settings-group-item
-      [view styles/settings-icon-container
+      [react/view styles/settings-icon-container
        [vi/icon :icons/speaker {:color :blue}]]
-      [view styles/settings-group-text-container
+      [react/view styles/settings-group-text-container
-       [text {:style styles/settings-group-text}
+       [react/text {:style styles/settings-group-text}
-        (label :t/mute-notifications)]]]]]
+        (i18n/label :t/mute-notifications)]]]]]
    [action-separator]
-   [action-button {:label     (label :t/clear-history)
+   [action-button {:label     (i18n/label :t/clear-history)
                    :icon      :icons/close
                    :icon-opts {:color :blue}
-                   :on-press  #(dispatch [:clear-history])}]
+                   :on-press  #(re-frame/dispatch [:clear-history])}]
    [action-separator]
-   [touchable-highlight {:on-press #(dispatch [:leave-group-chat])}
+   [react/touchable-highlight {:on-press #(re-frame/dispatch [:leave-group-chat])}
-    [view styles/settings-group-item
+    [react/view styles/settings-group-item
-     [view styles/delete-icon-container
+     [react/view styles/delete-icon-container
       [vi/icon :icons/arrow-right {:color :red}]]
-     [view styles/settings-group-text-container
+     [react/view styles/settings-group-text-container
-      [text {:style styles/delete-group-text}
+      [react/text {:style styles/delete-group-text}
-       (label :t/leave-chat)]]]]])
+       (i18n/label :t/leave-chat)]]]]])
 
 (defn more-btn [contacts-limit contacts-count on-press]
-  [view
+  [react/view
    [common/list-separator]
-   [view cstyles/show-all
+   [react/view cstyles/show-all
-    [touchable-highlight {:on-press on-press}
+    [react/touchable-highlight {:on-press on-press}
-     [view
+     [react/view
-      [text {:style cstyles/show-all-text
+      [react/text {:style cstyles/show-all-text
-             :uppercase? (get-in platform-specific [:uppercase?])
+                   :uppercase? (components.styles/uppercase?)
-             :font (if ios? :default :medium)}
+                   :font (if ios? :default :medium)}
-       (str (- contacts-count contacts-limit) " " (label :t/more))]]]]])
+       (str (- contacts-count contacts-limit) " " (i18n/label :t/more))]]]]])
 
 (def ^:const contacts-limit 3)
 
 (defview group-contacts-view [group]
   (letsubs [contacts [:all-added-group-contacts-with-limit (:group-id group) contacts-limit]
             contacts-count [:all-added-group-contacts-count (:group-id group)]]
-    [view
+    [react/view
      (when (pos? contacts-count)
        [common/list-separator])
-     [view
+     [react/view
       (doall
         (map (fn [row]
                ^{:key row}
-               [view
+               [react/view
                 [contact-view
                  {:contact        row
-                  :extend-options [{:action #(dispatch [:remove-contact-from-group
+                  :extend-options [{:action #(re-frame/dispatch [:remove-contact-from-group
-                                                        (:whisper-identity row)
+                                                                 (:whisper-identity row)
-                                                        (:group-id group)])
+                                                                 (:group-id group)])
-                                    :label (label :t/remove-from-group)}]
+                                    :label (i18n/label :t/remove-from-group)}]
                   :extended?      true}]
                 (when-not (= row (last contacts))
                   [common/list-separator])])
              contacts))]
      (when (< contacts-limit contacts-count)
-       [more-btn contacts-limit contacts-count #(dispatch [:navigate-to :edit-group-contact-list])])]))
+       [more-btn contacts-limit contacts-count #(re-frame/dispatch [:navigate-to :edit-group-contact-list])])]))
 
 (defview edit-contact-group []
   (letsubs [{:keys [group group-type]} [:get-screen-params]]
     (let [group-name        (:name group)
           save-btn-enabled? (and (spec/valid? ::v/name group-name)
                                  (not= group-name (:name group)))]
-      [keyboard-avoiding-view {:style styles/group-container}
+      [react/keyboard-avoiding-view {:style styles/group-container}
        [group-toolbar group-type true]
        [group-name-view]
-       [view styles/list-view-container
+       [react/view styles/list-view-container
-        [add-btn #(dispatch [:navigate-to :add-contacts-toggle-list])]
+        [add-btn #(re-frame/dispatch [:navigate-to :add-contacts-toggle-list])]
         [group-contacts-view group]
-        [view styles/separator]
+        [react/view styles/separator]
         [delete-btn #(utils/show-confirmation
-                       (str (label :t/delete-group) "?") (label :t/delete-group-confirmation) (label :t/delete)
+                       (str (i18n/label :t/delete-group) "?") (i18n/label :t/delete-group-confirmation) (i18n/label :t/delete)
                        (fn[]
-                         (dispatch [:delete-contact-group])
+                         (re-frame/dispatch [:delete-contact-group])
-                         (dispatch [:navigate-to-clean :contact-list])))]]
+                         (re-frame/dispatch [:navigate-to-clean :contact-list])))]]
        (when save-btn-enabled?
-         [sticky-button (label :t/save) #(dispatch [:set-contact-group-name])])])))
+         [sticky-button (i18n/label :t/save) #(re-frame/dispatch [:set-contact-group-name])])])))
 
 (defn- render-contact [contact]
-  [contact-view {:contact contact}])
+  [contact-view {:contact contact :style styles/contact}])
 
+(defn- toolbar [group-name save-btn-enabled?]
+  [toolbar/toolbar {}
+   toolbar/default-nav-back
+   [toolbar/content-title (i18n/label :t/group-chat)]
+   (when save-btn-enabled?
+     (let [handler #(re-frame/dispatch [:create-new-group-chat-and-open group-name])]
+       (if platform/android?
+         [toolbar/actions [{:icon      :icons/ok
+                            :icon-opts {:color :blue}
+                            :handler   handler}]]
+         [toolbar/text-action {:handler handler}
+          (i18n/label :t/create)])))])
 
 (defview new-group []
-  (letsubs [contacts [:selected-group-contacts]
+  (letsubs [contacts   [:selected-group-contacts]
-            group-name [:get :new-chat-name]
+            group-name [:get :new-chat-name]]
-            group-type [:get-group-type]]
     (let [save-btn-enabled? (and (spec/valid? ::v/name group-name) (pos? (count contacts)))]
-      [keyboard-avoiding-view (merge {:behavior :padding}
+      [react/keyboard-avoiding-view (merge {:behavior :padding}
-                                     styles/group-container)
+                                           styles/group-container)
-       [group-toolbar group-type false]
+       [status-bar/status-bar]
+       [toolbar group-name save-btn-enabled?]
        [group-name-view]
-       [view styles/list-view-container
+       [list/list-with-label {:flex 1}
-        [list/flat-list {:data contacts
+        (i18n/label :t/members-title)
+        [list/flat-list {:data                      contacts
                          :render-fn                 render-contact
                          :bounces                   false
                          :keyboardShouldPersistTaps :always
-                         :enableEmptySections       true}]]
+                         :enableEmptySections       true}]]])))
-       (when save-btn-enabled?
-         [sticky-button (label :t/save)
-          (if (= group-type :contact-group)
-            #(do
-               (dispatch [:create-new-contact-group group-name])
-               (dispatch [:navigate-to-clean :contact-list]))
-            #(dispatch [:create-new-group-chat-and-open group-name]))
-          true])])))

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

@@ -15,7 +15,7 @@
    :background-color colors/white
    :android          {:height 76}
    :ios              {:height 74}
-   :overflow         "hidden"})
+   :overflow         :hidden})
 
 (defstyle chat-icon-container
   {:padding-top    18
@@ -30,7 +30,7 @@
   {:width            40
    :height           40
    :border-radius    20
-   :background-color colors/light-gray
+   :background-color colors/gray-lighter
    :align-items      :center
    :justify-content  :center})
 
@@ -135,24 +135,15 @@
    :android    {:top 2}
    :ios        {:top 3}})
 
-(def chats-container
+(def container
   {:flex 1})
 
-(defstyle list-container
+(def native-button-offset 16)
-  {:android {:background-color colors/light-gray}
-   :ios     {:background-color colors/white}})
 
 (def toolbar-actions
   {:flex-direction :row
    :padding-right  14})
 
-(def opts-btn-container
-  {:align-items     :center
-   :justify-content :center})
-
-(def opts-btn
-  {:padding 16})
-
 (def create-icon
   {:fontSize 20
    :height   22

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

@@ -1,37 +1,35 @@
 (ns status-im.ui.screens.home.views
   (:require-macros [status-im.utils.views :as views])
   (:require [re-frame.core :as re-frame]
+            [status-im.i18n :as i18n]
+            [status-im.ui.components.colors :as colors]
             [status-im.ui.components.common.common :as components.common]
             [status-im.ui.components.list.views :as list]
             [status-im.ui.components.react :as react]
             [status-im.ui.components.native-action-button :refer [native-action-button]]
-            [status-im.ui.components.styles :as components.styles]
             [status-im.ui.components.toolbar.view :as toolbar]
             [status-im.ui.components.toolbar.actions :as toolbar.actions]
             [status-im.ui.components.sync-state.offline :refer [offline-view]]
             [status-im.ui.screens.home.views.inner-item :as inner-item]
             [status-im.ui.screens.home.styles :as styles]
-            [status-im.i18n :as i18n]
             [status-im.utils.platform :as platform]))
 
-(defn toolbar-view []
+(defn- toolbar []
-  [toolbar/toolbar {}
+  [toolbar/toolbar {:title-centered? true}
    nil
    [toolbar/content-title (i18n/label :t/status)]
    [toolbar/actions
     (when platform/ios?
       [(toolbar.actions/add #(re-frame/dispatch [:navigate-to :new]))])]])
 
-(defn home-action-button []
+(defn- home-action-button []
-  [native-action-button {:button-color        components.styles/color-blue
+  [native-action-button {:button-color        colors/blue
-                         :offset-x            16
+                         :offset-x            styles/native-button-offset
-                         :offset-y            40
+                         :offset-y            styles/native-button-offset
-                         :spacing             13
-                         :hide-shadow         true
                          :accessibility-label :plus-button
                          :on-press            #(re-frame/dispatch [:navigate-to :new])}])
 
-(defn home-list-item [[home-item-id home-item]]
+(defn- home-list-item [[home-item-id home-item]]
   (if (:chat-id home-item)
     [react/touchable-highlight {:on-press #(re-frame/dispatch [:navigate-to-chat home-item-id])}
      [react/view
@@ -42,17 +40,11 @@
 
 (views/defview home []
   (views/letsubs [home-items [:home-items]]
-    [react/view styles/chats-container
+    [react/view styles/container
-     [toolbar-view]
+     [toolbar]
-     [list/flat-list {:style           styles/list-container
+     [list/flat-list {:data            home-items
-                      :data            home-items
                       :render-fn       (fn [[home-item-id :as home-item]]
-                                         ^{:key home-item-id} [home-list-item home-item])
+                                         ^{:key home-item-id} [home-list-item home-item])}]
-                      :header          (when-not (empty? home-items) list/default-header)
-                      :footer          (when-not (empty? home-items)
-                                         [react/view
-                                          [components.common/list-footer]
-                                          [components.common/bottom-shadow]])}]
      (when platform/android?
        [home-action-button])
-     [offline-view]]))
+     [offline-view]]))

src/status_im/ui/screens/home/views/inner_item.cljs

@@ -1,8 +1,6 @@
 (ns status-im.ui.screens.home.views.inner-item
   (:require-macros [status-im.utils.views :refer [defview letsubs]])
-  (:require [re-frame.core :as re-frame]
+  (:require [clojure.string :as str]
-            [reagent.core :as reagent]
-            [clojure.string :as str]
             [status-im.ui.components.react :as react]
             [status-im.ui.components.icons.vector-icons :as vector-icons]
             [status-im.ui.screens.home.styles :as styles]
@@ -13,7 +11,6 @@
             [status-im.utils.datetime :as time]
             [status-im.utils.gfycat.core :as gfycat]
             [status-im.constants :as const]
-            [taoensso.timbre :as log]
             [status-im.ui.components.chat-icon.screen :as chat-icon.screen]))
 
 (defn message-content-text [{:keys [content] :as message}] 

src/status_im/ui/screens/views.cljs

@@ -26,7 +26,6 @@
             [status-im.ui.screens.group.add-contacts.views :refer [contact-toggle-list
                                                                    add-contacts-toggle-list
                                                                    add-participants-toggle-list]]
-            [status-im.ui.screens.group.reorder.views :refer [reorder-groups]]
 
             [status-im.ui.screens.profile.views :as profile]
             [status-im.ui.screens.profile.photo-capture.views :refer [profile-photo-capture]]
@@ -153,7 +152,6 @@
                           :edit-chat-group-contact-list edit-chat-group-contact-list
                           :new-public-chat new-public-chat
                           :contact-toggle-list contact-toggle-list
-                          :reorder-groups reorder-groups
                           :new-chat new-chat
                           :qr-scanner qr-scanner
                           :chat chat

test/cljs/status_im/react_native/js_dependencies.cljs

@@ -27,7 +27,6 @@
        :Dimensions         #js {:get  (fn [])}})
 (def realm                  #js {:schemaVersion (fn [])
                                  :close         (fn [])})
-(def sortable-listview      #js {})
 (def vector-icons           #js {:default #js {}})
 (def webview-bridge         #js {:default #js {}})
 (def svg                    #js {:default #js {}})