diff --git a/src/status_im/android/platform.cljs b/src/status_im/android/platform.cljs index b079ed5964..d1596abf38 100644 --- a/src/status_im/android/platform.cljs +++ b/src/status_im/android/platform.cljs @@ -18,12 +18,6 @@ :modal {:height 0 :bar-style "light-content" :color styles/color-black}} - :toolbar-new {:height 55 - :padding-top 15 - :padding-left 16 - :padding-right 16} - :toolbar-title-container {:padding-left 30} - :toolbar-with-search-content {:padding-left 30} :sized-text {:margin-top 0 :additional-height 0} :chat-list {:list-container {:background-color styles/color-light-gray} @@ -101,5 +95,4 @@ :group-block-shadows? true :discover {:uppercase-subtitles? false} :public-group-icon-container {:margin-top 4} - :private-group-icon-container {:margin-top 6} - :public-group-chat-hash-style {:top 10 :left 4}}) + :private-group-icon-container {:margin-top 6}}) diff --git a/src/status_im/chat/screen.cljs b/src/status_im/chat/screen.cljs index 773b85c079..8446f82bba 100644 --- a/src/status_im/chat/screen.cljs +++ b/src/status_im/chat/screen.cljs @@ -18,7 +18,7 @@ [status-im.utils.datetime :as time] [status-im.utils.platform :refer [platform-specific]] [status-im.components.invertible-scroll-view :refer [invertible-scroll-view]] - [status-im.components.toolbar.view :refer [toolbar]] + [status-im.components.toolbar-new.view :refer [toolbar]] [status-im.chat.views.toolbar-content :refer [toolbar-content-view]] [status-im.chat.views.message.message :refer [chat-message]] [status-im.chat.views.message.datemark :refer [chat-datemark]] @@ -116,7 +116,6 @@ [status-bar] [toolbar {:hide-nav? (or (empty? accounts) show-actions? creating?) :custom-content [toolbar-content-view] - :style (get-in platform-specific [:component-styles :toolbar]) :custom-action [toolbar-action]}] [add-contact-bar]]) diff --git a/src/status_im/chat/styles/screen.cljs b/src/status_im/chat/styles/screen.cljs index b8b761581b..cb096a0fe0 100644 --- a/src/status_im/chat/styles/screen.cljs +++ b/src/status_im/chat/styles/screen.cljs @@ -46,10 +46,12 @@ (defnstyle chat-name-view [show-actions] {:flex 1 - :margin-left (if show-actions 16 0) :justify-content :center - :android {:align-items :flex-start} - :ios {:align-items :center}}) + :android {:align-items :flex-start + :margin-left (if show-actions 56 32) + :padding-bottom 6} + :ios {:align-items :center + :margin-left (if show-actions 40 16)}}) (def chat-name-text {:color color-gray6 diff --git a/src/status_im/chats_list/screen.cljs b/src/status_im/chats_list/screen.cljs index f65eb93b86..68bcb24814 100644 --- a/src/status_im/chats_list/screen.cljs +++ b/src/status_im/chats_list/screen.cljs @@ -53,7 +53,8 @@ (defn toolbar-edit [] [toolbar {:nav-action (act/back #(dispatch [:set-in [:chat-list-ui-props :edit?] false])) - :title (label :t/edit-chats)}]) + :title (label :t/edit-chats) + :actions [{:image :blank}]}]) (defview toolbar-search [] [search-text [:get-in [:toolbar-search :text]]] diff --git a/src/status_im/components/chat_icon/screen.cljs b/src/status_im/components/chat_icon/screen.cljs index 6e6a6f43b9..42aba3f83c 100644 --- a/src/status_im/components/chat_icon/screen.cljs +++ b/src/status_im/components/chat_icon/screen.cljs @@ -52,14 +52,14 @@ [view pending-outer-circle [view pending-inner-circle]]])) -(defview chat-icon-view [chat-id group-chat name online styles] +(defview chat-icon-view [chat-id group-chat name online styles & [hide-dapp?]] [photo-path [:chat-photo chat-id] dapp? [:get-in [:contacts chat-id :dapp?]]] [view (:container styles) (if-not (s/blank? photo-path) [chat-icon photo-path styles] [default-chat-icon name styles]) - (when dapp? + (when (and dapp? (not hide-dapp?)) [dapp-badge styles]) [pending-contact-badge chat-id styles]]) @@ -81,17 +81,14 @@ (defn chat-icon-view-action [chat-id group-chat name color online] ^{:key chat-id} [chat-icon-view chat-id group-chat name online - {:container st/container + {:container st/container-chat-list :online-view-wrapper st/online-view-wrapper :online-view st/online-view :online-dot-left st/online-dot-left :online-dot-right st/online-dot-right - :pending-wrapper st/pending-wrapper - :pending-outer-circle st/pending-outer-circle - :pending-inner-circle st/pending-inner-circle - :size 36 - :chat-icon st/chat-icon-view-action - :default-chat-icon (st/default-chat-icon-view-action color) + :size 40 + :chat-icon st/chat-icon-chat-list + :default-chat-icon (st/default-chat-icon-chat-list default-chat-color) :default-chat-icon-text st/default-chat-icon-text}]) (defn chat-icon-view-menu-item [chat-id group-chat name color online] @@ -108,7 +105,8 @@ :size 24 :chat-icon st/chat-icon-menu-item :default-chat-icon (st/default-chat-icon-view-action color) - :default-chat-icon-text st/default-chat-icon-text}]) + :default-chat-icon-text st/default-chat-icon-text} + true]) (defn chat-icon-message-status [chat-id group-chat name color online] ^{:key chat-id} diff --git a/src/status_im/components/chat_icon/styles.cljs b/src/status_im/components/chat_icon/styles.cljs index efa2efdef6..0faf00a594 100644 --- a/src/status_im/components/chat_icon/styles.cljs +++ b/src/status_im/components/chat_icon/styles.cljs @@ -177,8 +177,8 @@ :height 40}) (def container-menu-item - {:width 32 - :height 32}) + {:width 24 + :height 24}) (def container-profile {:width 72 diff --git a/src/status_im/components/toolbar_new/styles.cljs b/src/status_im/components/toolbar_new/styles.cljs index ebff89fd22..a42e8ad596 100644 --- a/src/status_im/components/toolbar_new/styles.cljs +++ b/src/status_im/components/toolbar_new/styles.cljs @@ -22,27 +22,29 @@ {:backgroundColor (or background-color toolbar-background1) :elevation 2}) -(def toolbar - (merge {:flex-direction :row} - (get-in p/platform-specific [:component-styles :toolbar-new]))) +(defstyle toolbar + {:flex-direction :row + :align-items :center + :android {:height 55} + :ios {:height 56}}) (defnstyle toolbar-nav-actions-container [actions] {:flex-direction :row + :margin-left 16 :ios {:width (when (and actions (pos? (count actions))) (-> (+ toolbar-icon-width toolbar-icon-spacing) (* (count actions))))}}) -(def toolbar-title-container - (merge (get-in p/platform-specific [:component-styles :toolbar-title-container]) - {:flex 1 - :align-self :stretch})) +(defstyle toolbar-title-container + {:flex 1 + :android {:padding-left 30} + :ios {:align-items :center}}) (defstyle toolbar-title-text {:color text1-color :letter-spacing -0.2 - :font-size 17 - :ios {:padding-top 2}}) + :font-size 17}) (def toolbar-border-container (get-in p/platform-specific [:component-styles :toolbar-border-container])) @@ -52,6 +54,7 @@ (defn toolbar-actions-container [actions-count custom] (merge {:flex-direction :row} + (when-not custom {:margin-right 16}) (when (and (zero? actions-count) (not custom)) {:width (+ toolbar-icon-width toolbar-icon-spacing)}))) @@ -65,21 +68,23 @@ (def toolbar-with-search {:background-color toolbar-background1}) -(def toolbar-with-search-content - (merge (get-in p/platform-specific [:component-styles :toolbar-with-search-content]) - {:flex 1})) - -(def toolbar-search-input - (merge {:line-height 24 - :height 24 - :font-size 17 - :padding-top 0 - :padding-left 0 - :padding-bottom 0 - :text-align-vertical :center - :color color-black} - (get-in p/platform-specific [:component-styles :toolbar-search-input]))) +(defstyle toolbar-with-search-content + {:flex 1 + :android {:padding-left 30} + :ios {:align-items :center}}) +(defstyle toolbar-search-input + {:line-height 24 + :height 24 + :font-size 17 + :padding-top 0 + :padding-left 0 + :padding-bottom 0 + :text-align-vertical :center + :color color-black + :ios {:padding-left 8 + :padding-top 2 + :letter-spacing -0.2}}) (def action-default {:width 24 diff --git a/src/status_im/ios/platform.cljs b/src/status_im/ios/platform.cljs index 284498a2d8..299c2ff720 100644 --- a/src/status_im/ios/platform.cljs +++ b/src/status_im/ios/platform.cljs @@ -16,14 +16,6 @@ :modal {:height 20 :bar-style "light-content" :color "#2f3031"}} - :toolbar {:border-bottom-color styles/color-gray3 - :border-bottom-width 0.5} - :toolbar-new {:height 56 - :padding-top 18 - :padding-left 16 - :padding-right 16} - :toolbar-title-container {:align-items :center} - :toolbar-with-search-content {:align-items :center} :sized-text {:margin-top -5 :additional-height 5} :actions-list-view {:border-bottom-color styles/color-gray3 @@ -65,9 +57,6 @@ :bottom-gradient {:height 1} :input-label {:left 0} :input-error-text {:margin-left 0} - :toolbar-search-input {:padding-left 8 - :padding-top 2 - :letter-spacing -0.2} :toolbar-nav-action {:width 46 :height 56 :align-items :center @@ -120,5 +109,4 @@ :group-block-shadows? false :discover {:uppercase-subtitles? true} :public-group-icon-container {:margin-top 2} - :private-group-icon-container {:margin-top 2} - :public-group-chat-hash-style {:top 6 :left 3}}) + :private-group-icon-container {:margin-top 2}}) diff --git a/src/status_im/new_group/styles.cljs b/src/status_im/new_group/styles.cljs index 6f5a391313..11ef92ccd4 100644 --- a/src/status_im/new_group/styles.cljs +++ b/src/status_im/new_group/styles.cljs @@ -33,7 +33,11 @@ :android {:padding-top 16}}) (def chat-name-container - {:margin-top 10}) + {:padding-left 16 + :margin-top 10}) + +(def group-name-container + {:margin-top 10}) (def add-button-container {:margin-left 16}) @@ -44,20 +48,22 @@ :letter-spacing -0.2 :color text1-color}) -(def group-chat-topic-input - {:font-size 14 - :color text1-color - :padding-left 13}) +(defstyle group-chat-topic-input + {:font-size 14 + :line-height 16 + :color text1-color + :padding-left 13 + :ios {:padding-bottom 0}}) + +(defstyle topic-hash-style + {:width 10 + :position :absolute + :android {:top 8 :left 3} + :ios {:top 6 :left 3}}) (def topic-hash (merge group-chat-name-input - {:width 10 - :height 16 - :position :absolute} - (get-in platform-specific [:public-group-chat-hash-style]))) - -(def group-chat-focus-line-height - (get-in platform-specific [:component-styles :text-field-focus-line-height])) + topic-hash-style)) (def group-chat-name-wrapper {:padding-top 0 diff --git a/src/status_im/new_group/views/group.cljs b/src/status_im/new_group/views/group.cljs index af644b3047..27e08dc52d 100644 --- a/src/status_im/new_group/views/group.cljs +++ b/src/status_im/new_group/views/group.cljs @@ -30,7 +30,7 @@ (defview group-name-view [] [new-group-name [:get :new-chat-name]] - [view st/chat-name-container + [view st/group-name-container [text-input-with-label {:auto-focus true :label (label :t/name) diff --git a/src/status_im/profile/qr_code/screen.cljs b/src/status_im/profile/qr_code/screen.cljs index d055dd8de3..6a75c9e42e 100644 --- a/src/status_im/profile/qr_code/screen.cljs +++ b/src/status_im/profile/qr_code/screen.cljs @@ -3,6 +3,7 @@ (:require [status-im.components.react :refer [view text image + icon touchable-highlight get-dimensions]] [status-im.components.status-bar :refer [status-bar]] @@ -31,8 +32,7 @@ [view st/online-container [touchable-highlight {:onPress #(dispatch [:navigate-back])} [view st/online-image-container - [image {:source {:uri :icon_close_white} - :style icon-close}]]]]]] + [icon :close_white]]]]]] [view {:style st/qr-code :on-layout #(let [layout (.. % -nativeEvent -layout)] (dispatch [:set-in [:qr-modal :dimensions] {:width (.-width layout) diff --git a/src/status_im/transactions/styles/screens.cljs b/src/status_im/transactions/styles/screens.cljs index f0b0a42bfc..716b342e42 100644 --- a/src/status_im/transactions/styles/screens.cljs +++ b/src/status_im/transactions/styles/screens.cljs @@ -12,11 +12,9 @@ (defstyle toolbar-title-container {:flex 1 :flex-direction :row - :align-self :stretch :padding-left 30 :ios {:align-items :center - :justify-content :center - :padding-bottom 16}}) + :justify-content :center}}) (def toolbar-title-text {:color common/color-white