From 42a33bdb7120c5e2fe66624741a4737231c67396 Mon Sep 17 00:00:00 2001
From: ng <�>
Date: Sat, 24 Sep 2022 23:23:09 +0200
Subject: feat: ✨ Add a shopping cart icon to the pay button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 talermerchantdemos/static/blog.css              | 26 ++++++++++++++++++++++++-
 talermerchantdemos/templates/blog-index.html.j2 |  3 +--
 2 files changed, 26 insertions(+), 3 deletions(-)

(limited to 'talermerchantdemos')

diff --git a/talermerchantdemos/static/blog.css b/talermerchantdemos/static/blog.css
index 9e0b910..e226ecd 100644
--- a/talermerchantdemos/static/blog.css
+++ b/talermerchantdemos/static/blog.css
@@ -22,6 +22,23 @@
   color: var(--link-colour, var(--default-link-colour, black));
 }
 
+/* Pay Icon */
+.payLink > .icon::before {
+  content: '​'; /* Blank = CSS Won't render, which is why we put a Zero-Width-Space */
+  /* Size & Positioning */
+  display: inline-block;
+  width: 1.2em;
+  margin-right: 5px;
+  /* Set Icon */
+  background-image: url(/static/noun-shopping-cart-5195508.svg);
+  /* Ensure Icon is rendered correctly */
+  background-size: contain;
+  background-position: center center;
+  background-repeat: no-repeat;
+  /* Invert it by default unless otherwise specified */
+  filter: var(--paylink-icon-filter, invert());
+}
+/* Pay Button */
 .payLink {
   /* Variables */
   --link-colour: var(--button-confirm-foreground);
@@ -48,13 +65,20 @@
   /* Transformations */
   transform: none;
 }
+
+/* Hover */
 .payLink:hover {
   --background: var(--button-confirm-hovering-background);
   --link-colour: var(--button-confirm-hovering-foreground);
   --bottom-line: 0;
   transform: translateY(6px);
 }
-.payLink:active {
+
+/* Active */
+.payLink:active,
+.payLink:focus,
+.payLink:focus-within,
+.payLink:focus-visible {
   --background: var(--button-confirm-active-background);
   --link-colour: var(--button-confirm-active-foreground);
 }
\ No newline at end of file
diff --git a/talermerchantdemos/templates/blog-index.html.j2 b/talermerchantdemos/templates/blog-index.html.j2
index 9468cc7..7c69b12 100644
--- a/talermerchantdemos/templates/blog-index.html.j2
+++ b/talermerchantdemos/templates/blog-index.html.j2
@@ -20,12 +20,11 @@
       {{ gettext("Click on an individual chapter to to purchase it with GNU Taler.") }}
       {{ gettext('You can get free, virtual money to buy articles on this page at the <a href="{}")">bank</a>.').format(env('TALER_ENV_URL_BANK')) }}
     </div>
-
     <div>
       {% for article in articles %}
       <div class="notice">
       <h3><a href="{{ url_for('article', lang=article.lang, article_name=article.slug) }}" class="articleTitle">{{article.title}}</a></h3>
-      <p>{{ article.teaser|safe }} <a class="payLink" href="{{ url_for('article', lang=article.lang, article_name=article.slug) }}">{{ gettext('Pay to read more...') }}</a></p>
+      <p>{{ article.teaser|safe }} <a class="payLink" href="{{ url_for('article', lang=article.lang, article_name=article.slug) }}"><span class="icon"></span>{{ gettext('Pay to read more...') }}</a></p>
       </div>
       {% else %}
       <em>({{ gettext("No articles available in this language.") }})</em>
-- 
cgit v1.2.3