refresh user interface icons, add card brand logos

- Drop icon fonts (Glyphicons and Forkawesome). Add SVG files from [Bootstrap Icons](https://icons.getbootstrap.com/) as replacements. (See [Inline SVG vs Icon Fonts](https://css-tricks.com/icon-fonts-vs-svg/) and [Stop Using Icon Fonts](https://www.irigoyen.dev/blog/2021/02/17/stop-using-icon-fonts/) for the reasons to drop icon fonts. In short, they're an obsolete hack.) - Add logos of payment card brands (copied from Stripe) and use them in the payment method selection page. - Refresh the icons of social platforms, optimize them, and give them text labels. (Closes #2117. Closes #2309.)
liberapay · Mar 4, 2024 · 5f3a11a · 5f3a11a
1 parent 76712b7
commit 5f3a11a
Show file tree

Hide file tree

Showing 173 changed files with 663 additions and 3,858 deletions.
diff --git a/README.md b/README.md
@@ -140,7 +140,15 @@ For our styles we use [SASS](http://sass-lang.com/) and [Bootstrap 3](https://ge
 We compile Bootstrap ourselves from the SASS source in the `style/bootstrap/`
 directory. We do that to be able to easily customize it by changing values in
 `style/variables.scss`. Modifying the files in `style/bootstrap/` is probably
-not a good idea.
+a bad idea.
+
+### Icons
+
+An icon can be included in a page by calling the `icon` macro from `templates/macros/icons.html`. That file contains a mapping of icon names to file paths.
+
+For user interface icons we use [Bootstrap Icons](https://icons.getbootstrap.com/). A new icon can be added to Liberapay by simply copying its SVG file from Bootstrap Icons into the `www/assets/bootstrap-icons/` directory (and not forgetting to `git add` it, of course).
+
+If you don't find any icon in Bootstrap Icons that fits your use case, you can try to search online catalogs like [Flaticon](https://www.flaticon.com/search?type=uicon), [Icons8](https://icons8.com/icons), [Pictogrammers](https://pictogrammers.com/), [SVG Repo](https://www.svgrepo.com/) and [The Noun Project](https://thenounproject.com/). For brand icons, [Simple Icons](https://simpleicons.org/) is a good resource.
 
 ### Testing
 

diff --git a/liberapay/elsewhere/_base.py b/liberapay/elsewhere/_base.py
@@ -77,7 +77,6 @@ def parse_as_xml(response):
 
 class Platform:
 
-    fontawesome_name = None
     has_teams = False
     optional_user_name = False
     single_domain = True

diff --git a/liberapay/elsewhere/bitbucket.py b/liberapay/elsewhere/bitbucket.py
@@ -9,7 +9,6 @@ class Bitbucket(PlatformOAuth1):
     # Platform attributes
     name = 'bitbucket'
     display_name = 'Bitbucket'
-    fontawesome_name = name
     account_url = 'https://bitbucket.org/{user_name}'
 
     # Auth attributes

diff --git a/liberapay/elsewhere/github.py b/liberapay/elsewhere/github.py
@@ -8,7 +8,6 @@ class GitHub(PlatformOAuth2):
     # Platform attributes
     name = 'github'
     display_name = 'GitHub'
-    fontawesome_name = name
     account_url = 'https://github.com/{user_name}'
     repo_url = 'https://github.com/{slug}'
     has_teams = True

diff --git a/liberapay/elsewhere/gitlab.py b/liberapay/elsewhere/gitlab.py
@@ -8,7 +8,6 @@ class GitLab(PlatformOAuth2):
     # Platform attributes
     name = 'gitlab'
     display_name = 'GitLab.com'
-    fontawesome_name = name
     account_url = 'https://gitlab.com/{user_name}'
     repo_url = 'https://gitlab.com/{slug}'
     has_teams = True

diff --git a/liberapay/elsewhere/mastodon.py b/liberapay/elsewhere/mastodon.py
@@ -14,7 +14,6 @@ class Mastodon(PlatformOAuth2):
     # Platform attributes
     name = 'mastodon'
     display_name = 'Mastodon'
-    fontawesome_name = name
     account_url = 'https://{domain}/@{user_name}'
     single_domain = False
 

diff --git a/liberapay/elsewhere/pleroma.py b/liberapay/elsewhere/pleroma.py
@@ -7,7 +7,6 @@ class Pleroma(Mastodon):
     # Platform attributes
     name = 'pleroma'
     display_name = 'Pleroma'
-    fontawesome_name = name
     account_url = 'https://{domain}/{user_name}'
     single_domain = False
 

diff --git a/liberapay/elsewhere/twitch.py b/liberapay/elsewhere/twitch.py
@@ -8,7 +8,6 @@ class Twitch(PlatformOAuth2):
     # Platform attributes
     name = 'twitch'
     display_name = 'Twitch'
-    fontawesome_name = name
     account_url = 'https://twitch.tv/{user_name}'
     user_type = 'channel'
 

diff --git a/liberapay/elsewhere/twitter.py b/liberapay/elsewhere/twitter.py
@@ -8,7 +8,6 @@ class Twitter(PlatformOAuth1):
     # Platform attributes
     name = 'twitter'
     display_name = 'Twitter'
-    fontawesome_name = name
     account_url = 'https://twitter.com/{user_name}'
 
     # Auth attributes

diff --git a/liberapay/elsewhere/youtube.py b/liberapay/elsewhere/youtube.py
@@ -9,7 +9,6 @@ class Youtube(PlatformOAuth2):
     based_on = 'google'
     name = 'youtube'
     display_name = 'YouTube'
-    fontawesome_name = 'youtube-play'
     account_url = 'https://youtube.com/channel/{user_id}'
     optional_user_name = True
     user_type = 'channel'

diff --git a/liberapay/main.py b/liberapay/main.py
@@ -103,17 +103,26 @@ def _assert(x):
     assert x, repr(x)
     return x
 
+def soft_assert(x, msg):
+    if not x:
+        try:
+            raise AssertionError(msg)
+        except AssertionError as e:
+            website.tell_sentry(e)
+    return x
+
 website.renderer_factories['jinja2'].Renderer.global_context.update(builtins.__dict__)
 website.renderer_factories['jinja2'].Renderer.global_context.update({
     # This is shared via class inheritance with jinja2_* renderers.
     'assert': _assert,
+    'b64decode_s': b64decode_s,
+    'b64encode_s': b64encode_s,
     'Bold': Bold,
     'Community': Community,
     'Country': Country,
     'Currency': Currency,
-    'b64decode_s': b64decode_s,
-    'b64encode_s': b64encode_s,
     'generate_session_token': Participant.generate_session_token,
+    'soft_assert': soft_assert,
     'to_age': to_age,
     'to_javascript': utils.to_javascript,
     'urlquote': urlquote,

diff --git a/liberapay/website.py b/liberapay/website.py
@@ -37,6 +37,18 @@ def compute_previous_and_next_payday_dates(self):
     def link(self, path, text):
         return self._html_link % (path, text)
 
+    def read_asset(self, path):
+        try:
+            assert '..' not in path
+            resource = website.request_processor.resources.get(
+                f'{website.www_root}/assets/{path}'
+            )
+            bs = resource.render().body if resource.raw is None else resource.raw
+            return bs.decode('utf8')
+        except Exception as e:
+            self.tell_sentry(e)
+            return ''
+
     def respond(self, *args, **kw):
         # Run in a new (sub)context
         return copy_context().run(super().respond, *args, **kw)

diff --git a/liberapay/wireup.py b/liberapay/wireup.py
@@ -605,15 +605,15 @@ def accounts_elsewhere(app_conf, asset, canonical_url, db):
     platforms = PlatformRegistry(platforms)
 
     for platform in platforms:
-        if platform.fontawesome_name:
-            continue
-        platform.icon = asset(
-            'platforms/%s.svg' % platform.name,
+        platform.icon_16 = asset(
+            'platforms/%s.16.webp' % platform.name,
             'platforms/%s.16.png' % platform.name,
+            'platforms/%s.svg' % platform.name,
         )
-        platform.logo = asset(
+        platform.icon_32 = asset(
+            'platforms/%s.32.webp' % platform.name,
+            'platforms/%s.32.png' % platform.name,
             'platforms/%s.svg' % platform.name,
-            'platforms/%s.png' % platform.name,
         )
 
     return {'platforms': platforms}

diff --git a/simplates/refresh.spt b/simplates/refresh.spt
@@ -9,6 +9,7 @@ else:
 response.headers[b'Refresh'] = refresh_header
 
 [---] text/html
+% from "templates/macros/icons.html" import icon with context
 <!DOCTYPE html>
 <html lang="{{ locale.tag }}">
 <head>
@@ -18,14 +19,13 @@ response.headers[b'Refresh'] = refresh_header
     <link rel="icon" href="{{ website.asset('liberapay/icon-v2_black.16.png') }}" type="image/png">
     <link rel="stylesheet" href="{{ website.asset('bootstrap/css/bootstrap.css') }}">
     <link rel="stylesheet" href="{{ website.asset('base.css') }}" type="text/css">
-    <link rel="stylesheet" href="{{ website.asset('forkawesome/1.1.7/css/fork-awesome.min.css') }}" type="text/css">
     <meta name="theme-color" content="#f6c915">
 </head>
 <body>
     <nav class="navbar navbar-liberapay navbar-static-top" id="navbar" aria-hidden="true">
         <div class="container">
             <ul class="nav navbar-nav">
-                <li><a class="navbar-brand"><i class="fa fa-liberapay"></i></a></li>
+                <li><a class="navbar-brand">{{ icon('liberapay') }}</a></li>
             </ul>
         </div>
     </nav>

diff --git a/style/base/alerts.scss b/style/base/alerts.scss
@@ -20,7 +20,7 @@
     .actions {
         position: absolute;
         right: 10px;
-        top: 8px;
+        top: 7px;
         & > button {
             -moz-appearance: none;
             -webkit-appearance: none;

diff --git a/style/base/base.scss b/style/base/base.scss
@@ -136,26 +136,6 @@ div.account {
     margin-left: 0.5ex;
 }
 
-img.platform-icon {
-    height: 16px;
-}
-i.platform-icon {
-    display: inline-block;
-    font-size: 16px;
-    width: 16px;
-    text-align: center;
-    vertical-align: middle;
-}
-img.account-type {
-    height: 32px;
-}
-i.account-type {
-    display: inline-block;
-    font-size: 32px;
-    width: 32px;
-    text-align: center;
-    vertical-align: middle;
-}
 a.account-link[href="#not-available"] {
     color: inherit;
     cursor: default;
@@ -240,15 +220,15 @@ p.summary {
     max-width: 320px;
     text-align: center;
     width: 320px;
-    .platform-icon {
-        margin-top: -3px;
-    }
     h4 {
         margin-top: 5px;
         line-height: 23px;
         max-height: 2 * 23px;
         overflow: hidden;
         text-overflow: ellipsis;
+        .icon {
+            vertical-align: baseline;
+        }
     }
     .summary {
         height: 3 * $line-height-computed;
@@ -302,7 +282,7 @@ p.summary {
             margin: 0 1ex 0.6em 0;
         }
     }
-    .glyphicon-star {
+    .star {
         color: $gray-light;
         font-size: 80%;
     }
@@ -744,7 +724,7 @@ p.event {
     margin-bottom: 0.5em;
 }
 
-.glyphicon + span {
+.icon + span {
     margin-left: 2px;
 }
 
@@ -768,31 +748,39 @@ span.help-title {
 
 .payment-methods {
     margin-right: -10px;
-    & > div {
+    & > .panel {
         display: inline-block;
         margin-right: 10px;
-        min-height: 145px;
         text-align: center;
         vertical-align: top;
         width: 350px;
         max-width: 100%;
-    }
-    .payment-icon {
-        font-size: 2em;
+        & > .panel-body {
+            min-height: 165px;
+        }
     }
     .muted {
         color: #888;
-        .payment-icon {
+        svg {
             color: #ccc;
         }
     }
-    small.text-warning, small.text-danger {
+    h4 {
+        margin-bottom: 0;
+    }
+    small {
+        display: block;
         font-size: $font-size-medium;
         font-weight: bold;
         line-height: $font-size-medium * $line-height-base;
+        margin-top: 11px;
     }
 }
 
+.card-brands > svg {
+    margin: 0 2ex .3em 0;
+}
+
 @media (max-width: $screen-sm-min - 1) {
     .col-right {
         clear: both;
@@ -818,7 +806,6 @@ span.help-title {
 }
 
 .payment-icons {
-    font-size: $font-size-large;
     text-wrap: nowrap;
     vertical-align: middle;
 }

diff --git a/style/base/forms.scss b/style/base/forms.scss
@@ -78,10 +78,10 @@ button.corner-icon {
     font-size: 18px;
     line-height: 24px;
     margin-left: 5px;
-    opacity: 0.2;
+    opacity: 0.5;
     padding: 0 5px;
     &:hover {
-        opacity: 0.5;
+        opacity: 0.8;
     }
 }
 

diff --git a/style/base/icons.scss b/style/base/icons.scss
@@ -1,11 +1,22 @@
-.fa-brand-color {
-    // https://logo-colors.com/
-    &.fa-bitbucket { color: #0052cc; }
-    &.fa-github { color: #24292e; }
-    &.fa-gitlab { color: #fca326; }
-    &.fa-mastodon { color: #6364ff; }
-    &.fa-pleroma { color: #fba457; }
-    &.fa-twitch { color: #6441a5; }
-    &.fa-twitter { color: #1da1f2; }
-    &.fa-youtube-play { color: #ff0000; }
+svg {
+    vertical-align: top;
+}
+.icon + span {
+    margin-left: 2px;
+}
+span.icon-16 {
+    display: inline-block;
+    line-height: 16px;
+    & > svg {
+        height: 16px;
+        width: 16px;
+    }
+}
+span.icon-32 {
+    display: inline-block;
+    line-height: 32px;
+    & > svg {
+        height: 32px;
+        width: 32px;
+    }
 }
diff --git a/style/base/navbar.scss b/style/base/navbar.scss
@@ -78,18 +78,10 @@
         margin-left: 0;
     }
     .navbar-brand {
-        & > img {
-            border-radius: 4px;
-            color: #000;
-            height: $font-size-base * 2;
-            line-height: $font-size-base * 2;
-            margin-top: -$font-size-base / 3;
-        }
-        & > .fa-liberapay {
-            font-size: $font-size-base * 2;
-            line-height: $font-size-base * 2;
-            margin-top: -$font-size-base / 3;
-        }
+        height: 50px;
+        line-height: 32px;
+        padding: 9px;
+        width: 50px;
     }
 }