diff --git a/components/src/status_im/react_native/resources.cljs b/components/src/status_im/react_native/resources.cljs index fcb986520b..8cc253a48a 100644 --- a/components/src/status_im/react_native/resources.cljs +++ b/components/src/status_im/react_native/resources.cljs @@ -32,7 +32,8 @@ :phone-nfc-on (js/require "./resources/images/ui/phone-nfc-on.png") :phone-nfc-off (js/require "./resources/images/ui/phone-nfc-off.png") :dapp-store (js/require "./resources/images/ui/dapp-store.png") - :ens-header (js/require "./resources/images/ui/ens-header.png")}) + :ens-header (js/require "./resources/images/ui/ens-header.png") + :new-chat-header (js/require "./resources/images/ui/new-chat-header.png")}) (def loaded-images (atom {})) diff --git a/resources/default_public_chats.json b/resources/default_public_chats.json deleted file mode 100644 index 43ff9944ad..0000000000 --- a/resources/default_public_chats.json +++ /dev/null @@ -1 +0,0 @@ -["status", "status-chinese", "status-japanese", "status-korean", "status-russian", "status-spanish", "status-farsi", "cryptocurrency", "cryptostrikers", "dapps", "ethereum", "cryptolife", "introductions"] diff --git a/resources/images/ui/new-chat-header.png b/resources/images/ui/new-chat-header.png new file mode 100755 index 0000000000..47197d44a4 Binary files /dev/null and b/resources/images/ui/new-chat-header.png differ diff --git a/resources/images/ui/new-chat-header@2x.png b/resources/images/ui/new-chat-header@2x.png new file mode 100755 index 0000000000..44abae5200 Binary files /dev/null and b/resources/images/ui/new-chat-header@2x.png differ diff --git a/resources/images/ui/new-chat-header@3x.png b/resources/images/ui/new-chat-header@3x.png new file mode 100755 index 0000000000..582d51c1d4 Binary files /dev/null and b/resources/images/ui/new-chat-header@3x.png differ diff --git a/src/status_im/ui/screens/add_new/new_chat/views.cljs b/src/status_im/ui/screens/add_new/new_chat/views.cljs index 962026ca5e..fa7541b1fb 100644 --- a/src/status_im/ui/screens/add_new/new_chat/views.cljs +++ b/src/status_im/ui/screens/add_new/new_chat/views.cljs @@ -3,7 +3,6 @@ (:require [re-frame.core :as re-frame] [status-im.i18n :as i18n] [status-im.ui.components.colors :as colors] - [status-im.ui.components.contact.contact :as contact-view] [status-im.ui.components.icons.vector-icons :as vector-icons] [status-im.ui.components.list.views :as list] [status-im.ui.components.react :as react] @@ -12,12 +11,16 @@ [status-im.ui.screens.add-new.styles :as add-new.styles] [status-im.ui.screens.add-new.new-chat.styles :as styles] [status-im.utils.platform :as platform] - [reagent.core :as reagent])) + [reagent.core :as reagent] + [status-im.ui.components.list-item.views :as list-item] + [status-im.ui.components.chat-icon.screen :as chat-icon] + [status-im.multiaccounts.core :as multiaccounts])) (defn- render-row [row _ _] - [contact-view/contact-view {:contact row - :on-press #(re-frame/dispatch [:chat.ui/start-chat (:public-key %) {:navigation-reset? true}]) - :show-forward? true}]) + [list-item/list-item {:title (multiaccounts/displayed-name row) + :icon [chat-icon/contact-icon-contacts-tab row] + :accessories [:chevron] + :on-press #(re-frame/dispatch [:chat.ui/start-chat (:public-key row) {:navigation-reset? true}])}]) ;;TODO workaround for https://github.com/facebook/react-native/issues/23653 (https://github.com/status-im/status-react/issues/8548) (def tw (reagent/atom "95%")) @@ -26,9 +29,9 @@ (views/letsubs [contacts [:contacts/active] new-identity [:contacts/new-identity] error-message [:new-identity-error]] - [react/keyboard-avoiding-view {:style {:flex 1}} + [react/view {:style {:flex 1}} [status-bar/status-bar] - [toolbar.view/simple-toolbar (i18n/label :t/new-chat)] + [toolbar.view/simple-toolbar (i18n/label :t/new-chat) true] [react/view add-new.styles/new-chat-container [react/view add-new.styles/new-chat-input-container [react/text-input {:ref (fn [v] (js/setTimeout #(reset! tw (if v "100%" "95%")) 100)) @@ -50,15 +53,14 @@ :style add-new.styles/button-container :accessibility-label :scan-contact-code-button} [react/view - [vector-icons/icon :main-icons/qr {:color colors/blue}]]])] - [react/text {:style styles/error-message} - error-message] + [vector-icons/icon :main-icons/camera {:color colors/blue}]]])] + (when error-message + [react/text {:style styles/error-message} + error-message]) (when (seq contacts) - [react/text {:style styles/list-title} - (i18n/label :t/contacts)]) + [list-item/list-item {:title :t/contacts :type :section-header}]) [list/flat-list {:data contacts :key-fn :address :render-fn render-row - :default-separator? true :enableEmptySections true :keyboardShouldPersistTaps :always}]])) diff --git a/src/status_im/ui/screens/add_new/new_public_chat/styles.cljs b/src/status_im/ui/screens/add_new/new_public_chat/styles.cljs index e375b24768..16dcbc7af4 100644 --- a/src/status_im/ui/screens/add_new/new_public_chat/styles.cljs +++ b/src/status_im/ui/screens/add_new/new_public_chat/styles.cljs @@ -7,7 +7,11 @@ (def topic-hash (merge group-chat-name-input - {:margin-left 14})) + {:margin-left 16 + :margin-right 10 + :font-size 24 + :color colors/gray + :font-weight "500"})) (def group-container {:flex 1 diff --git a/src/status_im/ui/screens/add_new/new_public_chat/view.cljs b/src/status_im/ui/screens/add_new/new_public_chat/view.cljs index f0232086b4..6fcc85f257 100644 --- a/src/status_im/ui/screens/add_new/new_public_chat/view.cljs +++ b/src/status_im/ui/screens/add_new/new_public_chat/view.cljs @@ -1,8 +1,6 @@ (ns status-im.ui.screens.add-new.new-public-chat.view - (:require [cljs.spec.alpha :as spec] - [re-frame.core :as re-frame] + (:require [re-frame.core :as re-frame] [status-im.i18n :as i18n] - [status-im.ui.components.list.views :as list] [status-im.ui.components.react :as react] [status-im.ui.components.status-bar.view :as status-bar] [status-im.ui.components.styles :as common.styles] @@ -13,7 +11,9 @@ [status-im.ui.screens.add-new.new-public-chat.styles :as styles] [status-im.ui.screens.add-new.styles :as add-new.styles] status-im.utils.db - [status-im.utils.types :as types]) + [status-im.react-native.resources :as resources] + [status-im.ui.components.colors :as colors] + [status-im.i18n-resources :as i18n-resources]) (:require-macros [status-im.utils.slurp :refer [slurp]] [status-im.utils.views :as views])) @@ -24,7 +24,7 @@ (defn- chat-name-input [topic error] [react/view - [react/view (merge add-new.styles/input-container {:margin-top 8}) + [react/view add-new.styles/input-container [react/text {:style styles/topic-hash} "#"] [react/view common.styles/flex [text-input.view/text-input-with-label @@ -37,7 +37,7 @@ ;; Set default-value as otherwise it will ;; be erased in global `onWillBlur` handler :default-value topic - :placeholder nil + :placeholder "chat-name" :return-key-type :go :auto-correct false}]]] (when error @@ -49,40 +49,43 @@ (first topic)]]) (defn- render-topic [topic] + ^{:key topic} [react/touchable-highlight {:on-press #(start-chat topic) :accessibility-label :chat-item} - [react/view - [list/item - [public-chat-icon topic] - [list/item-primary-only - topic] - [list/item-icon {:icon :main-icons/next - :icon-opts {:color :gray}}]]]]) + [react/view {:padding-horizontal 4 :padding-vertical 8} + [react/view {:border-color colors/gray-lighter :border-radius 36 :border-width 1 :padding-horizontal 8 :padding-vertical 5} + [react/text {:style {:color colors/blue :typography :main-medium}} (str "#" topic)]]]]) -(def default-public-chats-json - (slurp "resources/default_public_chats.json")) +(def lang-names {"zh" "chinese" "ja" "japanese" "ko" "korean" "ru" "russian" "es" "spanish" "fa" "farsi"}) + +(defn get-language-topic [] + (let [lang (subs (name i18n-resources/default-device-language) 0 2) + lang-name (get lang-names lang)] + (when-not (= lang "en") + [(str "status-" (or lang-name lang))]))) (def default-public-chats - (memoize - (fn [] - (types/json->clj (default-public-chats-json))))) + (concat + ["introductions" "chitchat" "status"] + (get-language-topic) + ["crypto" "tech" "music" "movies" "support"])) (views/defview new-public-chat [] (views/letsubs [topic [:public-group-topic] error [:public-chat.new/topic-error-message]] - [react/keyboard-avoiding-view styles/group-container + [react/view {:style styles/group-container} [status-bar/status-bar] [toolbar/simple-toolbar - (i18n/label :t/public-chat)] - [react/view styles/chat-name-container - [react/text {:style styles/section-title} - (i18n/label :t/public-group-topic)] - [chat-name-input topic error]] - [react/view styles/chat-name-container - [react/text {:style styles/section-title} - (i18n/label :t/selected)]] - [list/flat-list {:data (default-public-chats) - :key-fn identity - :render-fn render-topic - :keyboard-should-persist-taps :always - :default-separator? true}]])) + (i18n/label :t/new-public-group-chat) + true] + [react/scroll-view {:style {:flex 1}} + [react/view {:padding-horizontal 16} + [react/view {:align-items :center :padding-vertical 12} + [react/image {:source (:new-chat-header resources/ui) + :style {:width 160 :height 160}}]] + [react/text {:style {:text-align :center :margin-bottom 32 :line-height 22}} + (i18n/label :t/public-chat-description)] + [chat-name-input topic error]] + [react/view {:flex-direction :row :flex-wrap :wrap :margin-top 24 :padding-horizontal 12} + (for [chat default-public-chats] + (render-topic chat))]]])) \ No newline at end of file diff --git a/src/status_im/ui/screens/add_new/styles.cljs b/src/status_im/ui/screens/add_new/styles.cljs index ce9966a98a..7e9dc07502 100644 --- a/src/status_im/ui/screens/add_new/styles.cljs +++ b/src/status_im/ui/screens/add_new/styles.cljs @@ -4,38 +4,31 @@ [status-im.utils.styles :as styles])) (def new-chat-container - {:flex-direction :row - :align-items :center}) + {:flex-direction :row + :padding-vertical 16 + :padding-left 16}) (def input-container - {:flex-direction :row - :align-items :center - :border-radius components.styles/border-radius - :height 52 - :background-color colors/gray-lighter - :margin-horizontal 14 - :margin-top 24}) + {:flex-direction :row + :align-items :center + :border-radius components.styles/border-radius + :height 52 + :background-color colors/gray-lighter}) (def new-chat-input-container (merge input-container - {:flex 1 - :margin-horizontal 0 - :margin-left 14})) + {:flex 1})) (def button-container {:justify-content :center :border-radius components.styles/border-radius - :height 52 - :background-color colors/gray-lighter - :padding-horizontal 15 - :margin-right 14 - :margin-left 3 - :margin-top 24}) + :padding-horizontal 16 + :height 52}) (styles/defn input [w] {:padding-horizontal 14 :width w :desktop {:height 30 - :width "100%"} + :width "100%"} :android {:padding 0}}) diff --git a/src/status_im/ui/screens/desktop/main/add_new/views.cljs b/src/status_im/ui/screens/desktop/main/add_new/views.cljs index 60a8f13d8d..9655c0b785 100644 --- a/src/status_im/ui/screens/desktop/main/add_new/views.cljs +++ b/src/status_im/ui/screens/desktop/main/add_new/views.cljs @@ -122,7 +122,7 @@ [react/scroll-view [react/view {:style styles/suggested-contacts} (doall - (for [topic (public-chat/default-public-chats)] + (for [topic public-chat/default-public-chats] ^{:key topic} [react/touchable-highlight {:on-press #(do (re-frame/dispatch [:set :public-group-topic nil]) diff --git a/src/status_im/ui/screens/routing/chat_stack.cljs b/src/status_im/ui/screens/routing/chat_stack.cljs index 7c461d8859..619b03bb44 100644 --- a/src/status_im/ui/screens/routing/chat_stack.cljs +++ b/src/status_im/ui/screens/routing/chat_stack.cljs @@ -7,14 +7,12 @@ :select-chat :profile :new - :new-chat :qr-scanner :take-picture :new-group :add-participants-toggle-list :contact-toggle-list :group-chat-profile - :new-public-chat :stickers :stickers-pack] :config {:initialRouteName :home diff --git a/src/status_im/ui/screens/routing/modals.cljs b/src/status_im/ui/screens/routing/modals.cljs index f2be9ea8b7..4aeb95cb68 100644 --- a/src/status_im/ui/screens/routing/modals.cljs +++ b/src/status_im/ui/screens/routing/modals.cljs @@ -9,4 +9,6 @@ :selection-modal-screen :wallet-transactions-filter :welcome - :keycard-welcome]) + :keycard-welcome + :new-chat + :new-public-chat]) diff --git a/src/status_im/ui/screens/routing/screens.cljs b/src/status_im/ui/screens/routing/screens.cljs index 43e2838ed3..23f0bcdb86 100644 --- a/src/status_im/ui/screens/routing/screens.cljs +++ b/src/status_im/ui/screens/routing/screens.cljs @@ -123,13 +123,13 @@ :select-chat chat/select-chat :profile profile.contact/profile :new add-new/add-new - :new-chat new-chat/new-chat + :new-chat [:modal new-chat/new-chat] :qr-scanner qr-scanner/qr-scanner :new-group group/new-group :add-participants-toggle-list group/add-participants-toggle-list :contact-toggle-list group/contact-toggle-list :group-chat-profile profile.group-chat/group-chat-profile - :new-public-chat new-public-chat/new-public-chat + :new-public-chat [:modal new-public-chat/new-public-chat] :open-dapp open-dapp/open-dapp :browser browser/browser :stickers stickers/packs diff --git a/translations/en.json b/translations/en.json index f29225cf90..de9c184de4 100644 --- a/translations/en.json +++ b/translations/en.json @@ -416,7 +416,7 @@ "ens-username-owned-continue": "Continuing will connect this username with your key.", "ens-username-taken": "Username already taken :(", "enter-12-words": "Enter the 12 words of your seed phrase, separated by single spaces", - "enter-contact-code": "Enter chat key or username", + "enter-contact-code": "Enter ENS username or chat key", "enter-ens-or-contact-code": "Enter ENS username or chat key", "enter-pair-code": "Enter your pairing code", "enter-pair-code-description": "Pairing code was displayed to you during the Keycard setup", @@ -1119,5 +1119,6 @@ "on-status-tree": "On Status tree", "derivation-path": "Derivation path", "storage": "Storage", - "keycard-free-pairing-slots": "Keycard has {{n}} free pairing slots" + "keycard-free-pairing-slots": "Keycard has {{n}} free pairing slots", + "public-chat-description": "A public chat is where you get to hang out with others, make friends and talk about subjects of your interest." }