New profile UI

ios/Podfile.lock

@@ -772,7 +772,7 @@ SPEC CHECKSUMS:
   RNLanguages: 962e562af0d34ab1958d89bcfdb64fafc37c513e
   RNPermissions: ad71dd4f767ec254f2cd57592fbee02afee75467
   RNReactNativeHapticFeedback: 2566b468cc8d0e7bb2f84b23adc0f4614594d071
-  RNReanimated: 43adb0307a62c1ce9694f36f124ca3b51a15272a
+  RNReanimated: aaa16b8dc7b9552ead99d5c78a35a3066b2838a4
   RNShare: d82e10f6b7677f4b0048c23709bd04098d5aee6c
   RNStaticSafeAreaInsets: 055ddbf5e476321720457cdaeec0ff2ba40ec1b8
   RNSVG: 80584470ff1ffc7994923ea135a3e5ad825546b9

src/quo/components/header.cljs

@@ -80,7 +80,7 @@
    :flex            1})
 
 (defn header-action
-  [{:keys [icon label on-press disabled accessibility-label]}]
+  [{:keys [icon label on-press disabled accessibility-label style]}]
   [button/button
    (merge {:on-press on-press
            :disabled disabled}
@@ -89,7 +89,8 @@
                    :theme :icon}
             label {:type :secondary})
           (when accessibility-label
-            {:accessibility-label accessibility-label}))
+            {:accessibility-label accessibility-label})
+          {:style style})
    (cond
      icon  icon
      label label)])

src/quo/components/list/item.cljs

@@ -90,9 +90,11 @@
 (defn title-column
   [{:keys [title text-color subtitle subtitle-max-lines subtitle-secondary
            title-accessibility-label size text-size title-text-weight
+           title-style
            right-side-present?]}]
   [rn/view
    {:style (merge (:tiny spacing/padding-horizontal)
+                  title-style
                   ;; make left-side title grow if nothing is present on right-side
                   (when-not right-side-present?
                     {:flex            1
@@ -215,8 +217,10 @@
 
 (defn list-item
   [{:keys [theme accessory disabled subtitle-max-lines icon icon-container-style
+           icon-size
            left-side-alignment icon-color icon-bg-color
            title subtitle subtitle-secondary active on-press on-long-press chevron size text-size
+           title-style
            accessory-text accessibility-label title-accessibility-label accessory-style
            haptic-feedback haptic-type error animated animated-accessory? title-text-weight
            container-style
@@ -267,10 +271,12 @@
       [container {:size size :container-style container-style}
        [left-side
         {:icon-color                icon-color
+         :icon-size                 icon-size
          :text-color                (if on-press
                                       text-color
                                       (:text-color (themes :main)))
          :left-side-alignment       left-side-alignment
+         :title-style               title-style
          :icon-bg-color             icon-bg-color
          :title-accessibility-label title-accessibility-label
          :icon                      icon

src/status_im/ui/screens/screens.cljs

@@ -10,6 +10,7 @@
     [status-im.ui.screens.bootnodes-settings.edit-bootnode.views :as edit-bootnode]
     [status-im.ui.screens.bootnodes-settings.views :as bootnodes-settings]
     [status-im.ui.screens.browser.bookmarks.views :as bookmarks]
+    [status-im.ui.screens.browser.stack :as browser]
     [status-im.ui.screens.bug-report :as bug-report]
     [status-im.ui.screens.communities.create :as communities.create]
     [status-im.ui.screens.communities.import :as communities.import]
@@ -51,7 +52,6 @@
     [status-im.ui.screens.profile.contact.views :as contact]
     [status-im.ui.screens.profile.group-chat.views :as profile.group-chat]
     [status-im.ui.screens.profile.seed.views :as profile.seed]
-    [status-im.ui.screens.profile.user.views :as profile.user]
     [status-im.ui.screens.progress.views :as progress]
     [status-im.ui.screens.qr-scanner.views :as qr-scanner]
     [status-im.ui.screens.reset-password.views :as reset-password]
@@ -110,7 +110,6 @@
     :component stickers/pack}
 
    ;; Community (legacy only for e2e needed)
-
    {:name      :community-members
     ;;TODO custom subtitle
     :options   {:insets {:top? true}}
@@ -221,9 +220,6 @@
 
    ;;PROFILE
 
-   {:name      :my-profile
-    :options   {:topBar {:visible false}}
-    :component profile.user/my-profile}
    {:name      :contacts-list
     :options   {:topBar {:title {:text (i18n/label :t/contacts)}}
                 :insets {:top? true}}
@@ -530,6 +526,11 @@
     :options   {:insets {:bottom? true
                          :top?    true}}
     :component bookmarks/new-bookmark}
+   {:name      :browser
+    ;;TODO dynamic title
+    :options   {:insets {:bottom? false
+                         :top?    false}}
+    :component browser/browser-stack}
 
    ;Profile
    {:name      :profile
@@ -661,13 +662,11 @@
    {:name      :change-pairing-code
     :insets    {:bottom? true}
     :component keycard.pairing/change-pairing-code}
-
    {:name      :show-all-connections
     :options   {:topBar {:title {:text (i18n/label :all-connections)}}
                 :insets {:bottom? true
                          :top?    true}}
     :component manage-all-connections/views}
-
    ;; BUG REPORT
    {:name      :bug-report
     :options   {:insets {:top? true}}

src/status_im2/contexts/profile/profiles/components.cljs

@@ -0,0 +1,70 @@
+(ns status-im2.contexts.profile.profiles.components
+  (:require [react-native.core :as rn]
+            [quo2.core :as quo]
+            [status-im2.contexts.profile.profiles.style :as styles]
+            [status-im2.contexts.chat.messages.avatar.view :as avatar]
+            [status-im.multiaccounts.core :as multiaccounts]))
+
+(def top-background-view
+  [rn/view
+   {:style styles/top-background-view}])
+
+(defn button
+  [{:keys [icon accessibility-label on-press style]}]
+  [quo/button
+   {:icon-only?          true
+    :type                :grey
+    :background          :blur
+    :size                32
+    :container-style     style
+    :accessibility-label accessibility-label
+    :on-press            on-press}
+   icon])
+
+(defn fixed-toolbar
+  [{:keys [on-close on-switch-profile on-show-qr on-share]}]
+  [rn/view
+   {:style styles/toolbar}
+   [button
+    {:icon                :i/close
+     :accessibility-label :close-header-button
+     :on-press            on-close
+     :style               {:margin-left 20}}]
+   [rn/view
+    {:style styles/right-accessories}
+    [button
+     {:icon                :i/multi-profile
+      :accessibility-label :multi-profile-header-button
+      :on-press            on-switch-profile}]
+    [button
+     {:icon                :i/qr-code
+      :accessibility-label :qr-header-button
+      :on-press            on-show-qr
+      :style               {:margin-horizontal 14}}]
+    [button
+     {:icon                :i/share
+      :accessibility-label :share-header-button
+      :on-press            on-share}]]])
+
+(defn user-info
+  [{:keys [emoji-hash account public-key about]}]
+  [rn/view
+   [rn/view
+    {:style styles/avatar}
+    [avatar/avatar public-key :big]]
+
+   [rn/view
+    {:style styles/user-info}
+    [quo/text
+     {:size   :heading-1
+      :weight :semi-bold
+      :style  {:margin-top 16}}
+     (multiaccounts/displayed-name account)]
+    [quo/text
+     {:size  :paragraph-1
+      :style {:margin-top 8}}
+     about]
+    [quo/text
+     {:size  :paragraph-1
+      :style {:margin-top 8}}
+     emoji-hash]]])

src/status_im2/contexts/profile/profiles/list_items.cljs

@@ -0,0 +1,190 @@
+(ns status-im2.contexts.profile.profiles.list-items
+  (:require [quo2.core :as quo2]
+            [quo.core :as quo]
+            [quo.design-system.colors :as colors]
+            [re-frame.core :as re-frame]
+            [status-im.ui.components.badge :as components.common]
+            [react-native.core :as rn]
+            [status-im2.contexts.profile.profiles.style :as styles]
+            [utils.i18n :as i18n]
+            [quo2.components.icon :as icons]
+            [quo2.foundations.colors :as fcolors]))
+
+(def separator
+  [quo2/separator])
+
+(defn list-item
+  [{:keys [icon title accessibility-label chevron accessory on-press title-style]}]
+  [quo/list-item
+   {:icon                icon
+    :icon-bg-color       "transparent"
+    :icon-size           32
+    :icon-color          (:text-03 @colors/theme)
+    :title               title
+    :title-color         (:text-01 @colors/theme)
+    :title-style         (merge {:padding-horizontal 0} title-style)
+    :accessibility-label accessibility-label
+    :chevron             chevron
+    :size                :small
+    :container-style     styles/list-item-container
+    :accessory           accessory
+    :on-press            on-press}])
+
+(def personal-info-group
+  [rn/view
+   {:style styles/rounded-view}
+   [list-item
+    {:icon                :i/edit-profile
+     :title               (i18n/label :t/edit-profile)
+     :accessibility-label :edit-profile-settings-button
+     :chevron             true
+     ;;  TODO: No edit profile action
+     ;;  :on-press            #(re-frame/dispatch [:navigate-to :edit])
+     }]
+   separator
+   [list-item
+    {:icon                :i/key-profile
+     :title               (i18n/label :t/password)
+     :accessibility-label :password-settings-button
+     :chevron             true
+     :on-press            #(re-frame/dispatch [:navigate-to :reset-password])}]])
+
+(defn activity-settings-group
+  [{:keys [mnemonic]}]
+
+  [rn/view
+   {:style styles/rounded-view}
+   [list-item
+    {:icon                :i/message-profile
+     :title               (i18n/label :t/messages)
+     :accessibility-label :message-settings-button
+     :chevron             true
+     :accessory           (when mnemonic
+                            [components.common/badge {:size 22} 1])
+      ;; TODO: Chat home doesn't look great
+      ;; :on-press            #(re-frame/dispatch [:navigate-to :chat])
+     }]
+   separator
+   [list-item
+    {:icon                :i/communities
+     :title               (i18n/label :t/communities)
+     :accessibility-label :communities-settings-button
+     :chevron             true
+     :accessory           (when mnemonic
+                            [components.common/badge {:size 22} 1])
+     ;;  TODO: Community home doesn't work correctly
+     ;;  :on-press            #(re-frame/dispatch [:navigate-to :community-home])
+     }]
+   separator
+   [list-item
+    {:icon                :i/wallet-profile
+     :title               (i18n/label :t/wallet)
+     :accessibility-label :wallet-settings-button
+     :chevron             true
+     ;;  TODO: Wallet screen needs back button
+     :on-press            #(re-frame/dispatch [:navigate-to :wallet])}]
+   separator
+   [list-item
+    {:icon                :i/dapps
+     :title               (i18n/label :t/dapps)
+     :accessibility-label :dapps-settings-button
+     :chevron             true
+     :on-press            #(re-frame/dispatch [:browser.ui/open-url "https://dap.ps"])}]
+   separator
+   [list-item
+    {:icon                :i/browser
+     :title               (i18n/label :t/browser)
+     :accessibility-label :browser-settings-button
+     :chevron             true
+     ;;  TODO: Needs back button?
+     :on-press            #(re-frame/dispatch [:navigate-to :browser])}]
+   separator
+   [list-item
+    {:icon                :i/keycard-profile
+     :title               (i18n/label :t/keycard)
+     :accessibility-label :keycard-settings-button
+     :chevron             true
+     :on-press            #(re-frame/dispatch [:navigate-to :keycard-settings])}]])
+
+(defn device-settings-group
+  [{:keys [local-pairing-mode-enabled?]}]
+  [rn/view
+   {:style styles/rounded-view}
+   (when local-pairing-mode-enabled?
+     [rn/view
+      [list-item
+       {:icon                :i/syncing
+        :title               (i18n/label :t/syncing)
+        :accessibility-label :syncing-settings-button
+        :chevron             true
+        :on-press            #(re-frame/dispatch [:navigate-to :settings-syncing])}]
+      separator])
+   [list-item
+    {:icon                :i/notification
+     :title               (i18n/label :t/notifications)
+     :accessibility-label :notifications-settings-button
+     :chevron             true
+     :on-press            #(re-frame/dispatch [:navigate-to :notifications])}]
+   separator
+   [list-item
+    {:icon                :i/appearance
+     :title               (i18n/label :t/appearance)
+     :accessibility-label :appearance-settings-button
+     :chevron             true
+     :on-press            #(re-frame/dispatch [:navigate-to :appearance])}]
+   separator
+   [list-item
+    {:icon                :i/globe
+     :title               (i18n/label :t/language-and-currency)
+     :accessibility-label :language-settings-button
+     :chevron             true
+     ;;  TODO: No language screen
+     ;;  :on-press            #(re-frame/dispatch [:navigate-to :appearance])
+     }]])
+
+(def advanced-settings-group
+  [rn/view
+   {:style styles/rounded-view}
+   [list-item
+    {:icon                :i/mobile-profile
+     :title               (i18n/label :t/data-usage)
+     :accessibility-label :data-usage-settings-button
+     :chevron             true
+     :on-press            #(re-frame/dispatch [:navigate-to :mobile-network-settings])}]
+   separator
+   [list-item
+    {:icon                :i/settings
+     :title               (i18n/label :t/advanced)
+     :accessibility-label :advanced-settings-button
+     :chevron             true
+     :on-press            #(re-frame/dispatch [:navigate-to :advanced-settings])}]])
+
+(def about-help-group
+  [rn/view
+   {:style styles/rounded-view}
+   [list-item
+    {:title               (i18n/label :t/about-app)
+     :accessibility-label :about-button
+     :chevron             true
+     :title-style         {:margin-horizontal 16}
+     :on-press            #(re-frame/dispatch [:navigate-to :about-app])}]
+   separator
+   [list-item
+    {:title               (i18n/label :t/status-help)
+     :accessibility-label :help-button
+     :chevron             false
+     :accessory           [icons/icon :i/external {:color colors/gray}]
+     :title-style         {:margin-horizontal 16}
+     :on-press            #(re-frame/dispatch [:navigate-to :help-center])}]])
+
+(def logout-item
+  [rn/view
+   {:style styles/logout-container
+    :on-press
+    #(re-frame/dispatch [:multiaccounts.logout.ui/logout-pressed])
+    :accessibility-label :log-out-button}
+   [icons/icon :i/log-out {:color fcolors/danger-60}]
+   [quo2/text
+    {:style {:color       fcolors/danger-60
+             :margin-left 8}}
+    (i18n/label :t/logout)]])