Replace all the usage of the button without component

src/status_im/network/ui/edit_network/styles.cljs

@@ -14,9 +14,8 @@
    :align-items    :center})
 
 (def bottom-container
-  {:flex-direction    :row
-   :margin-horizontal 12
-   :margin-vertical   15})
+  {:flex-direction   :row
+   :padding-vertical 4})
 
 (def container
   styles/flex)

src/status_im/network/ui/edit_network/views.cljs

@@ -4,10 +4,10 @@
             [status-im.i18n :as i18n]
             [status-im.network.core :as network]
             [status-im.network.ui.edit-network.styles :as styles]
-            [status-im.ui.components.common.common :as components.common]
             [status-im.ui.components.list.views :as list]
             [status-im.ui.components.react :as react]
             [status-im.ui.components.styles :as components.styles]
+            [status-im.ui.components.button :as button]
             [status-im.ui.components.text-input.view :as text-input]
             [status-im.ui.components.topbar :as topbar])
   (:require-macros [status-im.utils.views :as views]))
@@ -60,8 +60,8 @@
               :on-change-text #(re-frame/dispatch [::network/input-changed :network-id %])}])]]
         [react/view styles/bottom-container
          [react/view components.styles/flex]
-         [components.common/bottom-button
-          {:forward?  true
-           :label     (i18n/label :t/save)
+         [button/button
+          {:type      :next
+           :label     :t/save
            :disabled? (not is-valid?)
            :on-press  #(re-frame/dispatch [::network/save-network-pressed])}]]]])))

src/status_im/network/ui/network_details/views.cljs

@@ -1,10 +1,10 @@
 (ns status-im.network.ui.network-details.views
   (:require [re-frame.core :as re-frame]
             [status-im.i18n :as i18n]
+            [status-im.ui.components.button :as button]
             [status-im.network.core :as network]
             [status-im.network.ui.styles :as st]
             [status-im.network.ui.views :as network-settings]
-            [status-im.ui.components.common.common :as components.common]
             [status-im.ui.components.react :as react]
             [status-im.ui.components.styles :as components.styles]
             [status-im.ui.components.topbar :as topbar])
@@ -40,7 +40,8 @@
         (when custom?
           [react/view st/bottom-container
            [react/view components.styles/flex
-            [components.common/button {:label        (i18n/label :t/delete)
-                                       :button-style st/delete-button
-                                       :label-style  st/delete-button-text
-                                       :on-press     #(re-frame/dispatch [::network/delete-network-pressed id])}]]])]])))
+            [button/button {:label       :t/delete
+                            :style       st/delete-button
+                            ;; TODO: Inspect style of label
+                            :label-style st/delete-button-text
+                            :on-press    #(re-frame/dispatch [::network/delete-network-pressed id])}]]])]])))

src/status_im/ui/components/button.cljs

@@ -7,15 +7,7 @@
 (defn style-container [type disabled? theme]
   (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-horizontal 32})
    {:height 44 :border-radius 8
     :align-items :center :justify-content :center
     :background-color (cond

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

@@ -1,7 +1,6 @@
 (ns status-im.ui.components.common.common
   (:require [reagent.core :as reagent]
             [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])
@@ -16,42 +15,6 @@
   [react/view (merge styles/separator-wrapper wrapper-style)
    [react/view (merge styles/separator style)]])
 
-;;TODO DEPRECATED, use status-im.ui.components.button
-(defn bottom-button [{:keys [accessibility-label
-                             label
-                             disabled?
-                             on-press
-                             forward?
-                             back?]}]
-  (let [color (if disabled? colors/gray colors/blue)]
-    [react/touchable-highlight {:on-press on-press :disabled disabled?}
-     [react/view styles/bottom-button
-      (when back?
-        [vector-icons/icon :main-icons/back {:color           color
-                                             :container-style {:align-self :baseline}}])
-      [react/text {:style               {:color color}
-                   :accessibility-label accessibility-label}
-       (or label (i18n/label :t/next))]
-      (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
-                              :accessibility-label accessibility-label
-                              :disabled disabled?}
-   [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))

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

@@ -116,14 +116,19 @@
                (:name dapps-account)]]])
           [react/text {:style styles/permissions-panel-description-label :number-of-lines 2}
            description]
-          [react/view {:flex-direction :row :margin-top 24}
-           [button/button
-            {:theme    :red
-             :style    {:flex 1}
-             :on-press #(re-frame/dispatch [:browser.permissions.ui/dapp-permission-denied])
-             :label    (i18n/label :t/deny)}]
-           [button/button
-            {:theme    :green
-             :style    {:flex 1}
-             :on-press #(re-frame/dispatch [:browser.permissions.ui/dapp-permission-allowed])
-             :label    (i18n/label :t/allow)}]]]]))))
+          [react/view {:style {:flex-direction    :row
+                               :justify-content   :center
+                               :margin-horizontal 8
+                               :margin-top        24}}
+           [react/view {:flex 1}
+            [button/button
+             {:theme    :red
+              :style    {:margin-horizontal 8}
+              :on-press #(re-frame/dispatch [:browser.permissions.ui/dapp-permission-denied])
+              :label    (i18n/label :t/deny)}]]
+           [react/view {:flex 1}
+            [button/button
+             {:theme    :green
+              :style    {:margin-horizontal 8}
+              :on-press #(re-frame/dispatch [:browser.permissions.ui/dapp-permission-allowed])
+              :label    (i18n/label :t/allow)}]]]]]))))

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

@@ -2,7 +2,7 @@
   (:require [re-frame.core :as re-frame]
             [status-im.i18n :as i18n]
             [status-im.ui.components.colors :as colors]
-            [status-im.ui.components.common.common :as components.common]
+            [status-im.ui.components.button :as button]
             [status-im.ui.components.icons.vector-icons :as vector-icons]
             [status-im.ui.components.react :as react]
             [status-im.ui.screens.browser.site-blocked.styles :as styles])
@@ -23,9 +23,9 @@
       "#status"]
      (i18n/label :t/browsing-site-blocked-description2)]
     [react/view styles/buttons-container
-     [components.common/button {:on-press (fn []
-                                            (let [handler (if can-go-back?
-                                                            :browser.ui/previous-page-button-pressed
-                                                            :navigate-back)]
-                                              (re-frame/dispatch [handler])))
-                                :label    (i18n/label :t/browsing-site-blocked-go-back)}]]]])
+     [button/button {:on-press (fn []
+                                 (let [handler (if can-go-back?
+                                                 :browser.ui/previous-page-button-pressed
+                                                 :navigate-back)]
+                                   (re-frame/dispatch [handler])))
+                     :label    :t/browsing-site-blocked-go-back}]]]])

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

@@ -1,13 +1,12 @@
 (ns status-im.ui.screens.dapps-permissions.views
   (:require-macros [status-im.utils.views :as views])
   (:require [re-frame.core :as re-frame]
-            [status-im.i18n :as i18n]
             [status-im.constants :as constants]
             [status-im.ui.components.react :as react]
             [status-im.ui.components.list.views :as list]
             [status-im.ui.components.colors :as colors]
             [status-im.ui.screens.dapps-permissions.styles :as styles]
-            [status-im.ui.components.common.common :as components.common]
+            [status-im.ui.components.button :as button]
             [status-im.ui.components.icons.vector-icons :as icons]
             [status-im.ui.components.topbar :as topbar]))
 
@@ -50,5 +49,6 @@
        :key-fn    (fn [_ i] (str i))
        :render-fn list/flat-list-generic-render-fn}]
      [react/view {:padding-vertical 16}
-      [components.common/red-button {:label    (i18n/label :t/revoke-access)
-                                     :on-press #(re-frame/dispatch [:dapps/revoke-access dapp])}]]]))
+      [button/button {:label    :t/revoke-access
+                      :theme    :red
+                      :on-press #(re-frame/dispatch [:dapps/revoke-access dapp])}]]]))

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

@@ -19,6 +19,7 @@
             [status-im.ui.components.react :as react]
             [status-im.ui.components.topbar :as topbar]
             [status-im.ui.components.toolbar :as toolbar]
+            [status-im.ui.components.button :as button]
             [status-im.ui.screens.chat.message.message :as message]
             [status-im.ui.screens.chat.photos :as photos]
             [status-im.ui.screens.profile.components.views :as profile.components]
@@ -27,13 +28,10 @@
 
 (defn- button
   [{:keys [on-press] :as m} label]
-  [components.common/button (merge {:button-style {:margin-vertical    8
-                                                   :padding-horizontal 32
-                                                   :justify-content    :center
-                                                   :align-items        :center}
-                                    :on-press     on-press
-                                    :label        label}
-                                   m)])
+  [button/button (merge {:style {:margin 0}
+                         :on-press on-press
+                         :label    label}
+                        m)])
 
 (defn- link
   [{:keys [on-press]} label]

src/status_im/ui/screens/hardwallet/pin/styles.cljs

@@ -70,7 +70,7 @@
    :align-items       :center
    :justify-content   :center
    :flex-direction    :row
-   :border-radius     50
+   :border-radius     (/ (if small-screen? 50 64) 2)
    :background-color  colors/blue-light})
 
 (defn numpad-delete-button [small-screen?]

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

@@ -6,7 +6,7 @@
             [status-im.react-native.resources :as resources]
             [status-im.ui.components.icons.vector-icons :as vector-icons]
             [status-im.ui.components.colors :as colors]
-            [status-im.ui.components.common.common :as components.common]
+            [status-im.ui.components.button :as button]
             [status-im.ui.components.topbar :as topbar]))
 
 (defn- action-row [{:keys [icon label on-press color-theme]}]
@@ -41,12 +41,12 @@
                                 :size      :large}]]))
 
 (defn- reset-card-next-button [disabled?]
-  [react/view {:margin-right  18
-               :margin-bottom 15}
-   [components.common/bottom-button
-    {:on-press   #(re-frame/dispatch [:keycard-settings.ui/reset-card-next-button-pressed])
-     :disabled?  disabled?
-     :forward?   true}]])
+  [react/view {:margin-right  6
+               :margin-bottom 8}
+   [button/button
+    {:on-press  #(re-frame/dispatch [:keycard-settings.ui/reset-card-next-button-pressed])
+     :disabled? disabled?
+     :type      :next}]])
 
 (defview reset-card []
   (letsubs [disabled? [:keycard-reset-card-disabled?]]

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

@@ -9,7 +9,6 @@
             [status-im.ui.components.react :as react]
             [status-im.ui.screens.home.styles :as 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]
             [status-im.ui.components.colors :as colors]
             [status-im.ui.screens.add-new.new-public-chat.view :as new-public-chat]
@@ -41,11 +40,9 @@
     [react/i18n-text {:style styles/welcome-text-description
                       :key   :welcome-to-status-description}]]
    [react/view {:align-items :center :margin-bottom 50}
-    [components.common/button {:on-press
-                               #(re-frame/dispatch [:navigate-reset {:index  0
-                                                                     :routes [{:name :tabs}]}])
-                               :accessibility-label :lets-go-button
-                               :label               (i18n/label :t/lets-go)}]]])
+    [button/button {:on-press            #(re-frame/dispatch [:navigate-reset :tabs])
+                    :accessibility-label :lets-go-button
+                    :label               :t/lets-go}]]])
 
 (defn home-tooltip-view []
   [react/view (styles/chat-tooltip)

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

@@ -23,11 +23,9 @@
     [react/view styles/container
      [topbar/topbar]
      [react/view {:flex            1
-                  :flex-direction  :column
                   :justify-content :space-between
                   :align-items     :center}
-      [react/view {:flex-direction :column
-                   :align-items    :center}
+      [react/view {:align-items    :center}
        [react/view
         [react/view {:align-items     :center
                      :justify-content :center}
@@ -88,18 +86,8 @@
                                                   :padding-right 35}}
                               text]]]]))]
       [react/view {:margin-bottom 40}
-       [react/touchable-highlight
-        {:on-press #(re-frame/dispatch [:keycard.onboarding.intro.ui/begin-setup-pressed])}
-        [react/view {:background-color colors/blue-light
-                     :align-items      :center
-                     :justify-content  :center
-                     :flex-direction   :row
-                     :width            133
-                     :height           44
-                     :border-radius    10}
-         [react/text {:style                {:color colors/blue}
-                      :accessibility-label  :begin-set-up}
-          (i18n/label :t/begin-set-up)]]]]]]))
+       [button/button {:label    (i18n/label :t/begin-set-up)
+                       :on-press #(re-frame/dispatch [:keycard.onboarding.intro.ui/begin-setup-pressed])}]]]]))
 
 (defview puk-code []
   (letsubs [secrets [:hardwallet-secrets]