Quick Touch Up to Tools Page (#760)

* open links in new tab

* add first name to Tools page

* add typescript to Card component

* increase spacing around progress bar

Author: noschiff

src/components/Tools/Card.vue

@@ -19,7 +19,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent } from 'vue';
 
 export default defineComponent({

src/components/Tools/ProgressTracker.vue

@@ -160,7 +160,7 @@ export default defineComponent({
     justify-content: center;
     flex-grow: 1;
     margin-bottom: 0.25rem;
-    min-width: 200px;
+    min-width: 220px;
   }
 
   &-bar {

src/components/Tools/UsefulLinks.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="links">
     <div v-for="{ title, link } in list" :key="title" class="links-group">
-      <a class="links-link" :href="link">
+      <a class="links-link" :href="link" target="_blank" rel="noopener noreferrer">
         {{ title }}
         <img class="links-link-icon" src="@/assets/images/link-gray.svg" alt="external link" />
       </a>

src/containers/Tools.vue

@@ -2,7 +2,7 @@
   <div class="toolsContainer">
     <div class="toolsContainer-header">
       <div class="toolsContainer-title">
-        <span>Hi Courseplanner!</span>
+        <span>Hi, {{ userInfo.firstName }}!</span>
       </div>
       <div class="toolsContainer-subtitle">
         <span>Here are some resources to help you plan.</span>
@@ -27,16 +27,23 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import Card from '@/components/Tools/Card.vue';
 import AdvisorCard from '@/components/Tools/AdvisorCard.vue';
 import UsefulLinks from '@/components/Tools/UsefulLinks.vue';
 import ProgressTracker from '@/components/Tools/ProgressTracker.vue';
 import ExportCard from '@/components/Tools/ExportCard.vue';
+import store from '@/store';
 
-export default {
+export default defineComponent({
   components: { ProgressTracker, ExportCard, UsefulLinks, AdvisorCard, Card },
-};
+  computed: {
+    userInfo(): FirestoreUserName {
+      return store.state.userName;
+    },
+  },
+});
 </script>
 
 <style scoped lang="scss">