fix: improved styling of stats page, added Play Store and Patreon badges

Author: ErikBjare

_sass/_helpers.scss

@@ -15,6 +15,10 @@
   max-width: 700px;
 }
 
+.dim {
+  opacity: 0.4;
+}
+
 /* in dark mode, apply inverted filter */
 /* commented out because we don't have dark mode yet
 @media (prefers-color-scheme: dark) {

stats.pug

@@ -23,7 +23,7 @@ div.text-center
     | Download statistics for releases
   div.img-center
     img.width-500(src="/img/stats/downloads.png")
-  div.small (Updated every 24 hours)
+  div.small.dim (Updated every 24 hours)
 
 hr.my-5
 
@@ -39,14 +39,14 @@ div.text-center
   div.img-center
     img.width-500(src="/img/stats/chrome-wau.png")
     img.width-500(src="/img/stats/firefox-dau-7d.png")
-  div.small (Updated manually on an irregular basis)
+  div.small.dim (Updated manually on an irregular basis)
 
   h4.mt-5 Android app
   p
     | How many active installations there are of the Android app
   div.img-center
     img.width-500(src="/img/stats/android-devices.png")
-  div.small (Updated manually on an irregular basis)
+  div.small.dim (Updated manually on an irregular basis)
 
 hr.my-5
 
@@ -57,25 +57,31 @@ div.text-center
   div.img-center
     a(href="https://starchart.cc/ActivityWatch/activitywatch")
       img.width-700(title="Stargazers over time" src="https://starchart.cc/ActivityWatch/activitywatch.svg")
-  div.small
+  div.small.dim
     | Provided by starchart.cc
 
 hr.my-5
 
-h3.text-center Ratings
+h3.text-center.mb-5 Ratings
 div.row.text-center
-  div.col-12.img-center.mb-4.mt-2
+  div.col-12.img-center.mb-5
     h6 Product Hunt
     a(href="https://www.producthunt.com/products/activitywatch/reviews?utm_source=badge-product_rating&utm_medium=badge&utm_souce=badge-activitywatch" target="_blank")
       img(src="https://api.producthunt.com/widgets/embed-image/v1/product_rating.svg?product_id=112754&theme=neutral" alt="ActivityWatch - Open-source time tracker | Product Hunt")
 
-  div.col-sm-4
+  div.col-sm-3
     h6 Arch Linux (AUR)
     p
       a(href="https://aur.archlinux.org/packages/activitywatch-bin/")
         img(src="https://img.shields.io/aur/votes/activitywatch-bin?logo=arch-linux")
 
-  div.col-sm-4
+  div.col-sm-3
+    h6 Play Store
+    p
+      a(href="https://play.google.com/store/apps/details?id=net.activitywatch.android")
+        img(src="https://PlayBadges.pavi2410.me/badge/ratings?id=net.activitywatch.android")
+
+  div.col-sm-3
     h6 aw-watcher-web
     p
       a(href="https://chromewebstore.google.com/detail/activitywatch-web-watcher/nglaklhklhcoonedhgnpgddginnjdadi")
@@ -84,12 +90,12 @@ div.row.text-center
       a(href="https://addons.mozilla.org/en-US/firefox/addon/aw-watcher-web/")
         img(src="https://img.shields.io/amo/rating/aw-watcher-web?logo=firefox")
 
-  div.col-sm-4
+  div.col-sm-3
     h6 aw-watcher-vscode
     p.my-0
       div.small Visual Studio Marketplace
       a(href="https://marketplace.visualstudio.com/items?itemName=activitywatch.aw-watcher-vscode")
-        img(alt="Visual Studio Marketplace Rating (Stars)" src="https://img.shields.io/visual-studio-marketplace/stars/activitywatch.aw-watcher-vscode?logo=visual-studio-code")
+        img(alt="Visual Studio Marketplace Rating" src="https://img.shields.io/visual-studio-marketplace/r/activitywatch.aw-watcher-vscode?logo=visual-studio-code")
     p.my-0
       div.small Open-VSX
       a(href="https://open-vsx.org/extension/ActivityWatch/aw-watcher-vscode")
@@ -100,9 +106,9 @@ div.row.text-center
 
 hr.my-5
 
-h3.text-center Donations
+h3.text-center.mb-5 Donations
 div.row.text-center
-  div.col-sm-4
+  div.col-sm-3
     h6 OpenCollective
     p
       //div
@@ -111,21 +117,26 @@ div.row.text-center
       a(href="https://opencollective.com/activitywatch")
         img(src="https://img.shields.io/opencollective/all/activitywatch?logo=opencollective")
 
-  div.col-sm-4
+  div.col-sm-3
     h6 GitHub Sponsors
     p
       a(href="https://github.com/sponsors/activitywatch")
         img(src="https://img.shields.io/github/sponsors/activitywatch?logo=github")
 
-  div.col-sm-4
+  div.col-sm-3
     h6 Liberapay
     p
       a(href="https://liberapay.com/ActivityWatch/")
         img(src="https://img.shields.io/liberapay/receives/ActivityWatch.svg?logo=liberapay")
 
+  div.col-sm-3
+    h6 Patreon
+    a(href="https://patreon.com/erikbjare")
+      img(src="https://img.shields.io/endpoint.svg?url=https%3A%2F%2Fshieldsio-patreon.vercel.app%2Fapi%3Fusername%3Derikbjare%26type%3Dpledges&style=flat&color=green")
+
 hr.my-5
 
-h3.text-center Social
+h3.text-center.mb-5 Social
 div.row.text-center
   div.col-sm-4
     h6 Discord
@@ -134,7 +145,7 @@ div.row.text-center
       img(alt="Discord" src="https://img.shields.io/discord/755040852727955476?logo=discord")
 
   div.col-sm-4
-    h6 GitHub stars #[span.small (all repos)]
+    h6 GitHub stars #[span.small.dim (all repos)]
     p
       img(src="https://img.shields.io/github/stars/ActivityWatch?logo=github")