Added donation links to About page

src/app/pages/about/about.page.html

@@ -6,7 +6,11 @@
 
     <div>
       <div class="title">{{ version.appName }}</div>
-      <p>BCR-GUI is a companion app for <a href="https://github.com/chenxiaolong/BCR">BCR</a> (Basic Call Recorder) to ease management of its recordings database</p>
+      <div>
+        BCR-GUI is a companion app for
+        <a href="https://github.com/chenxiaolong/BCR">BCR</a> (Basic Call Recorder)
+        to ease management of its recordings database
+      </div>
     </div>
 
     <img src="/assets/icons/icon-rounded.svg" style="width: 64px; aspect-ratio: 1;">
@@ -35,11 +39,30 @@ <h2>Source code</h2>
   </div>
 
   <div class="item">
-    <ion-label class="ion-text-wrap">
-      <h2>Attributions</h2>
+    <ion-label class="ion-text-wrap donations">
+      <h2>Donations</h2>
       <p>
-        Call icons by <a href="https://freesvg.org/1547046949" target="_blank">FreeSVG (public domain icons)</a>
+        This app is free as in speech, nothing to pay, no ads.<br>
+        If you appreciate my work and want to support it, feel free to use one the links below.
       </p>
+      <div class="images">
+        <a href="https://paypal.me/nicorac" target="_blank">
+          <img src="assets/images/paypal.png" alt="PayPal">
+        </a>
+        <a href="https://www.buymeacoffee.com/coolsoft" target="_blank">
+          <img src="assets/images/buy-me-a-coffee.png" alt="Buy Me A Coffee">
+        </a>
+      </div>
+    </ion-label>
+  </div>
+
+  <div class="item">
+    <ion-label class="ion-text-wrap">
+      <h2>Attributions</h2>
+      <ul>
+        <li>Call icons by <a href="https://freesvg.org/1547046949" target="_blank">FreeSVG (public domain icons)</a></li>
+        <li>DateTime Angular pipes with Intl.* support by <a href="https://github.com/json-derulo/angular-ecmascript-intl" target="_blank">angular-ecmascript-intl</a></li>
+      </ul>
     </ion-label>
   </div>
 

src/app/pages/about/about.page.scss

@@ -14,8 +14,24 @@
 .title {
   font-size: 18pt;
   font-weight: bold;
+  padding-bottom: .5em;
 }
 
 .item {
   padding-bottom: 1em;
+}
+
+.donations {
+  display: flex;
+  flex-direction: column;
+  gap: .5em;
+
+  .images {
+    display: flex;
+    gap: 1em;
+  }
+
+  img {
+    border-radius: .3em;
+  }
 }