[Fixes: #13596] Add status-tags component

Author: cammellos

resources/images/icons/pending-dark12@2x.png

@@ -1,10 +1,20 @@
 (ns quo2.components.icon
-  (:require [status-im.ui.components.icons.icons :as icons]))
+  (:require
+   [quo.theme :as theme]
+   [status-im.ui.components.icons.icons :as icons]))
 
 (defn icon
   ([icon-name] (icon icon-name nil))
   ([icon-name {:keys [size] :as props}]
    (let [size (or size 20)]
      [icons/icon (str (name icon-name) size) (merge props
                                                     {:width size
-                                                     :height size})])))
+                                                     :height size})])))
+(defn theme-icon
+  ([icon-name]
+   (theme-icon icon-name nil))
+  ([icon-name props]
+   (let [theme-icon-name (if (theme/dark?)
+                           (str (name icon-name) "-dark")
+                           icon-name)]
+     (icon theme-icon-name props))))

resources/images/icons/pending-dark12@3x.png

@@ -0,0 +1,79 @@
+(ns quo2.components.status-tags
+  (:require [status-im.i18n.i18n :as i18n]
+            [quo2.foundations.colors :as colors]
+            [quo2.components.icon :as icon]
+            [quo2.components.text :as text]
+            [quo.react-native :as rn]))
+
+(def default-container-style
+  {:border-radius 20
+   :border-width 1})
+
+(def small-container-style
+  (merge default-container-style
+         {:padding-horizontal 7
+          :padding-vertical 3}))
+
+(def large-container-style
+  (merge default-container-style
+         {:padding-horizontal 11
+          :padding-vertical 4}))
+
+(defn base-tag [_]
+  (fn [{:keys [size
+               border-color
+               background-color
+               icon
+               text-color
+               label]}]
+    (let [paragraph-size (if (= size :small) :paragraph-2 :paragraph-1)]
+      [rn/view
+       (assoc (if (= size :small)
+                small-container-style
+                large-container-style)
+              :border-color border-color
+              :background-color background-color)
+       [text/text {:size paragraph-size}
+        [icon/theme-icon icon {:color :none
+                               :size 12}]
+        [text/text {:size paragraph-size
+                    :style {:color text-color}} (str " " label)]]])))
+
+(defn positive [_]
+  (fn [size]
+    [base-tag {:size size
+               :background-color colors/success-50-opa-10
+               :icon :verified
+               :border-color colors/success-50-opa-20
+               :text-color (colors/theme-colors colors/success-50
+                                                colors/success-60)
+               :label (i18n/label :positive)}]))
+
+(defn negative [_]
+  (fn [size]
+    [base-tag {:size size
+               :icon :untrustworthy
+               :background-color colors/danger-50-opa-10
+               :border-color colors/danger-50-opa-20
+               :text-color (colors/theme-colors colors/danger-50
+                                                colors/danger-60)
+               :label (i18n/label :negative)}]))
+
+(defn pending [_]
+  (fn [size]
+    [base-tag {:size size
+               :icon :pending
+               :background-color (colors/theme-colors colors/neutral-10
+                                                      colors/neutral-80)
+               :border-color (colors/theme-colors colors/neutral-20
+                                                  colors/neutral-70)
+               :text-color colors/neutral-50
+               :label (i18n/label :pending)}]))
+
+(defn status-tag [_]
+  (fn [{:keys [status size]}]
+    [(case status
+       :positive positive
+       :negative negative
+       :pending pending
+       nil) size]))

resources/images/icons/pending12@2x.png

@@ -6,6 +6,7 @@
             [quo2.screens.button :as button]
             [quo2.screens.text :as text]
             [quo2.screens.tabs :as tabs]
+            [quo2.screens.status-tags :as status-tags]
             [quo2.screens.counter :as counter]
             [quo2.screens.segmented :as segmented]
             [quo.core :as quo]))
@@ -16,6 +17,9 @@
               {:name      :quo2-button
                :insets    {:top false}
                :component button/preview-button}
+              {:name      :quo2-status-tags
+               :insets    {:top false}
+               :component status-tags/preview-status-tags}
               {:name      :quo2-tabs
                :insets    {:top false}
                :component tabs/preview-tabs}

resources/images/icons/pending12@3x.png

@@ -0,0 +1,45 @@
+(ns quo2.screens.status-tags
+  (:require [reagent.core :as reagent]
+            [quo.react-native :as rn]
+            [quo.previews.preview :as preview]
+            [quo2.foundations.colors :as colors]
+            [quo2.components.status-tags :as quo2]))
+
+(def descriptor [{:label "Status"
+                  :key :status
+                  :type :select
+                  :options [{:value "Positive"
+                             :key :positive}
+                            {:value "Negative"
+                             :key :negative}
+                            {:value "Pending"
+                             :key :pending}]}
+                 {:label "Size"
+                  :key :size
+                  :type :select
+                  :options [{:value "Small"
+                             :key :small}
+                            {:value "Large"
+                             :key :large}]}])
+
+(defn cool-preview []
+  (let [state (reagent/atom {:status :positive
+                             :size :small})]
+    (fn []
+      [rn/view {:margin-bottom 50
+                :padding       16}
+       [rn/view {:flex 1}
+        [preview/customizer state descriptor]]
+       [rn/view {:padding-vertical 60
+                 :flex-direction   :row
+                 :justify-content  :center}
+        [quo2/status-tag @state]]])))
+
+(defn preview-status-tags []
+  [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}]])

resources/images/icons/untrustworthy-dark12@2x.png

@@ -144,7 +144,7 @@
       :color      colors/blue-persist
       :wallet     true
       :path       constants/path-default-wallet
-      :name       (i18n/label :t/ethereum-account)})
+      :name       (i18n/label :t/main-account)})
    (let [{:keys [public-key address name identicon]}
          (get-in multiaccount [:derived constants/path-whisper-keyword])]
      {:public-key public-key

resources/images/icons/untrustworthy-dark12@3x.png

@@ -1513,7 +1513,7 @@
     "once-enabled-share-metadata": "Once enabled, links posted in the chat may share your metadata with the site",
     "external-storage-denied": "Access to external storage is denied",
     "timeline": "Timeline",
-    "ethereum-account": "Ethereum account",
+    "main-account": "Main account",
     "ethereum-address":"Ethereum address",
     "default-assets": "Default ERC20 and ERC721",
     "increase-gas": "Increase Gas",
@@ -1753,5 +1753,8 @@
     "contact-request-accepted": "Accepted ✓",
     "contact-request-pending": "Pending...",
     "removed-from-contacts": "Removed from contacts",
-    "mutual-contact-requests": "Mutual contact requests"
+    "mutual-contact-requests": "Mutual contact requests",
+    "pending": "Pending",
+    "negative": "Negative",
+    "positive": "Positive"
 }