feat: update design

dbsystel · Dec 29, 2024 · e01608b · e01608b
1 parent 01177c7
commit e01608b
Show file tree

Hide file tree

Showing 8 changed files with 312 additions and 229 deletions.
diff --git a/e2e/home-page.ts b/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() {

diff --git a/src/App.vue b/src/App.vue
@@ -33,7 +33,7 @@
   padding: 5px 40px;
   font-size: 1rem;
   line-height: 2rem;
-  position: relative;
+  position: fixed;
   transition: 0.5s;
 }
 
@@ -61,7 +61,7 @@
 
 @media screen and (min-width: 800px) {
   #forkongithub {
-    position: absolute;
+    position: fixed;
     display: block;
     top: 0;
     right: 0;
@@ -73,7 +73,7 @@
 
   #forkongithub a {
     width: 240px;
-    position: absolute;
+    position: fixed;
     top: 50px;
     right: -50px;
     transform: rotate(45deg);

diff --git a/src/components/DataInput.vue b/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"