Quo2: divider line (#17211)

* quo2: divider line

src/quo2/components/dividers/divider_line/style.cljs

@@ -0,0 +1,11 @@
+(ns quo2.components.dividers.divider-line.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(defn divider-line
+  [blur? theme]
+  {:border-color        (if blur?
+                          (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme)
+                          (colors/theme-colors colors/neutral-10 colors/neutral-90 theme))
+   :padding-top         12
+   :padding-bottom      8
+   :border-bottom-width 1})

src/quo2/components/dividers/divider_line/view.cljs

@@ -0,0 +1,11 @@
+(ns quo2.components.dividers.divider-line.view
+  (:require
+    [quo2.theme :as quo.theme]
+    [react-native.core :as rn]
+    [quo2.components.dividers.divider-line.style :as style]))
+
+(defn- view-internal
+  [{:keys [blur? theme]}]
+  [rn/view {:style (style/divider-line blur? theme)}])
+
+(def view (quo.theme/with-theme view-internal))

src/quo2/core.cljs

@@ -34,6 +34,7 @@
     quo2.components.counter.step.view
     quo2.components.dividers.date
     quo2.components.dividers.divider-label.view
+    quo2.components.dividers.divider-line.view
     quo2.components.dividers.new-messages
     quo2.components.dividers.strength-divider.view
     quo2.components.drawers.action-drawers.view
@@ -191,6 +192,7 @@
 
 ;;;; Dividers
 (def divider-label quo2.components.dividers.divider-label.view/view)
+(def divider-line quo2.components.dividers.divider-line.view/view)
 (def new-messages quo2.components.dividers.new-messages/new-messages)
 (def divider-date quo2.components.dividers.date/date)
 (def strength-divider quo2.components.dividers.strength-divider.view/view)

src/status_im2/contexts/quo_preview/dividers/divider_line.cljs

@@ -0,0 +1,19 @@
+(ns status-im2.contexts.quo-preview.dividers.divider-line
+  (:require [quo2.core :as quo]
+            [reagent.core :as reagent]
+            [status-im2.contexts.quo-preview.preview :as preview]))
+
+(def descriptor
+  [{:key  :blur?
+    :type :boolean}])
+
+(defn view
+  []
+  (let [state (reagent/atom {:blur? false})]
+    (fn []
+      [preview/preview-container
+       {:state                 state
+        :descriptor            descriptor
+        :blur?                 (:blur? @state)
+        :show-blur-background? true}
+       [quo/divider-line @state]])))

src/status_im2/contexts/quo_preview/main.cljs

@@ -39,6 +39,7 @@
     [status-im2.contexts.quo-preview.counter.step :as step]
     [status-im2.contexts.quo-preview.dividers.date :as divider-date]
     [status-im2.contexts.quo-preview.dividers.divider-label :as divider-label]
+    [status-im2.contexts.quo-preview.dividers.divider-line :as divider-line]
     [status-im2.contexts.quo-preview.dividers.new-messages :as new-messages]
     [status-im2.contexts.quo-preview.dividers.strength-divider :as strength-divider]
     [status-im2.contexts.quo-preview.drawers.action-drawers :as action-drawers]
@@ -193,6 +194,8 @@
                         :component step/view}]
    :dividers          [{:name      :divider-label
                         :component divider-label/view}
+                       {:name      :divider-line
+                        :component divider-line/view}
                        {:name      :new-messages
                         :component new-messages/view}
                        {:name      :divider-date

src/status_im2/contexts/quo_preview/preview.cljs

@@ -211,7 +211,7 @@
                :border-radius 16
                :overflow      :hidden}}
       [rn/image
-       {:source (or image (resources/get-mock-image :community-cover))
+       {:source (or image (resources/get-mock-image :dark-blur-bg))
         :style  {:height "100%" :width "100%"}}]
       [blur/view
        (merge {:style         {:position :absolute