diff --git a/resources/images/ui2/find-sync-code-desktop@2x.png b/resources/images/ui2/find-sync-code-desktop@2x.png new file mode 100644 index 0000000000..b1906b350f Binary files /dev/null and b/resources/images/ui2/find-sync-code-desktop@2x.png differ diff --git a/resources/images/ui2/find-sync-code-desktop@3x.png b/resources/images/ui2/find-sync-code-desktop@3x.png new file mode 100644 index 0000000000..cbaf6467a9 Binary files /dev/null and b/resources/images/ui2/find-sync-code-desktop@3x.png differ diff --git a/resources/images/ui2/find-sync-code-mobile@2x.png b/resources/images/ui2/find-sync-code-mobile@2x.png new file mode 100644 index 0000000000..f96d9abd68 Binary files /dev/null and b/resources/images/ui2/find-sync-code-mobile@2x.png differ diff --git a/resources/images/ui2/find-sync-code-mobile@3x.png b/resources/images/ui2/find-sync-code-mobile@3x.png new file mode 100644 index 0000000000..7ae7d2e7a9 Binary files /dev/null and b/resources/images/ui2/find-sync-code-mobile@3x.png differ diff --git a/src/status_im2/common/resources.cljs b/src/status_im2/common/resources.cljs index 58c05ccac7..04fac21129 100644 --- a/src/status_im2/common/resources.cljs +++ b/src/status_im2/common/resources.cljs @@ -8,6 +8,8 @@ "../resources/images/ui2/desktop-how-to-pair-logged-in.png") :mobile-how-to-pair-sign-in (js/require "../resources/images/ui2/mobile-how-to-pair-sign-in.png") :mobile-how-to-pair-logged-in (js/require "../resources/images/ui2/mobile-how-to-pair-logged-in.png") + :find-sync-code-desktop (js/require "../resources/images/ui2/find-sync-code-desktop.png") + :find-sync-code-mobile (js/require "../resources/images/ui2/find-sync-code-mobile.png") :lifestyle (js/require "../resources/images/ui2/lifestyle.png") :music (js/require "../resources/images/ui2/music.png") :podcasts (js/require "../resources/images/ui2/podcasts.png") diff --git a/src/status_im2/contexts/syncing/find_sync_code/view.cljs b/src/status_im2/contexts/syncing/find_sync_code/view.cljs new file mode 100644 index 0000000000..6d037dfddf --- /dev/null +++ b/src/status_im2/contexts/syncing/find_sync_code/view.cljs @@ -0,0 +1,31 @@ +(ns status-im2.contexts.syncing.find-sync-code.view + (:require [status-im2.contexts.syncing.syncing-instructions.view :as syncing-instructions])) + +(defn view + [] + [syncing-instructions/instructions + {:title-label-key :t/find-sync-code + :mobile [{:image {:source :find-sync-code-mobile + :type :image} + :list [[[:text :t/open-status-on-your-other-device]] + [[:text :t/open-your] + [:context-tag + {:label :t/profile + :source :user-picture-male5}]] + [[:text :t/go-to] + [:button-grey-placeholder :t/syncing]] + [[:text :t/tap] + [:button-grey :t/sync-new-device] + [:text :t/and] + [:button-primary :t/set-up-sync]] + [[:text :t/scan-the-qr-code-or-copy-the-sync-code]]]}] + :desktop [{:image {:source :find-sync-code-desktop + :type :image} + :list [[[:text :t/open-status-on-your-other-device]] + [[:text :t/open] + [:button-grey-placeholder :t/settings] + [:text :t/and-go-to] + [:button-grey-placeholder :t/syncing]] + [[:text :t/tap] + [:button-primary :t/set-up-sync]] + [[:text :t/scan-the-qr-code-or-copy-the-sync-code]]]}]}]) diff --git a/src/status_im2/contexts/syncing/how_to_pair/view.cljs b/src/status_im2/contexts/syncing/how_to_pair/view.cljs index ee3e2493d5..7ab7bd9912 100644 --- a/src/status_im2/contexts/syncing/how_to_pair/view.cljs +++ b/src/status_im2/contexts/syncing/how_to_pair/view.cljs @@ -1,164 +1,53 @@ (ns status-im2.contexts.syncing.how-to-pair.view - (:require - [react-native.gesture :as gesture] - [status-im2.contexts.syncing.how-to-pair.style :as style] - [status-im2.common.resources :as resources] - [utils.i18n :as i18n] - [quo2.core :as quo] - [quo2.foundations.colors :as colors] - [react-native.core :as rn] - [reagent.core :as reagent])) + (:require [status-im2.contexts.syncing.syncing-instructions.view :as syncing-instructions])) -(defn render-element - [[type value]] - (case type - :text - [quo/text - {:size :paragraph-2 - :weight :regular - :style style/list-text} (i18n/label value)] - - :button-primary - [quo/button - {:type :primary - :size 24 - :style style/button-primary} (i18n/label value)] - - :button-grey - [quo/button - {:type :grey - :override-theme :dark - :size 24 - :style style/button-grey} - (i18n/label value)] - - :button-grey-placeholder - [quo/button - {:type :grey - :override-theme :dark - :size 24 - :before :i/placeholder - :style style/button-grey-placeholder} - (i18n/label value)] - - :context-tag - [quo/context-tag - {:override-theme :dark - :text-style {:color colors/white}} - (resources/get-mock-image (:source value)) - (i18n/label (:label value))])) - -(defn render-item - [i list-item] - ^{:key i} - [rn/view - {:margin-vertical 6 - :style style/numbered-list-item} - [rn/view - {:margin-right 6 - :style style/list-icon} - [quo/text - {:size :label - :weight :medium - :style style/list-icon-text} i]] - (map-indexed (fn [idx item] - ^{:key idx} - [render-element item]) - list-item)]) - -(defn render-list - [{:keys [title image list]}] - [rn/view - [quo/text - {:size :paragraph-1 - :weight :semi-bold - :style style/paragraph} (i18n/label title)] - (case (:type image) - :container-image [rn/view {:style style/container-image} - [rn/image - {:source (resources/get-image - (:source image))}]] - :image [rn/image - {:source (resources/get-image (:source image)) - :style style/image}]) - [rn/view {:style style/numbered-list} - (map-indexed (fn [i item] (render-item (inc i) item)) list)]]) - -(def platforms - {:mobile - [gesture/scroll-view - (render-list {:title :t/signing-in-from-another-device - :image {:source :mobile-how-to-pair-sign-in - :type :image} - :list [[[:text :t/open-status-on-your-other-device]] - [[:text :t/tap-on] - [:button-grey :t/im-new]] - [[:button-primary :t/enable-camera] - [:text :t/or-tap] - [:button-grey :t/enter-sync-code]] - [[:text :t/scan-or-enter-sync-code-seen-on-this-device]]]}) - [rn/view {:style style/hr}] - (render-list {:title :t/already-logged-in-on-the-other-device - :image {:source :mobile-how-to-pair-logged-in - :type :image} - :list [[[:text :t/tap-on] - [:context-tag - {:label :t/profile - :source :user-picture-male5}] - [:text :t/and] - [:button-grey-placeholder :t/syncing]] - [[:text :t/press] - [:button-grey :t/scan-or-enter-sync-code]] - [[:button-primary :t/enable-camera] - [:text :t/or-tap] - [:button-grey :t/enter-sync-code]] - [[:text :t/scan-or-enter-sync-code-seen-on-this-device]]]})] - :desktop - [gesture/scroll-view - (render-list {:title :t/signing-in-from-another-device - :image {:source :desktop-how-to-pair-sign-in - :type :image} - :list [[[:text :t/open-status-on-your-other-device]] - [[:text :t/open] - [:button-grey :t/settings] - [:text :t/and-go-to] - [:button-grey :t/syncing]] - [[:text :t/tap] - [:button-grey :t/scan-or-enter-a-sync-code]] - [[:text :t/scan-the-qr-code-or-copy-the-sync-code]]]}) - [rn/view {:style style/hr}] - (render-list {:title :t/already-logged-in-on-the-other-device - :image {:source :desktop-how-to-pair-logged-in - :type :container-image} - :list [[[:text :t/open-status-on-your-other-device]] - [[:text :t/tap-on] - [:button-grey :t/im-new]] - [[:button-primary :t/enable-camera] - [:text :t/or-tap] - [:button-grey :t/enter-sync-code]] - [[:text :t/scan-or-enter-sync-code-seen-on-this-device]]]})]}) - -(defn instructions +(defn view [] - (let [platform (reagent/atom :mobile) - platform-data (map (fn [platform] - {:id platform - :label (i18n/label - (keyword (str "t/" (name platform))))}) - (keys platforms))] - (fn [] - [rn/view {:style style/container-outer} - [quo/text - {:size :heading-1 - :weight :semi-bold - :style style/heading} (i18n/label :t/how-to-pair)] - [rn/view {:style style/tabs-container} - [quo/segmented-control - {:size 28 - :override-theme :dark - :blur? true - :default-active :mobile - :data platform-data - :on-change #(reset! platform %)}]] - (@platform platforms)]))) - + [syncing-instructions/instructions + {:title-label-key :t/how-to-pair + :mobile [{:title :t/signing-in-from-another-device + :image {:source :mobile-how-to-pair-sign-in + :type :image} + :list [[[:text :t/open-status-on-your-other-device]] + [[:text :t/tap-on] + [:button-grey :t/im-new]] + [[:button-primary :t/enable-camera] + [:text :t/or-tap] + [:button-grey :t/enter-sync-code]] + [[:text :t/scan-or-enter-sync-code-seen-on-this-device]]]} + {:title :t/already-logged-in-on-the-other-device + :image {:source :mobile-how-to-pair-logged-in + :type :image} + :list [[[:text :t/tap-on] + [:context-tag + {:label :t/profile + :source :user-picture-male5}] + [:text :t/and] + [:button-grey-placeholder :t/syncing]] + [[:text :t/press] + [:button-grey-placeholder :t/scan-or-enter-sync-code]] + [[:button-primary :t/enable-camera] + [:text :t/or-tap] + [:button-grey :t/enter-sync-code]] + [[:text :t/scan-or-enter-sync-code-seen-on-this-device]]]}] + :desktop [{:title :t/signing-in-from-another-device + :image {:source :desktop-how-to-pair-sign-in + :type :image} + :list [[[:text :t/open-status-on-your-other-device]] + [[:text :t/open] + [:button-grey-placeholder :t/settings] + [:text :t/and-go-to] + [:button-grey-placeholder :t/syncing]] + [[:text :t/tap] + [:button-grey :t/scan-or-enter-a-sync-code]] + [[:text :t/scan-the-qr-code-or-copy-the-sync-code]]]} + {:title :t/already-logged-in-on-the-other-device + :image {:source :desktop-how-to-pair-logged-in + :type :container-image} + :list [[[:text :t/open-status-on-your-other-device]] + [[:text :t/tap-on] + [:button-grey :t/im-new]] + [[:button-primary :t/enable-camera] + [:text :t/or-tap] + [:button-grey :t/enter-sync-code]] + [[:text :t/scan-or-enter-sync-code-seen-on-this-device]]]}]}]) diff --git a/src/status_im2/contexts/syncing/scan_sync_code/view.cljs b/src/status_im2/contexts/syncing/scan_sync_code/view.cljs index 4da77be781..d3bdbace69 100644 --- a/src/status_im2/contexts/syncing/scan_sync_code/view.cljs +++ b/src/status_im2/contexts/syncing/scan_sync_code/view.cljs @@ -60,7 +60,8 @@ :size 32 :accessibility-label :find-sync-code :override-theme :dark - :on-press #(js/alert "Yet to be implemented")} + :on-press #(rf/dispatch [:open-modal :find-sync-code + {:override-theme :dark}])} (i18n/label :t/find-sync-code)]] [quo/text {:size :heading-1 diff --git a/src/status_im2/contexts/syncing/setup_syncing/view.cljs b/src/status_im2/contexts/syncing/setup_syncing/view.cljs index 95d5c8ec25..8a38f2c0d2 100644 --- a/src/status_im2/contexts/syncing/setup_syncing/view.cljs +++ b/src/status_im2/contexts/syncing/setup_syncing/view.cljs @@ -28,7 +28,7 @@ :icon-override-theme :dark :on-press #(rf/dispatch [:navigate-back])} :right-section-buttons [{:type :grey - :label (i18n/label :t/how-to-scan) + :label (i18n/label :t/how-to-pair) :icon :i/info :icon-override-theme :dark :on-press #(rf/dispatch [:open-modal :how-to-pair diff --git a/src/status_im2/contexts/syncing/how_to_pair/style.cljs b/src/status_im2/contexts/syncing/syncing_instructions/style.cljs similarity index 88% rename from src/status_im2/contexts/syncing/how_to_pair/style.cljs rename to src/status_im2/contexts/syncing/syncing_instructions/style.cljs index 33cfac23c3..aeb9304d1c 100644 --- a/src/status_im2/contexts/syncing/how_to_pair/style.cljs +++ b/src/status_im2/contexts/syncing/syncing_instructions/style.cljs @@ -1,4 +1,4 @@ -(ns status-im2.contexts.syncing.how-to-pair.style +(ns status-im2.contexts.syncing.syncing-instructions.style (:require [quo2.foundations.colors :as colors] [react-native.platform :as platform])) @@ -50,7 +50,8 @@ :border-width 1 :border-color colors/white-opa-10 :align-items :center - :justify-content :center}) + :justify-content :center + :margin-right 6}) (def list-icon-text {:color colors/white}) @@ -68,5 +69,6 @@ {:margin-top 12}) (def numbered-list-item - {:flex-direction :row - :align-items :center}) + {:flex-direction :row + :align-items :center + :margin-vertical 6}) diff --git a/src/status_im2/contexts/syncing/syncing_instructions/view.cljs b/src/status_im2/contexts/syncing/syncing_instructions/view.cljs new file mode 100644 index 0000000000..e8c8f81025 --- /dev/null +++ b/src/status_im2/contexts/syncing/syncing_instructions/view.cljs @@ -0,0 +1,124 @@ +(ns status-im2.contexts.syncing.syncing-instructions.view + (:require [quo2.core :as quo] + [quo2.foundations.colors :as colors] + [react-native.core :as rn] + [react-native.gesture :as gesture] + [reagent.core :as reagent] + [status-im2.common.resources :as resources] + [status-im2.contexts.syncing.syncing-instructions.style :as style] + [utils.i18n :as i18n])) + +(defn- render-element + [[type value]] + (case type + :text + [quo/text + {:size :paragraph-2 + :weight :regular + :style style/list-text} (i18n/label value)] + + :button-primary + [quo/button + {:type :primary + :customization-color :blue + :size 24 + :style style/button-primary} (i18n/label value)] + + :button-grey + [quo/button + {:type :grey + :override-theme :dark + :size 24 + :style style/button-grey} + (i18n/label value)] + + :button-grey-placeholder + [quo/button + {:type :grey + :override-theme :dark + :size 24 + :before :i/placeholder + :style style/button-grey-placeholder} + (i18n/label value)] + + :context-tag + [quo/context-tag + {:override-theme :dark + :text-style {:color colors/white}} + (resources/get-mock-image (:source value)) + (i18n/label (:label value))])) + +(defn- render-item + [i list-item] + [rn/view + {:style style/numbered-list-item} + [rn/view + {:style style/list-icon} + [quo/text + {:size :label + :weight :medium + :style style/list-icon-text} i]] + (map-indexed (fn [idx item] + ^{:key idx} + [render-element item]) + list-item)]) + +(defn- render-instruction + [{:keys [title image list]}] + [rn/view + (when title + [quo/text + {:size :paragraph-1 + :weight :semi-bold + :style style/paragraph} (i18n/label title)]) + (case (:type image) + :container-image [rn/view {:style style/container-image} + [rn/image + {:source (resources/get-image + (:source image))}]] + :image [rn/image + {:source (resources/get-image (:source image)) + :style style/image}] + nil) + [rn/view {:style style/numbered-list} + (map-indexed (fn [i item] + ^{:key i} + [render-item (inc i) item]) + list)]]) + +(defn- map-instructions + [idx instructions instructions-count] + [:<> + [render-instruction instructions] + (when-not (= (inc idx) instructions-count) + [rn/view {:style style/hr}])]) + +(defn instructions + [{:keys [title-label-key] :as props}] + (let [platform (reagent/atom :mobile) + platform-data [{:id :mobile + :label (i18n/label :t/mobile)} + {:id :desktop + :label (i18n/label :t/desktop)}]] + (fn [] + (let [instructions (get props @platform) + instructions-count (count instructions)] + [rn/view {:style style/container-outer} + [quo/text + {:size :heading-1 + :weight :semi-bold + :style style/heading} (i18n/label title-label-key)] + [rn/view {:style style/tabs-container} + [quo/segmented-control + {:size 28 + :override-theme :dark + :blur? true + :default-active :mobile + :data platform-data + :on-change #(reset! platform %)}]] + [gesture/scroll-view + (doall + (map-indexed (fn [idx item] + ^{:key idx} + [map-instructions idx item instructions-count]) + instructions))]])))) diff --git a/src/status_im2/navigation/screens.cljs b/src/status_im2/navigation/screens.cljs index a94510701d..a2515c9ae7 100644 --- a/src/status_im2/navigation/screens.cljs +++ b/src/status_im2/navigation/screens.cljs @@ -25,6 +25,7 @@ [status-im2.contexts.syncing.scan-sync-code-page.view :as scan-sync-code-page] [status-im2.contexts.syncing.syncing-devices-list.view :as settings-syncing] [status-im2.contexts.syncing.how-to-pair.view :as how-to-pair] + [status-im2.contexts.syncing.find-sync-code.view :as find-sync-code] [status-im2.navigation.options :as options] [status-im2.contexts.chat.group-details.view :as group-details] [status-im.ui.screens.screens :as old-screens] @@ -83,7 +84,12 @@ {:name :how-to-pair :options {:theme :dark :sheet? true} - :component how-to-pair/instructions} + :component how-to-pair/view} + + {:name :find-sync-code + :options {:theme :dark + :sheet? true} + :component find-sync-code/view} {:name :discover-communities :component communities.discover/discover} diff --git a/src/status_im2/navigation/view.cljs b/src/status_im2/navigation/view.cljs index 95cc514c7e..7064c16a53 100644 --- a/src/status_im2/navigation/view.cljs +++ b/src/status_im2/navigation/view.cljs @@ -80,7 +80,6 @@ insets (safe-area/get-insets) user-theme (theme/get-theme)] ^{:key (str "sheet" @reloader/cnt)} - (js/console.log "HEHREHRE") [theme/provider {:theme (or theme user-theme)} [inactive] [rn/keyboard-avoiding-view diff --git a/translations/en.json b/translations/en.json index b3f98306f6..362b0aee5b 100644 --- a/translations/en.json +++ b/translations/en.json @@ -2153,6 +2153,10 @@ "scan-or-enter-a-sync-code": "Scan or enter a sync code", "scan-the-qr-code-or-copy-the-sync-code": "Scan the QR code or copy the sync code", "already-logged-in-on-the-other-device": "Already logged in on the other device", + "open-your": "Open your", + "go-to": "Go to", + "sync-new-device": "Sync new device", + "set-up-sync": "Set up sync", "how-to-pair": "How to pair", "mobile": "Mobile", "desktop": "Desktop",