ui

app/javascript/components/AppIcon.vue

@@ -16,6 +16,7 @@
   import LockUnlocked from "open-iconic/svg/lock-unlocked";
   import Person from "open-iconic/svg/person";
   import Pencil from "open-iconic/svg/pencil";
+  import Plus from "open-iconic/svg/plus.svg";
   import Star from "open-iconic/svg/star";
   import X from "open-iconic/svg/x";
 
@@ -30,6 +31,7 @@
     'lock-unlocked': LockUnlocked,
     pencil: Pencil,
     person: Person,
+    plus: Plus,
     star: Star,
     x: X
   };

app/javascript/components/RecipeShow.vue

@@ -24,7 +24,7 @@
           <div>
             <p class="heading">Source</p>
             <p class="title is-6">
-              <a v-if="isSourceUrl" :href="sourceUrl">{{sourceText}}</a>
+              <a v-if="isSourceUrl" :href="sourceUrl" target="_blank">{{sourceText}}</a>
               <span v-else>{{sourceText}}</span>
             </p>
           </div>

app/javascript/components/TheRecipeList.vue

@@ -1,8 +1,11 @@
 <template>
   <div>
-    <h1 class="title">Recipes</h1>
-
-    <router-link v-if="isLoggedIn" :to="{name: 'new_recipe'}" class="button is-primary">Create Recipe</router-link>
+    <h1 class="title">
+      Recipes
+      <router-link v-if="isLoggedIn" :to="{name: 'new_recipe'}" class="button is-primary is-rounded" title="Create new Recipe">
+        <app-icon icon="plus"></app-icon>
+      </router-link>
+    </h1>
 
     <app-pager :current-page="currentPage" :total-pages="totalPages" paged-item-name="recipe" @changePage="changePage"></app-pager>