Implement Information box and implement ens banner view

src/quo2/components/info_message.cljs

@@ -0,0 +1,33 @@
+(ns quo2.components.info-message
+  (:require [quo.theme :as theme]
+            [quo.react-native :as rn]
+            [quo2.components.text :as text]
+            [quo2.foundations.colors :as colors]
+            [quo2.components.icon :as quo2.icons]))
+
+(def themes
+  {:light {:default      colors/neutral-40
+           :success      colors/success-50
+           :error        colors/danger-50}
+   :dark  {:default      colors/neutral-60
+           :success      colors/success-60
+           :error        colors/danger-60}})
+
+(defn get-color [key]
+  (get-in themes [(theme/get-theme) key]))
+
+(defn info-message [{:keys [type size icon text-color icon-color icon-margin]} message]
+  (let [weight      (if (= size :default) :regular :medium)
+        size        (if (= size :default) :paragraph-2 :label)
+        text-color  (or text-color (get-color type))
+        icon-color  (or icon-color text-color)
+        icon-margin (or icon-margin 4)]
+    [rn/view {:style {:flex-direction :row
+                      :flex           1}}
+     [quo2.icons/icon icon {:color icon-color
+                            :size  12
+                            :container-style {:margin-top 3}}]
+     [text/text {:size   size
+                 :weight weight
+                 :style  {:color             text-color
+                          :margin-horizontal icon-margin}} message]]))

src/quo2/components/information_box.cljs

@@ -0,0 +1,63 @@
+(ns quo2.components.information-box
+  (:require [quo.theme :as theme]
+            [quo.react-native :as rn]
+            [quo2.foundations.colors :as colors]
+            [quo2.components.icon :as quo2.icons]
+            [quo2.components.info-message :as info-message]))
+
+(def themes
+  {:light {:default-bg         colors/white
+           :default-border     colors/neutral-20
+           :default-icon       colors/neutral-50
+           :default-text       colors/black
+           :informative-bg     colors/primary-50-opa-5
+           :informative-border colors/primary-50-opa-10
+           :informative-icon   colors/primary-50
+           :informative-text   colors/black
+           :error-bg           colors/danger-50-opa-5
+           :error-border       colors/danger-50-opa-10
+           :error-icon         colors/danger-50
+           :error-text         colors/danger-50
+           :close-button       colors/black}
+   :dark  {:default-bg         colors/neutral-90
+           :default-border     colors/neutral-70
+           :default-icon       colors/neutral-40
+           :default-text       colors/white
+           :informative-bg     colors/primary-50-opa-5
+           :informative-border colors/primary-50-opa-10
+           :informative-icon   colors/white
+           :informative-text   colors/white
+           :error-bg           colors/danger-50-opa-5
+           :error-border       colors/danger-50-opa-10
+           :error-icon         colors/danger-50
+           :error-text         colors/danger-50
+           :close-button       colors/white}})
+
+(defn get-color [key]
+  (get-in themes [(theme/get-theme) key]))
+
+(defn get-color-by-suffix [type suffix]
+  (get-color (keyword (str (name type) "-" suffix))))
+
+(defn information-box [{:keys [type icon closable? style]} message]
+  (let [background-color (get-color-by-suffix type "bg")
+        border-color     (get-color-by-suffix type "border")
+        icon-color       (get-color-by-suffix type "icon")
+        text-color       (get-color-by-suffix type "text")]
+    [rn/view {:style (merge {:background-color   background-color
+                             :border-color       border-color
+                             :border-width       1
+                             :border-radius      12
+                             :padding-vertical   12
+                             :padding-horizontal 16
+                             :flex-direction     :row} style)}
+     [info-message/info-message {:size        :default
+                                 :icon        icon
+                                 :text-color  text-color
+                                 :icon-color  icon-color
+                                 :icon-margin 8} message]
+     (when closable?
+       [quo2.icons/icon :main-icons2/close {:size            12
+                                            :color           (get-color :close-button)
+                                            :container-style {:margin-top  3
+                                                              :margin-left 8}}])]))

src/quo2/foundations/typography.cljs

@@ -18,8 +18,7 @@
 
 (def label {:font-size   11
             :line-height 15.62
-            :letter-spacing -0.055
-            :text-transform :uppercase})
+            :letter-spacing -0.055})
 
 (def font-regular {:font-family "Inter-Regular"}) ; 400
 
@@ -29,4 +28,4 @@
 
 (def font-bold {:font-family "Inter-Bold"}) ; 700
 
-(def monospace {:font-family "InterStatus-Regular"})
+(def monospace {:font-family "InterStatus-Regular"})

src/quo2/screens/info_message.cljs

@@ -0,0 +1,47 @@
+(ns quo2.screens.info-message
+  (:require [quo.react-native :as rn]
+            [reagent.core :as reagent]
+            [quo.previews.preview :as preview]
+            [quo2.foundations.colors :as colors]
+            [quo2.components.info-message :as quo2]))
+
+(def descriptor [{:label   "Type:"
+                  :key     :type
+                  :type    :select
+                  :options [{:key   :default
+                             :value "Default"}
+                            {:key   :success
+                             :value "Success"}
+                            {:key   :error
+                             :value "Error"}]}
+                 {:label   "Size:"
+                  :key     :size
+                  :type    :select
+                  :options [{:key   :default
+                             :value "Default"}
+                            {:key   :tiny
+                             :value "Tiny"}]}
+                 {:label "Message"
+                  :key   :message
+                  :type  :text}])
+
+(defn cool-preview []
+  (let [state (reagent/atom {:type    :default
+                             :size    :default
+                             :icon    :main-icons2/placeholder
+                             :message "This is a message"})]
+    (fn []
+      [rn/view {:margin-bottom 50
+                :padding       16}
+       [preview/customizer state descriptor]
+       [rn/view {:padding-vertical 60
+                 :align-items      :center}
+        [quo2/info-message @state (:message @state)]]])))
+
+(defn preview-info-message []
+  [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/information_box.cljs

@@ -0,0 +1,43 @@
+(ns quo2.screens.information-box
+  (:require [quo.react-native :as rn]
+            [reagent.core :as reagent]
+            [quo.previews.preview :as preview]
+            [quo2.foundations.colors :as colors]
+            [quo2.components.information-box :as quo2]))
+
+(def descriptor [{:label   "Type:"
+                  :key     :type
+                  :type    :select
+                  :options [{:key   :default
+                             :value "Default"}
+                            {:key   :informative
+                             :value "Informative"}
+                            {:key   :error
+                             :value "Error"}]}
+                 {:label "Closable?:"
+                  :key   :closable?
+                  :type  :boolean}
+                 {:label "message"
+                  :key   :message
+                  :type  :text}])
+
+(defn cool-preview []
+  (let [state (reagent/atom {:type      :default
+                             :closable? true
+                             :icon      :main-icons2/placeholder
+                             :message   "This is an information box This is an information"})]
+    (fn []
+      [rn/view {:margin-bottom 50
+                :padding       16}
+       [preview/customizer state descriptor]
+       [rn/view {:padding-vertical 60
+                 :align-items      :center}
+        [quo2/information-box @state (:message @state)]]])))
+
+(defn preview-information-box []
+  [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

@@ -9,6 +9,8 @@
             [quo2.screens.status-tags :as status-tags]
             [quo2.screens.counter :as counter]
             [quo2.screens.segmented :as segmented]
+            [quo2.screens.info-message :as info-message]
+            [quo2.screens.information-box :as information-box]
             [quo.components.safe-area :as safe-area]
             [quo.core :as quo]))
 
@@ -29,7 +31,13 @@
                :component segmented/preview-segmented}
               {:name      :quo2-counter
                :insets    {:top false}
-               :component counter/preview-counter}])
+               :component counter/preview-counter}
+              {:name      :info-message
+               :insets    {:top false}
+               :component info-message/preview-info-message}
+              {:name      :information-box
+               :insets    {:top false}
+               :component information-box/preview-information-box}])
 
 (defn theme-switcher []
   [rn/view {:style {:flex-direction   :row

src/status_im/subs.cljs

@@ -1576,7 +1576,7 @@
  :<- [:home-items-show-number]
  (fn [[search-filter filtered-chats communities view-id home-items-show-number]]
    (if (or (= view-id :home)
-           (and config/new-ui-enabled? (= view-id :chat-stack)))
+           (and @config/new-ui-enabled? (= view-id :chat-stack)))
      (let [communities-count (count communities)
            chats-count (count filtered-chats)
            ;; If we have both communities & chats we want to display

src/status_im/ui/screens/home/views.cljs

@@ -29,7 +29,8 @@
             [status-im.ui.components.chat-icon.screen :as chat-icon.screen]
             [status-im.ui.components.chat-icon.styles :as chat-icon.styles]
             [quo2.foundations.colors :as quo2.colors]
-            [quo2.components.button :as quo2.button])
+            [quo2.components.button :as quo2.button]
+            [quo2.components.information-box :as information-box])
   (:require-macros [status-im.utils.views :as views]))
 
 (defn home-tooltip-view []
@@ -187,6 +188,14 @@
                                         [home-tooltip-view]
                                         [react/view {:height 68}])}])))
 
+(defn ens-banner-view []
+  [react/view {:style {:flex   1
+                       :margin 20}}
+   [information-box/information-box {:type      :informative
+                                     :closable? true
+                                     :icon      :main-icons/info}
+    "If you registered a stateofus.eth name you might be eligible to collect $ENS\nOpen dApp"]])
+
 (views/defview communities-and-chats-old []
   (views/letsubs [{:keys [items search-filter]} [:home-items]
                   hide-home-tooltip? [:hide-home-tooltip?]]
@@ -205,6 +214,7 @@
         :header                       [:<>
                                        (when (or (seq items) @search-active? (seq search-filter))
                                          [search-input-wrapper-old search-filter (empty? items)])
+                                       [ens-banner-view]
                                        (when (and (empty? items)
                                                   (or @search-active? (seq search-filter)))
                                          [start-suggestion search-filter])]