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

Author: mohsen-ghafouri

src/quo/components/overlay/style.cljs

@@ -0,0 +1,22 @@
+(ns quo.components.overlay.style
+  (:require [quo.foundations.colors :as colors]))
+
+(defn overlay-background
+  [type]
+  (let [background-color (case type
+                           :shell  colors/neutral-80-opa-80-blur
+                           :drawer colors/neutral-100-opa-70-blur
+                           nil)]
+    {:position         :absolute
+     :top              0
+     :left             0
+     :right            0
+     :bottom           0
+     :background-color background-color}))
+
+(def container
+  {:flex 1})
+
+(def blur-container
+  {:flex             1
+   :background-color :transparent})

src/quo/components/overlay/view.cljs

@@ -0,0 +1,20 @@
+(ns quo.components.overlay.view
+  (:require
+    [quo.components.overlay.style :as style]
+    [react-native.blur :as blur]
+    [react-native.core :as rn]))
+
+(defn view
+  [{:keys [type]} & children]
+  [rn/view {:style (style/overlay-background type)}
+   (if (= type :shell)
+     [blur/view
+      {:blur-amount   20
+       :blur-radius   25
+       :blur-type     :transparent
+       :overlay-color :transparent
+       :style         style/container}
+      [rn/view {:style style/blur-container}
+       children]]
+     [rn/view {:style style/container}
+      children])])

src/quo/components/text_combinations/style.cljs

@@ -9,3 +9,8 @@
 
 (def description-description-text
   {:margin-top 8})
+
+(def emoji-hash
+  {:margin-top     8
+   :letter-spacing 0.5
+   :line-height    20.5})

src/quo/components/text_combinations/view.cljs

@@ -27,7 +27,8 @@
            description-accessibility-label
            button-icon
            button-on-press
-           customization-color]}]
+           customization-color
+           emoji-hash]}]
   [rn/view {:style container-style}
    [rn/view
     {:style {:flex-direction  :row
@@ -55,6 +56,11 @@
        :weight              :regular
        :size                :paragraph-1
        :style               style/description-description-text}
-      description])])
+      description])
+   (when emoji-hash
+     [text/text
+      {:number-of-lines 1
+       :style           style/emoji-hash}
+      emoji-hash])])
 
 (def view (theme/with-theme view-internal))

src/quo/core.cljs

@@ -101,6 +101,7 @@
     quo.components.numbered-keyboard.keyboard-key.view
     quo.components.numbered-keyboard.numbered-keyboard.view
     quo.components.onboarding.small-option-card.view
+    quo.components.overlay.view
     quo.components.password.tips.view
     quo.components.profile.collectible.view
     quo.components.profile.profile-card.view
@@ -316,6 +317,9 @@
 (def notification quo.components.notifications.notification.view/notification)
 (def toast quo.components.notifications.toast.view/toast)
 
+;;;; Overlay
+(def overlay quo.components.overlay.view/view)
+
 ;;;; Password
 (def tips quo.components.password.tips.view/view)
 

src/quo/foundations/colors.cljs

@@ -148,7 +148,9 @@
 (def black-opa-30 (alpha black 0.3))
 (def black-opa-60 (alpha black 0.6))
 (def onboarding-header-black "#000716")
-
+(def border-avatar-light
+  "Simulates a blurred, transparent border for avatars in light mode"
+  "#475060")
 ;;;;Primary
 
 ;;Solid

src/status_im2/contexts/profile/settings/header/avatar.cljs

@@ -0,0 +1,43 @@
+(ns status-im2.contexts.profile.settings.header.avatar
+  (:require [quo.core :as quo]
+            [quo.theme :as quo.theme]
+            [react-native.reanimated :as reanimated]
+            [status-im2.contexts.profile.settings.header.style :as style]))
+
+(def scroll-animation-input-range [0 50])
+(def header-extrapolation-option
+  {:extrapolateLeft  "clamp"
+   :extrapolateRight "clamp"})
+
+(defn f-avatar
+  [{:keys [scroll-y full-name online? profile-picture customization-color]}]
+  (let [image-scale-animation       (reanimated/interpolate scroll-y
+                                                            scroll-animation-input-range
+                                                            [1 0.5]
+                                                            header-extrapolation-option)
+        image-top-margin-animation  (reanimated/interpolate scroll-y
+                                                            scroll-animation-input-range
+                                                            [0 20]
+                                                            header-extrapolation-option)
+        image-side-margin-animation (reanimated/interpolate scroll-y
+                                                            scroll-animation-input-range
+                                                            [0 -20]
+                                                            header-extrapolation-option)
+        theme                       (quo.theme/get-theme)]
+    [reanimated/view
+     {:style (style/avatar-container theme
+                                     image-scale-animation
+                                     image-top-margin-animation
+                                     image-side-margin-animation)}
+     [quo/user-avatar
+      {:full-name           full-name
+       :online?             online?
+       :profile-picture     profile-picture
+       :status-indicator?   true
+       :ring?               true
+       :customization-color customization-color
+       :size                :big}]]))
+
+(defn view
+  [props]
+  [:f> f-avatar props])

src/status_im2/contexts/profile/settings/header/header_shape.cljs

@@ -0,0 +1,36 @@
+(ns status-im2.contexts.profile.settings.header.header-shape
+  (:require [quo.foundations.colors :as colors]
+            [react-native.core :as rn]
+            [react-native.reanimated :as reanimated]
+            [react-native.svg :as svg]
+            [status-im2.contexts.profile.settings.header.style :as style]))
+
+(defn left-radius
+  [background-color]
+  [svg/svg {:width "20" :height "20" :viewBox "0 0 20 20" :fill "none"}
+   [svg/path
+    {:d    "M20 0C7 2 0 10 0 20V0H15Z"
+     :fill background-color}]])
+
+(defn right-radius
+  [background-color]
+  [svg/svg {:width "20" :height "21" :viewBox "0 0 20 21" :fill "none"}
+   [svg/path
+    {:d    "M20 20V0H0C11 0 20 9 20 20Z"
+     :fill background-color}]])
+
+(defn f-view
+  [{:keys [scroll-y customization-color theme]}]
+  (let [background-color  (colors/resolve-color customization-color theme 40)
+        opacity-animation (reanimated/interpolate scroll-y
+                                                  [0 45 50]
+                                                  [1 1 0])]
+    [:<>
+     [rn/view {:style (style/header-middle-shape background-color)}]
+     [reanimated/view {:style (style/radius-container opacity-animation)}
+      [left-radius background-color]
+      [right-radius background-color]]]))
+
+(defn view
+  [props]
+  [:f> f-view props])

src/status_im2/contexts/profile/settings/header/style.cljs

@@ -0,0 +1,48 @@
+(ns status-im2.contexts.profile.settings.header.style
+  (:require [quo.foundations.colors :as colors]
+            [react-native.reanimated :as reanimated]))
+
+(defn header-view
+  [customization-color theme]
+  {:background-color (colors/resolve-color customization-color theme 40)
+   :min-height       100
+   :flex             1})
+
+(def avatar-row-wrapper
+  {:display         :flex
+   :padding-left    16
+   :padding-right   12
+   :margin-top      -60
+   :margin-bottom   -4
+   :align-items     :flex-end
+   :justify-content :space-between
+   :flex-direction  :row})
+
+(def title-container
+  {:padding-horizontal 20
+   :padding-vertical   12})
+
+(defn header-middle-shape
+  [background-color]
+  {:background-color background-color
+   :height           48
+   :flex-grow        1})
+
+(defn radius-container
+  [opacity-animation]
+  (reanimated/apply-animations-to-style
+   {:opacity opacity-animation}
+   {:flex-direction  :row
+    :justify-content :space-between}))
+
+(defn avatar-container
+  [theme scale-animation top-margin-animation side-margin-animation]
+  (reanimated/apply-animations-to-style
+   {:transform     [{:scale scale-animation}]
+    :margin-top    top-margin-animation
+    :margin-left   side-margin-animation
+    :margin-bottom side-margin-animation}
+   {:align-items   :flex-start
+    :border-width  4
+    :border-color  (colors/theme-colors colors/border-avatar-light colors/neutral-80-opa-80 theme)
+    :border-radius 100}))

src/status_im2/contexts/profile/settings/header/view.cljs

@@ -0,0 +1,49 @@
+(ns status-im2.contexts.profile.settings.header.view
+  (:require [clojure.string :as string]
+            [quo.core :as quo]
+            [quo.theme :as quo.theme]
+            [react-native.core :as rn]
+            [status-im2.common.not-implemented :as not-implemented]
+            [status-im2.contexts.profile.settings.header.avatar :as header.avatar]
+            [status-im2.contexts.profile.settings.header.header-shape :as header.shape]
+            [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- f-view
+  [{:keys [theme scroll-y]}]
+  (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)]
+    [:<>
+     [header.shape/view
+      {:scroll-y            scroll-y
+       :customization-color customization-color
+       :theme               theme}]
+     [rn/view {:style style/avatar-row-wrapper}
+      [header.avatar/view
+       {:scroll-y            scroll-y
+        :display-name        full-name
+        :online?             online?
+        :customization-color customization-color
+        :profile-picture     profile-picture}]
+      [rn/view {:style {:margin-bottom 4}}
+       [quo/dropdown
+        {:background :blur
+         :size       :size-32
+         :type       :outline
+         :icon?      true
+         :icon-name  :i/online
+         :on-press   not-implemented/alert}
+        (i18n/label :t/online)]]]
+     [quo/text-combinations
+      {:container-style style/title-container
+       :emoji-hash      emoji-string
+       :title           full-name}]]))
+
+(def view (quo.theme/with-theme f-view))

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

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

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})