ui elements

components/src/status_im/ui/components/react.cljs

@@ -301,39 +301,7 @@
 
 (defmethod create-main-screen-view :iphone-x [current-view]
   (fn [props & children]
-    (let [props             (merge props
+    (apply vector safe-area-view props children)))
-                                   {:background-color
-                                    (case current-view
-                                      (:wallet-send-transaction
-                                       :wallet-request-transaction
-                                       :wallet-send-assets
-                                       :wallet-request-assets
-                                       :choose-recipient
-                                       :recent-recipients
-                                       :select-account
-                                       :wallet-send-transaction-request
-                                       :contact-code
-                                       :wallet-settings-hook)
-                                      colors/blue
-
-                                      (:qr-viewer
-                                       :recipient-qr-code)
-                                      "#2f3031"
-
-                                      colors/white)})
-          bottom-background (when (#{:recent-recipients
-                                     :select-account
-                                     :wallet-send-assets
-                                     :wallet-request-assets} current-view)
-                              [view {:background-color colors/white
-                                     :position         :absolute
-                                     :bottom           0
-                                     :right            0
-                                     :left             0
-                                     :height           100
-                                     :z-index          -1000}])
-          children (conj children bottom-background)]
-      (apply vector safe-area-view props children))))
 
 (defmethod create-main-screen-view :default [_]
   view)

fiddle/README.md

@@ -2,4 +2,6 @@
 
 `yarn install`
 
+`clj prepare.clj`
+ 
 `clj -A:dev`

fiddle/prepare.clj

@@ -13,6 +13,6 @@
        (fn [fl]
          (let [n (first (str/split (.getName fl) #".png"))]
           (when (.isFile fl)
-            (io/copy (io/file (.getPath fl)) (io/file (str "./resources/public/" n)))
+            (io/copy (io/file (.getPath fl)) (io/file (str "./resources/public/" (str/replace n #"_" "-"))))
-            n)))
+            (str/replace n #"_" "-"))))
        fls)))))

fiddle/resources/public/index.html

@@ -8,10 +8,7 @@
 
     <style>
         @import url('https://rsms.me/inter/inter.css');
-          html { font-family: 'Inter', sans-serif; }
+
-        @supports (font-variation-settings: normal) {
-          html { font-family: 'Inter var', sans-serif; }
-        }
         html, body {
           height: 100%;
           margin: 0;

fiddle/src/fiddle/events.cljs

@@ -1,21 +1,11 @@
 (ns fiddle.events
   (:require [re-frame.core :as re-frame]
-            [fiddle.views.colors :as colors]
-            [fiddle.views.screens :as screens]
-            [fiddle.views.typography :as typography]
-            [fiddle.views.icons :as icons]
-            [fiddle.views.list-items :as list-items]
             [cljs.reader :as reader]))
 
 (re-frame/reg-event-fx
  :initialize-db
  (fn [_ _]
-   {:db {:view-id :colors
+   {:db {:view-id :colors}}))
-         :views   {:colors colors/colors
-                   :icons icons/icons
-                   :screens screens/screens
-                   :typography typography/typography
-                   :list-items list-items/list-items}}}))
 
 (re-frame/reg-fx
  :load-icons-fx

fiddle/src/fiddle/subs.cljs

@@ -3,6 +3,4 @@
 
 (re-frame/reg-sub :view-id (fn [db] (get db :view-id)))
 
-(re-frame/reg-sub :view (fn [db] (get-in db [:views (:view-id db)])))
-
 (re-frame/reg-sub :icons (fn [db] (get db :icons)))

fiddle/src/fiddle/views/list_items.cljs

@@ -2,7 +2,8 @@
   (:require [status-im.ui.components.react :as react]
             [status-im.ui.components.colors :as colors]
             [status-im.ui.components.list-item.views :as list-item]
-            [fiddle.frame :as frame]))
+            [fiddle.frame :as frame]
+            [status-im.ui.components.badge :as badge]))
 
 (defn item [name content]
   [react/view
@@ -10,6 +11,17 @@
    [react/view {:background-color :white :width frame/width}
     content]])
 
+(defn list-header []
+  [react/view
+   {:background-color colors/gray-lighter
+    :flex             1
+    :padding          20
+    :flex-direction   :row
+    :flex-wrap        :wrap}
+   [react/view {:width 375}
+    [react/view {:background-color :white}
+     [list-item/list-item {:type :section-header :title "Header title"}]]]])
+
 (defn list-items []
   [react/view
    {:background-color colors/gray-lighter
@@ -62,7 +74,7 @@
     [item "Default wIth icon in circle, chevron and accessory"
      [list-item/list-item
       {:title       "Contacts"
-       :icon        :main-icons/in_contacts
+       :icon        :main-icons/in-contacts
        :on-press    #()
        :accessories [[react/text {:style {:color colors/gray}} "4"]
                      :chevron]}]]
@@ -71,27 +83,14 @@
       {:title    "Privacy and Security"
        :icon     :main-icons/profile
        :on-press #()
-       :accessories
+       :accessories [[badge/badge "333"] :chevron]}]]
-       [[react/view {:width            22
+    [item "Default wIth icon in circle, switch"
-                     :height           22
-                     :border-radius    11
-                     :background-color colors/blue
-                     :align-items      :center
-                     :justify-content  :center}
-         [react/text {:style {:color colors/white :font-size 12}} "1"]]
-        :chevron]}]]
-    [item "Default wIth icon in circle, switch (TODO!)"
      [list-item/list-item
       {:title    "Notifications"
        :icon     :main-icons/notification
        :on-press #()
        :accessories
-       [[react/view {:width            22
+       [[react/switch {}]]}]]
-                     :height           22
-                     :border-radius    11
-                     :background-color colors/blue
-                     :align-items      :center
-                     :justify-content  :center}]]}]]
     [item "Default wIth icon in circle, red"
      [list-item/list-item
       {:title    "Delete and Leave"
@@ -164,15 +163,7 @@
       {:title    "Recovery Phrase"
        :type     :small
        :on-press #()
-       :accessories
+       :accessories [[badge/badge "2"] :chevron]}]]]
-       [[react/view
-         {:width            22
-          :height           22
-          :border-radius    11
-          :background-color colors/blue :align-items :center
-          :justify-content  :center}
-         [react/text {:style {:color colors/white :font-size 12}} "1"]]
-        :chevron]}]]]
    [react/view {:margin-right 10}
     [item "Long title"
      [list-item/list-item

fiddle/src/fiddle/views/main.cljs

@@ -1,25 +1,50 @@
 (ns fiddle.views.main
   (:require-macros [status-im.utils.views :as views])
   (:require [status-im.ui.components.react :as react]
-            [status-im.ui.components.button.view :as button]
+            [status-im.ui.components.button :as button]
+            [fiddle.views.colors :as colors]
+            [fiddle.views.screens :as screens]
+            [fiddle.views.typography :as typography]
+            [fiddle.views.icons :as icons]
+            [fiddle.views.list-items :as list-items]
+            [fiddle.views.ui :as ui]
+            [fiddle.views.toolbar :as toolbar]
             [re-frame.core :as re-frame]))
 
 (defn btn [id label view-id]
-  [button/primary-button
+  [react/view {:margin-bottom 5}
-   {:disabled? (= id view-id)
+   [button/button
-    :style     {:margin-top 5}
+    {:label     label
-    :on-press  #(re-frame/dispatch [:set :view-id id])}
+     :disabled? (= id view-id)
-   label])
+     :type      :secondary
+     :on-press  #(re-frame/dispatch [:set :view-id id])}]])
 
 (views/defview main []
-  (views/letsubs [view-id [:view-id]
+  (views/letsubs [view-id [:view-id]]
-                  view [:view]]
     [react/view {:flex 1 :flex-direction :row :padding 10}
      [react/view {:padding-right 20}
       [btn :colors "Colors" view-id]
       [btn :icons "Icons" view-id]
       [btn :typography "Typography" view-id]
-      [btn :list-items "List items" view-id]
+      [btn :list-header "List Header" view-id]
+      [btn :list-items "List Items" view-id]
+      [btn :top-bar "Top Bar" view-id]
+      [btn :ui "UI elements" view-id]
+      [btn :tooltip "Tooltips" view-id]
+      [btn :bottom "Bottom Sheet" view-id]
+      [btn :popover "Popover" view-id]
+      [btn :input "Text input" view-id]
+      [btn :tabbar "Tab Bar" view-id]
+      [btn :toolbar "Toolbar" view-id]
+      [btn :snack "Snackbar" view-id]
       [btn :screens "Screens" view-id]]
-     (when view
+     (case view-id
-       [view])]))
+       :colors [colors/colors]
+       :icons [icons/icons]
+       :screens [screens/screens]
+       :typography [typography/typography]
+       :list-items [list-items/list-items]
+       :toolbar [toolbar/toolbar]
+       :list-header [list-items/list-header]
+       :ui [ui/ui]
+       [react/text "TODO"])]))

fiddle/src/fiddle/views/toolbar.cljs

@@ -0,0 +1,25 @@
+(ns fiddle.views.toolbar
+  (:require [status-im.ui.components.react :as react]
+            [status-im.ui.components.toolbar :as toolbar-comp]
+            [status-im.ui.components.colors :as colors]))
+
+(defn toolbar []
+  [react/view
+   {:background-color colors/gray-lighter
+    :flex             1
+    :padding          20
+    :flex-direction   :row
+    :flex-wrap        :wrap}
+   [react/view {:width 375}
+    [react/view {:background-color :white :margin 10}
+     [toolbar-comp/toolbar {:center {:type :secondary :label "Label"}}]]
+    [react/view {:background-color :white :margin 10}
+     [toolbar-comp/toolbar {:left {:type :previous :label "Label"} :right {:type :next :label "Label"}}]]
+    [react/view {:background-color :white :margin 10}
+     [toolbar-comp/toolbar {:left {:type :secondary :label "Label"} :right {:label "Label"}}]]
+    [react/view {:background-color :white :margin 10}
+     [toolbar-comp/toolbar {:left {:type :previous :label "Label"}}]]
+    [react/view {:background-color :white :margin 10}
+     [toolbar-comp/toolbar {:right {:type :next :label "Label"}}]]
+    [react/view {:background-color :white :margin 10}
+     [toolbar-comp/toolbar {:center {:label "Label"}}]]]])

fiddle/src/fiddle/views/ui.cljs

@@ -0,0 +1,72 @@
+(ns fiddle.views.ui
+  (:require [status-im.ui.components.react :as react]
+            [status-im.ui.components.button :as button]
+            [status-im.ui.components.colors :as colors]
+            [status-im.ui.components.badge :as badge]
+            [status-im.ui.components.checkbox.view :as checkbox]
+            [reagent.core :as reagent]
+            [status-im.ui.components.radio :as radio]))
+
+(def sw (reagent/atom true))
+(def ch (reagent/atom true))
+(def ch2 (reagent/atom false))
+
+(defn ui []
+  [react/view {:flex-direction :row :flex-wrap :wrap :flex 1}
+   [react/view
+    [react/text {:style {:typography :main-medium}} "Main button"]
+    [react/view {:padding 40 :background-color :while :border-radius 20}
+     [button/button {:label "Label"}]
+     [button/button {:label "Label" :disabled? true}]]]
+   [react/view
+    [react/text {:style {:typography :main-medium}} "Secondary button"]
+    [react/view {:padding 40 :background-color :while :border-radius 20}
+     [button/button {:label "Label" :type :secondary}]
+     [button/button {:label "Label" :type :secondary :disabled? true}]]]
+   [react/view
+    [react/text {:style {:typography :main-medium}} "Next and previous buttons"]
+    [react/view {:padding 40 :background-color :while :border-radius 20 :flex-direction :row}
+     [react/view
+      [button/button {:label "Label" :type :next}]
+      [button/button {:label "Label" :type :previous}]]
+     [react/view
+      [button/button {:label "Label" :type :next :disabled? true}]
+      [button/button {:label "Label2" :type :previous :disabled? true}]]]]
+   [react/view
+    [react/text {:style {:typography :main-medium}} "Switch"]
+    [react/view {:padding 40 :background-color :while :border-radius 20}
+     [react/switch
+      {:track-color #js {:true colors/blue :false nil}
+       :value       @sw
+       :on-value-change #(swap! sw not)
+       :disabled    false}]
+     [react/view {:height 20}]
+     [react/switch
+      {:track-color #js {:true colors/blue :false nil}
+       :value       false
+       :disabled    true}]]]
+   [react/view
+    [react/text {:style {:typography :main-medium}} "Badge"]
+    [react/view {:padding 40 :background-color :while :border-radius 20 :flex-direction :row :flex-wrap :wrap}
+     [react/view {:margin 10}
+      [badge/badge "8"]]
+     [react/view {:margin 10}
+      [badge/badge "8" true]]
+     [react/view {:margin 10}
+      [badge/badge "128"]]
+     [react/view {:margin 10}
+      [badge/badge "338" true]]]]
+   [react/view
+    [react/text {:style {:typography :main-medium}} "Checkbox"]
+    [react/view {:padding 40 :background-color :while :border-radius 20}
+     [checkbox/checkbox
+      {:checked? @ch :on-value-change #(swap! ch not)}]
+     [react/view {:height 20}]
+     [checkbox/checkbox
+      {:checked? @ch2 :on-value-change #(swap! ch2 not)}]]]
+   [react/view
+    [react/text {:style {:typography :main-medium}} "Radio button"]
+    [react/view {:padding 40 :background-color :while :border-radius 20}
+     [radio/radio true]
+     [react/view {:height 20}]
+     [radio/radio false]]]])

fiddle/src/status_im/react_native/js_dependencies.cljs

@@ -40,7 +40,7 @@
 (def snoopy-bars            (fn [] #js {:default #js {}}))
 (def snoopy-buffer          (fn [] #js {:default #js {}}))
 
-(def fetch (fn [] #js {}))
+(def fetch (fn [_ _] #js {}))
 
 (def background-timer (fn [] #js {:setTimeout    js/setTimeout
                                   :setInterval   js/setInterval

fiddle/src/status_im/ui/components/react.cljs

@@ -98,6 +98,7 @@
 (defn prepare-text-props [props]
   (-> props
       (update :style typography/get-style)
+      (update :style assoc :font-family "Inter")
       (assoc :max-font-size-multiplier max-font-size-multiplier)))
 
 (defn prepare-nested-text-props [props]

src/status_im/subs.cljs

@@ -23,7 +23,7 @@
             [status-im.tribute-to-talk.core :as tribute-to-talk]
             [status-im.tribute-to-talk.db :as tribute-to-talk.db]
             [status-im.tribute-to-talk.whitelist :as whitelist]
-            [status-im.ui.components.bottom-bar.styles :as tabs.styles]
+            [status-im.ui.components.tabbar.styles :as tabs.styles]
             [status-im.ui.components.colors :as colors]
             [status-im.ui.components.toolbar.styles :as toolbar.styles]
             [status-im.ui.screens.add-new.new-public-chat.db :as db]

src/status_im/ui/components/action_button/action_button.cljs

@@ -1,34 +0,0 @@
-(ns status-im.ui.components.action-button.action-button
-  (:require [status-im.ui.components.action-button.styles :as st]
-            [status-im.ui.components.common.common :refer [list-separator]]
-            [status-im.ui.components.icons.vector-icons :as vi]
-            [status-im.ui.components.react :as rn]
-            [status-im.ui.components.colors :as colors]
-            [status-im.ui.components.react :as react]
-            [status-im.react-native.resources :as resources]))
-
-(defn action-button [{:keys [label accessibility-label icon icon-opts image image-opts on-press label-style cyrcle-color]}]
-  [rn/touchable-highlight (merge {:on-press       on-press
-                                  :underlay-color colors/gray-transparent-10}
-                                 (when accessibility-label
-                                   {:accessibility-label accessibility-label}))
-   [rn/view {:style st/action-button}
-    [rn/view {:style (st/action-button-icon-container cyrcle-color)}
-     (if image
-       [react/image (assoc image-opts :source (resources/get-image image))]
-       [vi/icon icon icon-opts])]
-    [rn/view st/action-button-label-container
-     [rn/text {:style (merge st/action-button-label label-style)}
-      label]]]])
-
-(defn action-button-disabled [{:keys [label icon]}]
-  [rn/view st/action-button
-   [rn/view st/action-button-icon-container-disabled
-    [rn/view {:opacity 0.4}
-     [vi/icon icon]]]
-   [rn/view st/action-button-label-container
-    [rn/text {:style st/action-button-label-disabled}
-     label]]])
-
-(defn action-separator []
-  [list-separator])

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

@@ -1,44 +0,0 @@
-(ns status-im.ui.components.action-button.styles
-  (:require-macros [status-im.utils.styles :refer [defstyle defnstyle]])
-  (:require [status-im.ui.components.colors :as colors]))
-
-(defstyle action-button
-  {:padding-left   16
-   :flex-direction :row
-   :align-items    :center
-   :ios            {:height 64}
-   :desktop        {:height 50}
-   :android        {:height 64}})
-
-(defnstyle action-button-icon-container [circle-color]
-  {:border-radius    20
-   :width            40
-   :height           40
-   :align-items      :center
-   :justify-content  :center
-   :background-color (or circle-color colors/blue-light)})
-
-(def action-button-label-container
-  {:padding-left 16})
-
-(def action-button-label
-  {:color      colors/blue})
-
-(def action-button-label-red
-  {:color      colors/red})
-
-(defstyle actions-list
-  {:background-color colors/white
-   :flex             1})
-
-(def action-button-label-disabled
-  (merge action-button-label
-         {:color colors/gray}))
-
-(defstyle action-button-icon-container-disabled
-  {:border-radius    50
-   :width            40
-   :height           40
-   :align-items      :center
-   :justify-content  :center
-   :background-color colors/gray-lighter})

src/status_im/ui/components/badge.cljs

@@ -0,0 +1,13 @@
+(ns status-im.ui.components.badge
+  (:require [status-im.ui.components.react :as react]
+            [status-im.ui.components.colors :as colors]))
+
+(defn badge [label & [small?]]
+  [react/view (merge
+               (if small?
+                 {:height 18 :border-radius 9 :min-width 18 :padding-horizontal 6}
+                 {:height 22 :border-radius 11 :min-width 22 :padding-horizontal 8})
+               {:background-color colors/blue
+                :justify-content :center
+                :align-items :center})
+   [react/text {:style {:typography :caption :color colors/white}} label]])

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

@@ -1,23 +0,0 @@
-(ns status-im.ui.components.bottom-buttons.styles
-  (:require [status-im.ui.components.colors :as colors]))
-
-(def wrapper
-  {:position :absolute
-   :bottom   0
-   :left     0
-   :right    0})
-
-(def border
-  {:margin-horizontal 16
-   :border-top-width  1
-   :border-color      colors/white-transparent-10})
-
-(def container
-  {:flex-direction  :row
-   :align-items     :center
-   :justify-content :space-between})
-
-(def container-single
-  {:flex-direction  :row
-   :align-items     :center
-   :justify-content :center})

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

@@ -1,21 +0,0 @@
-(ns status-im.ui.components.bottom-buttons.view
-  (:require [status-im.ui.components.bottom-buttons.styles :as styles]
-            [status-im.ui.components.react :as react]))
-
-(defn bottom-button
-  ([button] (bottom-button nil button))
-  ([style button]
-   [react/view styles/wrapper
-    [react/view styles/border]
-    [react/view (merge styles/container-single style)
-     button]]))
-
-(defn bottom-buttons
-  ([left right] (bottom-buttons nil left right))
-  ([style left right]
-   [react/view styles/wrapper
-    [react/view styles/border]
-    [react/view (merge styles/container style)
-     left
-     [react/view {:flex 1}]
-     right]]))

src/status_im/ui/components/button.cljs

@@ -0,0 +1,68 @@
+(ns status-im.ui.components.button
+  (:require [status-im.ui.components.react :as react]
+            [status-im.ui.components.colors :as colors]
+            [status-im.ui.components.icons.vector-icons :as vector-icons]
+            [status-im.utils.label :as utils.label]))
+
+(defn style-container [type disabled?]
+  (merge
+   (when (= type :main)
+     {:margin-vertical 8 :margin-horizontal 16})
+   (cond
+     (#{:main :secondary} type)
+     {:padding-horizontal 32}
+     (= :next type)
+     {:padding-right 12 :padding-left 20}
+     (= :previous type)
+     {:padding-right 20 :padding-left 12}
+     :else nil)
+   {:padding-vertical 11 :border-radius 8
+    :align-items :center :justify-content :center
+    :background-color (cond
+                        (#{:secondary :next :previous} type)
+                        nil
+                        disabled?
+                        colors/gray-transparent-10
+                        (= type :main)
+                        colors/blue-transparent-10
+                        :else
+                        nil)}))
+
+(defn button
+
+  "A general purpose status-react specfic button component
+  'type'
+  :main (default), :secondary, :next, :previous
+
+  `label`
+   Any one of string, keyword representing translated string in the form of :t/{translation-key-in-translation-files}
+
+  `disabled?`
+  Bool
+
+  `on-press`
+  Fn
+
+  Spec: https://www.figma.com/file/cb4p8AxLtTF3q1L6JYDnKN15/Index?node-id=858%3A0"
+
+  [{:keys [label type disabled? on-press accessibility-label] :or {type :main}}]
+  (let [label (utils.label/stringify label)]
+    [react/touchable-opacity (merge {:on-press on-press :disabled disabled? :active-pacity 0.5}
+                                    (when accessibility-label
+                                      {:accessibility-label accessibility-label}))
+     [react/view {:style (style-container type disabled?)}
+      [react/view {:flex-direction :row :align-items :center}
+       (when (= type :previous)
+         [vector-icons/icon :main-icons/back {:container-style {:width 24 :height 24 :margin-right 4}
+                                              :color (if disabled? colors/gray colors/blue)}])
+       [react/text {:style {:color (cond
+                                     disabled?
+                                     colors/gray
+                                     (#{:main :secondary :next :previous} type)
+                                     colors/blue
+                                     :else
+                                     nil)}}
+        label]
+       (when (= type :next)
+         [vector-icons/icon :main-icons/next {:container-style {:width 24 :height 24 :margin-left 4}
+                                              :color (if disabled? colors/gray colors/blue)}])]]]))

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

@@ -1,95 +0,0 @@
-(ns status-im.ui.components.button.styles
-  (:require-macros [status-im.utils.styles :refer [defstyle defnstyle]])
-  (:require [status-im.ui.components.colors :as colors]
-            [status-im.ui.components.styles :as styles]
-            [status-im.utils.platform :as platform]))
-
-(def border-color colors/white-transparent-10)
-(def border-color-high colors/white-transparent-10)
-
-(def buttons-container {:flex-direction :row})
-
-(def button-container styles/flex)
-
-(def button
-  {:flex-direction     :row
-   :justify-content    :center
-   :align-items        :center
-   :padding-horizontal 12})
-
-(defn- border [position]
-  (let [radius (if platform/ios? 8 4)]
-    (case position
-      :first {:border-bottom-left-radius radius
-              :border-top-left-radius    radius
-              :ios                       {:border-top-width    1
-                                          :border-left-width   1
-                                          :border-bottom-width 1}}
-      :last {:border-bottom-right-radius radius
-             :border-top-right-radius    radius
-             :ios                        {:border-top-width    1
-                                          :border-right-width  1
-                                          :border-bottom-width 1}}
-      {:android {:border-left-width  1
-                 :border-right-width 1}
-       :ios     {:border-width 1}})))
-
-(defnstyle button-bar [position]
-  (merge {:border-color border-color}
-         (border position)))
-
-(def button-text
-  {:color              colors/white
-   :padding-horizontal 16
-   :padding-vertical   10})
-
-(defstyle button-text-disabled
-  {:android {:opacity 0.4}
-   :ios     {:opacity 0.6}})
-
-(defstyle button-borders
-  {:border-radius 8
-   :ios           {;; Border radius is ignored with transparent background unless overflow "hidden" is used
-                   ;; See https://github.com/facebook/react-native/issues/13760
-                   :overflow      :hidden}})
-
-(defn primary-button [disabled?]
-  (merge
-   button-borders
-   {:background-color (if disabled? colors/gray-transparent-10 colors/blue)}))
-
-(def primary-button-text {:color colors/white})
-
-(def secondary-button
-  (merge
-   button-borders
-   {:background-color colors/blue-light}))
-
-(def secondary-button-text {:color colors/blue})
-
-(def button-with-icon-container
-  {:flex-direction    :row
-   :justify-content   :space-between
-   :align-items       :center
-   :height            42
-   :margin-horizontal 16
-   :border-radius     styles/border-radius
-   :background-color  colors/blue-transparent-10})
-
-(def button-with-icon-text-container
-  {:padding-left    16
-   :padding-bottom  1
-   :flex            0.9
-   :flex-direction  :row
-   :justify-content :center
-   :align-items     :center})
-
-(def button-with-icon-text
-  {:color colors/blue})
-
-(def button-with-icon-image-container
-  {:border-radius   50
-   :flex            0.1
-   :padding-right   5
-   :align-items     :center
-   :justify-content :center})

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

@@ -1,45 +0,0 @@
-(ns status-im.ui.components.button.view
-  (:require [status-im.ui.components.button.styles :as styles]
-            [status-im.ui.components.colors :as colors]
-            [status-im.ui.components.react :as react]
-            [status-im.ui.components.icons.vector-icons :as vector-icons]
-            [status-im.utils.platform :as platform]))
-
-(defn button [{:keys [on-press style disabled? fit-to-text? text-style accessibility-label] :or {fit-to-text? true}} label icon]
-  [react/touchable-highlight (merge {:underlay-color styles/border-color-high}
-                                    (when-not fit-to-text?
-                                      {:style styles/button-container})
-                                    (when (and on-press (not disabled?))
-                                      {:on-press on-press})
-                                    (when accessibility-label
-                                      {:accessibility-label accessibility-label}))
-   [react/view {:style (merge styles/button
-                              style)}
-    [react/text {:style      (merge styles/button-text
-                                    text-style
-                                    (when disabled?
-                                      {:color colors/gray}))}
-     label]
-    icon]])
-
-(defn primary-button [{:keys [style text-style disabled?] :as m} label]
-  [button (assoc m
-                 :style        (merge (styles/primary-button disabled?) style)
-                 :text-style   (merge styles/primary-button-text text-style))
-   label])
-
-(defn secondary-button [{:keys [style text-style] :as m} label]
-  [button (assoc m
-                 :style        (merge styles/secondary-button style)
-                 :text-style   (merge styles/secondary-button-text text-style))
-   label])
-
-(defn button-with-icon [{:keys [on-press label icon accessibility-label style]}]
-  [react/touchable-highlight {:on-press on-press}
-   [react/view (merge styles/button-with-icon-container style)
-    [react/view styles/button-with-icon-text-container
-     [react/text {:style styles/button-with-icon-text}
-      label]]
-    [react/view {:style               styles/button-with-icon-image-container
-                 :accessibility-label accessibility-label}
-     [vector-icons/icon icon {:color colors/blue}]]]])

src/status_im/ui/components/chat_icon/screen.cljs

@@ -8,6 +8,8 @@
             [status-im.utils.platform :as platform])
   (:require-macros [status-im.utils.views :refer [defview letsubs]]))
 
+;;TODO REWORK THIS NAMESPACE
+
 (defn default-chat-icon [name styles]
   (when-not (string/blank? name)
     [react/view (:default-chat-icon styles)

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

@@ -2,7 +2,7 @@
   (:require [status-im.ui.components.colors :as colors]))
 
 (def wrapper
-  {:padding 16})
+  {:width 24 :height 24 :align-items :center :justify-content :center})
 
 (defn icon-check-container [checked?]
   {:background-color (if checked? colors/blue colors/gray-lighter)
@@ -12,16 +12,6 @@
    :width           18
    :height          18})
 
-(defn icon-radio-container [checked?]
-  (merge (icon-check-container checked?)
-         {:border-radius 100
-          :width         26
-          :height        26}))
-
 (def check-icon
-  {:width  12
+  {:width  16
-   :height 12})
+   :height 16})
-
-(def plain-check-icon
-  (merge check-icon
-         {:tint-color colors/blue}))

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

@@ -22,18 +22,3 @@
       :tiny-icons/tiny-check {:container-style (styles/icon-check-container true)
                               :color colors/white}]
      [react/view {:style  (styles/icon-check-container false)}])])
-
-(defn radio-button
-  [{:keys [on-value-change checked? accessibility-label
-           disabled? style icon-style]
-    :or   {accessibility-label :radio-button}}]
-  [react/touchable-highlight
-   (merge {:style               (merge
-                                 styles/wrapper
-                                 style)
-           :accessibility-label accessibility-label}
-          (when on-value-change
-            {:on-press #(on-value-change (not checked?))}))
-   (if checked?
-     [icons/icon :main-icons/check {:color colors/blue}]
-     [react/view])])

src/status_im/ui/components/common/common.cljs

@@ -1,66 +1,26 @@
 (ns status-im.ui.components.common.common
   (:require [reagent.core :as reagent]
-            [status-im.ethereum.core :as ethereum]
             [status-im.i18n :as i18n]
             [status-im.ui.components.colors :as colors]
             [status-im.ui.components.common.styles :as styles]
             [status-im.ui.components.icons.vector-icons :as vector-icons]
-            [status-im.ui.components.react :as react]
+            [status-im.ui.components.react :as react])
-            [status-im.utils.platform :as platform])
   (:require-macros [status-im.utils.views :refer [defview letsubs]]))
 
-(defn top-shadow []
-  (when platform/android?
-    [react/view]))
-
-(defn bottom-shadow []
-  (when platform/android?
-    [react/view]))
-
-(defn separator [style & [wrapper-style]]
-  [react/view (merge styles/separator-wrapper wrapper-style)
-   [react/view (merge styles/separator style)]])
-
-(defn list-separator []
-  [separator styles/list-separator])
-
-(defn list-footer []
-  [react/view styles/list-header-footer-spacing])
-
-(defn list-header []
-  [react/view styles/list-header-footer-spacing])
-
-(defn form-title [label & [{:keys [count-value]}]]
-  [react/view
-   [react/view styles/form-title-container
-    [react/view styles/form-title-inner-container
-     [react/text {:style styles/form-title}
-      label]
-     (when-not (nil? count-value)
-       [react/text {:style styles/form-title-count}
-        count-value])]]
-   [top-shadow]])
-
-(defview network-info [{:keys [text-color]}]
-  (letsubs [network-id [:chain-id]]
-    [react/view
-     [react/view styles/network-container
-      [react/view styles/network-icon
-       [vector-icons/icon :main-icons/network {:color :white}]]
-      [react/text {:style (styles/network-text text-color)}
-       (cond (ethereum/testnet? network-id)
-             (i18n/label :t/testnet-text {:testnet (get-in ethereum/chains [(ethereum/chain-id->chain-keyword network-id) :name] "Unknown")})
-
-             (ethereum/sidechain? network-id)
-             (i18n/label :t/sidechain-text {:sidechain (get-in ethereum/chains [(ethereum/chain-id->chain-keyword network-id) :name] "Unknown")})
-
-             :else
-             (i18n/label :t/mainnet-text))]]]))
-
 (defn logo
   [{:keys [size]}]
   [vector-icons/icon :icons/logo (styles/logo size)])
 
+;;TODO DEPRECATED, use status-im.ui.components.list-item.views
+(defn separator [style & [wrapper-style]]
+  [react/view (merge styles/separator-wrapper wrapper-style)
+   [react/view (merge styles/separator style)]])
+
+;;TODO DEPRECATED, use status-im.ui.components.list-item.views
+(defn list-separator []
+  [separator styles/list-separator])
+
+;;TODO DEPRECATED, use status-im.ui.components.button
 (defn bottom-button [{:keys [accessibility-label
                              label
                              disabled?
@@ -79,6 +39,7 @@
       (when forward?
         [vector-icons/icon :main-icons/next {:color color}])]]))
 
+;;TODO DEPRECATED, use status-im.ui.components.button
 (defn button [{:keys [on-press label background? button-style label-style disabled? accessibility-label] :or {background? true disabled? false}}]
   [react/touchable-highlight {:style    (styles/button button-style background? disabled?)
                               :on-press on-press
@@ -87,12 +48,15 @@
    [react/text {:style (merge styles/button-label label-style)}
     label]])
 
+;;TODO DEPRECATED, use status-im.ui.components.button
+;;TODO implement :red type if needed
 (defn red-button [props]
   [react/view {:align-items :center}
    [button (merge props
                   {:label-style  {:color colors/red :font-size 15}
                    :button-style {:padding-horizontal 32 :background-color colors/red-light}})]])
 
+;;TODO DEPRECATED, use status-im.ui.components.badge
 (defn counter
   ([value] (counter nil value))
   ([{:keys [size accessibility-label] :or {size 18}} value]

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

@@ -1,25 +1,6 @@
 (ns status-im.ui.components.common.styles
   (:require-macros [status-im.utils.styles :refer [defstyle defnstyle]])
-  (:require [status-im.ui.components.styles :as styles]
+  (:require [status-im.ui.components.colors :as colors]))
-            [status-im.ui.components.colors :as colors]))
-
-(def gradient-top
-  {:flex-direction   :row
-   :height           3
-   :background-color colors/gray-lighter})
-
-(def gradient-top-colors
-  ["rgba(25, 53, 76, 0.01)"
-   "rgba(25, 53, 76, 0.1)"])
-
-(def gradient-bottom
-  {:flex-direction   :row
-   :height           2
-   :background-color colors/gray-lighter})
-
-(def gradient-bottom-colors
-  ["rgba(25, 53, 76, 0.1)"
-   "rgba(25, 53, 76, 0.01)"])
 
 (def separator-wrapper
   {:background-color colors/white})
@@ -33,60 +14,12 @@
 (def list-separator
   {:margin-left 72})
 
-(defstyle form-title-container
-  {:flex-direction :row})
-
-(defstyle form-title-inner-container
-  {:padding-left   16
-   :padding-right  16
-   :flex           1
-   :flex-direction :row
-   :ios            {:background-color colors/white
-                    :padding-top      19
-                    :padding-bottom   15
-                    :margin-top       16}
-   :android        {:background-color colors/gray-lighter
-                    :padding-top      20
-                    :padding-bottom   17
-                    :margin-top       8}})
-
-(def form-title
-  {:flex-shrink 1
-   :color       colors/text
-   :font-size   16})
-
-(def form-title-count
-  (merge form-title
-         {:flex-shrink   0
-          :opacity       0.6
-          :padding-left  8
-          :padding-right 5
-          :color         colors/text-gray}))
-
-(defstyle list-header-footer-spacing
-  {:android {:background-color colors/white
-             :height           8}})
-
 (def network-container
   {:flex-direction     :row
    :padding-horizontal 13
    :padding-vertical   11
    :align-items        :center})
 
-(defn network-text [text-color]
-  {:flex        1
-   :color       (or text-color colors/black)
-   :font-size   14
-   :margin-left 16})
-
-(def network-icon
-  {:width            40
-   :height           40
-   :border-radius    (/ 40 2)
-   :background-color colors/green
-   :align-items      :center
-   :justify-content  :center})
-
 (def label-action-text
   {:color colors/blue})
 

src/status_im/ui/components/desktop/tabs.cljs

@@ -5,7 +5,7 @@
             [taoensso.timbre :as log]
             [status-im.ui.components.colors :as colors]
             [status-im.ui.components.react :as react]
-            [status-im.ui.components.bottom-bar.styles :as tabs.styles])
+            [status-im.ui.components.tabbar.styles :as tabs.styles])
   (:require-macros [status-im.utils.views :as views]))
 
 ;;TODO copy-pate with minimum modifications of status-react tabs

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

@@ -2,8 +2,6 @@
   (:require
    [status-im.ui.components.icons.vector-icons :as icons]
    [status-im.ui.components.common.styles :as styles]
-   [status-im.ui.components.action-button.styles :as st]
-   [status-im.ui.components.styles :as common]
    [status-im.ui.components.checkbox.styles :as checkbox.styles]
    [status-im.ui.components.react :as react]
    [status-im.ui.components.colors :as colors]))
@@ -14,16 +12,10 @@
     (when checked?
       [icons/icon :main-icons/check {:style checkbox.styles/check-icon}])]])
 
-;; TODO copy-pate with minimum modifications of status-react components
+;; TODO should be removed when 2-pane UI will be used
 
 (defn action-button [{:keys [label icon icon-opts on-press label-style cyrcle-color]}]
-  [react/touchable-highlight {:on-press on-press}
+  [react/touchable-highlight {:on-press on-press}])
-   [react/view {:style st/action-button}
-    [react/view {:style (st/action-button-icon-container cyrcle-color)}
-     [icons/icon icon icon-opts]]
-    [react/view {:style st/action-button-label-container}
-     [react/text {:style (merge st/action-button-label label-style)}
-      label]]]])
 
 (defn separator [style & [wrapper-style]]
   [react/view {:style (merge styles/separator-wrapper wrapper-style)}

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

@@ -29,12 +29,15 @@
             [status-im.ui.components.list.styles :as styles]
             [status-im.ui.components.react :as react]
             [status-im.ui.screens.home.animations.responder :as responder]
-            [status-im.utils.platform :as platform])
+            [status-im.utils.platform :as platform]
+            [status-im.ui.components.radio :as radio])
   (:require-macros [status-im.utils.views :as views]))
 
 (def flat-list-class (react/get-class "FlatList"))
 (def section-list-class (react/get-class "SectionList"))
 
+;;TODO THIS NAMESPACE is DEPRECATED, use status-im.ui.components.list-item.views
+;;TODO DEPRECATED, use status-im.ui.components.list-item.views
 (defn item
   ([content] (item nil content))
   ([left content] (item left content nil))
@@ -48,38 +51,38 @@
     (when right
       [react/view {:style styles/right-item-wrapper}
        right])]))
-
+;;TODO DEPRECATED, use status-im.ui.components.list-item.views
 (defn touchable-item [handler item]
   [react/touchable-highlight {:on-press handler}
    [react/view
     item]])
-
+;;TODO DEPRECATED, use status-im.ui.components.list-item.views
 (defn item-icon
   [{:keys [icon style icon-opts]}]
   {:pre [(not (nil? icon))]}
   [react/view {:style (merge styles/item-icon-wrapper style)}
    [vector-icons/icon icon (merge icon-opts {:style styles/item-icon})]])
-
+;;TODO DEPRECATED, use status-im.ui.components.list-item.views
 (defn item-image
   [{:keys [source style image-style]}]
   [react/view {:style style}
    [react/image {:source (if (fn? source) (source) source)
                  :style  (merge styles/item-image image-style)}]])
-
+;;TODO DEPRECATED, use status-im.ui.components.list-item.views
 (defn item-primary
   ([s] (item-primary nil s))
   ([{:keys [style] :as props} s]
    [react/text (merge {:style (merge styles/primary-text style)}
                       (dissoc props :style))
     s]))
-
+;;TODO DEPRECATED, use status-im.ui.components.list-item.views
 (defn item-primary-only
   ([s] (item-primary-only nil s))
   ([{:keys [style] :as props} s]
    [react/text (merge {:style (merge styles/primary-text-only style)}
                       (dissoc props :style))
     s]))
-
+;;TODO DEPRECATED, use status-im.ui.components.list-item.views
 (defn item-secondary
   ([s] (item-secondary nil s))
   ([{:keys [style]} s]
@@ -88,11 +91,12 @@
      :ellipsize-mode  :middle
      :number-of-lines 1}
     s]))
-
+;;TODO DEPRECATED, use status-im.ui.components.list-item.views
 (defn item-content
   [& children]
   (into [react/view {:style styles/item-content-view}] (keep identity children)))
 
+;;TODO DEPRECATED, use status-im.ui.components.list-item.views
 (defn list-item-with-checkbox
   [{:keys [on-value-change style checked? on-long-press] :as props} item]
   [react/touchable-highlight (merge {:on-press #(on-value-change (not checked?))}
@@ -102,18 +106,20 @@
          [react/view {:style (merge style styles/item-checkbox)}
           [checkbox/checkbox props]])])
 
+;;TODO DEPRECATED, use status-im.ui.components.list-item.views
 (defn list-item-with-radio-button
   [{:keys [on-value-change style checked?] :as props} item]
   [react/touchable-highlight {:on-press #(on-value-change (not checked?))}
    (conj item
          [react/view {:style (merge style styles/item-checkbox)}
-          [checkbox/radio-button props]])])
+          [radio/radio (:checked? props)]])])
 
 (def item-icon-forward
   [item-icon {:icon      :main-icons/next
               :style     {:width 12}
               :icon-opts {:color colors/white}}])
 
+;;TODO DEPRECATED, use status-im.ui.components.list-item.views
 (defn big-list-item
   [{:keys [style text text-color text-style subtext value action-fn active? destructive? hide-chevron?
            accessory-value text-color new? activity-indicator
@@ -250,7 +256,7 @@
      (assoc (dissoc props :render-fn) :renderItem (wrap-render-fn f))
      props)
    :data wrap-data))
-
+;;TODO DEPRECATED, use status-im.ui.components.list-item.views
 (defn section-list
   "A wrapper for SectionList.
    To render something on empty sections, use renderSectionFooter and conditionaly
@@ -267,7 +273,7 @@
           {:sections            (clj->js (map wrap-per-section-render-fn sections))
            :renderSectionHeader (wrap-render-section-header-fn render-section-header-fn)
            :style               style})])
-
+;;TODO DEPRECATED, use status-im.ui.components.list-item.views
 (defn render-action [{:keys [label subtext accessibility-label icon action disabled?]}
                      {:keys [action-style action-label-style action-subtext-style icon-opts]}]
   [react/touchable-highlight {:on-press action}
@@ -296,7 +302,7 @@
          subtext]])
 
      item-icon-forward]]])
-
+;;TODO DEPRECATED, use status-im.ui.components.list-item.views
 (defn action-list [actions {:keys [container-style action-separator-style] :as styles}]
   [react/view (merge styles/action-list container-style)
    [flat-list
@@ -306,13 +312,14 @@
      :data      actions
      :key-fn    (fn [_ i] (str i))
      :render-fn #(render-action % styles)}]])
-
+;;TODO DEPRECATED, use status-im.ui.components.list-item.views
 (defn list-with-label [{:keys [style]} label list]
   [react/view (merge styles/list-with-label-wrapper style)
    [react/text {:style styles/label}
     label]
    list])
 
+;;TODO DEPRECATED, use long-press
 (views/defview deletable-list-item [{:keys [type id on-delete]} body]
   (views/letsubs [swiped? [:delete-swipe-position type id]]
     (let [offset-x            (animation/create-value (if swiped? styles/delete-button-width 0))

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

@@ -1,7 +0,0 @@
-(ns status-im.ui.components.list-header.views
-  (:require [status-im.ui.components.react :as react]
-            [status-im.ui.components.colors :as colors]))
-
-(defn list-header [title]
-  [react/view {:style {:padding-top 14 :padding-bottom 4 :padding-horizontal 16}}
-   [react/text {:style {:color colors/gray}} title]])

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

@@ -1,25 +1,12 @@
 (ns status-im.ui.components.list-item.styles
   (:require [status-im.ui.components.colors :as colors]))
 
-(defn container [type theme]
+(defn container [type]
-  {:min-height         (cond
+  {:flex-direction     :row
-                         (= type :default)        64
-                         (= type :small)          52
-                         (= type :section-header) 40
-                         :else                    0)
-   :flex               1
-   :flex-direction     :row
    :justify-content    :flex-start
    :padding-horizontal 16
-   :background-color   (if (= theme :blue)
+   :padding-top        (if (= type :section-header) 14 10)
-                         colors/blue
+   :padding-bottom     (if (= type :section-header) 4 10)
-                         colors/white)
-   :padding-top        (cond
-                         (= type :section-header) 14
-                         :else                    10)
-   :padding-bottom     (cond
-                         (= type :section-header) 4
-                         :else                    10)
    :align-items        :center})
 
 (def icon-column-container

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

@@ -1,38 +1,16 @@
 (ns status-im.ui.components.list-item.views
-  (:require [clojure.string :as string]
+  (:require [reagent.core :as reagent]
-            [reagent.core :as reagent]
-            [status-im.i18n :as i18n]
             [status-im.ui.components.colors :as colors]
             [status-im.ui.components.icons.vector-icons :as icons]
             [status-im.ui.components.react :as react]
             [status-im.ui.components.list-item.styles :as styles]
             [status-im.ui.components.tooltip.views :as tooltip]
-            [status-im.ui.screens.profile.db :as profile.db]))
+            [status-im.ui.screens.profile.db :as profile.db]
+            [status-im.utils.label :as utils.label]))
 
 (def divider
   [react/view {:height 1 :background-color colors/gray-lighter}])
 
-(defn stringify [keyword-or-number]
-  (cond
-    (string? keyword-or-number)
-    keyword-or-number
-
-    (and (qualified-keyword? keyword-or-number)
-         (= "t" (namespace keyword-or-number)))
-    (i18n/label keyword-or-number)
-
-    (and (qualified-keyword? keyword-or-number)
-         (not= "t" (namespace keyword-or-number)))
-    (str (namespace keyword-or-number) "/" (name keyword-or-number))
-
-    (simple-keyword? keyword-or-number)
-    (name keyword-or-number)
-
-    (number? keyword-or-number)
-    (str keyword-or-number)
-
-    :else nil))
-
 (defn- icon-column [icon theme disabled?]
   [react/view styles/icon-column-container
    (cond
@@ -99,8 +77,8 @@
                      type theme icon? subtitle content
                      title-prefix-width disabled?)}
         (if title-prefix-width
-          (stringify title-prefix)
+          (utils.label/stringify title-prefix)
-          (str (stringify title-prefix) " "))]
+          (str (utils.label/stringify title-prefix) " "))]
 
        (vector? title-prefix)
        title-prefix
@@ -121,7 +99,7 @@
          title-color-override)}
        (when title-accessibility-label
          {:accessibility-label title-accessibility-label}))
-      (stringify title)]
+      (utils.label/stringify title)]
 
      (vector? title)
      [react/view {:flex 1}
@@ -149,7 +127,7 @@
                           icon? theme (pos? @subtitle-row-accessory-width)))
                         :number-of-lines subtitle-max-lines
                         :ellipsize-mode  :tail}
-            (stringify subtitle)]
+            (utils.label/stringify subtitle)]
 
            (vector? subtitle)
            [react/view
@@ -192,7 +170,7 @@
 
 (defn- accessories-column [accessories theme]
   (let [last-accessory              (peek accessories)
-        last-accessory-is-component (and (not (stringify last-accessory))
+        last-accessory-is-component (and (not (utils.label/stringify last-accessory))
                                          (not= :chevron last-accessory))
         second-last-accessory       (peek (pop accessories))]
     (into
@@ -237,7 +215,7 @@
                 (or (string? accessory) (keyword? accessory) (number? accessory))
                 [react/text {:style           (styles/accessory-text theme)
                              :number-of-lines 1}
-                 (stringify accessory)]
+                 (utils.label/stringify accessory)]
 
                 (vector? accessory)
                 accessory
@@ -256,7 +234,7 @@
 ;;   optionally set `container-margin-top/bottom`
 
 ;; theme
-;; :default(default), :blue, :action, :action-destructive
+;; :default(default), :action, :action-destructive
 
 ;; container-margin-top
 ;; container-margin-bottom
@@ -370,11 +348,11 @@
      [react/touchable-highlight
       (cond-> {:on-press       on-press
                :on-long-press  on-long-press
-               :underlay-color colors/black
+               :underlay-color colors/gray-transparent-10
                :disabled       (or (not on-press) disabled?)}
         accessibility-label
         (assoc :accessibility-label accessibility-label))
-      [react/view {:style (styles/container type theme)}
+      [react/view {:style (styles/container type)}
        (when icon
          [icon-column icon theme disabled?])
 

src/status_im/ui/components/lists/cell/styles.cljs

@@ -1,50 +0,0 @@
-(ns status-im.ui.components.lists.cell.styles
-  (:require [status-im.ui.components.styles :as common-styles]
-            [status-im.ui.components.colors :as colors]))
-
-(def cell-container
-  {:height         64
-   :align-self     :stretch
-   :flex-direction :row})
-
-(def icon-container
-  {:width           72
-   :justify-content :center
-   :align-items     :center})
-
-(defn- get-color [color]
-  (get
-   {:blue       colors/blue
-    :red        colors/red
-    :red-light  colors/red-light
-    :blue-light colors/blue-light}
-   color
-   color))
-
-(defn icon [color background-color]
-  {:width           24
-   :height          24
-   :color           (get-color color)
-   :container-style {:width            40
-                     :height           40
-                     :border-radius    20
-                     :background-color (get-color background-color)
-                     :justify-content  :center
-                     :align-items      :center}})
-
-(def description
-  {:flex           1
-   :padding-top    8
-   :padding-bottom 8})
-
-(def cell-text
-  {:height          18
-   :justify-content :center
-   :margin-top      3
-   :margin-bottom   3})
-
-(defn item-title [color]
-  {:color (get-color color)})
-
-(def item-details
-  {:color colors/gray})

src/status_im/ui/components/lists/cell/view.cljs

@@ -1,26 +0,0 @@
-(ns status-im.ui.components.lists.cell.view
-  (:require [status-im.ui.components.react :as react]
-            [status-im.ui.components.lists.cell.styles :as styles]
-            [status-im.ui.components.icons.vector-icons :as icons]))
-
-(defn cell [{:keys [title details icon on-press]
-             {:keys [title-color
-                     icon-color
-                     icon-background]} :style}]
-  [react/view
-   {:style styles/cell-container}
-   [react/touchable-highlight
-    {:style    styles/icon-container
-     :on-press on-press}
-    [react/view {}
-     [icons/icon icon (styles/icon icon-color icon-background)]]]
-   [react/view {:style styles/description}
-    [react/touchable-highlight
-     {:style    styles/cell-text
-      :on-press on-press}
-     [react/view {}
-      [react/text {:style (styles/item-title title-color)}
-       title]]]
-    [react/view {:style styles/cell-text}
-     [react/text {:style styles/item-details}
-      details]]]])

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

@@ -3,8 +3,7 @@
             [status-im.react-native.js-dependencies :as rn-dependencies]
             [status-im.ui.components.qr-code-viewer.styles :as styles]
             [status-im.ui.components.react :as react]
-            [status-im.ui.components.svg :as svg]
+            [status-im.ui.components.svg :as svg])
-            [status-im.ui.screens.profile.tribute-to-talk.views :as tribute-to-talk])
   (:require-macros [status-im.utils.views :refer [defview letsubs]]))
 
 (defn qr-code [{:keys [size value]}]
@@ -20,36 +19,3 @@
                  :accessibility-label :qr-code-image}
      [qr-code {:value value
                :size  size}]]))
-
-(defview qr-code-viewer-component
-  [{:keys [style hint-style footer-style footer-button value hint legend
-           show-tribute-to-talk-warning?]}]
-  (letsubs [{:keys [width]} [:dimensions/window]]
-    [react/scroll-view {:content-container-style {:align-items     :center
-                                                  :margin-top      16
-                                                  :justify-content :center}
-                        :style                   (merge {:flex 1} style)}
-     (when show-tribute-to-talk-warning?
-       [react/view {:style {:margin-horizontal 16}}
-        [tribute-to-talk/enabled-note]])
-     (when width
-       [qr-code-view (int (min width styles/qr-code-max-width)) value])
-     [react/text {:style (merge styles/qr-code-hint hint-style)}
-      hint]
-     [react/view styles/footer
-      [react/view styles/wallet-info
-       [react/text {:style               (merge styles/hash-value-text footer-style)
-                    :accessibility-label :address-text
-                    :selectable          true}
-        legend]]]
-     (when footer-button
-       [react/view {:style {:align-self    :stretch
-                            :margin-bottom 16}}
-        [footer-button value]])]))
-
-(defn qr-code-viewer
-  [{:keys [style hint-style footer-style footer-button value hint legend]
-    :as   params}]
-  (if value
-    [qr-code-viewer-component params]
-    [react/view [react/text "no value"]]))

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

@@ -20,58 +20,13 @@
       [react/view {:style (cond-> view-style flat? (assoc :elevation 0))}])))
 
 (defn get-config [view-id]
-  (get
+  (or (get {:create-multiaccount             {:flat? true}
-   {:create-multiaccount             {:flat? true}
             :chat-modal                      {:type :modal-white}
             :intro                           {:flat? true}
-    :home                            {:type :main}
-    :chat-stack                      {:type :main}
-    :new                             {:type :main}
-    :new-chat                        {:type :main}
-    :contact-toggle-list             {:type :main}
-    :new-public-chat                 {:type :main}
-    :qr-scanner                      {:type :main}
-    :browser-stack                   {:type :main}
-    :open-dapp                       {:type :main}
-    :my-profile                      {:type :main}
-    :profile-stack                   {:type :main}
-    :my-profile-ext-settings         {:type :main}
-    :contacts-list                   {:type :main}
-    :browser                         {:type :main}
-    :mobile-network-settings         {:type :main}
-    :backup-seed                     {:type :main}
-    :currency-settings               {:type :main}
-    :installations                   {:type :main}
-    :transactions-history            {:type :main}
-    :dapps-permissions               {:type :main}
-    :privacy-and-security            {:type :main}
-    :language-settings               {:type :main}
-    :notifications-settings          {:type :main}
-    :sync-settings                   {:type :main}
-    :advanced-settings               {:type :main}
-    :help-center                     {:type :main}
-    :about-app                       {:type :main}
-    :offline-messaging-settings      {:type :main}
-    :bootnodes-settings              {:type :main}
-    :fleet-settings                  {:type :main}
-    :log-level-settings              {:type :main}
-    :stickers-pack-modal             {:type :main}
-    :tribute-learn-more              {:type :main}
-    :wallet                          {:type :main}
-    :wallet-stack                    {:type :main}
             :recipient-qr-code               {:type :transparent}
-    :wallet-send-assets              {:type :wallet}
-    :wallet-request-assets           {:type :wallet}
-    :recent-recipients               {:type :wallet}
-    :select-account                  {:type :wallet}
-    :contact-code                    {:type :wallet}
-    :wallet-send-transaction-request {:type :wallet}
-    :wallet-settings-assets          {:type :main}
-    :wallet-account                  {:type :main}
-    :wallet-add-custom-token         {:type :main}
-    :wallet-settings-hook            {:type :wallet}
             :wallet-transactions-filter      {:type :modal-main}}
-   view-id))
+           view-id)
+      {:type :main}))
 
 (defn set-status-bar
   "If more than one `StatusBar` is rendered, the one which was mounted last will

src/status_im/ui/components/tabbar/core.cljs

@@ -1,7 +1,7 @@
-(ns status-im.ui.components.bottom-bar.core
+(ns status-im.ui.components.tabbar.core
   (:require
    [status-im.ui.components.animation :as animation]
-   [status-im.ui.components.bottom-bar.styles :as tabs.styles]
+   [status-im.ui.components.tabbar.styles :as tabs.styles]
    [reagent.core :as reagent]
    [status-im.ui.components.react :as react]
    [status-im.utils.platform :as platform]
@@ -147,7 +147,7 @@
 (def disappearance-duration 150)
 (def appearance-duration 100)
 
-(defn bottom-bar [_ view-id]
+(defn tabbar [_ view-id]
   (let [keyboard-shown? (reagent/atom false)
         listeners       (atom [])]
     (reagent/create-class

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

@@ -1,4 +1,4 @@
-(ns status-im.ui.components.bottom-bar.styles
+(ns status-im.ui.components.tabbar.styles
   (:require [status-im.ui.components.colors :as colors]
             [status-im.utils.platform :as platform]
             [status-im.ui.components.animation :as animation])

src/status_im/ui/components/toolbar.cljs

@@ -0,0 +1,14 @@
+(ns status-im.ui.components.toolbar
+  (:require [status-im.ui.components.react :as react]
+            [status-im.ui.components.button :as button]))
+
+(defn toolbar [{:keys [center left right]}]
+  (if center
+    [react/view {:height 52 :align-items :center :justify-content :center}
+     [button/button center]]
+    [react/view {:height 52 :align-items :center :flex-direction :row}
+     (when left
+       [button/button left])
+     [react/view {:flex 1}]
+     (when right
+       [button/button right])]))

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

@@ -1,64 +1,57 @@
 (ns status-im.ui.screens.add-new.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.action-button.action-button :as action-button]
-            [status-im.ui.components.action-button.styles :as action-button.styles]
-            [status-im.ui.components.colors :as colors]
             [status-im.ui.components.common.common :as common]
             [status-im.ui.components.list-selection :as list-selection]
             [status-im.ui.components.react :as react]
-            [status-im.ui.components.styles :as styles]
             [status-im.ui.components.status-bar.view :as status-bar]
             [status-im.ui.components.toolbar.view :as toolbar]
-            [status-im.utils.config :as config]
+            [status-im.utils.platform :as platform]
-            [status-im.utils.platform :as platform]))
+            [status-im.ui.components.list-item.views :as list-item]))
 
-(defn- options-list [{:keys [dev-mode?]}]
+(defn- options-list []
-  [react/view action-button.styles/actions-list
+  [react/view {:flex 1}
-   [action-button/action-button
+   [list-item/list-item
-    {:label               (i18n/label :t/start-new-chat)
+    {:theme               :action
+     :title               (i18n/label :t/start-new-chat)
      :accessibility-label :start-1-1-chat-button
      :icon                :main-icons/add-contact
-     :icon-opts           {:color colors/blue}
      :on-press            #(re-frame/dispatch [:navigate-to :new-chat])}]
-   [action-button/action-separator]
+   [common/list-separator]
-   [action-button/action-button
+   [list-item/list-item
-    {:label               (i18n/label :t/start-group-chat)
+    {:theme               :action
+     :title               (i18n/label :t/start-group-chat)
      :accessibility-label :start-group-chat-button
      :icon                :main-icons/group-chat
-     :icon-opts           {:color colors/blue}
      :on-press            #(re-frame/dispatch [:contact.ui/start-group-chat-pressed])}]
-   [action-button/action-separator]
+   [common/list-separator]
-   [action-button/action-button
+   [list-item/list-item
-    {:label               (i18n/label :t/new-public-group-chat)
+    {:theme               :action
+     :title               (i18n/label :t/new-public-group-chat)
      :accessibility-label :join-public-chat-button
      :icon                :main-icons/public-chat
-     :icon-opts           {:color colors/blue}
      :on-press            #(re-frame/dispatch [:navigate-to :new-public-chat])}]
    (when-not platform/desktop?
-     [action-button/action-separator]
+     [common/list-separator]
-     [action-button/action-button
+     [list-item/list-item
-      {:label               (i18n/label :t/invite-friends)
+      {:theme               :action
+       :title               (i18n/label :t/invite-friends)
        :accessibility-label :invite-friends-button
        :icon                :main-icons/share
-       :icon-opts           {:color colors/blue}
        :on-press            #(list-selection/open-share {:message (i18n/label :t/get-status-at)})}]
-     [action-button/action-separator]
+     [common/list-separator]
-     [action-button/action-button
+     [list-item/list-item
-      {:label               (i18n/label :t/scan-qr)
+      {:theme               :action
+       :title               (i18n/label :t/scan-qr)
        :accessibility-label :scan-qr-code-button
        :icon                :main-icons/qr
-       :icon-opts           {:color colors/blue}
        :on-press            #(re-frame/dispatch [:qr-scanner.ui/scan-qr-code-pressed
                                                  {:toolbar-title (i18n/label :t/scan-qr)}
                                                  :handle-qr-code])}])])
 
-(views/defview add-new []
+(defn add-new []
-  (views/letsubs [multiaccount     [:multiaccount]
-                  device-UUID [:get-device-UUID]]
   [react/view {:flex 1 :background-color :white}
    [status-bar/status-bar]
    [toolbar/simple-toolbar (i18n/label :t/new)]
    [common/separator]
-     [options-list multiaccount]]))
+   [options-list]])

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

@@ -9,7 +9,7 @@
    [status-im.ui.components.list.views :as list]
    [status-im.ui.components.common.common :as components.common]
    [status-im.ui.screens.wallet.components.views :as components]
-   [status-im.ui.components.bottom-bar.styles :as tabs.styles]
+   [status-im.ui.components.tabbar.styles :as tabs.styles]
    [status-im.react-native.resources :as resources]
    [status-im.ui.components.list-item.views :as list-item]
    [status-im.ui.components.icons.vector-icons :as vector-icons]

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

@@ -4,9 +4,8 @@
             [status-im.contact.db :as contact.db]
             [status-im.i18n :as i18n]
             [status-im.multiaccounts.core :as multiaccounts]
-            [status-im.tribute-to-talk.core :as tribute-to-talk]
             [status-im.ui.components.animation :as animation]
-            [status-im.ui.components.button.view :as buttons]
+            [status-im.ui.components.button :as button]
             [status-im.ui.components.chat-icon.screen :as chat-icon.screen]
             [status-im.ui.components.colors :as colors]
             [status-im.ui.components.connectivity.view :as connectivity]
@@ -101,10 +100,10 @@
    (str (i18n/label :t/empty-chat-description-one-to-one) (multiaccounts/displayed-name contact))])
 
 (defn join-chat-button [chat-id]
-  [buttons/secondary-button
+  [button/button
-   {:style style/join-button
+   {:type     :secondary
-    :on-press #(re-frame/dispatch [:group-chats.ui/join-pressed chat-id])}
+    :on-press #(re-frame/dispatch [:group-chats.ui/join-pressed chat-id])
-   (i18n/label :t/join-group-chat)])
+    :label    :t/join-group-chat}])
 
 (defn decline-chat [chat-id]
   [react/touchable-highlight

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

@@ -8,17 +8,13 @@
             [status-im.ui.components.popup-menu.views :as popup-menu]
             [clojure.string :as string]
             [status-im.ui.screens.home.views.inner-item :as chat-item]
-            [taoensso.timbre :as log]
             [status-im.ui.components.icons.vector-icons :as icons]
             [status-im.ui.components.react :as react]
             [status-im.constants :as constants]
             [status-im.utils.utils :as utils]
             [status-im.ui.components.react :as components]
-            [reagent.core :as reagent]
+            [status-im.utils.contenthash :as contenthash]
-            [status-im.ui.components.action-button.styles :as action-button.styles]
+            [status-im.ui.components.list-item.views :as list-item]))
-            [status-im.ui.components.action-button.action-button :as action-button]
-            [status-im.utils.config :as config]
-            [status-im.utils.contenthash :as contenthash]))
 
 (views/defview chat-list-item-inner-view
   [{:keys [chat-id name group-chat
@@ -122,27 +118,24 @@
   [react/view {:style {:flex-direction :row}}
    [react/view {:style styles/popup-shaddow}
     [react/view {:style styles/popup}
-     [action-button/action-button
+     [list-item/list-item
-      {:label               (i18n/label :t/start-new-chat)
+      {:title               (i18n/label :t/start-new-chat)
        :accessibility-label :start-1-1-chat-button
        :icon                :main-icons/add-contact
-       :icon-opts           {:color colors/blue}
        :on-press            #(do
                                (re-frame/dispatch [:set-in [:desktop :popup] nil])
                                (re-frame/dispatch [:navigate-to :desktop/new-one-to-one]))}]
-     [action-button/action-button
+     [list-item/list-item
-      {:label               (i18n/label :t/start-group-chat)
+      {:title               (i18n/label :t/start-group-chat)
        :accessibility-label :start-group-chat-button
        :icon                :main-icons/group-chat
-       :icon-opts           {:color colors/blue}
        :on-press            #(do
                                (re-frame/dispatch [:set-in [:desktop :popup] nil])
                                (re-frame/dispatch [:navigate-to :desktop/new-group-chat]))}]
-     [action-button/action-button
+     [list-item/list-item
-      {:label               (i18n/label :t/new-public-group-chat)
+      {:title               (i18n/label :t/new-public-group-chat)
        :accessibility-label :join-public-chat-button
        :icon                :main-icons/public-chat
-       :icon-opts           {:color colors/blue}
        :on-press            #(do
                                (re-frame/dispatch [:set-in [:desktop :popup] nil])
                                (re-frame/dispatch [:navigate-to :desktop/new-public-chat]))}]]]])

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

@@ -4,12 +4,12 @@
             [clojure.string :as string]
             [re-frame.core :as re-frame]
             [status-im.i18n :as i18n]
-            [status-im.ui.components.bottom-bar.styles :as main-tabs.styles]
+            [status-im.ui.components.tabbar.styles :as main-tabs.styles]
             [status-im.ui.components.styles :as components.styles]
             [status-im.constants :as constants]
             [status-im.utils.platform :as utils.platform]
             [status-im.ui.components.contact.contact :refer [toggle-contact-view]]
-            [status-im.ui.components.button.view :as buttons]
+            [status-im.ui.components.button :as button]
             [status-im.ui.components.list-selection :as list-selection]
             [status-im.ui.components.common.common :as components.common]
             [status-im.ui.components.react :as react]
@@ -107,7 +107,10 @@
     {:style styles/no-contact-text}
     (i18n/label :t/group-chat-no-contacts)]
    (when-not platform/desktop?
-     [buttons/secondary-button {:on-press handle-invite-friends-pressed} (i18n/label :t/invite-friends)])])
+     [button/button
+      {:type     :secondary
+       :on-press handle-invite-friends-pressed
+       :label    :t/invite-friends}])])
 
 (views/defview bottom-container [{:keys [on-press disabled label accessibility-label]}]
   [react/view {:style main-tabs.styles/tabs-container}

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

@@ -2,13 +2,12 @@
   (:require-macros [status-im.utils.views :refer [defview letsubs] :as views])
   (:require [re-frame.core :as re-frame]
             [status-im.i18n :as i18n]
-            [status-im.ui.components.action-button.action-button :as action-button]
-            [status-im.ui.components.action-button.styles :as action-button.styles]
             [status-im.ui.components.colors :as colors]
             [status-im.ui.components.list-selection :as list-selection]
             [status-im.ui.components.react :as react]
             [status-im.utils.universal-links.core :as universal-links]
-            [status-im.utils.platform :as platform]))
+            [status-im.utils.platform :as platform]
+            [status-im.ui.components.list-item.views :as list-item]))
 
 (defn hide-sheet-and-dispatch [event]
   (re-frame/dispatch [:bottom-sheet/hide-sheet])
@@ -16,38 +15,38 @@
 
 (defn add-new-view []
   [react/view {:flex 1 :flex-direction :row}
-   [react/view action-button.styles/actions-list
+   [react/view {:flex 1}
-    [action-button/action-button
+    [list-item/list-item
-     {:label               (i18n/label :t/start-new-chat)
+     {:theme               :action
+      :title               :t/start-new-chat
       :accessibility-label :start-1-1-chat-button
       :icon                :main-icons/one-on-one-chat
-      :icon-opts           {:color colors/blue}
       :on-press            #(hide-sheet-and-dispatch [:navigate-to :new-chat])}]
-    [action-button/action-button
+    [list-item/list-item
-     {:label               (i18n/label :t/start-group-chat)
+     {:theme               :action
+      :title               :t/start-group-chat
       :accessibility-label :start-group-chat-button
       :icon                :main-icons/group-chat
-      :icon-opts           {:color colors/blue}
       :on-press            #(hide-sheet-and-dispatch [:contact.ui/start-group-chat-pressed])}]
-    [action-button/action-button
+    [list-item/list-item
-     {:label               (i18n/label :t/new-public-group-chat)
+     {:theme               :action
+      :title               :t/new-public-group-chat
       :accessibility-label :join-public-chat-button
       :icon                :main-icons/public-chat
-      :icon-opts           {:color colors/blue}
       :on-press            #(hide-sheet-and-dispatch [:navigate-to :new-public-chat])}]
-    [action-button/action-button
+    [list-item/list-item
-     {:label               (i18n/label :t/scan-qr)
+     {:theme               :action
+      :title               :t/scan-qr
       :accessibility-label :scan-qr-code-button
       :icon                :main-icons/qr
-      :icon-opts           {:color colors/blue}
       :on-press            #(hide-sheet-and-dispatch [:qr-scanner.ui/scan-qr-code-pressed
                                                       {:toolbar-title (i18n/label :t/scan-qr)}
                                                       :handle-qr-code])}]
-    [action-button/action-button
+    [list-item/list-item
-     {:label               (i18n/label :t/invite-friends)
+     {:theme               :action
+      :title               :t/invite-friends
       :accessibility-label :invite-friends-button
       :icon                :main-icons/share
-      :icon-opts           {:color colors/blue}
       :on-press            #(do
                               (re-frame/dispatch [:bottom-sheet/hide-sheet])
                               (list-selection/open-share {:message (i18n/label :t/get-status-at)}))}]]])
@@ -55,63 +54,58 @@
 (defview public-chat-actions-view []
   (letsubs [{:keys [chat-id]} [:bottom-sheet/options]]
     [react/view {:flex 1 :flex-direction :row}
-     [react/view action-button.styles/actions-list
+     [react/view {:flex 1}
       (when-not platform/desktop?
         (let [link    (universal-links/generate-link :public-chat :external chat-id)
               message (i18n/label :t/share-public-chat-text {:link link})]
-          [action-button/action-button
+          [list-item/list-item
-           {:label               (i18n/label :t/share-chat)
+           {:theme               :action
+            :title               :t/share-chat
             :accessibility-label :share-chat-button
             :icon                :main-icons/share
             :icon-opts           {:color colors/blue}
             :on-press            #(do
                                     (re-frame/dispatch [:bottom-sheet/hide-sheet])
                                     (list-selection/open-share {:message message}))}]))
-      [action-button/action-button
+      [list-item/list-item
-       {:label               (i18n/label :t/delete-chat)
+       {:theme               :action-destructive
-        :label-style         {:color colors/red}
+        :title               :t/delete-chat
         :accessibility-label :delete-chat-button
         :icon                :main-icons/delete
-        :icon-opts           {:color colors/red}
-        :cyrcle-color        colors/red-light
         :on-press            #(hide-sheet-and-dispatch [:chat.ui/remove-chat-pressed chat-id])}]]]))
 
 (defview private-chat-actions-view []
   (letsubs [{:keys [chat-id]} [:bottom-sheet/options]]
     [react/view {:flex 1 :flex-direction :row}
-     [react/view action-button.styles/actions-list
+     [react/view {:flex 1}
-      [action-button/action-button
+      [list-item/list-item
-       {:label               (i18n/label :t/view-profile)
+       {:theme               :action
+        :title               :t/view-profile
         :accessibility-label :view-profile-button
         :icon                :main-icons/profile
-        :icon-opts           {:color colors/blue}
         :on-press            #(hide-sheet-and-dispatch [:chat.ui/show-profile chat-id])}]
-      [action-button/action-button
+      [list-item/list-item
-       {:label               (i18n/label :t/delete-chat)
+       {:theme               :action-destructive
-        :label-style         {:color colors/red}
+        :title               :t/delete-chat
         :accessibility-label :delete-chat-button
         :icon                :main-icons/delete
-        :icon-opts           {:color colors/red}
-        :cyrcle-color        colors/red-light
         :on-press            #(hide-sheet-and-dispatch [:chat.ui/remove-chat-pressed chat-id])}]]]))
 
 (defview group-chat-actions-view []
   (letsubs [{:keys [chat-id]} [:bottom-sheet/options]]
     [react/view {:flex 1 :flex-direction :row}
-     [react/view action-button.styles/actions-list
+     [react/view {:flex 1}
-      [action-button/action-button
+      [list-item/list-item
-       {:label               (i18n/label :t/group-info)
+       {:theme               :action
+        :title               :t/group-info
         :accessibility-label :group-info-button
         :icon                :main-icons/group-chat
-        :icon-opts           {:color colors/blue}
         :on-press            #(hide-sheet-and-dispatch [:show-group-chat-profile chat-id])}]
-      [action-button/action-button
+      [list-item/list-item
-       {:label               (i18n/label :t/delete-and-leave-group)
+       {:theme               :action-destructive
-        :label-style         {:color colors/red}
+        :title               :t/delete-and-leave-group
         :accessibility-label :delete-and-leave-group-button
         :icon                :main-icons/delete
-        :icon-opts           {:color colors/red}
-        :cyrcle-color        colors/red-light
         :on-press            #(hide-sheet-and-dispatch [:group-chats.ui/remove-chat-pressed chat-id])}]]]))
 
 (def add-new

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

@@ -13,7 +13,7 @@
             [status-im.ui.screens.home.filter.views :as filter.views]
             [status-im.utils.platform :as platform]
             [status-im.utils.utils :as utils]
-            [status-im.ui.components.bottom-bar.styles :as tabs.styles]
+            [status-im.ui.components.tabbar.styles :as tabs.styles]
             [status-im.ui.screens.home.views.inner-item :as inner-item]
             [status-im.ui.components.common.common :as components.common]
             [status-im.ui.components.list-selection :as list-selection]

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

@@ -11,10 +11,8 @@
             [status-im.ui.screens.hardwallet.pin.views :as pin.views]
             [status-im.utils.core :as utils.core]
             [status-im.utils.gfycat.core :as gfy]
-            [status-im.ui.components.lists.cell.view :as cell]
             [status-im.utils.identicon :as identicon]
-            [status-im.ui.components.action-button.action-button :as action-button]
+            [status-im.ui.components.list-item.views :as list-item]))
-            [status-im.ui.components.action-button.styles :as action-button.styles]))
 
 (defn connection-lost []
   [react/view {:flex             1
@@ -532,16 +530,16 @@
   [react/view {:flex           1
                :flex-direction :row
                :margin-top     18}
-   [react/view action-button.styles/actions-list
+   [react/view {:flex 1}
-    [action-button/action-button
+    [list-item/list-item
-     {:label     (i18n/label :t/create-new-key)
+     {:theme     :action
+      :title     :t/create-new-key
       :icon      :main-icons/profile
-      :icon-opts {:color colors/blue}
       :on-press  #(re-frame/dispatch [:keycard.login.ui/create-new-key-pressed])}]
-    [action-button/action-button
+    [list-item/list-item
-     {:label     (i18n/label :t/add-another-key)
+     {:theme     :action
+      :title     :t/add-another-key
       :icon      :main-icons/add
-      :icon-opts {:color colors/blue}
       :on-press  #(re-frame/dispatch [:keycard.login.ui/add-key-pressed])}]]])
 
 (def more-sheet

src/status_im/ui/screens/mobile_network_settings/sheets.cljs

@@ -4,8 +4,8 @@
             [status-im.ui.screens.mobile-network-settings.sheets-styles :as styles]
             [status-im.ui.components.checkbox.view :as checkbox]
             [status-im.i18n :as i18n]
-            [status-im.ui.components.lists.cell.view :as cell]
+            [re-frame.core :as re-frame]
-            [re-frame.core :as re-frame]))
+            [status-im.ui.components.list-item.views :as list-item]))
 
 (defn title [label]
   [react/view {:style styles/title}
@@ -58,17 +58,17 @@
   [react/view {:style styles/container}
    [title :mobile-syncing-sheet-title]
    [details :mobile-syncing-sheet-details]
-   [cell/cell
+   [list-item/list-item
-    {:title    (i18n/label :mobile-network-continue-syncing)
+    {:theme    :action
-     :details  (i18n/label :mobile-network-continue-syncing-details)
+     :title    :t/mobile-network-continue-syncing
+     :subtitle :t/mobile-network-continue-syncing-details
      :icon     :main-icons/network
-     :style    styles/network-icon
      :on-press #(re-frame/dispatch [:mobile-network/continue-syncing])}]
-   [cell/cell
+   [list-item/list-item
-    {:title    (i18n/label :mobile-network-stop-syncing)
+    {:theme    :action-destructive
-     :details  (i18n/label :mobile-network-stop-syncing-details)
+     :title    :t/mobile-network-stop-syncing
+     :subtitle :t/mobile-network-stop-syncing-details
      :icon     :main-icons/cancel
-     :style    styles/cancel-icon
      :on-press #(re-frame/dispatch [:mobile-network/stop-syncing])}]
    [separator]
    [react/view {:flex       1
@@ -80,11 +80,11 @@
   [react/view {:style styles/container}
    [title :t/mobile-network-sheet-offline]
    [details :t/mobile-network-sheet-offline-details]
-   [cell/cell
+   [list-item/list-item
-    {:title    (i18n/label :mobile-network-start-syncing)
+    {:theme    :action
-     :details  (i18n/label :mobile-network-continue-syncing-details)
+     :title    :t/mobile-network-start-syncing
+     :subtitle :t/mobile-network-continue-syncing-details
      :icon     :main-icons/network
-     :style    styles/network-icon
      :on-press #(re-frame/dispatch [:mobile-network/continue-syncing])}]
    [separator]
    [go-to-settings]])

src/status_im/ui/screens/multiaccounts/recover/views.cljs

@@ -11,33 +11,31 @@
             [status-im.utils.config :as config]
             [status-im.ui.components.common.common :as components.common]
             [status-im.utils.security :as security]
-            [status-im.ui.components.action-button.styles :as action-button.styles]
-            [status-im.ui.components.action-button.action-button :as action-button]
             [status-im.ui.components.colors :as colors]
             [status-im.utils.gfycat.core :as gfy]
             [status-im.utils.identicon :as identicon]
             [status-im.ui.components.icons.vector-icons :as vector-icons]
             [status-im.ui.screens.intro.views :as intro.views]
             [status-im.utils.utils :as utils]
-            [status-im.constants :as constants]))
+            [status-im.constants :as constants]
+            [status-im.ui.components.list-item.views :as list-item]))
 
 (defn bottom-sheet-view []
   [react/view {:flex 1 :flex-direction :row}
-   [react/view action-button.styles/actions-list
+   [react/view {:flex 1}
-    [action-button/action-button
+    [list-item/list-item
-     {:label               (i18n/label :t/enter-seed-phrase)
+     {:theme               :action
+      :title               :t/enter-seed-phrase
       :accessibility-label :enter-seed-phrase-button
       :icon                :main-icons/text
-      :icon-opts           {:color colors/blue}
       :on-press            #(re-frame/dispatch [::multiaccounts.recover/enter-phrase-pressed])}]
-    [action-button/action-button
+    [list-item/list-item
-     {:label               (i18n/label :t/recover-with-keycard)
+     {:theme               :action
-      :label-style         (if config/hardwallet-enabled? {} {:color colors/gray})
+      :title               :t/recover-with-keycard
+      :disabled?           (not config/hardwallet-enabled?)
       :accessibility-label :recover-with-keycard-button
-      :image               :keycard-logo-blue
+      :icon                :main-icons/keycard-logo
-      :image-opts          {:style {:width 24 :height 24}}
+      :on-press            #(re-frame/dispatch [::hardwallet/recover-with-keycard-pressed])}]]])
-      :on-press            #(when config/hardwallet-enabled?
-                              (re-frame/dispatch [::hardwallet/recover-with-keycard-pressed]))}]]])
 
 (def bottom-sheet
   {:content        bottom-sheet-view

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

@@ -4,14 +4,10 @@
             [status-im.i18n :as i18n]
             [reagent.core :as reagent]
             [clojure.string :as string]
-            [status-im.utils.config :as config]
+            [status-im.ui.components.tabbar.styles :as main-tabs.styles]
-            [status-im.ui.components.bottom-bar.styles :as main-tabs.styles]
             [status-im.ui.components.colors :as colors]
             [status-im.ui.components.icons.vector-icons :as icons]
-            [status-im.ui.screens.home.styles :as home.styles]
             [status-im.utils.platform :as utils.platform]
-            [status-im.utils.gfycat.core :as gfycat]
-            [status-im.ui.components.button.view :as buttons]
             [status-im.ui.components.styles :as components.styles]
             [status-im.ui.components.common.common :as components.common]
             [status-im.ui.components.checkbox.view :as checkbox.views]
@@ -19,9 +15,7 @@
             [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]
-            [status-im.ui.components.toolbar.actions :as toolbar.actions]
             [status-im.ui.components.text-input.view :as text-input]
-            [status-im.ui.screens.profile.components.views :as profile.components]
             [status-im.ui.screens.pairing.styles :as styles]))
 
 (def syncing (reagent/atom false))

src/status_im/ui/screens/profile/user/sheet/views.cljs

@@ -1,11 +1,9 @@
 (ns status-im.ui.screens.profile.user.sheet.views
   (:require [re-frame.core :as re-frame]
             [status-im.i18n :as i18n]
-            [status-im.ui.components.action-button.action-button :as action-button]
-            [status-im.ui.components.action-button.styles :as action-button.styles]
-            [status-im.ui.components.colors :as colors]
             [status-im.ui.components.react :as react]
-            [status-im.utils.utils :as utils]))
+            [status-im.utils.utils :as utils]
+            [status-im.ui.components.list-item.views :as list-item]))
 
 (defn hide-sheet-and-dispatch [event]
   (re-frame/dispatch [:bottom-sheet/hide-sheet])
@@ -13,19 +11,18 @@
 
 (defn profile-icon-actions [include-remove-action?]
   (fn []
-    [react/view {:flex 1 :flex-direction :row}
+    [react/view {:flex 1}
-     [react/view action-button.styles/actions-list
+     [list-item/list-item
-      [action-button/action-button
+      {:theme               :action
-       {:label               (i18n/label :t/image-source-gallery)
+       :title               :t/image-source-gallery
        :accessibility-label :group-info-button
        :icon                :main-icons/photo
-        :icon-opts           {:color colors/blue}
        :on-press            #(hide-sheet-and-dispatch [:my-profile/update-picture])}]
-      [action-button/action-button
+     [list-item/list-item
-       {:label               (i18n/label :t/image-source-make-photo)
+      {:theme               :action
+       :title               :t/image-source-make-photo
        :accessibility-label :delete-and-leave-group-button
        :icon                :main-icons/camera
-        :icon-opts           {:color colors/blue}
        :on-press            (fn []
                               (hide-sheet-and-dispatch
                                [:request-permissions
@@ -39,11 +36,9 @@
                                                        (i18n/label :t/camera-access-error))
                                     50))}]))}]
      (when include-remove-action?
-        [action-button/action-button
+       [list-item/list-item
-         {:label               (i18n/label :t/image-remove-current)
+        {:theme               :action-destructive
-          :label-style         {:color colors/red}
+         :title               :t/image-remove-current
          :accessibility-label :group-info-button
          :icon                :main-icons/delete
-          :icon-opts           {:color colors/red}
+         :on-press            #(hide-sheet-and-dispatch [:my-profile/remove-current-photo])}])]))
-          :cyrcle-color        colors/red-light
-          :on-press            #(hide-sheet-and-dispatch [:my-profile/remove-current-photo])}])]]))

src/status_im/ui/screens/profile/user/views.cljs

@@ -6,13 +6,12 @@
             [status-im.i18n :as i18n]
             [status-im.ethereum.stateofus :as stateofus]
             [status-im.multiaccounts.core :as multiaccounts]
-            [status-im.ui.components.bottom-bar.styles :as tabs.styles]
+            [status-im.ui.components.tabbar.styles :as tabs.styles]
-            [status-im.ui.components.button.view :as button]
+            [status-im.ui.components.button :as button]
             [status-im.ui.components.colors :as colors]
             [status-im.ui.components.common.common :as components.common]
             [status-im.ui.components.copyable-text :as copyable-text]
             [status-im.ui.components.large-toolbar :as large-toolbar]
-            [status-im.ui.components.list-item.views :as list-item]
             [status-im.ui.components.list-selection :as list-selection]
             [status-im.ui.components.list.views :as list.views]
             [status-im.ui.components.qr-code-viewer.views :as qr-code-viewer]
@@ -62,11 +61,11 @@
                                             :font-family "monospace"}}
           address]]
         [react/view styles/share-link-button
-         [button/button-with-icon
+         ;;TODO implement icon support
+         [button/button
           {:on-press            #(list-selection/open-share {:message link})
-           :label               (i18n/label :t/share-link)
+           :label               :t/share-link
-           :icon                :main-icons/link
+           ;:icon                :main-icons/link
-           :style               {:height 44 :margin-horizontal 0}
            :accessibility-label :share-my-contact-code-button}]]]])))
 
 (defn- header [{:keys [public-key photo-path] :as account}]

src/status_im/ui/screens/routing/core.cljs

@@ -15,9 +15,9 @@
    [status-im.ui.screens.routing.profile-stack :as profile-stack]
    [status-im.ui.screens.routing.browser-stack :as browser-stack]
    [status-im.ui.screens.routing.modals :as modals]
-   [status-im.ui.components.bottom-bar.core :as bottom-bar]
+   [status-im.ui.components.tabbar.core :as tabbar]
    [status-im.ui.components.status-bar.view :as status-bar]
-   [status-im.ui.components.bottom-bar.styles :as tabs.styles]
+   [status-im.ui.components.tabbar.styles :as tabs.styles]
    [status-im.react-native.js-dependencies :as js-dependencies]))
 
 (defonce view-id (reagent.core/atom nil))
@@ -134,7 +134,7 @@
                                   (when (and (array? routes) (int? idx))
                                     (let [route      (aget routes idx)
                                           route-name (keyword (.-routeName route))]
-                                      (bottom-bar/minimize-bar route-name)))))}
+                                      (tabbar/minimize-bar route-name)))))}
           (prepare-config config))))
 
 (defn twopane-navigator [routes config]
@@ -154,7 +154,7 @@
                                   (when (and (array? routes) (int? idx))
                                     (let [route      (aget routes idx)
                                           route-name (keyword (.-routeName route))]
-                                      (bottom-bar/minimize-bar route-name)))))}
+                                      (tabbar/minimize-bar route-name)))))}
           (prepare-config config))))
 
 (defn switch-navigator [routes config]
@@ -205,9 +205,9 @@
        (map (partial build-screen navigator))
        (into {})))
 
-(defn wrap-bottom-bar
+(defn wrap-tabbar
   [nav]
-  [bottom-bar/bottom-bar nav view-id])
+  [tabbar/tabbar nav view-id])
 
 (defn app-container [navigator]
   (.createAppContainer js-dependencies/react-navigation navigator))
@@ -232,7 +232,7 @@
                                (into {}))
                           {:initialRouteName :chat-stack
                            :tabBarComponent  (reagent.core/reactify-component
-                                              wrap-bottom-bar)})}}
+                                              wrap-tabbar)})}}
                (stack-screens stack-navigator modals/modal-screens))
               {:mode              :modal
                :initialRouteName  :tabs

src/status_im/ui/screens/signing/sheets.cljs

@@ -4,7 +4,7 @@
             [re-frame.core :as re-frame]
             [status-im.ui.components.text-input.view :as text-input]
             [status-im.i18n :as i18n]
-            [status-im.ui.components.button.view :as button]
+            [status-im.ui.components.button :as button]
             [status-im.ui.components.colors :as colors]))
 
 (views/defview fee-bottom-sheet [fee-display-symbol]
@@ -43,9 +43,12 @@
         [{:style {:color colors/gray}} fee-display-symbol]]]]
      [react/view {:height 1 :background-color colors/gray-lighter}]
      [react/view {:margin-horizontal 16 :align-items :center :justify-content :space-between :flex-direction :row :margin-top 6}
-      [button/secondary-button {:on-press  #(re-frame/dispatch [:bottom-sheet/hide-sheet])
+      [button/button
-                                :style {:background-color nil}}
+       {:type     :secondary
-       (i18n/label :t/cancel)]
+        :on-press #(re-frame/dispatch [:bottom-sheet/hide-sheet])
-      [button/secondary-button {:on-press  #(re-frame/dispatch [:signing.edit-fee.ui/submit])
+        :label    :t/cancel}]
-                                :disabled? (or (:error gas-edit) (:error gas-price-edit))}
+      [button/button
-       (i18n/label :t/update)]]]))
+       {:type      :secondary
+        :on-press  #(re-frame/dispatch [:signing.edit-fee.ui/submit])
+        :disabled? (or (:error gas-edit) (:error gas-price-edit))
+        :label     :t/update}]]]))

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

@@ -7,7 +7,7 @@
             [status-im.ui.components.animation :as anim]
             [reagent.core :as reagent]
             [status-im.ui.components.list-item.views :as list-item]
-            [status-im.ui.components.button.view :as button]
+            [status-im.ui.components.button :as button]
             [status-im.ui.components.copyable-text :as copyable-text]
             [status-im.wallet.utils :as wallet.utils]
             [status-im.ui.components.list.views :as list]
@@ -153,18 +153,8 @@
 (defn- sign-with-keycard-button
   [amount-error gas-error]
   [button/button {:on-press  #(re-frame/dispatch [:signing.ui/sign-with-keycard-pressed])
-                  :text-style {:padding-right 2
+                  :disabled? (or amount-error gas-error)
-                               :padding-left  16}
+                  :label     :t/sign-with}])
-                  :style      {:background-color colors/black-light
-                               :padding-top      2
-                               :border-radius    8}
-                  :disabled?  (or amount-error gas-error)}
-   (i18n/label :t/sign-with)
-   [react/view {:padding-right 16}
-    [react/image {:source (resources/get-image :keycard-logo)
-                  :style  {:width         64
-                           :margin-bottom 7
-                           :height        26}}]]])
 
 (defn- signing-phrase-view [phrase]
   [react/view {:align-items :center}
@@ -186,7 +176,7 @@
   (views/letsubs [phrase [:signing/phrase]]
     (case type
       :password
-      [react/view {:padding-top 8 :padding-bottom 16}
+      [react/view {:padding-top 8 :padding-bottom 8}
        [signing-phrase-view phrase]
        [text-input/text-input-with-label
         {:secure-text-entry   true
@@ -197,13 +187,13 @@
          :editable            (not in-progress?)
          :error               error
          :container           {:margin-top 12 :margin-bottom 12 :margin-horizontal 16}}]
-       [react/view {:align-items :center :height 44}
+       [react/view {:align-items :center :height 60}
         (if in-progress?
           [react/activity-indicator {:animating true
                                      :size      :large}]
-          [button/primary-button {:on-press  #(re-frame/dispatch [:signing.ui/sign-is-pressed])
+          [button/button {:on-press  #(re-frame/dispatch [:signing.ui/sign-is-pressed])
-                                  :disabled? (not enabled?)}
+                          :disabled? (not enabled?)
-           (i18n/label :t/transactions-sign)])]]
+                          :label     :t/transactions-sign}])]]
       :keycard
       [keycard-view sign phrase]
       [react/view])))
@@ -249,8 +239,7 @@
               {:type  :small
                :title :t/send-request-amount
                :error amount-error
-               :accessories
+               :accessories [[acc-text (if amount (str amount) "0")
-               [[acc-text (if amount (str amount) "0")
                               (or display-symbol fee-display-symbol)]]}]
              [separator]])
           [list-item/list-item
@@ -258,18 +247,16 @@
             :title       :t/network-fee
             :error       gas-error
             :accessories [[acc-text fee fee-display-symbol] :chevron]
-            :on-press
+            :on-press    #(re-frame/dispatch
-            #(re-frame/dispatch
                            [:signing.ui/open-fee-sheet
-               {:content
+                            {:content        (fn [] [sheets/fee-bottom-sheet fee-display-symbol])
-                (fn [] [sheets/fee-bottom-sheet fee-display-symbol])
                              :content-height 270}])}]
           [react/view {:align-items :center :margin-top 16 :margin-bottom 40}
            (if keycard-multiaccount?
              [sign-with-keycard-button amount-error gas-error]
-             [button/primary-button {:on-press  #(re-frame/dispatch [:set :signing/sign {:type :password}])
+             [button/button {:on-press  #(re-frame/dispatch [:set :signing/sign {:type :password}])
-                                     :disabled? (or amount-error gas-error)}
+                             :disabled? (or amount-error gas-error)
-              (i18n/label :t/sign-with-password)])]])])))
+                             :label     :t/sign-with-password}])]])])))
 
 (defn signing-view [tx window-height]
   (let [bottom-anim-value (anim/create-value window-height)

src/status_im/ui/screens/wallet/account/views.cljs

@@ -8,7 +8,7 @@
             [status-im.ui.screens.wallet.accounts.views :as accounts]
             [status-im.ui.screens.wallet.accounts.sheets :as sheets]
             [reagent.core :as reagent]
-            [status-im.ui.components.bottom-bar.styles :as tabs.styles]
+            [status-im.ui.components.tabbar.styles :as tabs.styles]
             [status-im.ui.components.list.views :as list]
             [status-im.i18n :as i18n]
             [status-im.ui.components.icons.vector-icons :as icons]

src/status_im/ui/screens/wallet/accounts/sheets.cljs

@@ -1,9 +1,7 @@
 (ns status-im.ui.screens.wallet.accounts.sheets
   (:require [re-frame.core :as re-frame]
-            [status-im.ui.components.action-button.action-button :as action-button]
             [status-im.ui.components.react :as react]
-            [status-im.i18n :as i18n]
+            [status-im.ui.components.list-item.views :as list-item]))
-            [status-im.ui.components.colors :as colors]))
 
 (defn hide-sheet-and-dispatch [event]
   (re-frame/dispatch [:bottom-sheet/hide-sheet])
@@ -12,58 +10,68 @@
 (defn accounts-options [seed-backed-up?]
   (fn []
     [react/view
-     [action-button/action-button {:label     (i18n/label :t/wallet-manage-assets)
+     [list-item/list-item
+      {:theme               :action
+       :title               :t/wallet-manage-assets
        :icon                :main-icons/token
-                                   :icon-opts {:color :blue}
        :accessibility-label :wallet-manage-assets
        :on-press            #(hide-sheet-and-dispatch [:navigate-to :wallet-settings-assets])}]
-     [action-button/action-button {:label     (i18n/label :t/set-currency)
+     [list-item/list-item
+      {:theme               :action
+       :title               :t/set-currency
        :icon                :main-icons/language
-                                   :icon-opts {:color :blue}
        :accessibility-label :wallet-set-currency
        :on-press            #(hide-sheet-and-dispatch [:navigate-to :currency-settings])}]
-     [action-button/action-button {:label     (i18n/label :t/view-signing)
+     [list-item/list-item
+      {:theme    :action
+       :title    :t/view-signing
        :icon     :main-icons/info
-                                   :on-press  #(hide-sheet-and-dispatch [:show-popover {:view :signing-phrase}])
+       :on-press #(hide-sheet-and-dispatch [:show-popover {:view :signing-phrase}])}]
-                                   :icon-opts {:color :blue}}]
      (when-not seed-backed-up?
-       [action-button/action-button {:label        (i18n/label :t/wallet-backup-recovery-title)
+       [list-item/list-item
+        {:theme               :action-destructive
+         :title               :t/wallet-backup-recovery-title
          :icon                :main-icons/security
-                                     :icon-opts    {:color colors/red}
-                                     :label-style  {:color colors/red}
-                                     :cyrcle-color colors/red-transparent-10
          :accessibility-label :wallet-backup-recovery-title
          :on-press            #(hide-sheet-and-dispatch [:navigate-to :backup-seed])}])]))
 
 (defn send-receive [address]
   [react/view
-   [action-button/action-button {:label               (i18n/label :t/wallet-send)
+   [list-item/list-item
+    {:theme               :action
+     :title               :t/wallet-send
      :icon                :main-icons/send
      :accessibility-label :send-transaction-button
-                                 :icon-opts           {:color :blue}
      :on-press            #(hide-sheet-and-dispatch [:navigate-to :wallet-send-transaction address])}]
-   [action-button/action-button {:label               (i18n/label :t/receive)
+   [list-item/list-item
+    {:theme               :action
+     :title               :t/receive
      :icon                :main-icons/receive
      :accessibility-label :receive-transaction-button
-                                 :icon-opts           {:color :blue}
      :on-press            #(hide-sheet-and-dispatch [:show-popover {:view :share-account :address address}])}]])
 
 (defn add-account []
   [react/view
-   [action-button/action-button {:label               (i18n/label :t/add-an-account)
+   [list-item/list-item
+    {:theme    :action
+     :title    :t/add-an-account
      :icon     :main-icons/add
-                                 :icon-opts           {:color :blue}
      :on-press #(hide-sheet-and-dispatch [:navigate-to :add-new-account])}]
-   [action-button/action-button-disabled {:label               (i18n/label :t/add-a-watch-account)
+   [list-item/list-item
+    {:theme     :action
+     :title     :t/add-a-watch-account
      :icon      :main-icons/watch
-                                          :icon-opts           {:color :blue}
+     :disabled? true}]])
-                                          :on-press            #(hide-sheet-and-dispatch [:navigate-to])}]])
 
 (defn account-settings []
   [react/view
-   [action-button/action-button-disabled {:label               (i18n/label :t/account-settings)
+   [list-item/list-item
+    {:theme     :action
+     :title     :t/account-settings
      :icon      :main-icons/info
-                                          :icon-opts           {:color :blue}}]
+     :disabled? true}]
-   [action-button/action-button-disabled {:label               (i18n/label :t/export-account)
+   [list-item/list-item
+    {:theme     :action
+     :title     :t/export-account
      :icon      :main-icons/copy
-                                          :icon-opts           {:color :blue}}]])
+     :disabled? true}]])

src/status_im/ui/screens/wallet/accounts/views.cljs

@@ -10,7 +10,7 @@
             [status-im.ui.components.chat-icon.screen :as chat-icon]
             [status-im.ui.components.list-item.views :as list-item]
             [status-im.wallet.utils :as wallet.utils]
-            [status-im.ui.components.bottom-bar.styles :as tabs.styles]
+            [status-im.ui.components.tabbar.styles :as tabs.styles]
             [reagent.core :as reagent]
             [status-im.utils.money :as money]
             [re-frame.core :as re-frame]

src/status_im/ui/screens/wallet/choose_recipient/views.cljs

@@ -2,23 +2,22 @@
   (: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.bottom-buttons.view :as bottom-buttons]
+            [status-im.ui.components.toolbar :as toolbar]
-            [status-im.ui.components.button.view :as button]
             [status-im.ui.components.camera :as camera]
             [status-im.ui.components.react :as react]
             [status-im.ui.components.status-bar.view :as status-bar]
             [status-im.ui.components.toolbar.actions :as actions]
-            [status-im.ui.components.toolbar.view :as toolbar]
+            [status-im.ui.components.toolbar.view :as topbar]
             [status-im.ui.screens.wallet.choose-recipient.styles :as styles]
             [status-im.utils.platform :as platform]))
 
-(defn- toolbar-view [camera-flashlight]
+(defn- topbar [camera-flashlight]
-  [toolbar/toolbar
+  [topbar/toolbar
    {:transparent? true}
-   [toolbar/nav-button (actions/back-white actions/default-handler)]
+   [topbar/nav-button (actions/back-white actions/default-handler)]
-   [toolbar/content-title {:color :white}
+   [topbar/content-title {:color :white}
     (i18n/label :t/wallet-choose-recipient)]
-   [toolbar/actions [{:icon      (if (= :on camera-flashlight)
+   [topbar/actions [{:icon      (if (= :on camera-flashlight)
                                   :main-icons/flash-active
                                   :main-icons/flash-inactive)
                      :icon-opts {:color :white}
@@ -50,7 +49,7 @@
             camera-flashlight [:wallet.send/camera-flashlight]]
     [react/view {:style styles/qr-code}
      [status-bar/status-bar {:type :transparent}]
-     [toolbar-view camera-flashlight]
+     [topbar camera-flashlight]
      [react/text {:style               (styles/qr-code-text dimensions)
                   :accessibility-label :scan-qr-code-with-wallet-address-text}
       (i18n/label :t/scan-qr-code)]
@@ -66,8 +65,9 @@
                                          (reset! read-once? true)
                                          (re-frame/dispatch [:wallet/fill-request-from-url (camera/get-qr-code-data %) :qr]))}]]
       [viewfinder dimensions (size dimensions)]]
-     [bottom-buttons/bottom-button
+     [toolbar/toolbar
-      [button/button {:disabled?           false
+      {:center {:type                :secondary
+                :disabled?           false
                 :on-press            #(re-frame/dispatch [:navigate-back])
-                      :accessibility-label :cancel-button}
+                :accessibility-label :cancel-button
-       (i18n/label :t/cancel)]]]))
+                :label               :t/cancel}}]]))

src/status_im/ui/screens/wallet/collectibles/cryptokitties/views.cljs

@@ -1,12 +1,12 @@
 (ns status-im.ui.screens.wallet.collectibles.cryptokitties.views
   (:require [re-frame.core :as re-frame]
             [status-im.i18n :as i18n]
-            [status-im.ui.components.action-button.action-button :as action-button]
             [status-im.ui.components.colors :as colors]
             [status-im.ui.components.react :as react]
             [status-im.ui.screens.wallet.collectibles.styles :as styles]
             [status-im.ui.screens.wallet.collectibles.views :as collectibles]
-            [status-im.ui.components.svgimage :as svgimage]))
+            [status-im.ui.components.svgimage :as svgimage]
+            [status-im.ui.components.list-item.views :as list-item]))
 
 (defmethod collectibles/render-collectible :CK [_ {:keys [id name bio image_url]}]
   [react/view {:style styles/details}
@@ -19,10 +19,10 @@
      [react/text {:number-of-lines 3
                   :ellipsize-mode :tail}
       bio]]]
-   [action-button/action-button
+   [list-item/list-item
-    {:label               (i18n/label :t/view-cryptokitties)
+    {:theme               :action
+     :title               :t/view-cryptokitties
      :icon                :main-icons/address
-     :icon-opts           {:color colors/blue}
      :accessibility-label :open-collectible-button
      :on-press            #(re-frame/dispatch [:open-collectible-in-browser
                                                (str "https://www.cryptokitties.co/kitty/" id)])}]])

src/status_im/ui/screens/wallet/collectibles/cryptostrikers/views.cljs

@@ -1,12 +1,10 @@
 (ns status-im.ui.screens.wallet.collectibles.cryptostrikers.views
   (:require [re-frame.core :as re-frame]
-            [status-im.i18n :as i18n]
-            [status-im.ui.components.action-button.action-button :as action-button]
-            [status-im.ui.components.colors :as colors]
             [status-im.ui.components.react :as react]
             [status-im.ui.screens.wallet.collectibles.styles :as styles]
             [status-im.ui.components.svgimage :as svgimage]
-            [status-im.ui.screens.wallet.collectibles.views :as collectibles]))
+            [status-im.ui.screens.wallet.collectibles.views :as collectibles]
+            [status-im.ui.components.list-item.views :as list-item]))
 
 (defmethod collectibles/render-collectible :STRK [_ {:keys [external_url description name image]}]
   [react/view {:style styles/details}
@@ -19,9 +17,9 @@
       name]
      [react/text
       description]]]
-   [action-button/action-button
+   [list-item/list-item
-    {:label               (i18n/label :t/view-cryptostrikers)
+    {:theme               :action
+     :title               :t/view-cryptostrikers
      :icon                :main-icons/address
-     :icon-opts           {:color colors/blue}
      :accessibility-label :open-collectible-button
      :on-press            #(re-frame/dispatch [:open-collectible-in-browser external_url])}]])

src/status_im/ui/screens/wallet/collectibles/etheremon/views.cljs

@@ -1,12 +1,10 @@
 (ns status-im.ui.screens.wallet.collectibles.etheremon.views
   (:require [re-frame.core :as re-frame]
-            [status-im.i18n :as i18n]
-            [status-im.ui.components.action-button.action-button :as action-button]
-            [status-im.ui.components.colors :as colors]
             [status-im.ui.components.react :as react]
             [status-im.ui.screens.wallet.collectibles.styles :as styles]
             [status-im.ui.components.svgimage :as svgimage]
-            [status-im.ui.screens.wallet.collectibles.views :as collectibles]))
+            [status-im.ui.screens.wallet.collectibles.views :as collectibles]
+            [status-im.ui.components.list-item.views :as list-item]))
 
 (defmethod collectibles/render-collectible :EMONA [_ {:keys [user_defined_name image class_id]}]
   [react/view {:style styles/details}
@@ -18,10 +16,10 @@
     [react/view {:flex 1 :justify-content :center}
      [react/text {:style styles/details-name}
       user_defined_name]]]
-   [action-button/action-button
+   [list-item/list-item
-    {:label               (i18n/label :t/view-etheremon)
+    {:theme               :action
+     :title               :t/view-etheremon
      :icon                :main-icons/address
-     :icon-opts           {:color colors/blue}
      :accessibility-label :open-collectible-button
      :on-press            #(re-frame/dispatch [:open-collectible-in-browser
                                                (str "https://www.etheremon.com/#/mons/" class_id)])}]])

src/status_im/ui/screens/wallet/collectibles/kudos/views.cljs

@@ -3,10 +3,8 @@
             [status-im.ui.components.react :as react]
             [status-im.ui.screens.wallet.collectibles.styles :as styles]
             [status-im.ui.components.svgimage :as svgimage]
-            [status-im.ui.components.action-button.action-button :as action-button]
-            [status-im.ui.components.colors :as colors]
             [re-frame.core :as re-frame]
-            [status-im.i18n :as i18n]))
+            [status-im.ui.components.list-item.views :as list-item]))
 
 (defmethod collectibles/render-collectible :KDO [_ {:keys [external_url description name image]}]
   [react/view {:style styles/details}
@@ -19,9 +17,9 @@
       name]
      [react/text
       description]]]
-   [action-button/action-button
+   [list-item/list-item
-    {:label               (i18n/label :t/view-gitcoin)
+    {:theme               :action
+     :title               :t/view-gitcoin
      :icon                :main-icons/address
-     :icon-opts           {:color colors/blue}
      :accessibility-label :open-collectible-button
      :on-press            #(re-frame/dispatch [:open-collectible-in-browser external_url])}]])

src/status_im/ui/screens/wallet/collectibles/superrare/views.cljs

@@ -1,11 +1,9 @@
 (ns status-im.ui.screens.wallet.collectibles.superrare.views
   (:require [re-frame.core :as re-frame]
-            [status-im.i18n :as i18n]
-            [status-im.ui.components.action-button.action-button :as action-button]
-            [status-im.ui.components.colors :as colors]
             [status-im.ui.components.react :as react]
             [status-im.ui.screens.wallet.collectibles.styles :as styles]
-            [status-im.ui.screens.wallet.collectibles.views :as collectibles]))
+            [status-im.ui.screens.wallet.collectibles.views :as collectibles]
+            [status-im.ui.components.list-item.views :as list-item]))
 
 (defmethod collectibles/render-collectible :SUPR [_ {tokenId :tokenId {:keys [description name imageUri]} :metadata}]
   [react/view {:style styles/details}
@@ -18,10 +16,10 @@
       name]
      [react/text
       description]]]
-   [action-button/action-button
+   [list-item/list-item
-    {:label               (i18n/label :t/view-superrare)
+    {:theme               :action
+     :title               :t/view-superrare
      :icon                :main-icons/address
-     :icon-opts           {:color colors/blue}
      :accessibility-label :open-collectible-button
      :on-press            #(re-frame/dispatch [:open-collectible-in-browser
                                                (str "https://superrare.co/artwork/" name "-" tokenId)])}]])

src/status_im/ui/screens/wallet/components/styles.cljs

@@ -8,9 +8,6 @@
    :margin-top        16
    :margin-horizontal 16})
 
-(def cartouche-header
-  {:color colors/white})
-
 (defn cartouche-content-wrapper [disabled?]
   (merge
    {:flex-direction :row
@@ -20,8 +17,8 @@
     :padding-right  8}
    (if disabled?
      {:border-width 1
-      :border-color colors/white-transparent-10}
+      :border-color colors/gray-lighter}
-     {:background-color colors/white-transparent-10})))
+     {:background-color colors/gray-lighter})))
 
 (def cartouche-icon-wrapper
   {:flex            1
@@ -30,10 +27,10 @@
    :align-items     :center})
 
 (def text-content
-  {:color colors/white})
+  {:color colors/black})
 
 (def text-secondary-content
-  {:color colors/white-transparent})
+  {:color colors/gray})
 
 (def text
   {:margin-right 10})
@@ -61,23 +58,10 @@
    :font-size 13})
 
 (def network-container
-  {:padding-horizontal 10
+  {:flex-direction     :row
-   :height             27
+   :padding-horizontal 13
-   :border-radius      100
+   :padding-vertical   11
-   :border-width       1
+   :align-items        :center})
-   :border-color       colors/white-transparent-10
-   :align-items        :center
-   :justify-content    :center})
-
-(def asset-container
-  {:margin-top       8
-   :height           52
-   :background-color colors/white-transparent-10
-   :justify-content  :center
-   :padding-left     14
-   :padding-vertical 14
-   :padding-right    8
-   :border-radius    8})
 
 (def asset-container-read-only
   {:margin-top       8
@@ -137,7 +121,7 @@
   {:color colors/white})
 
 (defn participant [address?]
-  {:color       (if address? :white colors/white-transparent)
+  {:color       (if address? colors/black colors/gray)
    :flex-shrink 1})
 
 (def recipient-container
@@ -153,11 +137,10 @@
    :margin-vertical   16})
 
 (def recipient-address
-  {:margin-vertical 17
+  {:margin-vertical 17})
-   :color           colors/white})
 
 (def recipient-no-address
-  {:color colors/white-transparent})
+  {:color colors/gray})
 
 (def recent-recipients
   {:flex             1
@@ -181,3 +164,17 @@
 
 (def button-text
   {:color colors/white})
+
+(def network-text
+  {:flex        1
+   :color       colors/black
+   :font-size   14
+   :margin-left 16})
+
+(def network-icon
+  {:width            40
+   :height           40
+   :border-radius    (/ 40 2)
+   :background-color colors/green
+   :align-items      :center
+   :justify-content  :center})

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

@@ -7,8 +7,7 @@
             [status-im.ethereum.tokens :as tokens]
             [status-im.i18n :as i18n]
             [status-im.multiaccounts.core :as multiaccounts]
-            [status-im.ui.components.bottom-buttons.view :as bottom-buttons]
+            [status-im.ui.components.toolbar :as toolbar]
-            [status-im.ui.components.button.view :as button]
             [status-im.ui.components.chat-icon.screen :as chat-icon]
             [status-im.ui.components.colors :as colors]
             [status-im.ui.components.icons.vector-icons :as vector-icons]
@@ -19,7 +18,7 @@
             [status-im.ui.components.status-bar.view :as status-bar]
             [status-im.ui.components.styles :as components.styles]
             [status-im.ui.components.toolbar.actions :as actions]
-            [status-im.ui.components.toolbar.view :as toolbar]
+            [status-im.ui.components.toolbar.view :as topbar]
             [status-im.ui.components.tooltip.views :as tooltip]
             [status-im.ui.screens.chat.photos :as photos]
             [status-im.ui.screens.wallet.choose-recipient.views
@@ -29,34 +28,24 @@
             [status-im.wallet.utils :as wallet.utils]
             [status-im.utils.core :as utils.core]
             [status-im.utils.money :as money]
-            [status-im.utils.utils :as utils.utils]
+            [status-im.utils.utils :as utils.utils])
-            [status-im.ui.components.chat-icon.screen :as chat-icon.screen])
   (:require-macros [status-im.utils.views :as views]))
 
 ;; Wallet tab has a different coloring scheme (dark) that forces color changes (background, text)
 ;; It might be replaced by some theme mechanism
 
 (defn text-input [props text]
-  [react/text-input (utils.core/deep-merge {:placeholder-text-color colors/white-transparent
+  [react/text-input (utils.core/deep-merge {:placeholder-text-color colors/gray
-                                            :selection-color        colors/white
+                                            :selection-color        colors/black
-                                            :style                  {:color     colors/white
+                                            :style                  {:color     colors/black
                                                                      :height    52}}
                                            props)
    text])
 
 (def default-action (actions/back-white actions/default-handler))
 
-(defn toolbar
+(defn topbar [title]
-  ([title] (toolbar {} title))
+  [topbar/simple-toolbar title])
-  ([props title] (toolbar props default-action title))
-  ([props action title] (toolbar props action title nil))
-  ([props action title options]
-   [toolbar/toolbar (assoc-in props [:style :border-bottom-color] colors/white-transparent-10)
-    [toolbar/nav-button action]
-    [toolbar/content-title {:color       colors/white
-                            :font-weight "700"}
-     title]
-    options]))
 
 (defn- top-view [avoid-keyboard?]
   (if avoid-keyboard?
@@ -65,9 +54,9 @@
 
 (defn simple-screen
   ([toolbar content] (simple-screen nil toolbar content))
-  ([{:keys [avoid-keyboard? status-bar-type]} toolbar content]
+  ([{:keys [avoid-keyboard?]} toolbar content]
-   [(top-view avoid-keyboard?) {:flex 1 :background-color colors/blue}
+   [(top-view avoid-keyboard?) {:flex 1}
-    [status-bar/status-bar {:type (or status-bar-type :wallet)}]
+    [status-bar/status-bar]
     toolbar
     content]))
 
@@ -78,7 +67,7 @@
 
 (defn cartouche [{:keys [disabled? on-press icon icon-opts] :or {icon :main-icons/next} :as m} header content]
   [react/view {:style styles/cartouche-container}
-   [react/text {:style styles/cartouche-header}
+   [react/text
     header]
    (if (or disabled? (nil? on-press))
      [cartouche-content m content]
@@ -89,7 +78,7 @@
           [react/view styles/cartouche-icon-wrapper
            [react/view {:flex 1} ;; Let content shrink if needed
             content]
-           [vector-icons/icon icon (merge {:color :white} icon-opts)]]
+           [vector-icons/icon icon icon-opts]]
           content)]]])])
 
 (defn view-asset [symbol]
@@ -124,7 +113,7 @@
 (views/defview assets [type address]
   (views/letsubs [assets [:wallet/transferrable-assets-with-amount address]]
     [simple-screen
-     [toolbar (i18n/label :t/wallet-assets)]
+     [topbar (i18n/label :t/wallet-assets)]
      [react/view {:style (assoc components.styles/flex :background-color :white)}
       [list/flat-list {:default-separator? true
                        :data               assets
@@ -220,7 +209,7 @@
   (views/letsubs [contacts           [:contacts/active]
                   {:keys [request?]} [:get-screen-params :recent-recipients]]
     [simple-screen
-     [toolbar (i18n/label :t/recipient)]
+     [topbar (i18n/label :t/recipient)]
      [react/view styles/recent-recipients
       [list/flat-list {:data      contacts
                        :key-fn    :address
@@ -229,7 +218,7 @@
 (views/defview accounts []
   (views/letsubs [{:keys [accounts]} [:multiaccount]]
     [simple-screen
-     [toolbar (i18n/label :t/accounts)]
+     [topbar (i18n/label :t/accounts)]
      [react/view styles/recent-recipients
       [list/flat-list {:data      accounts
                        :key-fn    :address
@@ -241,9 +230,7 @@
 (views/defview contact-code []
   (views/letsubs [content (reagent/atom nil)]
     [simple-screen {:avoid-keyboard? true}
-     [toolbar {:style {:border-bottom-color colors/white-transparent-10}}
+     [topbar (i18n/label :t/recipient)]
-      default-action
-      (i18n/label :t/recipient)]
      [react/view components.styles/flex
       [cartouche {}
        (i18n/label :t/recipient)
@@ -253,11 +240,10 @@
                     :placeholder         (i18n/label :t/recipient-code)
                     :on-change-text      #(reset! content %)
                     :accessibility-label :recipient-address-input}]]
-      [bottom-buttons/bottom-button
+      [toolbar/toolbar {:center {:type      :secondary
-       [button/button {:disabled?    (string/blank? @content)
+                                 :disabled? (string/blank? @content)
                                  :on-press  #(re-frame/dispatch [:wallet.send/set-recipient @content])
-                       :fit-to-text? false}
+                                 :label     :t/done}}]]]))
-        (i18n/label :t/done)]]]]))
 
 (defn recipient-qr-code []
   [choose-recipient/choose-recipient])
@@ -332,3 +318,19 @@
 (defn button-text [label]
   [react/text {:style styles/button-text}
    label])
+
+(views/defview network-info []
+  (views/letsubs [network-id [:chain-id]]
+    [react/view
+     [react/view styles/network-container
+      [react/view styles/network-icon
+       [vector-icons/icon :main-icons/network {:color :white}]]
+      [react/text
+       (cond (ethereum/testnet? network-id)
+             (i18n/label :t/testnet-text {:testnet (get-in ethereum/chains [(ethereum/chain-id->chain-keyword network-id) :name] "Unknown")})
+
+             (ethereum/sidechain? network-id)
+             (i18n/label :t/sidechain-text {:sidechain (get-in ethereum/chains [(ethereum/chain-id->chain-keyword network-id) :name] "Unknown")})
+
+             :else
+             (i18n/label :t/mainnet-text))]]]))

src/status_im/ui/screens/wallet/custom_tokens/views.cljs

@@ -8,9 +8,8 @@
             [status-im.ui.components.text-input.view :as text-input]
             [status-im.ui.components.common.common :as components.common]
             [clojure.string :as string]
-            [status-im.wallet.utils :as wallet.utils]
             [status-im.i18n :as i18n]
-            [status-im.ui.components.action-button.action-button :as action-button]))
+            [status-im.ui.components.list-item.views :as list-item]))
 
 (def debounce-timers (atom {}))
 
@@ -141,10 +140,8 @@
            :editable       false}]]]]
       [react/view {:height 24}]
       (when custom?
-        [action-button/action-button
+        [list-item/list-item
-         {:label        (i18n/label :t/remove-token)
+         {:theme        :action-destructive
+          :title        :t/remove-token
           :icon         :main-icons/delete
-          :icon-opts    {:color colors/red}
-          :label-style  {:color colors/red}
-          :cyrcle-color colors/red-transparent-10
           :on-press     #(re-frame/dispatch [:wallet.custom-token.ui/remove-pressed token true])}])]]))

src/status_im/ui/screens/wallet/request/views.cljs

@@ -4,10 +4,6 @@
             [status-im.ethereum.eip681 :as eip681]
             [status-im.ethereum.tokens :as tokens]
             [status-im.i18n :as i18n]
-            [status-im.ui.components.bottom-buttons.view :as bottom-buttons]
-            [status-im.ui.components.button.view :as button]
-            [status-im.ui.components.common.common :as common]
-            [status-im.ui.components.icons.vector-icons :as vector-icons]
             [status-im.ui.components.qr-code-viewer.views :as qr-code-viewer]
             [status-im.ui.components.react :as react]
             [status-im.ui.components.styles :as components.styles]
@@ -17,9 +13,11 @@
             [status-im.utils.utils :as utils]
             [status-im.ui.components.colors :as colors]
             [reagent.core :as reagent]
-            [status-im.ui.components.common.common :as components.common])
+            [status-im.ui.components.common.common :as components.common]
+            [status-im.ui.components.toolbar :as toolbar])
   (:require-macros [status-im.utils.views :as views]))
 
+;;TODO DEPRECATED
 (views/defview send-transaction-request []
   ;; TODO(jeluard) both send and request flows should be merged
   (views/letsubs [chain          [:ethereum/chain-keyword]
@@ -30,9 +28,9 @@
                   scroll         (atom nil)]
     (let [{:keys [decimals] :as token} (tokens/asset-for all-tokens chain symbol)]
       [wallet.components/simple-screen {:avoid-keyboard? true}
-       [wallet.components/toolbar (i18n/label :t/new-request)]
+       [wallet.components/topbar (i18n/label :t/new-request)]
        [react/view components.styles/flex
-        [common/network-info {:text-color :white}]
+        [wallet.components/network-info]
         [react/scroll-view {:ref #(reset! scroll %) :keyboardShouldPersistTaps :always}
          [react/view styles/request-details-wrapper
           [wallet.components/recipient-selector
@@ -52,15 +50,13 @@
             :input-options {:on-focus       (fn [] (when @scroll (utils/set-timeout #(.scrollToEnd @scroll) 100)))
                             :on-change-text #(re-frame/dispatch [:wallet.request/set-and-validate-amount % symbol decimals])}}
            token]]]
-        [bottom-buttons/bottom-buttons styles/bottom-buttons
+        [toolbar/toolbar
-         nil                                                ;; Force a phantom button to ensure consistency with other transaction screens which define 2 buttons
+         {:right {:type                :next
-         [button/button {:disabled?           (or amount-error (not (and to amount)))
+                  :disabled?           (or amount-error (not (and to amount)))
                   :on-press            #(re-frame/dispatch [:wallet-send-request public-key amount
                                                             (wallet.utils/display-symbol token) decimals])
-                         :text-style          {:padding-horizontal 0}
+                  :accessibility-label :sent-request-button
-                         :accessibility-label :sent-request-button}
+                  :label               :t/send-request}}]]])))
-          (i18n/label :t/send-request)
-          [vector-icons/icon :main-icons/next {:color :white}]]]]])))
 
 (views/defview share-address []
   (views/letsubs [{:keys [address]} [:popover/popover]

src/status_im/ui/screens/wallet/send/views.cljs

@@ -2,48 +2,31 @@
   (:require-macros [status-im.utils.views :refer [defview letsubs]])
   (:require [re-frame.core :as re-frame]
             [reagent.core :as reagent]
-            [status-im.ethereum.tokens :as tokens]
             [status-im.i18n :as i18n]
-            [status-im.ui.components.bottom-buttons.view :as bottom-buttons]
-            [status-im.ui.components.button.view :as button]
-            [status-im.ui.components.colors :as colors]
-            [status-im.ui.components.common.common :as common]
-            [status-im.ui.components.icons.vector-icons :as vector-icons]
             [status-im.ui.components.react :as react]
             [status-im.ui.components.styles :as components.styles]
-            [status-im.ui.components.toolbar.view :as toolbar]
+            [status-im.ui.components.toolbar.view :as topbar]
+            [status-im.ui.components.toolbar :as toolbar]
             [status-im.ui.screens.wallet.components.views :as wallet.components]
-            [status-im.ui.screens.wallet.send.styles :as styles]
+            [status-im.ui.screens.wallet.send.styles :as styles]))
-            [status-im.ui.components.toolbar.actions :as actions]))
-
-(defn- toolbar [title]
-  [toolbar/toolbar {:transparent? true}
-   [toolbar/nav-button (actions/back-white #(actions/default-handler))]
-   [toolbar/content-title {:color :white} title]])
 
 (defn- sign-transaction-button [sign-enabled?]
-  [bottom-buttons/bottom-buttons
+  [toolbar/toolbar
-   styles/sign-buttons
+   {:right {:type                :next
-   [react/view]
-   [button/button {:style               components.styles/flex
             :disabled?           (not sign-enabled?)
             :on-press            #(re-frame/dispatch [:wallet.ui/sign-transaction-button-clicked])
-                   :text-style          {:color :white}
+            :accessibility-label :sign-transaction-button
-                   :accessibility-label :sign-transaction-button}
+            :label               :t/transactions-sign-transaction}}])
-    (i18n/label :t/transactions-sign-transaction)
-    [vector-icons/icon :main-icons/next {:color (if sign-enabled?
-                                                  colors/white
-                                                  colors/white-transparent-10)}]]])
 
+;;TODO DEPRECATED
 (defn- render-send-transaction-view
   [{:keys [transaction scroll amount-input]}]
   (let [{:keys [from amount amount-text amount-error token sign-enabled?
                 asset-error to to-name symbol]} transaction]
-    [wallet.components/simple-screen {:avoid-keyboard? true
+    [wallet.components/simple-screen {:avoid-keyboard? true}
-                                      :status-bar-type :wallet}
+     [topbar/simple-toolbar (i18n/label :t/send-transaction)]
-     [toolbar (i18n/label :t/send-transaction)]
      [react/view components.styles/flex
-      [common/network-info {:text-color :white}]
+      [wallet.components/network-info]
       [react/scroll-view {:keyboard-should-persist-taps :always
                           :ref                          #(reset! scroll %)
                           :on-content-size-change       #(when (and scroll @scroll)

src/status_im/ui/screens/wallet/settings/views.cljs

@@ -1,18 +1,16 @@
 (ns status-im.ui.screens.wallet.settings.views
   (:require [re-frame.core :as re-frame]
             [status-im.ethereum.core :as ethereum]
-            [status-im.ethereum.tokens :as tokens]
             [status-im.i18n :as i18n]
-            [status-im.ui.components.action-button.action-button :as action-button]
             [status-im.ui.components.chat-icon.screen :as chat-icon]
             [status-im.ui.components.colors :as colors]
-            [status-im.ui.components.list-header.views :as list-header]
             [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.styles :as components.styles]
             [status-im.ui.components.toolbar.actions :as actions]
-            [status-im.ui.components.toolbar.view :as toolbar])
+            [status-im.ui.components.toolbar.view :as toolbar]
+            [status-im.ui.components.list-item.views :as list-item])
   (:require-macros [status-im.utils.views :refer [defview letsubs]]))
 
 (defn toolbar []
@@ -30,16 +28,16 @@
 (defn custom-token-actions-view [{:keys [custom?] :as token}]
   (fn []
     [react/view
-     [action-button/action-button {:label     (i18n/label :t/token-details)
+     [list-item/list-item
+      {:theme    :action
+       :title    :t/token-details
        :icon     :main-icons/warning
-                                   :icon-opts {:color :blue}
        :on-press #(hide-sheet-and-dispatch [:navigate-to :wallet-custom-token-details token])}]
      (when custom?
-       [action-button/action-button {:label        (i18n/label :t/remove-token)
+       [list-item/list-item
+        {:theme    :action-destructive
+         :title    :t/remove-token
          :icon     :main-icons/delete
-                                     :icon-opts    {:color colors/red}
-                                     :label-style  {:color colors/red}
-                                     :cyrcle-color colors/red-transparent-10
          :on-press #(hide-sheet-and-dispatch [:wallet.custom-token.ui/remove-pressed token])}])]))
 
 (defn- render-token [{:keys [symbol name icon color custom? checked?] :as token}]
@@ -64,9 +62,10 @@
      [react/view {:style components.styles/flex}
       [list/section-list
        {:header                      [react/view {:margin-top 16}
-                                      [action-button/action-button {:label     (i18n/label :t/add-custom-token)
+                                      [list-item/list-item
+                                       {:theme     :action
+                                        :title     :t/add-custom-token
                                         :icon      :main-icons/add
-                                                                    :icon-opts {:color :blue}
                                         :on-press  #(re-frame/dispatch [:navigate-to :wallet-add-custom-token])}]]
         :sections                    (concat
                                       (when (seq custom-tokens)
@@ -77,7 +76,7 @@
         :key-fn                      :address
         :stickySectionHeadersEnabled false
         :render-section-header-fn    (fn [{:keys [title data]}]
-                                       [list-header/list-header title])
+                                       [list-item/list-item {:type :section-header :title title}])
         :render-fn                   render-token}]]]))
 
 (defn- create-payload [address]

src/status_im/ui/screens/wallet/transactions/styles.cljs

@@ -1,7 +1,7 @@
 (ns status-im.ui.screens.wallet.transactions.styles
   (:require-macros [status-im.utils.styles :refer [defnstyle defstyle]])
   (:require [status-im.ui.components.colors :as colors]
-            [status-im.ui.components.bottom-bar.styles :as tabs.styles]))
+            [status-im.ui.components.tabbar.styles :as tabs.styles]))
 
 (defnstyle tab [active?]
   {:flex                1

src/status_im/utils/label.cljs

@@ -0,0 +1,23 @@
+(ns status-im.utils.label
+  (:require [status-im.i18n :as i18n]))
+
+(defn stringify [keyword-or-number]
+  (cond
+    (string? keyword-or-number)
+    keyword-or-number
+
+    (and (qualified-keyword? keyword-or-number)
+         (= "t" (namespace keyword-or-number)))
+    (i18n/label keyword-or-number)
+
+    (and (qualified-keyword? keyword-or-number)
+         (not= "t" (namespace keyword-or-number)))
+    (str (namespace keyword-or-number) "/" (name keyword-or-number))
+
+    (simple-keyword? keyword-or-number)
+    (name keyword-or-number)
+
+    (number? keyword-or-number)
+    (str keyword-or-number)
+
+    :else nil))