Onboarding app locked flow

src/quo2/components/buttons/button.cljs

@@ -6,12 +6,13 @@
             [react-native.core :as rn]
             [reagent.core :as reagent]))
 
-(def themes
+(defn themes
+  [customization-color]
   {:light {:primary         {:icon-color       colors/white
                              :label-color      colors/white
-                             :background-color {:default  colors/primary-50
+                             :background-color {:default  (colors/custom-color customization-color 50)
-                                                :pressed  colors/primary-60
+                                                :pressed  (colors/custom-color customization-color 60)
-                                                :disabled colors/primary-50}}
+                                                :disabled (colors/custom-color customization-color 50)}}
            :secondary       {:icon-color       colors/primary-50
                              :label-color      colors/primary-50
                              :background-color {:default  colors/primary-50-opa-20
@@ -74,9 +75,9 @@
                                                 :disabled colors/neutral-95}}}
    :dark  {:primary         {:icon-color       colors/white
                              :label-color      colors/white
-                             :background-color {:default  colors/primary-60
+                             :background-color {:default  (colors/custom-color customization-color 60)
-                                                :pressed  colors/primary-50
+                                                :pressed  (colors/custom-color customization-color 50)
-                                                :disabled colors/primary-60}}
+                                                :disabled (colors/custom-color customization-color 60)}}
            :secondary       {:icon-color       colors/primary-50
                              :label-color      colors/primary-50
                              :background-color {:default  colors/primary-50-opa-20
@@ -218,14 +219,15 @@
   (let [pressed (reagent/atom false)]
     (fn
       [{:keys [on-press disabled type size community-color community-text-color before after above
-               width
+               width customization-color
                override-theme override-background-color
                on-long-press accessibility-label icon icon-no-color style inner-style test-ID]
         :or   {type                :primary
-               size 40}}
+               size                40
+               customization-color :primary}}
        children]
       (let [{:keys [icon-color icon-secondary-color background-color label-color border-color]}
-            (get-in themes
+            (get-in (themes customization-color)
                     [(or
                       override-theme
                       (theme/get-theme)) type])
@@ -252,11 +254,7 @@
          [rn/view
           {:style (merge
                    (shape-style-container type icon size)
-                   {:background-color
+                   {:width width}
-                    (if (= state :pressed)
-                      (colors/theme-colors colors/neutral-100 colors/white)
-                      :transparent)
-                    :width width}
                    style)}
           [rn/view
            {:style (merge

src/quo2/components/info/info_message.cljs

@@ -22,18 +22,18 @@
   opts
   {:type           :default/:success/:error
    :size           :default/:tiny
-   :icon           :main-icons/info ;; info message icon
+   :icon           :i/info ;; info message icon
    :text-color     colors/white     ;; text color override
    :icon-color     colors/white    ;; icon color override
    :no-icon-color? false       ;; disable tint color for icon"
-  [{:keys [type size icon text-color icon-color no-icon-color?]} message]
+  [{:keys [type size icon text-color icon-color no-icon-color? style]} message]
   (let [weight     (if (= size :default) :regular :medium)
         size       (if (= size :default) :paragraph-2 :label)
         text-color (or text-color (get-color type))
         icon-color (or icon-color text-color)]
     [rn/view
-     {:style {:flex-direction :row
+     {:style (merge {:flex-direction :row}
-              :flex           1}}
+                    style)}
      [quo2.icons/icon icon
       {:color           icon-color
        :no-color        no-icon-color?

src/quo2/components/inputs/input/style.cljs

@@ -66,7 +66,7 @@
    :padding-horizontal 8
    :border-width       1
    :border-color       (:border-color colors-by-status)
-   :border-radius      (if small? 10 14)
+   :border-radius      (if small? 10 12)
    :opacity            (if disabled? 0.3 1)})
 
 (defn left-icon-container
@@ -110,8 +110,7 @@
    :color (:clear-icon variant-colors)})
 
 (def texts-container
-  {:flex           1
+  {:flex-direction :row
-   :flex-direction :row
    :height         18
    :margin-bottom  8})
 

src/quo2/components/inputs/input/view.cljs

@@ -83,7 +83,7 @@
             colors-by-status (style/status-colors status-kw blur? override-theme)
             variant-colors   (style/variants-colors blur? override-theme)
             clean-props      (apply dissoc props custom-props)]
-        [rn/view
+        [:<>
          (when (or label char-limit)
            [label-&-counter
             {:variant-colors variant-colors

src/quo2/components/profile/profile_card/style.cljs

@@ -2,13 +2,15 @@
   (:require [quo2.foundations.colors :as colors]))
 
 (defn card-container
-  [customization-color padding-bottom]
+  [{:keys [customization-color padding-bottom border-bottom-radius]}]
-  {:flex-direction     :column
+  {:padding-horizontal         12
-   :padding-horizontal 12
    :padding-top                12
    :padding-bottom             padding-bottom
    :flex                       1
-   :border-radius      16
+   :border-top-left-radius     16
+   :border-top-right-radius    16
+   :border-bottom-left-radius  border-bottom-radius
+   :border-bottom-right-radius border-bottom-radius
    :background-color           (colors/custom-color customization-color 50 40)})
 
 (def card-header

src/quo2/components/profile/profile_card/view.cljs

@@ -4,29 +4,51 @@
             [quo2.components.icon :as icon]
             [quo2.components.tags.tag :as tag]
             [quo2.foundations.colors :as colors]
+            [react-native.hole-view :as hole-view]
             [quo2.components.markdown.text :as text]
             [quo2.components.buttons.button :as button]
-            [quo2.components.avatars.user-avatar.view :as user-avatar]
+            [quo2.components.profile.profile-card.style :as style]
-            [quo2.components.profile.profile-card.style :as style]))
+            [quo2.components.avatars.user-avatar.view :as user-avatar]))
 
-(defn profile-card
+(defn- profile-card-component
-  [{:keys [key-card? profile-picture name hash customization-color
+  [{:keys [keycard-account? profile-picture name hash
-           emoji-hash on-options-press show-emoji-hash? padding-bottom
+           customization-color emoji-hash on-options-press
-           show-options-button? show-user-hash? show-logged-in? on-card-press]
+           show-emoji-hash? show-options-button? show-user-hash?
+           show-logged-in? on-card-press login-card? last-item? card-style]
     :or   {show-emoji-hash?     false
            show-user-hash?      false
            customization-color  :turquoise
            show-options-button? false
            show-logged-in?      false
-           key-card?            false}}]
+           keycard-account?     false
+           login-card?          false
+           last-item?           false
+           card-style           {:padding-horizontal 20
+                                 :flex               1}}}]
+  (let [{:keys [width]}      (rn/use-window-dimensions)
+        padding-bottom       (cond
+                               login-card?      38
+                               show-emoji-hash? 12
+                               :else            10)
+        border-bottom-radius (if (or (not login-card?) last-item?) 16 0)]
     [rn/touchable-without-feedback
      {:on-press            on-card-press
-    :flex                1
       :accessibility-label :profile-card}
+     [hole-view/hole-view
+      {:key   (str name last-item?) ;; Key is required to force removal of holes
+       :style (merge {:flex-direction :row} card-style)
+       :holes (if (or (not login-card?) last-item?)
+                []
+                [{:x            20
+                  :y            108
+                  :width        (- width 40)
+                  :height       50
+                  :borderRadius 16}])}
       [rn/view
-    (style/card-container
+       {:style (style/card-container
-     customization-color
+                {:customization-color  customization-color
-     (or padding-bottom (if show-emoji-hash? 12 10)))
+                 :padding-bottom       padding-bottom
+                 :border-bottom-radius border-bottom-radius})}
        [rn/view
         {:style style/card-header}
         [user-avatar/user-avatar
@@ -34,7 +56,8 @@
           :profile-picture     profile-picture
           :override-theme      :dark
           :size                :medium
-       :status-indicator? false}]
+          :status-indicator?   false
+          :customization-color customization-color}]
         [rn/view {:flex-direction :row}
          (when show-logged-in?
            [tag/tag
@@ -64,7 +87,7 @@
           :weight          :semi-bold
           :number-of-lines 1
           :style           style/user-name} name]
-     (when key-card?
+        (when keycard-account?
           (icon/icon
            :i/keycard
            style/keycard-icon))]
@@ -77,4 +100,8 @@
          [text/text
           {:weight          :monospace
            :number-of-lines 1
-        :style           style/emoji-hash} emoji-hash])]])
+           :style           style/emoji-hash} emoji-hash])]]]))
+
+(defn profile-card
+  [props]
+  [:f> profile-card-component props])

src/status_im/events.cljs

@@ -57,6 +57,7 @@
     status-im2.contexts.activity-center.events
     status-im2.contexts.activity-center.notification.contact-requests.events
     status-im2.contexts.shell.events
+    status-im2.contexts.onboarding.events
     status-im.chat.models.gaps
     [status-im2.navigation.events :as navigation]))
 

src/status_im/keycard/login.cljs

@@ -17,7 +17,7 @@
   [{:keys [db] :as cofx}]
   (rf/merge cofx
             {:db db}
-            (navigation/pop-to-root :multiaccounts-stack)))
+            (navigation/pop-to-root :profiles)))
 
 (rf/defn login-pin-more-icon-pressed
   {:events [:keycard.login.pin.ui/more-icon-pressed]}

src/status_im/multiaccounts/login/core.cljs

@@ -521,6 +521,7 @@
                                 (assoc-in [:multiaccount :multiaccounts/first-account] first-account?))
                ::get-tokens [network-id accounts recovered-account?]}
               (finish-keycard-setup)
+              (initialize-appearance)
               (transport/start-messenger)
               (communities/fetch)
               (data-store.chats/fetch-chats-rpc
@@ -624,14 +625,15 @@
        login)
       (rf/merge
        cofx
-       {:db (dissoc db :goto-key-storage?)}
+       {:db                 (dissoc db :goto-key-storage?)
+        :theme/change-theme :dark}
        (when keycard-account?
          {:db (-> db
                   (assoc-in [:keycard :pin :status] nil)
                   (assoc-in [:keycard :pin :login] []))})
        #(if keycard-account?
           {:init-root-fx :multiaccounts-keycard}
-          {:init-root-fx :multiaccounts})
+          {:init-root-fx :profiles})
        #(when goto-key-storage?
           (navigation/navigate-to-cofx % :actions-not-logged-in nil))))))
 
@@ -730,8 +732,9 @@
         keycard-multiaccount? (boolean (:keycard-pairing multiaccount))]
     (rf/merge
      cofx
-     {:db             (update db :keycard dissoc :application-info)
+     (merge
-      :navigate-to-fx (if keycard-multiaccount? :keycard-login-pin :login)}
+      {:db (update db :keycard dissoc :application-info)}
+      (when keycard-multiaccount? {:navigate-to-fx :keycard-login-pin}))
      (open-login (select-keys multiaccount [:key-uid :name :public-key :identicon :images])))))
 
 (rf/defn hide-keycard-banner

src/status_im/theme/core.cljs

@@ -1,8 +1,14 @@
 (ns status-im.theme.core
   (:require [quo.theme :as quo.theme]
-            [quo2.theme :as quo2.theme]))
+            [quo2.theme :as quo2.theme]
+            [re-frame.core :as re-frame]))
 
 (defn change-theme
   [theme]
   (quo.theme/set-theme theme)
   (quo2.theme/set-theme theme))
+
+(re-frame/reg-fx
+ :theme/change-theme
+ (fn [theme]
+   (change-theme theme)))

src/status_im2/common/confirmation_drawer/view.cljs

@@ -26,18 +26,23 @@
      [quo/text {:style {:margin-left 10}} extra-text]]))
 
 (defn confirmation-drawer
-  [{:keys [title description context button-text on-press extra-action extra-text accessibility-label]}]
+  [{:keys [title description context button-text on-press extra-action extra-text accessibility-label
+           close-button-text]}]
   (let [extra-action-selected? (reagent/atom false)]
     (fn []
-      (let [{:keys [group-chat chat-id public-key color name]} context
+      (let [{:keys [group-chat chat-id public-key color profile-picture
+                    name]} context
             id             (or chat-id public-key)
-            display-name
+            display-name   (or
-            (if-not group-chat (first (rf/sub [:contacts/contact-two-names-by-identity id])) name)
+                            name
+                            (when-not group-chat
+                              (rf/sub [:contacts/contact-name-by-identity id])))
             contact        (when-not group-chat
                              (rf/sub [:contacts/contact-by-address
                                       id]))
-            photo-path (when-not (empty? (:images contact))
+            photo-path     (or profile-picture
-                         (rf/sub [:chats/photo-path id]))]
+                               (when-not (empty? (:images contact))
+                                 (rf/sub [:chats/photo-path id])))]
         [rn/view
          {:style               {:margin-horizontal 20}
           :accessibility-label accessibility-label}
@@ -57,7 +62,7 @@
            {:type     :grey
             :style    {:flex 0.48} ;;WUT? 0.48 , whats that ?
             :on-press #(rf/dispatch [:bottom-sheet/hide])}
-           (i18n/label :t/close)]
+           (or close-button-text (i18n/label :t/close))]
           [quo/button
            {:type     :danger
             :style    {:flex 0.48}

src/status_im2/contexts/onboarding/common/background/style.cljs

@@ -3,7 +3,12 @@
 
 (def background-container
   {:background-color colors/neutral-95
-   :flex-direction   :row})
+   :flex-direction   :row
+   :position         :absolute
+   :top              0
+   :bottom           0
+   :left             0
+   :right            0})
 
 (defn background-gradient-overlay
   [dark-overlay?]

src/status_im2/contexts/onboarding/common/background/view.cljs

@@ -11,7 +11,8 @@
    {:style style/background-container}
    [rn/image
     {:blur-radius (if dark-overlay? 13 0)
-     :style       {:flex 1}
+     :style       {:height "100%"
+                   :width  "100%"}
      ;; Todo - get background image from sub using carousel index on landing page
      :source      (resources/get-image :onboarding-bg-1)}]
    [linear-gradient/linear-gradient

src/status_im2/contexts/onboarding/events.cljs

@@ -0,0 +1,7 @@
+(ns status-im2.contexts.onboarding.events
+  (:require [utils.re-frame :as rf]))
+
+(rf/defn on-delete-profile-success
+  {:events [:onboarding/on-delete-profile-success]}
+  [{:keys [db]} key-uid]
+  {:db (update-in db [:multiaccounts/multiaccounts] dissoc key-uid)})

src/status_im2/contexts/onboarding/profiles/style.cljs

@@ -0,0 +1,60 @@
+(ns status-im2.contexts.onboarding.profiles.style
+  (:require [quo2.foundations.colors :as colors]
+            [react-native.platform :as platform]))
+
+;; Profiles Section
+
+(defn profiles-profile-card
+  [last-item?]
+  ;; This part needs to be improved, inverted shadow is not supported in android
+  ;; https://reactnative.dev/docs/shadow-props#shadowoffset-ios
+  ;; (merge
+  ;;  (:shadow-1 (shadows/get-scales true :dark))
+  {:padding-horizontal 20
+   :margin-bottom      (when-not last-item? -24)})
+
+(def profiles-container
+  {:position :absolute
+   :left     0
+   :top      0
+   :bottom   0
+   :right    0})
+
+(def profiles-header
+  {:flex-direction     :row
+   :padding-horizontal 20
+   :padding-top        112
+   :margin-bottom      20})
+
+(def profiles-header-text
+  {:color colors/white
+   :flex  1})
+
+;; Login Section
+
+(def login-container
+  {:position           :absolute
+   :left               0
+   :top                0
+   :right              0
+   :bottom             0
+   :padding-top        56
+   :padding-horizontal 20})
+
+(def multi-profile-button
+  {:align-self :flex-end})
+
+(def login-profile-card
+  {:margin-vertical 20})
+
+(def keyboard-avoiding-view
+  {:flex 1})
+
+(def info-message
+  {:margin-top 8})
+
+(defn login-button
+  []
+  {:margin-top    8
+   :margin-bottom (if platform/android? 20 46)})
+

src/status_im2/contexts/onboarding/profiles/view.cljs

@@ -1,7 +1,203 @@
 (ns status-im2.contexts.onboarding.profiles.view
-  (:require [status-im2.contexts.onboarding.common.background.view :as background]))
+  (:require [quo2.core :as quo]
+            [utils.i18n :as i18n]
+            [utils.re-frame :as rf]
+            [taoensso.timbre :as log]
+            [reagent.core :as reagent]
+            [react-native.core :as rn]
+            [status-im.utils.types :as types]
+            [utils.security.core :as security]
+            [status-im.native-module.core :as status]
+            [status-im2.contexts.onboarding.profiles.style :as style]
+            [status-im2.common.confirmation-drawer.view :as confirmation-drawer]
+            [status-im2.contexts.onboarding.common.background.view :as background]))
+
+(def show-profiles? (reagent/atom false))
+
+(defn login-multiaccount
+  []
+  (rf/dispatch [:multiaccounts.login.ui/password-input-submitted]))
+
+(defn new-account-options
+  []
+  [quo/action-drawer
+   [[{:icon                :i/profile
+      :label               (i18n/label :t/create-new-profile)
+      :on-press            #(do
+                              (rf/dispatch [:bottom-sheet/hide])
+                              (rf/dispatch [:navigate-to :new-to-status]))
+      :accessibility-label :create-new-profile}
+     {:icon                :i/multi-profile
+      :label               (i18n/label :t/add-existing-status-profile)
+      :on-press            #(do
+                              (rf/dispatch [:bottom-sheet/hide])
+                              (rf/dispatch [:navigate-to :new-to-status]))
+      :accessibility-label :multi-profile}]]])
+
+(defn show-new-account-options
+  []
+  (rf/dispatch [:bottom-sheet/show-sheet
+                {:content new-account-options}]))
+
+(defn delete-profile-confirmation
+  [key-uid context]
+  (confirmation-drawer/confirmation-drawer
+   {:title               (i18n/label :remove-profile?)
+    :description         (i18n/label :remove-profile-confirm-message)
+    :accessibility-label :remove-profile-confirm
+    :context             context
+    :button-text         (i18n/label :t/remove)
+    :close-button-text   (i18n/label :t/cancel)
+    :on-press            #(do
+                            (rf/dispatch [:bottom-sheet/hide])
+                            (status/delete-multiaccount
+                             key-uid
+                             (fn [result]
+                               (let [{:keys [error]} (types/json->clj result)]
+                                 (rf/dispatch [:onboarding/on-delete-profile-success key-uid])
+                                 (log/info "profile deleted: error" error)))))}))
+
+(defn show-confirmation
+  [key-uid context]
+  (rf/dispatch [:bottom-sheet/hide])
+  (rf/dispatch [:bottom-sheet/show-sheet
+                {:content #(delete-profile-confirmation key-uid context)}]))
+
+(defn profile-options
+  [key-uid context]
+  [quo/action-drawer
+   [[{:icon                :i/delete
+      :label               (i18n/label :remove-profile-message)
+      :on-press            #(show-confirmation key-uid context)
+      :accessibility-label :remove-profile
+      :danger?             true}]]])
+
+(defn show-profile-options
+  [key-uid context]
+  (rf/dispatch [:bottom-sheet/show-sheet
+                {:content #(profile-options key-uid context)}]))
+
+(defn profile-card
+  [{:keys [name key-uid customization-color keycard-pairing last-index] :as multiaccount} index]
+  (let [last-item?      (= last-index index)
+        profile-picture (:uri (first (:images multiaccount)))]
+    [quo/profile-card
+     {:name                 name
+      :login-card?          true
+      :last-item?           (= last-index index)
+      :customization-color  (or customization-color :primary)
+      :keycard-account?     keycard-pairing
+      :show-options-button? true
+      :profile-picture      (when profile-picture {:uri profile-picture})
+      :card-style           (style/profiles-profile-card last-item?)
+      :on-options-press     #(show-profile-options
+                              key-uid
+                              {:name            name
+                               :color           customization-color
+                               :profile-picture profile-picture})
+      :on-card-press        #(do
+                               (rf/dispatch
+                                [:multiaccounts.login.ui/multiaccount-selected key-uid])
+                               (when-not keycard-pairing (reset! show-profiles? false)))}]))
+
+(defn profiles-section
+  []
+  (let [multiaccounts (vals (rf/sub [:multiaccounts/multiaccounts]))
+        multiaccounts (map #(assoc % :last-index (- (count multiaccounts) 1)) multiaccounts)]
+    [rn/view
+     {:style style/profiles-container}
+     [rn/view
+      {:style style/profiles-header}
+      [quo/text
+       {:size   :heading-1
+        :weight :semi-bold
+        :style  style/profiles-header-text}
+       (i18n/label :t/profiles-on-device)]
+      [quo/button
+       {:type                :primary
+        :size                32
+        :icon                true
+        :on-press            show-new-account-options
+        :accessibility-label :show-new-account-options
+        :override-theme      :dark}
+       :main-icons/add]]
+     [rn/flat-list
+      {:data                    (sort-by :timestamp > multiaccounts)
+       :key-fn                  :key-uid
+       :content-container-style {:padding-bottom 20}
+       :render-fn               profile-card}]]))
+
+(defn login-section
+  []
+  (let [{:keys [name customization-color error processing]
+         :as   multiaccount} (rf/sub [:multiaccounts/login])
+        sign-in-enabled?     (rf/sub [:sign-in-enabled?])
+        profile-picture      (:uri (first (:images multiaccount)))]
+    [rn/keyboard-avoiding-view
+     {:style style/login-container}
+     [rn/view
+      {:style {:flex 1}}
+      [quo/button
+       {:size                32
+        :type                :blur-bg
+        :icon                true
+        :on-press            #(reset! show-profiles? true)
+        :override-theme      :dark
+        :width               32
+        :accessibility-label :show-profiles
+        :style               style/multi-profile-button}
+       :i/multi-profile]
+      [quo/profile-card
+       {:name                name
+        :customization-color (or customization-color :primary)
+        :profile-picture     (when profile-picture {:uri profile-picture})
+        :card-style          style/login-profile-card}]
+      [quo/input
+       {:type              :password
+        :blur?             true
+        :override-theme    :dark
+        :placeholder       (i18n/label :t/type-your-password)
+        :auto-focus        true
+        :error?            (when (not-empty error) error)
+        :label             (i18n/label :t/profile-password)
+        :secure-text-entry true
+        :on-change-text    (fn [password]
+                             (rf/dispatch [:set-in [:multiaccounts/login :password]
+                                           (security/mask-data password)])
+                             (rf/dispatch [:set-in [:multiaccounts/login :error] ""]))
+        :on-submit-editing (when sign-in-enabled? login-multiaccount)}]
+      (when (not-empty error)
+        [quo/info-message
+         {:type  :error
+          :size  :default
+          :icon  :i/info
+          :style style/info-message}
+         (i18n/label :t/oops-wrong-password)])]
+     [quo/button
+      {:size                40
+       :type                :ghost
+       :before              :i/info
+       :accessibility-label :forget-password-button
+       :override-theme      :dark}
+      (i18n/label :t/forget-password)]
+     [quo/button
+      {:size                40
+       :type                :primary
+       :customization-color (or :primary customization-color)
+       :accessibility-label :login-button
+       :override-theme      :dark
+       :before              :i/unlocked
+       :disabled            (or (not sign-in-enabled?) processing)
+       :on-press            login-multiaccount
+       :style               (style/login-button)}
+      (i18n/label :t/log-in)]]))
 
 (defn views
   []
+  (reset! show-profiles? false)
+  (fn []
     [:<>
-   [background/view true]])
+     [background/view true]
+     (if @show-profiles?
+       [profiles-section]
+       [login-section show-profiles?])]))

src/status_im2/contexts/quo_preview/profile/profile_card.cljs

@@ -8,7 +8,7 @@
 
 (def descriptor
   [{:label "Show: Is from key card?"
-    :key   :key-card?
+    :key   :keycard-account?
     :type  :boolean}
    {:label "Show: Emoji hash?"
     :key   :show-emoji-hash?
@@ -22,33 +22,19 @@
    {:label "Show: Logged In?"
     :key   :show-logged-in?
     :type  :boolean}
+   {:label "Login Card?"
+    :key   :login-card?
+    :type  :boolean}
+   {:label "Last Item?"
+    :key   :last-item?
+    :type  :boolean}
    {:label   "Customization Color"
     :key     :customization-color
     :type    :select
-    :options [{:key   :primary
+    :options (map (fn [[color-kw _]]
-               :value "Primary"}
+                    {:key   color-kw
-              {:key   :purple
+                     :value (name color-kw)})
-               :value "Purple"}
+                  colors/customization)}
-              {:key   :indigo
-               :value "Indigo"}
-              {:key   :turquoise
-               :value "Turquoise"}
-              {:key   :blue
-               :value "Blue"}
-              {:key   :green
-               :value "Green"}
-              {:key   :yellow
-               :value "Yellow"}
-              {:key   :orange
-               :value "Orange"}
-              {:key   :red
-               :value "Red"}
-              {:key   :pink
-               :value "Pink"}
-              {:key   :brown
-               :value "Brown"}
-              {:key   :beige
-               :value "Beige"}]}
    {:label "Name"
     :key   :name
     :type  :text}
@@ -61,13 +47,15 @@
 
 (defn cool-preview
   []
-  (let [state (reagent/atom {:key-card? false
+  (let [state (reagent/atom {:keycard-account? false
                              :name "Matt Grote"
                              :on-options-press nil
                              :on-card-press nil
                              :show-options-button? true
                              :show-logged-in? true
                              :show-user-hash? false
+                             :login-card? false
+                             :last-item? true
                              :on-press-sign nil
                              :customization-color :turquoise
                              :profile-picture (resources/get-mock-image :user-picture-male5)
@@ -82,7 +70,6 @@
         [rn/view
          {:padding-vertical 60
           :flex-direction   :row
-          :margin-horizontal 20
           :justify-content  :center}
          [quo/profile-card @state]]]])))
 

src/status_im2/events.cljs

@@ -32,9 +32,9 @@
  :setup/init-theme
  (fn []
    (theme/add-mode-change-listener #(re-frame/dispatch [:system-theme-mode-changed %]))
-   (quo2.theme/set-theme (if (theme/dark-mode?) :dark :light))
+   (quo2.theme/set-theme :dark)
    ;; TODO legacy support
-   (quo.theme/set-theme (if (theme/dark-mode?) :dark :light))))
+   (quo.theme/set-theme :dark)))
 
 (rf/defn initialize-views
   {:events [:setup/initialize-view]}

src/status_im2/navigation/roots.cljs

@@ -2,12 +2,13 @@
   (:require [quo2.foundations.colors :as colors]
             [react-native.platform :as platform]
             [status-im2.navigation.view :as views]
-            [status-im2.navigation.state :as state]
+            [status-im2.navigation.state :as state]))
-            [status-im2.common.theme.core :as utils.theme]))
 
 (defn status-bar-options
   []
-  (let [dark-mode? (if (= @state/root-id :shell-stack) (colors/dark?) (utils.theme/dark-mode?))]
+  ;; dark-mode? = After login we are going to use theme as per user's choice (colors/dark?)
+  ;; but before login we only have dark mode (dark-mode? = true)
+  (let [dark-mode? (if (= @state/root-id :shell-stack) (colors/dark?) true)]
     (if platform/android?
       {:navigationBar {:backgroundColor colors/neutral-100}
        :statusBar     {:backgroundColor :transparent
@@ -98,8 +99,8 @@
 
    :multiaccounts-keycard
    {:root {:stack {:id       :multiaccounts-stack
-                   :children [{:component {:name    :multiaccounts
+                   :children [{:component {:name    :profiles
-                                           :id      :multiaccounts
+                                           :id      :profiles
                                            :options (get-screen-options :multiaccounts)}}
                               {:component {:name    :keycard-login-pin
                                            :id      :keycard-login-pin

translations/en.json

@@ -2000,5 +2000,16 @@
     "strength-divider-okay-label": "Okay",
     "strength-divider-strong-label": "Strong",
     "strength-divider-very-strong-label": "Very strong",
-    "logged-in": "Logged in"
+    "logged-in": "Logged in",
+    "profiles-on-device": "Profiles on device",
+    "profile-password": "Profile password",
+    "forget-password": "Forgot password?",
+    "log-in": "Log in",
+    "type-your-password": "Type your password",
+    "oops-wrong-password": "Oops, wrong password!",
+    "remove-profile?" : "Remove profile?",
+    "remove-profile-message": "Remove profile from this device",
+    "remove-profile-confirm-message": "All profile data will removed from device.",
+    "create-new-profile": "Create new profile",
+    "add-existing-status-profile": "Add existing Status profile"
 }