[#17986] feat: implement new settings ui, header section

Author: mohsen-ghafouri

Diff for: src/status_im2/common/home/top_nav/view.cljs

@@ -33,7 +33,7 @@
                                            :unread-indicator/new  :mention
                                            nil)]
     [quo/top-nav
-     {:avatar-on-press          #(rf/dispatch [:navigate-to :my-profile])
+     {:avatar-on-press          #(rf/dispatch [:open-modal :settings])
       :scan-on-press            #(js/alert "to be implemented")
       :activity-center-on-press #(rf/dispatch [:activity-center/open])
       :qr-code-on-press         #(dispatch-and-chill [:open-modal :share-shell] 1000)

Diff for: src/status_im2/contexts/profile/settings/constants.cljs

@@ -0,0 +1,63 @@
+(ns status-im2.contexts.profile.settings.constants
+  (:require [status-im2.common.not-implemented :as not-implemented]
+            [utils.i18n :as i18n]
+            [utils.re-frame :as rf]))
+
+(defn create-setting-item
+  [{:keys [title on-press icon]}]
+  (merge {:title    (i18n/label title)
+          :on-press on-press
+          :action   :arrow}
+         (when icon
+           {:image       :icon
+            :image-props icon})))
+
+(def settings-items
+  [[{:title       "Legacy Settings"
+     :on-press    #(rf/dispatch [:navigate-to :my-profile])
+     :action      :arrow
+     :image       :icon
+     :image-props :i/settings}]
+   [(create-setting-item {:title    :t/edit-profile
+                          :on-press not-implemented/alert
+                          :icon     :i/edit})
+    (create-setting-item {:title    :t/password
+                          :on-press not-implemented/alert
+                          :icon     :i/password})]
+   [(create-setting-item {:title    :t/messages
+                          :on-press not-implemented/alert
+                          :icon     :i/messages})
+    (create-setting-item {:title    :t/wallet
+                          :on-press not-implemented/alert
+                          :icon     :i/wallet})
+    (create-setting-item {:title    :t/dapps
+                          :on-press not-implemented/alert
+                          :icon     :i/placeholder})
+    (create-setting-item {:title    :t/browser
+                          :on-press not-implemented/alert
+                          :icon     :i/browser})
+    (create-setting-item {:title    :t/keycard
+                          :on-press not-implemented/alert
+                          :icon     :i/keycard})]
+   [(create-setting-item {:title    :t/syncing
+                          :on-press not-implemented/alert
+                          :icon     :i/syncing})
+    (create-setting-item {:title    :t/notifications
+                          :on-press not-implemented/alert
+                          :icon     :i/notifications})
+    (create-setting-item {:title    :t/appearance
+                          :on-press not-implemented/alert
+                          :icon     :i/light})
+    (create-setting-item {:title    :t/language-and-currency
+                          :on-press not-implemented/alert
+                          :icon     :i/globe})]
+   [(create-setting-item {:title    :t/data-usage
+                          :on-press not-implemented/alert
+                          :icon     :i/mobile})
+    (create-setting-item {:title    :t/advanced
+                          :on-press not-implemented/alert
+                          :icon     :i/settings})]
+   [(create-setting-item {:title    :t/about
+                          :on-press not-implemented/alert})
+    (create-setting-item {:title    :t/status-help
+                          :on-press not-implemented/alert})]])

Diff for: src/status_im2/contexts/profile/settings/header/style.cljs

@@ -0,0 +1,23 @@
+(ns status-im2.contexts.profile.settings.header.style
+  (:require [quo.foundations.colors :as colors]))
+(defonce ^:const navigation-bar-height 100)
+(defonce ^:const header-offset 56)
+
+(defn header-view
+  [customization-color theme]
+  {:background-color (colors/resolve-color customization-color theme 40)
+   :min-height       100
+   :flex             1})
+
+(def avatar-container
+  {:display         :flex
+   :padding-left    20
+   :padding-right   12
+   :margin-top      -56
+   :align-items     :flex-end
+   :justify-content :space-between
+   :flex-direction  :row})
+
+(def title-container
+  {:padding-horizontal 20
+   :padding-vertical   12})

Diff for: src/status_im2/contexts/profile/settings/header/view.cljs

@@ -0,0 +1,57 @@
+(ns status-im2.contexts.profile.settings.header.view
+  (:require [clojure.string :as string]
+            [quo.core :as quo]
+            [quo.foundations.colors :as colors]
+            [quo.theme :as quo.theme]
+            [react-native.core :as rn]
+            [react-native.svg :as svg]
+            [status-im2.contexts.profile.settings.header.style :as style]
+            [status-im2.contexts.profile.utils :as profile.utils]
+            [utils.i18n :as i18n]
+            [utils.re-frame :as rf]))
+
+(defn svg-view
+  [customization-color theme]
+  (let [background-color (colors/resolve-color customization-color theme 40)]
+    [svg/svg {:width "390" :height "68" :viewBox "0 0 390 68" :fill "none"}
+     [svg/path
+      {:d
+       "M0 0H390V68C390 56.9543 381.046 48 370 48H103.821C101.8 25.574 82.9522 8 60 8C36.9215 8 17.993 25.768 16.1475 48.3707C6.94517 50.1664 0 58.2721 0 68V0Z"
+       :fill background-color}]]))
+
+(defn- f-view
+  [theme]
+  (let [{:keys [public-key emoji-hash] :as profile} (rf/sub [:profile/profile-with-image])
+        online?                                     (rf/sub [:visibility-status-updates/online?
+                                                             public-key])
+        customization-color                         (rf/sub [:profile/customization-color])
+        full-name                                   (profile.utils/displayed-name profile)
+        profile-picture                             (profile.utils/photo profile)
+        emoji-string                                (string/join emoji-hash)]
+    [rn/view
+     [svg-view customization-color theme]
+     [rn/view {:style style/avatar-container}
+      [quo/user-avatar
+       {:full-name           full-name
+        :online?             online?
+        :profile-picture     profile-picture
+        :status-indicator?   true
+        :ring?               true
+        :customization-color customization-color
+        :size                :big}]
+      [quo/dropdown
+       {:background :blur
+        :size       :size-32
+        :type       :outline
+        :icon?      true
+        :icon-name  :i/online}
+       (i18n/label :t/status-always-online)]]
+     [quo/text-combinations
+      {:container-style style/title-container
+       :emoji-hash      emoji-string
+       :title           full-name}]]))
+
+(defn- internal-header-view
+  [params]
+  [:f> f-view params])
+(def view (quo.theme/with-theme internal-header-view))

Diff for: src/status_im2/contexts/profile/settings/style.cljs

@@ -0,0 +1,11 @@
+(ns status-im2.contexts.profile.settings.style
+  (:require [quo.foundations.colors :as colors]))
+
+(defn navigation-wrapper
+  [{:keys [customization-color inset theme]}]
+  {:padding-top      inset
+   :background-color (colors/resolve-color customization-color theme 40)})
+
+(def footer-container
+  {:padding-horizontal 20
+   :padding-vertical   12})

Diff for: src/status_im2/contexts/profile/settings/view.cljs

@@ -0,0 +1,51 @@
+(ns status-im2.contexts.profile.settings.view
+  (:require [quo.core :as quo]
+            [quo.theme :as quo.theme]
+            [react-native.core :as rn]
+            [react-native.safe-area :as safe-area]
+            [status-im2.common.not-implemented :as not-implemented]
+            [status-im2.contexts.profile.settings.constants :as settings.constants]
+            [status-im2.contexts.profile.settings.header.view :as settings.header]
+            [status-im2.contexts.profile.settings.style :as style]
+            [utils.debounce :as debounce]
+            [utils.i18n :as i18n]
+            [utils.re-frame :as rf]))
+
+(defn- f-settings-item-view
+  [data]
+  (println data)
+  [quo/category
+   {:list-type :settings
+    :blur?     true
+    :data      data}])
+
+(defn- settings-view
+  [theme]
+  (let [insets              (safe-area/get-insets)
+        customization-color (rf/sub [:profile/customization-color])]
+    [quo/overlay {:type :shell}
+     [:<>
+      [rn/view
+       {:style (style/navigation-wrapper {:customization-color customization-color
+                                          :inset               (:top insets)
+                                          :theme               theme})}
+       [quo/page-nav
+        {:background :blur
+         :icon-name  :i/close
+         :on-press   #(rf/dispatch [:navigate-back])
+         :right-side [{:icon-name :i/multi-profile :on-press #(rf/dispatch [:open-modal :sign-in])}
+                      {:icon-name :i/qr-code :on-press not-implemented/alert}
+                      {:icon-name :i/share
+                       :on-press  #(debounce/dispatch-and-chill [:open-modal :share-shell] 1000)}]}]]
+      [rn/flat-list
+       {:header                          [settings.header/view]
+        :data                            settings.constants/settings-items
+        :key-fn                          str
+        :shows-vertical-scroll-indicator false
+        :render-fn                       f-settings-item-view
+        :footer                          [rn/view {:style style/footer-container}
+                                          [quo/button {:type :danger :icon-left :i/log-out}
+                                           (i18n/label :t/logout)]]
+        :bounces                         false}]]]))
+
+(def view (quo.theme/with-theme settings-view))

Diff for: src/status_im2/navigation/screens.cljs

@@ -27,6 +27,7 @@
     [status-im2.contexts.onboarding.syncing.results.view :as syncing-results]
     [status-im2.contexts.onboarding.welcome.view :as welcome]
     [status-im2.contexts.profile.profiles.view :as profiles]
+    [status-im2.contexts.profile.settings.view :as settings]
     [status-im2.contexts.quo-preview.component-preview.view :as component-preview]
     [status-im2.contexts.quo-preview.main :as quo.preview]
     [status-im2.contexts.shell.activity-center.view :as activity-center]
@@ -116,6 +117,10 @@
     {:name      :community-overview
      :component communities.overview/overview}
 
+    {:name      :settings
+     :options   options/transparent-screen-options
+     :component settings/view}
+
     {:name      :settings-syncing
      :options   (merge options/dark-screen {:insets {:top? true}})
      :component settings-syncing/view}

Diff for: translations/en.json

@@ -480,7 +480,7 @@
     "done": "Done",
     "edit": "Edit",
     "edit-group": "Edit group",
-    "edit-profile": "Edit profile",
+    "edit-profile": "Edit Profile",
     "emojihash": "Emojihash",
     "emojihash-description": "A visual representation of your chat key. It will help other users recognize your profile.",
     "emojis": "Emojis",
@@ -1005,6 +1005,8 @@
     "buy-crypto": "Buy crypto",
     "buy-crypto-choose-a-service": "Choose a service you'd like to use to buy crypto",
     "buy-crypto-leaving": "You are leaving Status and entering a third party website to complete your purchase",
+    "data-usage": "Data usage",
+    "language-and-currency": "Language and currency",
     "opening-buy-crypto": "Opening {{site}}...",
     "network": "Network",
     "network-chain": "Network chain",
@@ -1313,6 +1315,7 @@
     "status-pending": "Pending",
     "status-tx-not-found": "TX not found",
     "status-sent": "Sent",
+    "status-help": "Status Help",
     "status-not-sent-tap": "Not confirmed. Tap for options",
     "status-not-sent-click": "Not confirmed. Click for options",
     "step-i-of-n": "Step {{step}} of {{number}}",