Add RTL donations link

frontend/3rdpartylicenses.txt

@@ -69,32 +69,6 @@ MIT
 @angular/router
 MIT
 
-@babel/runtime
-MIT
-MIT License
-
-Copyright (c) 2014-present Sebastian McKenzie and other contributors
-
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of this software and associated documentation files (the
-"Software"), to deal in the Software without restriction, including
-without limitation the rights to use, copy, modify, merge, publish,
-distribute, sublicense, and/or sell copies of the Software, and to
-permit persons to whom the Software is furnished to do so, subject to
-the following conditions:
-
-The above copyright notice and this permission notice shall be
-included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
-NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
-LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
-OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
-WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-
-
 @fortawesome/angular-fontawesome
 MIT
 MIT License

frontend/index.html

@@ -10,9 +10,9 @@
     <link i18n-rel="" rel="mask-icon" href="assets/images/favicon-light/safari-pinned-tab.svg" color="#5bbad5">
     <meta i18n-content="" name="msapplication-TileColor" content="#da532c">
     <meta i18n-content="" name="theme-color" content="#ffffff">
-  <style>html{width:100%;height:99%;line-height:1.5;overflow-x:hidden;font-family:Roboto,sans-serif!important;font-size:95%}@media only screen and (max-width: 56.25em){html{font-size:90%}}@media only screen and (max-width: 37.5em){html{font-size:80%}}body{box-sizing:border-box;height:100%;margin:0;overflow:hidden}*{margin:0;padding:0}@font-face{font-family:Roboto;src:url(Roboto-Thin.f7a95c9c5999532c.woff2) format("woff2"),url(Roboto-Thin.c13c157cb81e8ebb.woff) format("woff");font-weight:100;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-ThinItalic.b0e084abf689f393.woff2) format("woff2"),url(Roboto-ThinItalic.1111028df6cea564.woff) format("woff");font-weight:100;font-style:italic}@font-face{font-family:Roboto;src:url(Roboto-Light.0e01b6cd13b3857f.woff2) format("woff2"),url(Roboto-Light.603ca9a537b88428.woff) format("woff");font-weight:300;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-LightItalic.232ef4b20215f720.woff2) format("woff2"),url(Roboto-LightItalic.1b5e142f787151c8.woff) format("woff");font-weight:300;font-style:italic}@font-face{font-family:Roboto;src:url(Roboto-Regular.475ba9e4e2d63456.woff2) format("woff2"),url(Roboto-Regular.bcefbfee882bc1cb.woff) format("woff");font-weight:400;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-RegularItalic.e3a9ebdaac06bbc4.woff2) format("woff2"),url(Roboto-RegularItalic.0668fae6af0cf8c2.woff) format("woff");font-weight:400;font-style:italic}@font-face{font-family:Roboto;src:url(Roboto-Medium.457532032ceb0168.woff2) format("woff2"),url(Roboto-Medium.6e1ae5f0b324a0aa.woff) format("woff");font-weight:500;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-MediumItalic.872f7060602d55d2.woff2) format("woff2"),url(Roboto-MediumItalic.e06fb533801cbb08.woff) format("woff");font-weight:500;font-style:italic}@font-face{font-family:Roboto;src:url(Roboto-Bold.447291a88c067396.woff2) format("woff2"),url(Roboto-Bold.fc482e6133cf5e26.woff) format("woff");font-weight:700;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-BoldItalic.1b15168ef6fa4e16.woff2) format("woff2"),url(Roboto-BoldItalic.e26ba339b06f09f7.woff) format("woff");font-weight:700;font-style:italic}@font-face{font-family:Roboto;src:url(Roboto-Black.2eaa390d458c877d.woff2) format("woff2"),url(Roboto-Black.b25f67ad8583da68.woff) format("woff");font-weight:900;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-BlackItalic.7dc03ee444552bc5.woff2) format("woff2"),url(Roboto-BlackItalic.c8dc642467cb3099.woff) format("woff");font-weight:900;font-style:italic}</style><link rel="stylesheet" href="styles.a04c018645a5044a.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.a04c018645a5044a.css"></noscript></head>
+  <style>html{width:100%;height:99%;line-height:1.5;overflow-x:hidden;font-family:Roboto,sans-serif!important;font-size:95%}@media only screen and (max-width: 56.25em){html{font-size:90%}}@media only screen and (max-width: 37.5em){html{font-size:80%}}body{box-sizing:border-box;height:100%;margin:0;overflow:hidden}*{margin:0;padding:0}@font-face{font-family:Roboto;src:url(Roboto-Thin.f7a95c9c5999532c.woff2) format("woff2"),url(Roboto-Thin.c13c157cb81e8ebb.woff) format("woff");font-weight:100;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-ThinItalic.b0e084abf689f393.woff2) format("woff2"),url(Roboto-ThinItalic.1111028df6cea564.woff) format("woff");font-weight:100;font-style:italic}@font-face{font-family:Roboto;src:url(Roboto-Light.0e01b6cd13b3857f.woff2) format("woff2"),url(Roboto-Light.603ca9a537b88428.woff) format("woff");font-weight:300;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-LightItalic.232ef4b20215f720.woff2) format("woff2"),url(Roboto-LightItalic.1b5e142f787151c8.woff) format("woff");font-weight:300;font-style:italic}@font-face{font-family:Roboto;src:url(Roboto-Regular.475ba9e4e2d63456.woff2) format("woff2"),url(Roboto-Regular.bcefbfee882bc1cb.woff) format("woff");font-weight:400;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-RegularItalic.e3a9ebdaac06bbc4.woff2) format("woff2"),url(Roboto-RegularItalic.0668fae6af0cf8c2.woff) format("woff");font-weight:400;font-style:italic}@font-face{font-family:Roboto;src:url(Roboto-Medium.457532032ceb0168.woff2) format("woff2"),url(Roboto-Medium.6e1ae5f0b324a0aa.woff) format("woff");font-weight:500;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-MediumItalic.872f7060602d55d2.woff2) format("woff2"),url(Roboto-MediumItalic.e06fb533801cbb08.woff) format("woff");font-weight:500;font-style:italic}@font-face{font-family:Roboto;src:url(Roboto-Bold.447291a88c067396.woff2) format("woff2"),url(Roboto-Bold.fc482e6133cf5e26.woff) format("woff");font-weight:700;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-BoldItalic.1b15168ef6fa4e16.woff2) format("woff2"),url(Roboto-BoldItalic.e26ba339b06f09f7.woff) format("woff");font-weight:700;font-style:italic}@font-face{font-family:Roboto;src:url(Roboto-Black.2eaa390d458c877d.woff2) format("woff2"),url(Roboto-Black.b25f67ad8583da68.woff) format("woff");font-weight:900;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-BlackItalic.7dc03ee444552bc5.woff2) format("woff2"),url(Roboto-BlackItalic.c8dc642467cb3099.woff) format("woff");font-weight:900;font-style:italic}</style><link rel="stylesheet" href="styles.7bc5ffcb3b65f807.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.7bc5ffcb3b65f807.css"></noscript></head>
   <body>
     <rtl-app></rtl-app>
-  <script src="runtime.2052255b31fb7bf1.js" type="module"></script><script src="polyfills.b59f900d177e9760.js" type="module"></script><script src="main.a0be7063e8c24e04.js" type="module"></script>
+  <script src="runtime.4a54aecb0b8a9e1b.js" type="module"></script><script src="polyfills.aa01d8f6b94657cb.js" type="module"></script><script src="main.c5564c81d78ecdc2.js" type="module"></script>
 
 </body></html>

src/app/shared/components/navigation/top-menu/top-menu.component.html

@@ -15,6 +15,14 @@
     <fa-icon class="fa-icon-small mr-1" [icon]="faQuestion"></fa-icon>
     <span routerLink="/help">Help</span>
   </p>
+  <p mat-menu-item fxLayoutAlign="start center" (click)="onDonate()">
+    <svg class="svg-donation" fill="currentColor" version="1.1" viewBox="0 0 64 64" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      <g>
+        <path d="M62.519,17.698l-12-14c-0.659-0.768-1.786-0.923-2.628-0.362l-8.712,5.808l-16.688,4.172   c-2.485,0.622-4.537,2.412-5.487,4.791L12.21,30.09C10.206,32.512,9,35.618,9,39c0,2.974,0.939,5.73,2.527,8H5   c-2.206,0-4,1.794-4,4v6c0,2.206,1.794,4,4,4h36c2.206,0,4-1.794,4-4v-6c0-2.206-1.794-4-4-4h-6.522   c0.375-0.535,0.713-1.1,1.013-1.691l4.291-2.452l3.378-0.965c2.619-0.749,4.903-2.269,6.604-4.395   c1.39-1.736,2.317-3.813,2.682-6.006l0.412-2.472l9.48-8.532C63.145,19.76,63.225,18.523,62.519,17.698z M34.428,30.929   c-1.487-2.094-3.517-3.732-5.842-4.75L29.207,25h7.058l0.588,4.11L34.428,30.929z M31.225,33.331l-0.373,0.28   c-1.772,1.329-2.889,3.273-3.146,5.473c-0.257,2.2,0.382,4.348,1.8,6.048l0.667,0.8C28.315,47.845,25.742,49,23,49   c-5.514,0-10-4.486-10-10s4.486-10,10-10C26.299,29,29.376,30.663,31.225,33.331z M41,57H5v-6h10.826c2.101,1.261,4.55,2,7.174,2   c2.571,0,5.041-0.723,7.176-2H41V57z M49.662,26.513c-0.336,0.303-0.561,0.711-0.635,1.158L48.5,30.833   c-0.253,1.521-0.896,2.96-1.86,4.165c-1.18,1.475-2.763,2.529-4.579,3.048l-3.61,1.031c-0.155,0.044-0.303,0.106-0.443,0.187   l-5.541,3.166c-0.63-0.826-0.909-1.843-0.788-2.882c0.128-1.1,0.687-2.072,1.573-2.737l6.001-4.5   c1.169-0.877,1.767-2.32,1.56-3.766l-0.587-4.11C39.946,22.477,38.244,21,36.266,21h-7.059c-1.489,0-2.845,0.818-3.539,2.136   l-1.037,1.969C24.093,25.041,23.549,25,23,25c-1.685,0-3.294,0.314-4.791,0.862l2.509-6.271c0.476-1.189,1.501-2.084,2.743-2.395   l17.024-4.256c0.223-0.056,0.434-0.149,0.625-0.276l7.525-5.017l9.576,11.172L49.662,26.513z"/>
+      </g>
+    </svg>
+    <span>Donate</span>
+  </p>
   <p *ngIf="showLogout" mat-menu-item (click)="onClick()">
     <fa-icon class="fa-icon-small mr-1" [icon]="faEject"></fa-icon>
     <span>Logout</span>

src/app/shared/components/navigation/top-menu/top-menu.component.scss

@@ -1,8 +1,8 @@
 .mat-mdc-icon-button img.rtl-log-top {
-    width: 2rem;
-    height: 2rem;
+  width: 2rem;
+  height: 2rem;
 }
 
 .mat-icon.material-icons.mat-icon-no-color.rtl-logo-dropdown {
-    height: 2rem;
-}
+  height: 2rem;
+}

src/app/shared/components/navigation/top-menu/top-menu.component.ts

@@ -95,6 +95,10 @@ export class TopMenuComponent implements OnInit, OnDestroy {
       });
   }
 
+  onDonate() {
+    window.open('https://www.ridethelightning.info/donate/', '_blank');
+  }
+
   ngOnDestroy() {
     this.unSubs.forEach((completeSub) => {
       completeSub.next(<any>null);

src/app/shared/theme/styles/theme-color.scss

@@ -188,11 +188,27 @@
     border-bottom-style: solid; 
     border-bottom-color: $foreground-divider;
   }
+
+  .mdc-list-item__primary-text {
+    place-content: flex-start;
+    align-items: center;
+    flex-direction: row;
+    box-sizing: border-box;
+    display: flex;
+  }
+
+  .svg-donation {
+    opacity: 0.67;
+    width: 1.5rem;
+    margin-right: 10px;
+  }
+
   .mat-mdc-option:hover:not(.mdc-list-item--disabled), .mat-mdc-option:focus:not(.mdc-list-item--disabled), .mat-mdc-option.mat-mdc-option-active, .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled), 
   .mat-mdc-menu-item:hover:not([disabled]), .mat-mdc-menu-item.cdk-program-focused:not([disabled]), .mat-mdc-menu-item.cdk-keyboard-focused:not([disabled]), .mat-mdc-menu-item-highlighted:not([disabled]) {
     color: $primary-color;
-    & .mdc-list-item__primary-text, & .fa-icon, & .fa-icon-small {
+    & .mdc-list-item__primary-text, & .fa-icon, & .fa-icon-small, & .svg-donation {
       color: $primary-color;
+      opacity: 1;
     }
   }
   table.mat-mdc-table {

src/app/shared/theme/styles/theme-mode-dark.scss

@@ -148,6 +148,15 @@
   .cdk-overlay-pane.spinner-dialog-panel .mat-mdc-dialog-container.mdc-dialog {
     background-color: transparent;
   }
+
+  .svg-donation {
+    opacity: 1 !important;
+  }
+
+  .mat-mdc-menu-item:hover .mdc-list-item__primary-text .svg-donation {
+    color: $primary-darker !important;
+  }
+
   .mat-mdc-option:hover:not(.mdc-list-item--disabled) .mdc-list-item__primary-text,
   .mat-mdc-option:hover:not(.mdc-list-item--disabled) .fa-icon, .mat-mdc-option:hover:not(.mdc-list-item--disabled) .fa-icon-small,
   .mat-mdc-option:focus:not(.mdc-list-item--disabled) .mdc-list-item__primary-text, .mat-mdc-option:focus:not(.mdc-list-item--disabled) .fa-icon,