chore: slider button - add error type, blur variant and fix small ui bug (#17473)

src/quo2/components/buttons/slide_button/animations.cljs

@@ -22,7 +22,7 @@
 (defn- track-cover-interpolation
   [track-width thumb-size]
   {:in  [0 1]
-   :out [(/ thumb-size 2) track-width]})
+   :out [thumb-size (+ track-width thumb-size)]})
 
 (defn- arrow-icon-position-interpolation
   [thumb-size]

src/quo2/components/buttons/slide_button/component_spec.cljs

@@ -81,7 +81,7 @@
       (h/has-style track-mock {:opacity constants/disable-opacity})))
 
   (h/test "render the small button"
-    (h/render [slide-button/view (assoc default-props :size :size/s-40)])
+    (h/render [slide-button/view (assoc default-props :size :size-40)])
     (let [mock         (h/get-by-test-id :slide-button-track)
           small-height (:track-height constants/small-dimensions)]
       (h/has-style mock {:height small-height})))

src/quo2/components/buttons/slide_button/style.cljs

@@ -2,8 +2,7 @@
   (:require
     [quo2.components.buttons.slide-button.constants :as constants]
     [quo2.components.buttons.slide-button.utils :as utils]
-    [react-native.reanimated :as reanimated]
+    [react-native.reanimated :as reanimated]))
-    [quo2.foundations.typography :as typography]))
 
 (def absolute-fill
   {:position :absolute
@@ -16,7 +15,7 @@
   [{:keys [interpolate-track thumb-size customization-color theme]}]
   (reanimated/apply-animations-to-style
    {:transform [{:translate-x (interpolate-track :track-clamp)}]}
-   {:background-color (utils/slider-color :main customization-color theme)
+   {:background-color (utils/main-color customization-color theme)
     :border-radius    12
     :height           thumb-size
     :width            thumb-size
@@ -46,7 +45,7 @@
     :justify-content :space-around}))
 
 (defn track
-  [{:keys [disabled? customization-color height theme]}]
+  [{:keys [disabled? customization-color height blur?]}]
   {:align-items      :flex-start
    :justify-content  :center
    :border-radius    14
@@ -54,7 +53,7 @@
    :align-self       :stretch
    :padding          constants/track-padding
    :opacity          (if disabled? 0.3 1)
-   :background-color (utils/slider-color :track customization-color theme)})
+   :background-color (utils/track-color customization-color blur?)})
 
 (defn track-cover
   [interpolate-track]
@@ -74,7 +73,5 @@
    :width           track-width})
 
 (defn track-text
-  [customization-color theme]
+  [customization-color theme blur?]
-  (-> typography/paragraph-1
+  {:color (utils/text-color customization-color theme blur?)})
-      (merge typography/font-medium)
-      (assoc :color (utils/slider-color :main customization-color theme))))

src/quo2/components/buttons/slide_button/utils.cljs

@@ -3,19 +3,30 @@
     [quo2.components.buttons.slide-button.constants :as constants]
     [quo2.foundations.colors :as colors]))
 
-(defn slider-color
+(defn main-color
-  "- `color-key`               `:main`/`:track`
+  "`customization-color` Customization color"
-   - `customization-color` Customization color"
+  [customization-color theme]
-  [color-key customization-color theme]
+  (colors/theme-colors
-  (let [colors-by-key {:main  (colors/theme-colors
+   (colors/custom-color customization-color 50)
-                               (colors/custom-color customization-color 50)
+   (colors/custom-color customization-color 60)
-                               (colors/custom-color customization-color 60)
+   theme))
-                               theme)
+
-                       :track (colors/theme-colors
+(defn track-color
-                               (colors/custom-color customization-color 50 10)
+  "`customization-color` Customization color"
-                               (colors/custom-color customization-color 60 10)
+  ([customization-color blur?]
-                               theme)}]
+   (if blur?
-    (color-key colors-by-key)))
+     colors/white-opa-5
+     (colors/custom-color customization-color 50 10))))
+
+(defn text-color
+  "`customization-color` Customization color"
+  [customization-color theme blur?]
+  (if blur?
+    colors/white-opa-40
+    (colors/theme-colors
+     (colors/custom-color customization-color 50)
+     (colors/custom-color customization-color 60)
+     theme)))
 
 (defn clamp-value
   [value min-value max-value]
@@ -34,8 +45,8 @@
 (defn get-dimensions
   [track-width size dimension-key]
   (let [default-dimensions (case size
-                             :size/s-40 constants/small-dimensions
+                             :size-40 constants/small-dimensions
-                             :size/s-48 constants/large-dimensions
+                             :size-48 constants/large-dimensions
                              constants/large-dimensions)]
     (-> default-dimensions
         (merge {:usable-track (calc-usable-track

src/quo2/components/buttons/slide_button/view.cljs

@@ -10,6 +10,7 @@
     [reagent.core :as reagent]
     [oops.core :as oops]
     [react-native.reanimated :as reanimated]
+    [quo2.components.markdown.text :as text]
     [quo2.components.buttons.slide-button.constants :as constants]
     [quo2.theme :as quo.theme]))
 
@@ -29,7 +30,9 @@
                  customization-color
                  size
                  container-style
-                 theme]}]
+                 theme
+                 type
+                 blur?]}]
       (let [x-pos             (reanimated/use-shared-value 0)
             dimensions        (partial utils/get-dimensions
                                        (or @track-width constants/default-width)
@@ -37,12 +40,12 @@
             interpolate-track (partial animations/interpolate-track
                                        x-pos
                                        (dimensions :usable-track)
-                                       (dimensions :thumb))]
+                                       (dimensions :thumb))
+            custom-color      (if (= type :danger) :danger customization-color)]
         (rn/use-effect (fn []
                          (when @sliding-complete?
                            (on-complete)))
                        [@sliding-complete?])
-
         (rn/use-effect (fn []
                          (when on-reset
                            (reset! sliding-complete? false)
@@ -50,7 +53,6 @@
                            (animations/reset-track-position x-pos)
                            (on-reset)))
                        [on-reset])
-
         [gesture/gesture-detector
          {:gesture (animations/drag-gesture x-pos
                                             gestures-disabled?
@@ -60,24 +62,29 @@
          [reanimated/view
           {:test-ID   :slide-button-track
            :style     (merge (style/track {:disabled?           disabled?
-                                           :customization-color customization-color
+                                           :customization-color custom-color
                                            :height              (dimensions :track-height)
-                                           :theme               theme})
+                                           :blur?               blur?})
                              container-style)
            :on-layout (when-not (some? @track-width)
                         on-track-layout)}
           [reanimated/view {:style (style/track-cover interpolate-track)}
            [rn/view {:style (style/track-cover-text-container @track-width)}
             [icon/icon track-icon
-             {:color (utils/slider-color :main customization-color theme)
+             {:color (utils/text-color custom-color theme blur?)
               :size  20}]
             [rn/view {:width 4}]
-            [rn/text {:style (style/track-text customization-color theme)} track-text]]]
+            [text/text
+             {:weight :medium
+              :size   :paragraph-1
+              :style  (style/track-text custom-color theme blur?)}
+             track-text]]]
           [reanimated/view
            {:style (style/thumb-container {:interpolate-track   interpolate-track
                                            :thumb-size          (dimensions :thumb)
-                                           :customization-color customization-color
+                                           :customization-color custom-color
-                                           :theme               theme})}
+                                           :theme               theme
+                                           :blur?               blur?})}
            [reanimated/view {:style (style/arrow-icon-container interpolate-track)}
             [icon/icon :arrow-right
              {:color colors/white

src/status_im2/common/standard_authentication/standard_auth/view.cljs

@@ -73,7 +73,7 @@
                                            :on-auth-success       on-auth-success
                                            :on-auth-fail          on-auth-fail
                                            :fallback-button-label fallback-button-label})
-         :track-icon          :i/face-id
+         :track-icon          (if biometric-auth? :i/face-id :password)
          :track-text          track-text}]])))
 
 (def view (quo.theme/with-theme view-internal))

src/status_im2/contexts/quo_preview/buttons/slide_button.cljs

@@ -1,29 +1,43 @@
 (ns status-im2.contexts.quo-preview.buttons.slide-button
   (:require [quo2.core :as quo]
             [reagent.core :as reagent]
-            [status-im2.contexts.quo-preview.preview :as preview]))
+            [status-im2.contexts.quo-preview.preview :as preview]
+            [react-native.core :as rn]))
 
 (def descriptor
   [{:key     :size
     :type    :select
-    :options [{:key :size/s-48}
+    :options [{:key :size-48}
-              {:key :size/s-40}]}
+              {:key :size-40}]}
+   {:key     :type
+    :type    :select
+    :options [{:key :default}
+              {:key :danger}]}
    {:key  :disabled?
     :type :boolean}
+   {:key  :blur?
+    :type :boolean}
    (preview/customization-color-option {:key :color})])
 
-(defn view
+(defn f-view
   []
   (let [state     (reagent/atom {:disabled? false
                                  :color     :blue
-                                 :size      :size/s-48})
+                                 :size      :size-48})
         color     (reagent/cursor state [:color])
+        blur?     (reagent/cursor state [:blur?])
         complete? (reagent/atom false)]
     (fn []
+      (rn/use-effect (fn []
+                       (reset! complete? true)
+                       (js/setTimeout #(reset! complete? false) 50))
+                     [(:size @state)])
       [preview/preview-container
        {:state                     state
         :descriptor                descriptor
-        :component-container-style {:align-items :center}}
+        :component-container-style (when-not @blur? (:align-items :center))
+        :blur?                     @blur?
+        :show-blur-background?     true}
        (if (not @complete?)
          [quo/slide-button
           {:track-text          "We gotta slide"
@@ -31,9 +45,13 @@
            :customization-color @color
            :size                (:size @state)
            :disabled?           (:disabled? @state)
+           :blur?               @blur?
+           :type                (:type @state)
            :on-complete         (fn []
                                   (js/setTimeout (fn [] (reset! complete? true))
                                                  1000)
                                   (js/alert "I don't wanna slide anymore"))}]
          [quo/button {:on-press (fn [] (reset! complete? false))}
           "Try again"])])))
+
+(defn view [] [:f> f-view])

src/status_im2/contexts/syncing/setup_syncing/view.cljs

@@ -120,7 +120,7 @@
             [rn/view {:style style/standard-auth}
              [standard-auth/view
               {:blur?                 true
-               :size                  :size/s-40
+               :size                  :size-40
                :track-text            (i18n/label :t/slide-to-reveal-code)
                :customization-color   customization-color
                :on-enter-password     on-enter-password