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

status-im · Dec 20, 2023 · f631e1f · f631e1f
1 parent 32cfd21
commit f631e1f
Show file tree

Hide file tree

Showing 27 changed files with 309 additions and 76 deletions.
diff --git a/resources/images/icons2/20x20/automatic@2x.png b/resources/images/icons2/20x20/automatic@2x.png
diff --git a/resources/images/icons2/20x20/automatic@3x.png b/resources/images/icons2/20x20/automatic@3x.png
diff --git a/resources/images/icons2/20x20/offline@2x.png b/resources/images/icons2/20x20/offline@2x.png
diff --git a/resources/images/icons2/20x20/offline@3x.png b/resources/images/icons2/20x20/offline@3x.png
diff --git a/src/legacy/status_im/browser/core_test.cljs b/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"))))))))))))
diff --git a/src/quo/components/buttons/logout_button/component_spec.cljs b/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))))
diff --git a/src/quo/components/buttons/logout_button/style.cljs b/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)})
diff --git a/src/quo/components/buttons/logout_button/view.cljs b/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))
diff --git a/src/quo/components/drawers/action_drawers/style.cljs b/src/quo/components/drawers/action_drawers/style.cljs
@@ -12,11 +12,24 @@
    :flex-direction   :row})
 
 (defn container
-  [sub-label disabled?]
-  {:border-radius     12
-   :height            (if sub-label 56 48)
-   :opacity           (when disabled? 0.3)
-   :margin-horizontal 8})
+  [{:keys [sub-label disabled? state customization-color blur? theme]}]
+  (cond-> {:border-radius     12
+           :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]

diff --git a/src/quo/components/drawers/action_drawers/view.cljs b/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))
-        :size  20}]]
+       {:color    (or icon-color (get-icon-color danger? theme))
+        :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))

diff --git a/src/quo/components/dropdowns/dropdown/view.cljs b/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
-    - size:       :size-40 (default) | :size-32 | :size-24
-    - state:      :default (default) | :active | :disabled
-    - emoji?:     boolean
-    - icon?:      boolean
-    - background: :blur | :photo (optional)
-    - icon-name:  keyword
-    - on-press:   function
-   
+    - type:           :outline |:grey (default) | :ghost | :customization
+    - size:           :size-40 (default) | :size-32 | :size-24
+    - state:          :default (default) | :active | :disabled
+    - emoji?:         boolean
+    - icon?:          boolean
+    - no-icon-color?: boolean
+    - background:     :blur | :photo (optional)
+    - icon-name:      keyword
+    - on-press:       function
+
     Child: string - used as label or emoji (for emoji only)"
   (theme/with-theme view-internal))
diff --git a/src/quo/components/settings/category/settings/view.cljs b/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]}]
-  [rn/view {:style (style/container label)}
+  [{:keys [label data blur? container-style theme]}]
+  [rn/view {:style (merge (style/container label) container-style)}
    (when label
      [text/text
       {:weight :medium

diff --git a/src/quo/components/settings/category/style.cljs b/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))})

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

diff --git a/src/quo/components/settings/settings_item/view.cljs b/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)}

diff --git a/src/quo/components/text_combinations/style.cljs b/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})
diff --git a/src/quo/components/text_combinations/view.cljs b/src/quo/components/text_combinations/view.cljs
@@ -59,8 +59,9 @@
       description])
    (when emoji-hash
      [text/text
-      {:number-of-lines 1
-       :style           style/emoji-hash}
+      {:number-of-lines     1
+       :accessibility-label :emoji-hash
+       :style               style/emoji-hash}
       emoji-hash])])
 
 (def view (theme/with-theme view-internal))
diff --git a/src/quo/core.cljs b/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)

diff --git a/src/quo/core_spec.cljs b/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]

diff --git a/src/status_im/common/home/top_nav/view.cljs b/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)

diff --git a/src/status_im/contexts/profile/settings/header/avatar.cljs b/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