Fix sticker pack installation buttons

- Fix sticker pack installation buttons
- Add "↓ Free" text and update "Install" text
- Distinguish between owned and free sticker sets
- Rename owned -> owned? in price-badge
- Add tiny-snt icon
- Update the sticker price badge icon and padding

Signed-off-by: Andrey Shovkoplyas <motor4ik@gmail.com>

ios/StatusIm/Images.xcassets/tiny-snt.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "tiny-snt.png",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "tiny-snt@2x.png",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "tiny-snt@3x.png",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

src/status_im/ui/screens/stickers/styles.cljs

@@ -15,7 +15,7 @@
   {:background-color   (if not-enough-snt? colors/gray colors/blue)
    :border-radius      14
    :flex-direction     :row
-   :padding-horizontal 8
+   :padding-horizontal 6
    :height             28
    :align-items        :center})
 

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

@@ -21,29 +21,28 @@
   [react/view styles/installed-icon
    [icons/icon :main-icons/check {:color colors/white :height 20 :width 20}]])
 
-(defview price-badge [price id owned pending]
+(defview price-badge [price id owned? pending]
   (letsubs [chain   [:ethereum/chain-keyword]
             balance [:balance-default]]
     (let [snt             (money/to-number (if (= :mainnet chain) (:SNT balance) (:STT balance)))
           not-enough-snt? (> price snt)
           no-snt?         (or (nil? snt) (zero? snt))]
       [react/touchable-highlight {:on-press #(cond pending nil
-                                                   (or owned (zero? price))
+                                                   (or owned? (zero? price))
                                                    (re-frame/dispatch [:stickers/install-pack id])
                                                    (or no-snt? not-enough-snt?) nil
                                                    :else (re-frame/dispatch [:stickers/buy-pack id price]))}
-       [react/view (styles/price-badge (and (not (or owned (zero? price))) (or no-snt? not-enough-snt?)))
+       [react/view (styles/price-badge (and (not (or owned? (zero? price))) (or no-snt? not-enough-snt?)))
-        (when (and (not (zero? price))) ;(not no-snt?))
+        (when (and (not (zero? price)) (not owned?))
-          [icons/icon :icons/price {:color colors/white :container-style {:margin-right 8}}])
+          [icons/tiny-icon :tiny-icons/tiny-snt {:color colors/white :container-style {:margin-right 6}}])
         (if pending
           [react/activity-indicator {:animating true
                                      :color     colors/white}]
           [react/text {:style {:color colors/white}
                        :accessibility-label :sticker-pack-price}
-           (cond (or owned (zero? price))
+           (cond owned? (i18n/label :t/install)
-                 (i18n/label :t/install)
+                 (zero? price) (i18n/label :t/free)
-                 :else
+                 :else (str (money/wei-> :eth price)))])]])))
-                 (str (money/wei-> :eth price)))])]])))
 
 (defn pack-badge [{:keys [name author price thumbnail preview id installed owned pending] :as pack}]
   [react/touchable-highlight {:on-press #(re-frame/dispatch [:navigate-to :stickers-pack pack])}

translations/en.json

@@ -456,6 +456,7 @@
 	"finishing-card-setup-steps": "> Loading keys to the card\n> Generating multiaccount",
 	"fleet": "Fleet",
 	"fleet-settings": "Fleet settings",
+	"free": "↓ Free",
 	"from": "From",
 	"gas-limit": "Gas limit",
 	"gas-price": "Gas price",
@@ -510,7 +511,7 @@
 	],
 	"initialization": "Initialization",
 	"initialization-of-the-card": "Initialization of the card",
-	"install": "Install",
+	"install": "↓ Install",
 	"install-the-extension": "install the extension",
 	"intro-message1": "Welcome to Status!\nTap this message to set your password and get started.",
 	"intro-privacy-policy-note1": "Status does not collect, share or sell any personal data. By continuing you agree with the ",