[Feature][#13905] Added Divider Label Component

* [Feature][#13905] Added Divider Label Component

* [Improvements][#13905] Changed bg color for preview screen from Quo to Quo2

* [Fixes][#13905] Naming Conventions for Divider Label Component

* [Chore][#13905] Grouping for Divider-Label component

* [Chores][#13905] Component params cleanup

* [Fix] Removed unused namespace causing lint check to fail

src/quo2/components/dividers/divider_label.cljs

@@ -0,0 +1,60 @@
+(ns quo2.components.dividers.divider-label
+  (:require [quo.react-native :as rn]
+            [quo2.components.markdown.text :as markdown.text]
+            [status-im.ui.components.icons.icons :as icons]
+            [quo2.foundations.colors :as colors]))
+
+(def chevron-icon-container-width 20)
+
+(def chevron-icon-container-height 20)
+
+(defn divider-label
+  "label -> string
+   chevron-position -> :left, :right
+   counter-value -> number
+   increase-padding-top? -> boolean
+   blur? -> boolean"
+  [{:keys [label chevron-position counter-value increase-padding-top? blur?]}]
+  (let [dark? (colors/dark?)
+        border-and-counter-bg-color (if dark? (if blur? colors/white-opa-5 colors/neutral-70) colors/neutral-10)
+        padding-top (if increase-padding-top? 16 8)
+        text-and-icon-color (if dark? colors/neutral-40 colors/neutral-50)
+        counter-text-color  (if dark? colors/white colors/black)]
+    [rn/view {:style {:border-top-width 1
+                      :border-top-color border-and-counter-bg-color
+                      :padding-top padding-top
+                      :padding-horizontal 16
+                      :align-items :center
+                      :flex-direction :row}}
+     (when (= chevron-position :left)
+       [rn/view {:style {:margin-right 4}}
+        [icons/icon
+         :main-icons/chevron-down
+         {:color  text-and-icon-color
+          :width  chevron-icon-container-width
+          :height chevron-icon-container-height}]])
+     [markdown.text/text {:size :paragraph-2
+                          :weight :medium
+                          :style {:color text-and-icon-color
+                                  :flex 1}}
+      label]
+     (when (= chevron-position :right)
+       [icons/icon
+        :main-icons/chevron-down
+        {:color  text-and-icon-color
+         :width  chevron-icon-container-width
+         :height chevron-icon-container-height}])
+     (when (pos? counter-value)
+       [rn/view {:style {:border-radius 6
+                         :height 16
+                         :width  (case (count counter-value)
+                                   1     16
+                                   2     20
+                                   28)
+                         :background-color border-and-counter-bg-color
+                         :align-items :center
+                         :justify-content :center}}
+        [markdown.text/text {:size :label
+                             :weight :medium
+                             :style {:color counter-text-color}}
+         counter-value]])]))

src/quo2/screens/dividers/divider_label.cljs

@@ -0,0 +1,49 @@
+(ns quo2.screens.dividers.divider-label
+  (:require [quo.react-native :as rn]
+            [reagent.core :as reagent]
+            [quo.previews.preview :as preview]
+            [quo2.foundations.colors :as colors]
+            [quo2.components.dividers.divider-label :as divider-label]))
+
+(def descriptor [{:label   "Label:"
+                  :key     :label
+                  :type    :text}
+                 {:label   "Chevron position:"
+                  :key     :chevron-position
+                  :type    :select
+                  :options [{:key   :left
+                             :value "Left"}
+                            {:key   :right
+                             :value "Right"}]}
+                 {:label   "Counter value:"
+                  :key     :counter-value
+                  :type    :text}
+                 {:label   "Increase padding top:"
+                  :key     :increase-padding-top?
+                  :type    :boolean}
+                 {:label   "Blur:"
+                  :key     :blur?
+                  :type    :boolean}])
+
+(defn cool-preview []
+  (let [state     (reagent/atom {:label "Welcome"
+                                 :chevron-position :left
+                                 :counter-value 0
+                                 :increase-padding-top? true
+                                 :blur? false})]
+    (fn []
+      [rn/view {:margin-bottom 50
+                :padding       16}
+       [preview/customizer state descriptor]
+       [rn/view {:padding-vertical 60}
+        [divider-label/divider-label @state]]])))
+
+(defn preview-divider-label []
+  [rn/view  {:background-color (colors/theme-colors
+                                colors/white
+                                colors/neutral-90)
+             :flex             1}
+   [rn/flat-list {:flex                      1
+                  :keyboardShouldPersistTaps :always
+                  :header                    [cool-preview]
+                  :key-fn                    str}]])

src/quo2/screens/main.cljs

@@ -13,6 +13,7 @@
             [quo2.screens.buttons.button :as button]
             [quo2.screens.counter.counter :as counter]
             [quo2.screens.community.community-card-view :as community-card]
+            [quo2.screens.dividers.divider-label :as divider-label]
             [quo2.screens.dividers.new-messages :as new-messages]
             [quo2.screens.info.info-message :as info-message]
             [quo2.screens.info.information-box :as information-box]
@@ -58,7 +59,10 @@
    :counter [{:name      :counter
               :insets    {:top false}
               :component counter/preview-counter}]
-   :dividers [{:name      :new-messages
+   :dividers [{:name      :divider-label
+               :inset     {:top false}
+               :component divider-label/preview-divider-label}
+              {:name      :new-messages
                :insets    {:top false}
                :component new-messages/preview-new-messages}]
    :info [{:name      :info-message

src/status_im/ui/screens/chat/photos.cljs

@@ -2,7 +2,6 @@
   (:require [re-frame.core :as re-frame]
             [status-im.ui.components.react :as react]
             [status-im.ui.screens.chat.styles.photos :as style]
-            [status-im.profile.db :as profile.db]
             [status-im.multiaccounts.core :as multiaccounts]
             [quo.design-system.colors :as colors]
             [status-im.ui.components.fast-image :as fast-image]))