[#17393] feat: add new setting ui (#18118)

src/legacy/status_im/browser/core_test.cljs

@@ -2,6 +2,7 @@
   (:require
     [cljs.test :refer-macros [deftest is testing]]
     [legacy.status-im.browser.core :as browser]
+    [utils.i18n :as i18n]
     [utils.url :as url]))
 
 (defn has-wrong-properties?
@@ -35,7 +36,7 @@
                                          :history-index 0
                                          :history       ["https://cryptokitties.co"]
                                          :dapp?         false
-                                         :name          "Browser"}))
+                                         :name          (i18n/label :t/browser)}))
             "some properties of the browser are not correct")
 
         (testing "then a second dapp"
@@ -70,7 +71,7 @@
                                              :history-index 0
                                              :history       ["https://cryptokitties.co"]
                                              :dapp?         false
-                                             :name          "Browser"}))
+                                             :name          (i18n/label :t/browser)}))
                 "some properties of the browser are not correct")
             (is (nil? (browser/navigate-to-next-page result-open-existing))
                 "nothing should happen if user tries to navigate to next page")
@@ -90,7 +91,7 @@
                                                  :history-index 1
                                                  :history       ["https://cryptokitties.co" dapp1-url2]
                                                  :dapp?         false
-                                                 :name          "Browser"}))
+                                                 :name          (i18n/label :t/browser)}))
                     "some properties of the browser are not correct")
 
                 (testing "then navigates to previous page"
@@ -103,7 +104,7 @@
                                                   :history-index 0
                                                   :history       ["https://cryptokitties.co" dapp1-url2]
                                                   :dapp?         false
-                                                  :name          "Browser"}))
+                                                  :name          (i18n/label :t/browser)}))
                      "some properties of the browser are not correct")
 
                     (testing "then navigates to next page")
@@ -116,5 +117,5 @@
                                                    :history-index 1
                                                    :history       ["https://cryptokitties.co" dapp1-url2]
                                                    :dapp?         false
-                                                   :name          "Browser"}))
+                                                   :name          (i18n/label :t/browser)}))
                           "some properties of the browser are not correct"))))))))))))

src/quo/components/buttons/logout_button/component_spec.cljs

@@ -0,0 +1,31 @@
+(ns quo.components.buttons.logout-button.component-spec
+  (:require
+    [quo.components.buttons.logout-button.view :as logout-button]
+    [test-helpers.component :as h]))
+
+(h/describe "button tests"
+  (h/test "default render of logout button component"
+    (h/render [logout-button/view])
+    (h/is-truthy (h/get-by-label-text :log-out-button)))
+
+  (h/test "button on-press works"
+    (let [event (h/mock-fn)]
+      (h/render [logout-button/view
+                 {:on-press event}])
+      (h/fire-event :press (h/get-by-label-text :log-out-button))
+      (h/was-called event)))
+
+  (h/test "button on-press disabled when disabled"
+    (let [event (h/mock-fn)]
+      (h/render [logout-button/view
+                 {:on-press  event
+                  :disabled? true}])
+      (h/fire-event :press (h/get-by-label-text :log-out-button))
+      (h/was-not-called event)))
+
+  (h/test "button on-long-press works"
+    (let [event (h/mock-fn)]
+      (h/render [logout-button/view
+                 {:on-long-press event}])
+      (h/fire-event :long-press (h/get-by-label-text :log-out-button))
+      (h/was-called event))))

src/quo/components/buttons/logout_button/style.cljs

@@ -0,0 +1,15 @@
+(ns quo.components.buttons.logout-button.style
+  (:require
+    [quo.foundations.colors :as colors]))
+
+(defn main
+  [{:keys [pressed? disabled?]}]
+  {:background-color (if pressed? colors/danger-50-opa-40 colors/danger-50-opa-30)
+   :border-radius    12
+   :height           40
+   :gap              4
+   :padding-right    3
+   :flex-direction   :row
+   :justify-content  :center
+   :align-items      :center
+   :opacity          (when disabled? 0.2)})

src/quo/components/buttons/logout_button/view.cljs

@@ -0,0 +1,34 @@
+(ns quo.components.buttons.logout-button.view
+  (:require
+    [quo.components.buttons.logout-button.style :as style]
+    [quo.components.icon :as icon]
+    [quo.components.markdown.text :as text]
+    [quo.foundations.colors :as colors]
+    [quo.theme :as quo.theme]
+    [react-native.core :as rn]
+    [reagent.core :as reagent]
+    [utils.i18n :as i18n]))
+
+(defn- view-internal
+  [_]
+  (let [pressed?     (reagent/atom false)
+        on-press-in  #(reset! pressed? true)
+        on-press-out #(reset! pressed? nil)]
+    (fn
+      [{:keys [on-press on-long-press disabled? theme container-style]}]
+      [rn/pressable
+       {:accessibility-label :log-out-button
+        :on-press            on-press
+        :on-press-in         on-press-in
+        :on-press-out        on-press-out
+        :on-long-press       on-long-press
+        :disabled            disabled?
+        :style               (merge (style/main {:pressed?  @pressed?
+                                                 :theme     theme
+                                                 :disabled? disabled?})
+                                    container-style)}
+       [icon/icon :i/log-out {:color (if pressed? colors/white-opa-40 colors/white-opa-70)}]
+       [text/text {:weight :medium :size :paragraph-1}
+        (i18n/label :t/logout)]])))
+
+(def view (quo.theme/with-theme view-internal))

src/quo/components/drawers/action_drawers/style.cljs

@@ -12,11 +12,24 @@
    :flex-direction   :row})
 
 (defn container
-  [sub-label disabled?]
+  [{:keys [sub-label disabled? state customization-color blur? theme]}]
-  {:border-radius     12
+  (cond-> {:border-radius     12
-   :height            (if sub-label 56 48)
+           :margin-horizontal 8}
-   :opacity           (when disabled? 0.3)
+
-   :margin-horizontal 8})
+    sub-label
+    (assoc :height 56)
+
+    (not sub-label)
+    (assoc :height 48)
+
+    disabled?
+    (assoc :opacity 0.3)
+
+    (= state :selected)
+    (assoc :background-color
+           (if blur?
+             colors/white-opa-5
+             (colors/resolve-color customization-color theme 5)))))
 
 (defn row-container
   [sub-label]

src/quo/components/drawers/action_drawers/view.cljs

@@ -38,13 +38,22 @@
            add-divider?
            theme
            accessibility-label
-           icon-color]}]
+           icon-color
+           no-icon-color?
+           state
+           customization-color
+           blur?]}]
   [:<>
    (when add-divider?
      [divider theme])
    [maybe-pressable disabled?
     {:accessibility-label accessibility-label
-     :style               (style/container sub-label disabled?)
+     :style               (style/container {:sub-label           sub-label
+                                            :disabled?           disabled?
+                                            :state               state
+                                            :customization-color customization-color
+                                            :blur?               blur?
+                                            :theme               theme})
      :underlay-color      (colors/theme-colors colors/neutral-5 colors/neutral-90 theme)
      :on-press            on-press}
     [rn/view
@@ -54,8 +63,9 @@
        :accessible          true
        :style               (style/left-icon sub-label)}
       [icon/icon icon
-       {:color (or icon-color (get-icon-color danger? theme))
+       {:color    (or icon-color (get-icon-color danger? theme))
-        :size  20}]]
+        :no-color no-icon-color?
+        :size     20}]]
      [rn/view
       {:style style/text-container}
       [text/text
@@ -72,7 +82,7 @@
           :style {:color
                   (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
          sub-label])]
-     (when (or right-text right-icon)
+     (when (or right-text right-icon (= state :selected))
        [rn/view {:style style/right-side-container}
         (when right-text
           [text/text
@@ -87,6 +97,13 @@
             :accessibility-label :right-icon-for-action}
            [icon/icon right-icon
             {:color (get-icon-color danger? theme)
+             :size  20}]])
+        (when (= state :selected)
+          [rn/view {:style style/right-icon}
+           [icon/icon :i/check
+            {:color (if blur?
+                      colors/white
+                      (colors/resolve-color customization-color theme))
              :size  20}]])])]]])
 
 (def ^:private action (quo.theme/with-theme action-internal))

src/quo/components/dropdowns/dropdown/view.cljs

@@ -11,7 +11,7 @@
 
 (defn- view-internal
   [{:keys [type size state background customization-color theme on-press icon-name icon? emoji?
-           accessibility-label]
+           accessibility-label no-icon-color?]
     :or   {type      :grey
            size      :size-40
            state     :default
@@ -58,6 +58,7 @@
            icon-name
            {:accessibility-label :left-icon
             :color               left-icon-color
+            :no-color            no-icon-color?
             :size                icon-size
             :container-style     style/left-icon}])
         [text/text
@@ -75,14 +76,15 @@
 
 (def view
   "Props:
-    - type:       :outline |:grey (default) | :ghost | :customization
+    - type:           :outline |:grey (default) | :ghost | :customization
-    - size:       :size-40 (default) | :size-32 | :size-24
+    - size:           :size-40 (default) | :size-32 | :size-24
-    - state:      :default (default) | :active | :disabled
+    - state:          :default (default) | :active | :disabled
-    - emoji?:     boolean
+    - emoji?:         boolean
-    - icon?:      boolean
+    - icon?:          boolean
-    - background: :blur | :photo (optional)
+    - no-icon-color?: boolean
-    - icon-name:  keyword
+    - background:     :blur | :photo (optional)
-    - on-press:   function
+    - icon-name:      keyword
-   
+    - on-press:       function
+
     Child: string - used as label or emoji (for emoji only)"
   (theme/with-theme view-internal))

src/quo/components/settings/category/settings/view.cljs

@@ -8,8 +8,8 @@
     [react-native.core :as rn]))
 
 (defn- category-internal
-  [{:keys [label data blur? theme]}]
+  [{:keys [label data blur? container-style theme]}]
-  [rn/view {:style (style/container label)}
+  [rn/view {:style (merge (style/container label) container-style)}
    (when label
      [text/text
       {:weight :medium

src/quo/components/settings/category/style.cljs

@@ -17,7 +17,7 @@
    :background-color (if blur?
                        colors/white-opa-5
                        (colors/theme-colors colors/white colors/neutral-95 theme))
-   :border-width     1
+   :border-width     (if blur? 0 1)
    :border-color     (if blur?
                        colors/white-opa-5
                        (colors/theme-colors colors/neutral-10 colors/neutral-80 theme))})

src/quo/components/settings/settings_item/style.cljs

@@ -2,12 +2,12 @@
   (:require
     [quo.foundations.colors :as colors]))
 
-(defn container
+(def container
-  [{:keys [container-style]}]
+  {:padding-horizontal 12
-  (merge {:padding         12
+   :padding-top        12
-          :flex-direction  :row
+   :padding-bottom     14
-          :justify-content :space-between}
+   :flex-direction     :row
-         container-style))
+   :justify-content    :space-between})
 
 (defn left-sub-container
   [{:keys [tag description]}]

src/quo/components/settings/settings_item/view.cljs

@@ -101,9 +101,9 @@
      nil)])
 
 (defn- internal-view
-  [{:keys [title on-press action-props accessibility-label] :as props}]
+  [{:keys [title on-press action-props accessibility-label container-style] :as props}]
   [rn/pressable
-   {:style               (style/container props)
+   {:style               (merge style/container container-style)
     :on-press            on-press
     :accessibility-label accessibility-label}
    [rn/view {:style (style/left-sub-container props)}

src/quo/components/text_combinations/style.cljs

@@ -12,5 +12,6 @@
 
 (def emoji-hash
   {:margin-top     8
-   :letter-spacing 0.5
+   :letter-spacing 2
+   :font-size      13
    :line-height    20.5})

src/quo/components/text_combinations/view.cljs

@@ -59,8 +59,9 @@
       description])
    (when emoji-hash
      [text/text
-      {:number-of-lines 1
+      {:number-of-lines     1
-       :style           style/emoji-hash}
+       :accessibility-label :emoji-hash
+       :style               style/emoji-hash}
       emoji-hash])])
 
 (def view (theme/with-theme view-internal))

src/quo/core.cljs

@@ -14,6 +14,7 @@
     quo.components.buttons.button.view
     quo.components.buttons.composer-button.view
     quo.components.buttons.dynamic-button.view
+    quo.components.buttons.logout-button.view
     quo.components.buttons.predictive-keyboard.view
     quo.components.buttons.slide-button.view
     quo.components.buttons.wallet-button.view
@@ -182,6 +183,7 @@
 (def button quo.components.buttons.button.view/button)
 (def composer-button quo.components.buttons.composer-button.view/view)
 (def dynamic-button quo.components.buttons.dynamic-button.view/view)
+(def logout-button quo.components.buttons.logout-button.view/view)
 (def predictive-keyboard quo.components.buttons.predictive-keyboard.view/view)
 (def slide-button quo.components.buttons.slide-button.view/view)
 (def wallet-button quo.components.buttons.wallet-button.view/view)

src/quo/core_spec.cljs

@@ -6,6 +6,7 @@
     [quo.components.browser.browser-input.component-spec]
     [quo.components.buttons.button.component-spec]
     [quo.components.buttons.composer-button.component-spec]
+    [quo.components.buttons.logout-button.component-spec]
     [quo.components.buttons.predictive-keyboard.component-spec]
     [quo.components.buttons.slide-button.component-spec]
     [quo.components.buttons.wallet-button.component-spec]

src/status_im/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)

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

@@ -13,7 +13,7 @@
   [{: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]
+                                                            [1 0.4]
                                                             header-extrapolation-option)
         image-top-margin-animation  (reanimated/interpolate scroll-y
                                                             scroll-animation-input-range

src/status_im/contexts/profile/settings/header/utils.cljs

@@ -0,0 +1,21 @@
+(ns status-im.contexts.profile.settings.header.utils
+  (:require [status-im.constants :as constants]
+            [utils.i18n :as i18n]))
+
+(defn visibility-status-type-data
+  [{:keys [status-type]}]
+  (condp = status-type
+    constants/visibility-status-automatic
+    {:status-title (i18n/label :t/status-automatic)
+     :status-icon  :i/automatic}
+
+    constants/visibility-status-always-online
+    {:status-title (i18n/label :t/online)
+     :status-icon  :i/online}
+
+    constants/visibility-status-inactive
+    {:status-title (i18n/label :t/offline)
+     :status-icon  :i/offline}
+
+    {:status-title (i18n/label :t/offline)
+     :status-icon  :i/offline}))

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

@@ -3,12 +3,12 @@
             [quo.core :as quo]
             [quo.theme :as quo.theme]
             [react-native.core :as rn]
-            [status-im.common.not-implemented :as not-implemented]
             [status-im.contexts.profile.settings.header.avatar :as header.avatar]
             [status-im.contexts.profile.settings.header.header-shape :as header.shape]
             [status-im.contexts.profile.settings.header.style :as style]
+            [status-im.contexts.profile.settings.header.utils :as header.utils]
+            [status-im.contexts.profile.settings.visibility-sheet.view :as visibility-sheet]
             [status-im.contexts.profile.utils :as profile.utils]
-            [utils.i18n :as i18n]
             [utils.re-frame :as rf]))
 
 (defn- f-view
@@ -16,10 +16,14 @@
   (let [{:keys [public-key emoji-hash] :as profile} (rf/sub [:profile/profile-with-image])
         online?                                     (rf/sub [:visibility-status-updates/online?
                                                              public-key])
+        status                                      (rf/sub
+                                                     [:visibility-status-updates/visibility-status-update
+                                                      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)]
+        emoji-string                                (string/join emoji-hash)
+        {:keys [status-title status-icon]}          (header.utils/visibility-status-type-data status)]
     [:<>
      [header.shape/view
       {:scroll-y            scroll-y
@@ -34,16 +38,21 @@
         :profile-picture     profile-picture}]
       [rn/view {:style {:margin-bottom 4}}
        [quo/dropdown
-        {:background :blur
+        {:background     :blur
-         :size       :size-32
+         :size           :size-32
-         :type       :outline
+         :type           :outline
-         :icon?      true
+         :icon?          true
-         :icon-name  :i/online
+         :no-icon-color? true
-         :on-press   not-implemented/alert}
+         :icon-name      status-icon
-        (i18n/label :t/online)]]]
+         :on-press       #(rf/dispatch [:show-bottom-sheet
+                                        {:shell?  true
+                                         :theme   :dark
+                                         :content (fn [] [visibility-sheet/view])}])}
+        status-title]]]
      [quo/text-combinations
-      {:container-style style/title-container
+      {:title-accessibility-label :username
-       :emoji-hash      emoji-string
+       :container-style           style/title-container
-       :title           full-name}]]))
+       :emoji-hash                emoji-string
+       :title                     full-name}]]))
 
 (def view (quo.theme/with-theme f-view))

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

@@ -8,73 +8,93 @@
      :on-press    not-implemented/alert
      :image-props :i/edit
      :image       :icon
+     :blur?       true
      :action      :arrow}
     {:title       (i18n/label :t/password)
      :on-press    not-implemented/alert
      :image-props :i/password
      :image       :icon
+     :blur?       true
      :action      :arrow}]
    [{:title       (i18n/label :t/messages)
      :on-press    not-implemented/alert
      :image-props :i/messages
      :image       :icon
+     :blur?       true
      :action      :arrow}
     {:title       (i18n/label :t/wallet)
      :on-press    not-implemented/alert
      :image-props :i/wallet
      :image       :icon
+     :blur?       true
      :action      :arrow}
     {:title       (i18n/label :t/dapps)
      :on-press    not-implemented/alert
      :image-props :i/placeholder
      :image       :icon
+     :blur?       true
      :action      :arrow}
-    {:title       "Browser"
+    {:title       (i18n/label :t/browser)
      :on-press    not-implemented/alert
      :image-props :i/browser
      :image       :icon
+     :blur?       true
      :action      :arrow}
     {:title       (i18n/label :t/keycard)
      :on-press    not-implemented/alert
      :image-props :i/keycard
      :image       :icon
+     :blur?       true
      :action      :arrow}]
    [{:title       (i18n/label :t/syncing)
-     :on-press    not-implemented/alert
+     :on-press    #(rf/dispatch [:navigate-to :settings-syncing])
      :image-props :i/syncing
      :image       :icon
+     :blur?       true
      :action      :arrow}
     {:title       (i18n/label :t/notifications)
-     :on-press    not-implemented/alert
+     :on-press    #(rf/dispatch [:navigate-to :notifications])
-     :image-props :i/notifications
+     :image-props :i/activity-center
      :image       :icon
+     :blur?       true
      :action      :arrow}
     {:title       (i18n/label :t/appearance)
-     :on-press    not-implemented/alert
+     :on-press    #(rf/dispatch [:navigate-to :appearance])
      :image-props :i/light
      :image       :icon
+     :blur?       true
      :action      :arrow}
     {:title       (i18n/label :t/language-and-currency)
      :on-press    not-implemented/alert
      :image-props :i/globe
      :image       :icon
+     :blur?       true
      :action      :arrow}]
    [{:title       (i18n/label :t/data-usage)
      :on-press    not-implemented/alert
      :image-props :i/mobile
      :image       :icon
+     :blur?       true
      :action      :arrow}
     {:title       (i18n/label :t/advanced)
-     :on-press    not-implemented/alert
+     :on-press    #(rf/dispatch [:navigate-to :advanced-settings])
      :image-props :i/settings
      :image       :icon
+     :blur?       true
      :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}]
+     :blur?       true
+     :image-props :i/toggle}
+    {:title       "Quo preview"
+     :on-press    #(rf/dispatch [:navigate-to :quo-preview])
+     :action      :arrow
+     :image       :icon
+     :blur?       true
+     :image-props :i/light}]
    [{:title    (i18n/label :t/about)
      :on-press not-implemented/alert
      :action   :arrow}

src/status_im/contexts/profile/settings/style.cljs

@@ -7,5 +7,7 @@
    :background-color (colors/resolve-color customization-color theme 40)})
 
 (def footer-container
-  {:padding-horizontal 20
+  {:margin-top         8
+   :margin-bottom      50
+   :padding-horizontal 20
    :padding-vertical   12})

src/status_im/contexts/profile/settings/view.cljs

@@ -9,6 +9,7 @@
             [status-im.contexts.profile.settings.header.view :as settings.header]
             [status-im.contexts.profile.settings.list-items :as settings.items]
             [status-im.contexts.profile.settings.style :as style]
+            [status-im.contexts.shell.jump-to.constants :as jump-to.constants]
             [utils.debounce :as debounce]
             [utils.i18n :as i18n]
             [utils.re-frame :as rf]))
@@ -16,9 +17,10 @@
 (defn- settings-item-view
   [data]
   [quo/category
-   {:list-type :settings
+   {:list-type       :settings
-    :blur?     true
+    :container-style {:padding-bottom 0}
-    :data      data}])
+    :blur?           true
+    :data            data}])
 
 (defn scroll-handler
   [event scroll-y]
@@ -28,11 +30,11 @@
 (defn- footer
   [logout-press]
   [rn/view {:style style/footer-container}
-   [quo/button
+   [quo/logout-button {:on-press logout-press}]])
-    {:on-press  logout-press
+
-     :type      :danger
+(defn- get-item-layout
-     :icon-left :i/log-out}
+  [_ index]
-    (i18n/label :t/logout)]])
+  #js {:length 48 :offset (* 48 index) :index index})
 
 (defn- settings-view
   [theme]
@@ -42,7 +44,8 @@
         logout-press        #(rf/dispatch [:multiaccounts.logout.ui/logout-pressed])]
     [quo/overlay {:type :shell}
      [rn/view
-      {:style (style/navigation-wrapper {:customization-color customization-color
+      {:key   :header
+       :style (style/navigation-wrapper {:customization-color customization-color
                                          :inset               (:top insets)
                                          :theme               theme})}
       [quo/page-nav
@@ -50,19 +53,33 @@
         :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/qr-code
-                     {:icon-name :i/share
+                      :on-press  #(debounce/dispatch-and-chill [:open-modal :share-shell] 1000)}
-                      :on-press  #(debounce/dispatch-and-chill [:open-modal :share-shell] 1000)}]}]]
+                     {:icon-name :i/share :on-press not-implemented/alert}]}]]
      [rn/flat-list
-      {:header                          [settings.header/view {:scroll-y scroll-y}]
+      {:key                             :list
+       :header                          [settings.header/view {:scroll-y scroll-y}]
        :data                            settings.items/items
        :key-fn                          :title
+       :get-item-layout                 get-item-layout
+       :initial-num-to-render           6
+       :max-to-render-per-batch         6
        :shows-vertical-scroll-indicator false
        :render-fn                       settings-item-view
        :footer                          [footer logout-press]
        :scroll-event-throttle           16
        :on-scroll                       #(scroll-handler % scroll-y)
-       :bounces                         false}]]))
+       :bounces                         false}]
+     [quo/floating-shell-button
+      {:key :shell
+       :jump-to
+       {:on-press            (fn []
+                               (rf/dispatch [:navigate-back])
+                               (debounce/dispatch-and-chill [:shell/navigate-to-jump-to] 500))
+        :customization-color customization-color
+        :label               (i18n/label :t/jump-to)}}
+      {:position :absolute
+       :bottom   jump-to.constants/floating-shell-button-height}]]))
 
 (defn- internal-view
   [props]

src/status_im/contexts/profile/settings/visibility_sheet/view.cljs

@@ -0,0 +1,46 @@
+(ns status-im.contexts.profile.settings.visibility-sheet.view
+  (:require [quo.core :as quo]
+            [status-im.constants :as constants]
+            [utils.i18n :as i18n]
+            [utils.re-frame :as rf]))
+
+(defn change-visibility-status
+  [status-type]
+  (rf/dispatch
+   [:visibility-status-updates/delayed-visibility-status-update status-type])
+  (rf/dispatch [:hide-bottom-sheet]))
+
+(defn view
+  []
+  (let [{:keys [public-key]}  (rf/sub [:profile/profile])
+        {:keys [status-type]} (rf/sub
+                               [:visibility-status-updates/visibility-status-update
+                                public-key])
+        customization-color   (rf/sub [:profile/customization-color])]
+    [quo/action-drawer
+     [[{:icon                :i/online
+        :no-icon-color?      true
+        :blur?               true
+        :state               (when (= status-type constants/visibility-status-always-online) :selected)
+        :customization-color customization-color
+        :accessibility-label :online
+        :label               (i18n/label :t/online)
+        :on-press            #(change-visibility-status constants/visibility-status-always-online)}
+       {:icon                :i/offline
+        :no-icon-color?      true
+        :blur?               true
+        :state               (when (= status-type constants/visibility-status-inactive) :selected)
+        :accessibility-label :offline
+        :customization-color customization-color
+        :label               (i18n/label :t/offline)
+        :sub-label           (i18n/label :t/status-inactive-subtitle)
+        :on-press            #(change-visibility-status constants/visibility-status-inactive)}
+       {:icon                :i/automatic
+        :no-icon-color?      true
+        :blur?               true
+        :state               (when (= status-type constants/visibility-status-automatic) :selected)
+        :accessibility-label :automatic
+        :customization-color customization-color
+        :label               (i18n/label :t/status-automatic)
+        :sub-label           (i18n/label :t/status-automatic-subtitle)
+        :on-press            #(change-visibility-status constants/visibility-status-automatic)}]]]))