diff --git a/src/status_im/ui/components/colors.cljs b/src/status_im/ui/components/colors.cljs index 1080e1ac38..e73b1a6a1a 100644 --- a/src/status_im/ui/components/colors.cljs +++ b/src/status_im/ui/components/colors.cljs @@ -9,7 +9,8 @@ (def gray "#939ba1") ;; Used as a background for a light foreground and as section header and secondary text color (def gray-light "#e8ebec") ;; Used as divider color (def gray-lighter "#eef2f5") ;; Used as a background or shadow -(def blue "#4360df") ;; Used as main wallet color +(def blue "#4360df") ;; Used as main wallet color, and ios home add button +(def blue-transparent "rgba(67, 96, 223, 0.10)") ;; Used as shadow on ios home add button (def red "#ff2d55") ;; Used to highlight errors or "dangerous" actions (def text-light-gray "#212121") ;; Used for labels (home items) diff --git a/src/status_im/ui/components/styles.cljs b/src/status_im/ui/components/styles.cljs index 014985f450..0c12482e83 100644 --- a/src/status_im/ui/components/styles.cljs +++ b/src/status_im/ui/components/styles.cljs @@ -1,5 +1,6 @@ (ns status-im.ui.components.styles - (:require [status-im.utils.platform :as platform])) + (:require [status-im.utils.platform :as platform] + [status-im.ui.components.colors :as colors])) ;; TODO(oskarth): Make a palette of all these colors @@ -98,8 +99,16 @@ :height 24}) (def icon-add - {:width 14 - :height 14}) + {:width 14 + :height 14 + :color colors/blue + :container-style {:background-color colors/blue-transparent + :border-radius 32 + :width 32 + :height 32 + :display :flex + :justify-content :center + :align-items :center}}) (def icon-ok {:width 18 diff --git a/src/status_im/ui/components/toolbar/actions.cljs b/src/status_im/ui/components/toolbar/actions.cljs index 5783fc5b5d..1e97b6fbd5 100644 --- a/src/status_im/ui/components/toolbar/actions.cljs +++ b/src/status_im/ui/components/toolbar/actions.cljs @@ -1,9 +1,11 @@ (ns status-im.ui.components.toolbar.actions - (:require [re-frame.core :as re-frame])) + (:require [re-frame.core :as re-frame] + [status-im.ui.components.styles :as styles])) (defn add [handler] - {:icon :icons/add - :handler handler}) + {:icon :icons/add + :icon-opts styles/icon-add + :handler handler}) (defn opts [options] {:icon :icons/options