improved app overview

Author: mms-gianni

client/src/components/pipelines/appcard.vue

@@ -17,7 +17,12 @@
       ></v-progress-linear>
     </template>
 
-    <v-card-title>
+    <v-card-title class="d-flex align-center">
+      <img
+        :src="(app.deploymentstrategy != 'docker') ? '/img/icons/hexagon1.svg' : '/img/icons/hexagon1-empty-bold-tp.svg'"
+        alt="app icon"
+        style="width: 35px; height: 35px; margin-right: 10px;"
+      >
       <router-link :to="{ name: 'App Dashboard', params: { pipeline: pipeline, phase: phase, app: app.name }}">{{ app.name }}</router-link>
     </v-card-title>
 

client/src/components/pipelines/detail.vue

@@ -4,11 +4,19 @@
         <Breadcrumbs :items="breadcrumbItems"></Breadcrumbs>
     </v-container>
     <v-container :fluid="true">
-        <h1>{{ pipeline }}</h1>
+        <!--<h1>{{ pipeline }}</h1>-->
         <v-layout>
                 <v-row>
                     <v-col v-for="phase in activePhases" :key="phase.name">
-                        <p><span class="text-uppercase">{{phase.name}}</span><br /><span class="caption">[{{phase.context}}]</span></p>
+                        <h4 class="text-uppercase ml-1">{{phase.name}}</h4>
+                        <v-chip
+                            class="ma-1"
+                            label
+                            size="small"
+                            >
+                            <v-icon icon="mdi-kubernetes" start></v-icon>
+                            {{phase.context}}
+                        </v-chip>
 
 
                         <Appcard v-for="app in phase.apps" :key="app.name"
@@ -28,6 +36,7 @@
                         :to="{ name: 'App Form', params: { phase: phase.name, pipeline: pipeline, app: 'new'}}"
                         class="mt-5 navBG"
                         color="secondary"
+                        size="small"
                         style="margin-bottom: 5px;"
                         >
                         </v-btn>

client/src/components/pipelines/list.vue

@@ -91,7 +91,7 @@
                     <v-btn
                     elevation="0"
                     vartiant="tonal"
-                    small
+                    size="small"
                     class="ma-2"
                     color="secondary"
                     @click="deletePipeline(item.name)"
@@ -103,7 +103,7 @@
                     <v-btn
                     elevation="0"
                     vartiant="tonal"
-                    small
+                    size="small"
                     class="ma-2"
                     color="secondary"
                     :to="{ name: 'Pipeline Form', params: { pipeline: item.name }}"