diff --git a/src/status_im/chat/styles/screen.cljs b/src/status_im/chat/styles/screen.cljs index 68aa47ca7f..7597d6be9d 100644 --- a/src/status_im/chat/styles/screen.cljs +++ b/src/status_im/chat/styles/screen.cljs @@ -11,8 +11,10 @@ :background-color component.styles/chat-background}) (def toolbar-container - {:flex 1 - :flex-direction :row}) + {:flex 1 + :flex-direction :row + :align-items :stretch + :margin-left 3}) (def messages-container {:flex 1 @@ -46,9 +48,10 @@ {:flex-direction :row :flex 1}) -(defnstyle chat-name-view [has-subtitle?] - {:flex 1 - :margin-top (if has-subtitle? 0 6)}) +(def chat-name-view + {:flex 1 + :justify-content :center + :margin-bottom 2}) (def chat-name-text {:color component.styles/color-gray6 @@ -64,7 +67,7 @@ {:width 14 :height 8}) -(defstyle members +(defstyle toolbar-subtitle {:color component.styles/text4-color :ios {:font-size 14 :margin-top 4} diff --git a/src/status_im/chat/views/toolbar_content.cljs b/src/status_im/chat/views/toolbar_content.cljs index d017d75960..0dba4bd444 100644 --- a/src/status_im/chat/views/toolbar_content.cljs +++ b/src/status_im/chat/views/toolbar_content.cljs @@ -11,6 +11,7 @@ [status-im.utils.platform :refer [platform-specific]] [status-im.utils.gfycat.core :refer [generate-gfy]] [status-im.constants :refer [console-chat-id]] + [status-im.ui.components.chat-icon.screen :as chat-icon.screen] [status-im.ui.components.common.common :as components.common] [status-im.ui.components.styles :as common.styles])) @@ -51,16 +52,17 @@ [last-activity {:sync-state sync-state}] (if public? [react/view {:flex-direction :row} - [react/text (i18n/label :t/public-group-status)]] + [react/text {:style st/toolbar-subtitle} + (i18n/label :t/public-group-status)]] [react/view {:flex-direction :row} - [react/text {:style st/members} + [react/text {:style st/toolbar-subtitle} (if public? (i18n/label :t/public-group-status) (let [cnt (inc (count contacts))] (i18n/label-pluralize cnt :t/members-active)))]]))) (defview toolbar-content-view [] - (letsubs [{:keys [group-chat name contacts + (letsubs [{:keys [group-chat name color online contacts public? chat-id]} [:get-current-chat] show-actions? [:get-current-chat-ui-prop :show-actions?] accounts [:get-accounts] @@ -68,10 +70,9 @@ sync-state [:sync-state]] (let [has-subtitle? (or group-chat (not= :done sync-state))] [react/view {:style st/toolbar-container} - (when-not group-chat - [react/view {:margin-right 5} - [photos/member-photo chat-id]]) - [react/view (st/chat-name-view has-subtitle?) + [react/view {:margin-right 8} + [chat-icon.screen/chat-icon-view-toolbar chat-id group-chat name color online]] + [react/view {:style st/chat-name-view} (let [chat-name (if (string/blank? name) (generate-gfy chat-id) (or (i18n/get-contact-translated chat-id :name name) diff --git a/src/status_im/ui/components/chat_icon/screen.cljs b/src/status_im/ui/components/chat_icon/screen.cljs index babe4fdfbd..844022096a 100644 --- a/src/status_im/ui/components/chat_icon/screen.cljs +++ b/src/status_im/ui/components/chat_icon/screen.cljs @@ -49,6 +49,21 @@ [dapp-badge styles]) [pending-contact-badge chat-id styles]])) +(defn chat-icon-view-toolbar [chat-id group-chat name color online] + [chat-icon-view chat-id group-chat name online + {:container styles/container-chat-list + :online-view-wrapper styles/online-view-wrapper + :online-view styles/online-view + :online-dot-left styles/online-dot-left + :online-dot-right styles/online-dot-right + :pending-wrapper styles/pending-wrapper + :pending-outer-circle styles/pending-outer-circle + :pending-inner-circle styles/pending-inner-circle + :size 40 + :chat-icon styles/chat-icon-chat-list + :default-chat-icon (styles/default-chat-icon-chat-list color) + :default-chat-icon-text styles/default-chat-icon-text}]) + (defn chat-icon-view-chat-list [chat-id group-chat name color online & [hide-dapp?]] [chat-icon-view chat-id group-chat name online {:container styles/container-chat-list diff --git a/src/status_im/ui/components/toolbar/styles.cljs b/src/status_im/ui/components/toolbar/styles.cljs index 1a2001d58b..263ddf39d3 100644 --- a/src/status_im/ui/components/toolbar/styles.cljs +++ b/src/status_im/ui/components/toolbar/styles.cljs @@ -61,7 +61,7 @@ (def nav-item-button {:padding-vertical 16 - :padding-horizontal 12}) + :padding-horizontal 13}) (defstyle item {:ios {:padding-horizontal 12 @@ -90,4 +90,4 @@ (def counter-container {:position :absolute :top 19 - :right 2}) + :right 0})