[#18453] feat: implement change accent colour screen

src/status_im/contexts/profile/edit/accent_colour/style.cljs

@@ -0,0 +1,27 @@
+(ns status-im.contexts.profile.edit.accent-colour.style
+  (:require [quo.foundations.colors :as colors]))
+
+(defn page-wrapper
+  [insets]
+  {:padding-top        (:top insets)
+   :padding-bottom     (:bottom insets)
+   :padding-horizontal 1
+   :flex               1})
+
+(def screen-container
+  {:flex               1
+   :padding-top        14
+   :padding-horizontal 20
+   :justify-content    :space-between})
+
+(def color-title
+  {:color         colors/white-70-blur
+   :margin-top    20
+   :margin-bottom 16})
+
+(def button-wrapper
+  {:margin-vertical 12})
+
+(def profile-card
+  {:margin-top    22
+   :margin-bottom 5})

src/status_im/contexts/profile/edit/accent_colour/view.cljs

@@ -0,0 +1,61 @@
+(ns status-im.contexts.profile.edit.accent-colour.view
+  (:require [quo.core :as quo]
+            [react-native.core :as rn]
+            [react-native.safe-area :as safe-area]
+            [reagent.core :as reagent]
+            [status-im.constants :as constants]
+            [status-im.contexts.profile.edit.accent-colour.style :as style]
+            [status-im.contexts.profile.utils :as profile.utils]
+            [utils.i18n :as i18n]
+            [utils.re-frame :as rf]
+            [utils.responsiveness :as responsiveness]))
+
+(defn view
+  []
+  (let [insets                (safe-area/get-insets)
+        {window-width :width} (rn/get-window)
+        profile               (rf/sub [:profile/profile-with-image])
+        customization-color   (rf/sub [:profile/customization-color])
+        profile-picture       (profile.utils/photo profile)
+        display-name          (profile.utils/displayed-name profile)
+        custom-color          (reagent/atom (or customization-color
+                                                constants/profile-default-color))
+        on-change             #(reset! custom-color %)]
+    (fn []
+      [quo/overlay
+       {:type            :shell
+        :container-style (style/page-wrapper insets)}
+       [quo/page-nav
+        {:key        :header
+         :background :blur
+         :icon-name  :i/arrow-left
+         :on-press   #(rf/dispatch [:navigate-back])}]
+       [rn/view
+        {:key   :content
+         :style style/screen-container}
+        [rn/view {:style {:flex 1}}
+         [quo/text-combinations {:title (i18n/label :t/accent-colour)}]
+         [quo/profile-card
+          {:profile-picture     profile-picture
+           :name                display-name
+           :card-style          style/profile-card
+           :customization-color @custom-color}]
+         [quo/text
+          {:size   :paragraph-2
+           :weight :medium
+           :style  style/color-title}
+          (i18n/label :t/accent-colour)]
+         [quo/color-picker
+          {:blur?            true
+           :default-selected @custom-color
+           :on-change        on-change
+           :window-width     window-width
+           :container-style  {:padding-left (responsiveness/iphone-11-Pro-20-pixel-from-width
+                                             window-width)}}]]
+        [rn/view {:style style/button-wrapper}
+         [quo/button
+          {:type                :primary
+           :customization-color @custom-color
+           :on-press            (fn []
+                                  (rf/dispatch [:profile/edit-accent-colour @custom-color]))}
+          (i18n/label :t/save-colour)]]]])))

src/status_im/contexts/profile/edit/list_items.cljs

@@ -25,7 +25,7 @@
                :action          :arrow
                :container-style style/item-container}
               {:title           (i18n/label :t/accent-colour)
-               :on-press        not-implemented/alert
+               :on-press        #(rf/dispatch [:open-modal :edit-accent-colour])
                :label           :color
                :label-props     (colors/resolve-color customization-color theme)
                :blur?           true

src/status_im/navigation/screens.cljs

@@ -34,6 +34,7 @@
     [status-im.contexts.preview.quo.component-preview.view :as component-preview]
     [status-im.contexts.preview.quo.main :as quo.preview]
     [status-im.contexts.preview.status-im.main :as status-im-preview]
+    [status-im.contexts.profile.edit.accent-colour.view :as edit-accent-colour]
     [status-im.contexts.profile.edit.name.view :as edit-name]
     [status-im.contexts.profile.edit.view :as edit-profile]
     [status-im.contexts.profile.profiles.view :as profiles]
@@ -172,6 +173,10 @@
      :options   options/transparent-screen-options
      :component edit-profile/view}
 
+    {:name      :edit-accent-colour
+     :options   options/transparent-screen-options
+     :component edit-accent-colour/view}
+
     {:name      :edit-name
      :options   options/transparent-screen-options
      :component edit-name/view}

translations/en.json

@@ -1242,6 +1242,7 @@
     "revoke-access": "Revoke access",
     "rpc-url": "RPC URL",
     "save": "Save",
+    "save-colour": "Save colour",
     "save-name": "Save name",
     "save-password": "Save password",
     "save-password-unavailable": "Set device passcode to save password",