feat: hyperlink the app name in the footers (#497)

* feat: hyperlink the app name in the footer

* fix: from review feedback, fix link color and add noopener

Author: joanise

packages/studio-web/src/app/app.component.html

@@ -95,5 +95,12 @@
 </mat-toolbar>
 <router-outlet></router-outlet>
 <div class="footer">
-  <div class="version">&#64;readalongs/studio-web version: {{ version }}</div>
+  <div class="version">
+    <a
+      href="https://github.com/ReadAlongs/Studio-Web"
+      target="_blank"
+      rel="noopener noreferrer"
+      >&#64;readalongs/studio-web {{ version }}</a
+    >
+  </div>
 </div>

packages/web-component/src/components/read-along-component/read-along.tsx

@@ -2286,7 +2286,13 @@ export class ReadAlongComponent {
           </button>
         </div>
         <p class="version">
-          @readalongs/web-component version: {PACKAGE_VERSION}
+          <a
+            href="https://github.com/ReadAlongs/Studio-Web"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            @readalongs/web-component {PACKAGE_VERSION}
+          </a>
         </p>
       </div>
       <div class="footer">

packages/web-component/src/scss/utilities/_colors.scss

@@ -51,9 +51,9 @@ $color-text-invert: rgba($color-background, 0.75);
 $color-text-strong-invert: $color-background;
 
 // Links
-$color-link: $hopbush;
+$color-link: #0d6efd;
 $color-link-hover: $midnight-blue;
-$color-link-visited: $bouquet;
+$color-link-visited: #0d6efd;
 
 // Code
 $color-code: #333;