feat: update design

e2e/home-page.ts

@@ -8,8 +8,8 @@ export class HomePage {
 
   constructor(page: Page) {
     this.page = page
-    this.urlBtn = page.getByRole("button", { name: "URL" })
-    this.fileBtn = page.getByRole("button", { name: "File" })
+    this.urlBtn = page.getByRole("button", { name: "Get file from URL" })
+    this.fileBtn = page.getByRole("button", { name: "Upload a File" })
   }
 
   async goto(urlQueryParam?: string) {
@@ -87,7 +87,7 @@ export class HomePage {
   }
 
   async setSeverityFilter(severity: string) {
-    await this.page.getByRole("tab", { name: severity }).click()
+    await this.page.getByRole("button", { name: severity }).click()
   }
 
   async checkAllResults() {

src/App.vue

@@ -9,6 +9,9 @@
     </div>
 
     <v-app-bar app color="primary" dark>
+      <template v-slot:prepend>
+        <img class="icon" src="/logo_dark_bg.svg" alt="" />
+      </template>
       <v-app-bar-title>Trivy Vulnerability Explorer</v-app-bar-title>
     </v-app-bar>
 
@@ -18,11 +21,14 @@
   </v-app>
 </template>
 
-<script lang="ts" setup>
-//
-</script>
+<script lang="ts" setup></script>
 
 <style scoped>
+img.icon {
+  width: 30px;
+  margin-left: 0.5rem;
+}
+
 #forkongithub a {
   background: #000;
   color: #fff;
@@ -33,7 +39,7 @@
   padding: 5px 40px;
   font-size: 1rem;
   line-height: 2rem;
-  position: relative;
+  position: fixed;
   transition: 0.5s;
 }
 
@@ -61,7 +67,7 @@
 
 @media screen and (min-width: 800px) {
   #forkongithub {
-    position: absolute;
+    position: fixed;
     display: block;
     top: 0;
     right: 0;
@@ -73,7 +79,7 @@
 
   #forkongithub a {
     width: 240px;
-    position: absolute;
+    position: fixed;
     top: 50px;
     right: -50px;
     transform: rotate(45deg);

src/components/DataInput.vue

@@ -1,16 +1,20 @@
 <template>
-  <v-toolbar class="mt-3" color="white" elevation="1">
-    <v-btn-toggle
-      v-model="reportSource"
-      mandatory
-      color="primary"
-      variant="outlined"
-      class="mx-3"
+  <v-btn-toggle
+    v-model="reportSource"
+    mandatory
+    rounded="pill"
+    color="primary"
+    variant="outlined"
+    class="mb-6"
+  >
+    <v-btn :value="ReportSource.File" prepend-icon="mdi-file-upload"
+      >Upload a File</v-btn
     >
-      <v-btn :value="ReportSource.File">File</v-btn>
-      <v-btn :value="ReportSource.Url">URL</v-btn>
-    </v-btn-toggle>
-
+    <v-btn :value="ReportSource.Url" prepend-icon="mdi-link"
+      >Get File from URL</v-btn
+    >
+  </v-btn-toggle>
+  <v-container>
     <v-file-upload
       v-if="reportSource === ReportSource.File"
       density="compact"
@@ -22,28 +26,25 @@
       color="#f2f2f2"
       @update:model-value="handleFileUpload($event)"
     />
-
-    <ReportUrlFetcher
-      :onNewReport="onNewReportFromUrl"
-      v-if="reportSource === ReportSource.Url"
-      :presetUrl="presetUrl"
-    />
-
-    <v-autocomplete
-      v-model="selectedTarget"
-      clearable
-      :disabled="vulnerabilityReport.length === 0"
-      :items="vulnerabilityReport"
-      item-title="Target"
-      item-value="Target"
-      :label="
-        vulnerabilityReport.length === 0
-          ? 'No targets available'
-          : 'Select Target'
-      "
-      hide-details
-    />
-  </v-toolbar>
+  </v-container>
+
+  <ReportUrlFetcher
+    :onNewReport="onNewReportFromUrl"
+    v-if="reportSource === ReportSource.Url"
+    :presetUrl="presetUrl"
+  />
+
+  <v-autocomplete
+    v-model="selectedTarget"
+    clearable
+    v-if="vulnerabilityReport.length > 1"
+    :items="vulnerabilityReport"
+    item-title="Target"
+    item-value="Target"
+    label="Select Target"
+    hide-details
+    class="mt-8"
+  />
 
   <v-alert
     v-if="reportError"