From bd8e332c68bb4c7cccece47badb9a2dc38620eef Mon Sep 17 00:00:00 2001
From: Omar Basem <omarbasem.0101@gmail.com>
Date: Thu, 7 Sep 2023 13:50:19 +0400
Subject: [PATCH] Quo2: divider line (#17211)

* quo2: divider line
---
 .../dividers/divider_line/style.cljs          | 11 +++++++++++
 .../dividers/divider_line/view.cljs           | 11 +++++++++++
 src/quo2/core.cljs                            |  2 ++
 .../quo_preview/dividers/divider_line.cljs    | 19 +++++++++++++++++++
 src/status_im2/contexts/quo_preview/main.cljs |  3 +++
 .../contexts/quo_preview/preview.cljs         |  2 +-
 6 files changed, 47 insertions(+), 1 deletion(-)
 create mode 100644 src/quo2/components/dividers/divider_line/style.cljs
 create mode 100644 src/quo2/components/dividers/divider_line/view.cljs
 create mode 100644 src/status_im2/contexts/quo_preview/dividers/divider_line.cljs

diff --git a/src/quo2/components/dividers/divider_line/style.cljs b/src/quo2/components/dividers/divider_line/style.cljs
new file mode 100644
index 0000000000..34a5d4de0b
--- /dev/null
+++ b/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})
diff --git a/src/quo2/components/dividers/divider_line/view.cljs b/src/quo2/components/dividers/divider_line/view.cljs
new file mode 100644
index 0000000000..b28b4590b5
--- /dev/null
+++ b/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))
diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs
index e27c0ff3a3..801f23835f 100644
--- a/src/quo2/core.cljs
+++ b/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)
diff --git a/src/status_im2/contexts/quo_preview/dividers/divider_line.cljs b/src/status_im2/contexts/quo_preview/dividers/divider_line.cljs
new file mode 100644
index 0000000000..bb7159a008
--- /dev/null
+++ b/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]])))
diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs
index 9b1b3fa1e9..3e984e1a6f 100644
--- a/src/status_im2/contexts/quo_preview/main.cljs
+++ b/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
diff --git a/src/status_im2/contexts/quo_preview/preview.cljs b/src/status_im2/contexts/quo_preview/preview.cljs
index e575a505bf..22acc4eb5b 100644
--- a/src/status_im2/contexts/quo_preview/preview.cljs
+++ b/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