diff --git a/src/status_im/android/platform.cljs b/src/status_im/android/platform.cljs index 3ca9148958..83b170f919 100644 --- a/src/status_im/android/platform.cljs +++ b/src/status_im/android/platform.cljs @@ -19,7 +19,7 @@ :bar-style "light-content" :color styles/color-black}} :toolbar-new {:height 55 - :padding-top 18 + :padding-top 15 :padding-left 16 :padding-right 16} :toolbar-title-container {:padding-left 30} diff --git a/src/status_im/components/context_menu.cljs b/src/status_im/components/context_menu.cljs index f962548747..aea5ccbf64 100644 --- a/src/status_im/components/context_menu.cljs +++ b/src/status_im/components/context_menu.cljs @@ -34,7 +34,7 @@ (handler))))}) nil) -(defn context-menu [trigger options] +(defn context-menu [trigger options & [customStyles]] (if ios? [touchable-highlight {:on-press #(open-ios-menu options)} @@ -42,7 +42,7 @@ trigger]] [menu {:onSelect #(when % (do (%) nil))} [menu-trigger trigger] - [menu-options st/context-menu-options + [menu-options (st/context-menu-options customStyles) (for [{:keys [style value destructive?] :as option} options] ^{:key option} [menu-option {:value value} diff --git a/src/status_im/components/styles.cljs b/src/status_im/components/styles.cljs index 861a304d78..84844787bb 100644 --- a/src/status_im/components/styles.cljs +++ b/src/status_im/components/styles.cljs @@ -98,16 +98,20 @@ :align-items :center :background-color color-light-blue}) -(def context-menu-options - {:customStyles {:optionsContainer {:elevation 2 - :margin-top 30 - :padding-top 8 - :width 164 - :padding-bottom 8} - :optionWrapper {:padding-left 16 - :padding-right 16 - :justify-content :center - :height 48}}}) +(defn context-menu-options [custom-styles] + {:customStyles {:optionsContainer + (merge {:elevation 2 + :margin-top 30 + :padding-top 8 + :width 164 + :padding-bottom 8} + (:optionsContainer custom-styles)) + :optionWrapper + (merge {:padding-left 16 + :padding-right 16 + :justify-content :center + :height 48} + (:optionWrapper custom-styles))}}) (defn context-menu-text [destructive?] {:font-size 15 diff --git a/src/status_im/components/toolbar_new/styles.cljs b/src/status_im/components/toolbar_new/styles.cljs index c5a46bb26c..ebff89fd22 100644 --- a/src/status_im/components/toolbar_new/styles.cljs +++ b/src/status_im/components/toolbar_new/styles.cljs @@ -1,9 +1,10 @@ (ns status-im.components.toolbar-new.styles - (:require-macros [status-im.utils.styles :refer [defnstyle]]) + (:require-macros [status-im.utils.styles :refer [defstyle defnstyle]]) (:require [status-im.components.styles :refer [text1-color color-white color-light-gray color-gray5 + color-gray4 color-blue color-black]] [status-im.utils.platform :as p])) @@ -37,10 +38,11 @@ {:flex 1 :align-self :stretch})) -(def toolbar-title-text +(defstyle toolbar-title-text {:color text1-color :letter-spacing -0.2 - :font-size 17}) + :font-size 17 + :ios {:padding-top 2}}) (def toolbar-border-container (get-in p/platform-specific [:component-styles :toolbar-border-container])) @@ -68,13 +70,16 @@ {:flex 1})) (def toolbar-search-input - (merge (get-in p/platform-specific [:component-styles :toolbar-search-input]) - {:flex 1 - :padding-bottom 10 - :font-size 17 - :padding-top 0 - :align-self :stretch - :color color-black})) + (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]))) + (def action-default {:width 24 diff --git a/src/status_im/components/toolbar_new/view.cljs b/src/status_im/components/toolbar_new/view.cljs index 7e63af229c..400af551aa 100644 --- a/src/status_im/components/toolbar_new/view.cljs +++ b/src/status_im/components/toolbar_new/view.cljs @@ -8,7 +8,8 @@ touchable-highlight]] [status-im.components.sync-state.gradient :refer [sync-state-gradient-view]] [status-im.components.styles :refer [icon-default - icon-search]] + icon-search + color-gray4]] [status-im.components.context-menu :refer [context-menu]] [status-im.components.toolbar-new.actions :as act] [status-im.components.toolbar-new.styles :as st] @@ -83,13 +84,14 @@ [view st/toolbar-with-search-content (if show-search? [text-input - {:style st/toolbar-search-input - :ref #(reset! search-text-input %) - :auto-focus true - :placeholder search-placeholder - :on-change-text #(dispatch [:set-in [:toolbar-search :text] %]) - :on-submit-editing (when on-search-submit - #(toolbar-search-submit on-search-submit))}] + {:style st/toolbar-search-input + :ref #(reset! search-text-input %) + :auto-focus true + :placeholder search-placeholder + :placeholder-text-color color-gray4 + :on-change-text #(dispatch [:set-in [:toolbar-search :text] %]) + :on-submit-editing (when on-search-submit + #(toolbar-search-submit on-search-submit))}] (or custom-title [view [text {:style st/toolbar-title-text diff --git a/src/status_im/contacts/screen.cljs b/src/status_im/contacts/screen.cljs index eb19e92e86..8fc899fc4b 100644 --- a/src/status_im/contacts/screen.cljs +++ b/src/status_im/contacts/screen.cljs @@ -92,9 +92,9 @@ :extended? edit? :on-click (when-not edit? click-handler) :extend-options (when group - [{:value #(dispatch [:hide-contact contact]) - :text (label :t/delete-contact) - :style st/delete-contact-text} + [{:value #(dispatch [:hide-contact contact]) + :text (label :t/delete-contact) + :destructive? true} {:value #(dispatch [:remove-contact-from-group (:whisper-identity contact) (:group-id group)]) diff --git a/src/status_im/contacts/styles.cljs b/src/status_im/contacts/styles.cljs index 4dc1c71658..09a6549d43 100644 --- a/src/status_im/contacts/styles.cljs +++ b/src/status_im/contacts/styles.cljs @@ -193,6 +193,3 @@ :background-color color-white :align-items :center :justify-content :center}) - -(def delete-contact-text - {:color color-light-red}) diff --git a/src/status_im/contacts/views/contact.cljs b/src/status_im/contacts/views/contact.cljs index 7f319d9129..13ddbe267b 100644 --- a/src/status_im/contacts/views/contact.cljs +++ b/src/status_im/contacts/views/contact.cljs @@ -18,8 +18,9 @@ [text {:style st/letter-text} letter])]) (defn options-btn [contact more-options] - (let [options [{:value #(dispatch [:hide-contact contact]) :text (label :t/delete-contact) - :style st/delete-contact-text}]] + (let [options [{:value #(dispatch [:hide-contact contact]) + :text (label :t/delete-contact) + :destructive? true}]] [view st/more-btn [context-menu [icon :options_gray] diff --git a/src/status_im/contacts/views/contact_list.cljs b/src/status_im/contacts/views/contact_list.cljs index 78bad154e6..9883d5b500 100644 --- a/src/status_im/contacts/views/contact_list.cljs +++ b/src/status_im/contacts/views/contact_list.cljs @@ -28,8 +28,9 @@ [contact-view {:contact row :extended? edit? :extend-options (when group - [{:value #(dispatch [:hide-contact row]) - :text (label :t/delete-contact)} + [{:value #(dispatch [:hide-contact row]) + :text (label :t/delete-contact) + :destructive? true} {:value #(dispatch [:remove-contact-from-group (:whisper-identity row) (:group-id group)]) diff --git a/src/status_im/ios/platform.cljs b/src/status_im/ios/platform.cljs index 8f49736a73..6de4eb77c5 100644 --- a/src/status_im/ios/platform.cljs +++ b/src/status_im/ios/platform.cljs @@ -19,7 +19,7 @@ :toolbar {:border-bottom-color styles/color-gray3 :border-bottom-width 0.5} :toolbar-new {:height 56 - :padding-top 20 + :padding-top 18 :padding-left 16 :padding-right 16} :toolbar-title-container {:align-items :center} @@ -167,7 +167,9 @@ :bottom-gradient {:height 1} :input-label {:left 0} :input-error-text {:margin-left 0} - :toolbar-search-input {:padding-left 10} + :toolbar-search-input {:padding-left 8 + :padding-top 2 + :letter-spacing -0.2} :toolbar-nav-action {:width 46 :height 56 :align-items :center diff --git a/src/status_im/profile/edit/screen.cljs b/src/status_im/profile/edit/screen.cljs index fe4aa60f45..5e1c242cfe 100644 --- a/src/status_im/profile/edit/screen.cljs +++ b/src/status_im/profile/edit/screen.cljs @@ -48,7 +48,8 @@ [context-menu [my-profile-icon {:account contact :edit? true}] - profile-icon-options]] + profile-icon-options + st/context-menu-custom-styles]] [view st/edit-profile-name-container [text {:style st/edit-name-title} (label :t/name)] diff --git a/src/status_im/profile/screen.cljs b/src/status_im/profile/screen.cljs index 12d3bfd11b..7a44d65171 100644 --- a/src/status_im/profile/screen.cljs +++ b/src/status_im/profile/screen.cljs @@ -80,15 +80,17 @@ :arrow_right_blue #(dispatch [:open-chat-with-the-send-transaction chat-id])]]) -(defn profile-info-item [label value options text-mode] +(defn profile-info-item [{:keys [label value options text-mode empty-value?]}] [view st/profile-setting-item - [view st/profile-setting-text-container + [view (st/profile-setting-text-container options) [text {:style st/profile-setting-title} label] [view st/profile-setting-spacing] - [text {:style st/profile-setting-text - :numberOfLines 1 - :ellipsizeMode text-mode} + [text {:style (if empty-value? + st/profile-setting-text-empty + st/profile-setting-text) + :number-of-lines 1 + :ellipsizeMode text-mode} value]] (when options [context-menu @@ -101,23 +103,23 @@ (defn profile-info-address-item [{:keys [address] :as contact}] [profile-info-item - (label :t/address) - address - (into [] - (concat [{:value (show-qr contact :address) - :text (label :t/show-qr)}] - (share-options address))) - :middle]) + {:label (label :t/address) + :value address + :options (into [] + (concat [{:value (show-qr contact :address) + :text (label :t/show-qr)}] + (share-options address))) + :text-mode :middle}]) (defn profile-info-public-key-item [public-key contact] [profile-info-item - (label :t/public-key) - public-key - (into [] - (concat [{:value (show-qr contact :public-key) - :text (label :t/show-qr)}] - (share-options public-key))) - :middle]) + {:label (label :t/public-key) + :value public-key + :options (into [] + (concat [{:value (show-qr contact :public-key) + :text (label :t/show-qr)}] + (share-options public-key))) + :text-mode :middle}]) (defn info-item-separator [] [separator st/info-item-separator]) @@ -135,25 +137,44 @@ ^{:key (str "item-" i)} (str status " ")))) +(defn profile-info-status-item [status & [options]] + (let [status-empty? (= "" status) + status-text (if status-empty? + (label :t/profile-no-status) + (colorize-status-hashtags status))] + [profile-info-item {:label (label :t/status) + :value status-text + :options options + :empty-value? status-empty?}])) + +(defn profile-info-phone-item [phone & [options]] + (let [phone-empty? (or (nil? phone) (= "" phone)) + phone-text (if phone-empty? + (label :t/not-specified) + phone)] + [profile-info-item {:label (label :t/phone-number) + :value phone-text + :options options + :empty-value? phone-empty?}])) + (defn profile-info [{:keys [whisper-identity :whisper-identity status :status phone :phone] :as contact}] - [view - [profile-info-item (label :t/status) (colorize-status-hashtags status)] - [info-item-separator] - [profile-info-address-item contact] - [info-item-separator] - [profile-info-public-key-item whisper-identity contact] - [info-item-separator] - [profile-info-item (label :t/phone-number) phone]]) + [view + [profile-info-status-item status] + [info-item-separator] + [profile-info-address-item contact] + [info-item-separator] + [profile-info-public-key-item whisper-identity contact] + [info-item-separator] + [profile-info-phone-item phone]]) (defn my-profile-info [{:keys [public-key :public-key status :status phone :phone] :as contact}] - [view - [profile-info-item - (label :t/status) - (colorize-status-hashtags status) + [view st/my-profile-info-container + [profile-info-status-item + status [{:value #(dispatch [:open-edit-my-profile]) :text (label :t/edit)}]] [info-item-separator] @@ -161,8 +182,10 @@ [info-item-separator] [profile-info-public-key-item public-key contact] [info-item-separator] - [profile-info-item (label :t/phone-number) phone [{:value #(dispatch [:phone-number-change-requested]) - :text (label :t/edit)}]]]) + [profile-info-phone-item + phone + [{:value #(dispatch [:phone-number-change-requested]) + :text (label :t/edit)}]]]) (defview my-profile [] [current-account [:get-current-account]] diff --git a/src/status_im/profile/styles.cljs b/src/status_im/profile/styles.cljs index 14a5754e95..8f3cf36a00 100644 --- a/src/status_im/profile/styles.cljs +++ b/src/status_im/profile/styles.cljs @@ -38,6 +38,10 @@ {:android {:padding-top 8 :padding-bottom 8}}) +(defstyle my-profile-info-container + {:android {:padding-top 8 + :padding-bottom 8}}) + (def profile-bage (merge (ps-profile :profile-bage) {:align-items :center})) @@ -48,6 +52,9 @@ :padding-left 24 :padding-top 25}) +(def context-menu-custom-styles + {:optionsContainer {:margin-top 78}}) + (def profile-name-container {:margin-top 12}) @@ -80,9 +87,9 @@ {:flex-direction :row :align-items :center})) -(def profile-setting-text-container +(defn profile-setting-text-container [options] {:flex 1 - :padding-right 20}) + :padding-right (if options 16 40)}) (def profile-setting-title (merge (ps-profile :profile-setting-title) @@ -91,6 +98,10 @@ (def profile-setting-text (ps-profile :profile-setting-text)) +(def profile-setting-text-empty + (merge profile-setting-text + {:color color-gray4})) + (def profile-setting-spacing (ps-profile :profile-setting-spacing))