From c9892a46b0e75c2a0d0179941fd259b3d33375fe Mon Sep 17 00:00:00 2001
From: Vittoria Toso <vittoria@thinkst.com>
Date: Thu, 5 Dec 2024 16:42:05 +0100
Subject: [PATCH] fix style

---
 .../base/BaseDownloadIconButton.vue           |  2 +-
 .../src/components/base/BaseFormSelect.vue    | 27 +++++++++++++------
 .../tokens/idp_app/GenerateTokenForm.vue      | 12 ++++++---
 3 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/frontend_vue/src/components/base/BaseDownloadIconButton.vue b/frontend_vue/src/components/base/BaseDownloadIconButton.vue
index 5e8d7ba4c..ccdccbe63 100644
--- a/frontend_vue/src/components/base/BaseDownloadIconButton.vue
+++ b/frontend_vue/src/components/base/BaseDownloadIconButton.vue
@@ -5,7 +5,7 @@
   >
     <a
       v-bind="$attrs"
-      class="bg-cover min-w-[2.5rem] min-h-[2.2rem] duration-100"
+      class="bg-cover min-w-[2.5rem] min-h-[2.2rem] duration-100 aspect-square"
       :class="{ 'bg-grey-200 cursor-default': props.disabled }"
       :style="
         !props.disabled && props.url
diff --git a/frontend_vue/src/components/base/BaseFormSelect.vue b/frontend_vue/src/components/base/BaseFormSelect.vue
index 78e5dac39..c8cda978f 100644
--- a/frontend_vue/src/components/base/BaseFormSelect.vue
+++ b/frontend_vue/src/components/base/BaseFormSelect.vue
@@ -8,7 +8,7 @@
   <v-select
     :id="id"
     class="v-select"
-    :class="{ 'invalid': errorMessage }"
+    :class="{ invalid: errorMessage }"
     :style="`--vs-dropdown-height: ${props.height}`"
     :options="options"
     :searchable="searchable"
@@ -40,8 +40,8 @@
       ></slot>
     </template>
   </v-select>
-    <div class="h-8 mt-4 ml-16">
-      <p
+  <div class="h-8 mt-4 ml-16">
+    <p
       v-if="errorMessage"
       class="text-xs text-red leading-[0px]"
     >
@@ -54,8 +54,7 @@
 import { toRef, onMounted } from 'vue';
 import { useField } from 'vee-validate';
 
-export type SelectOption = { label: string, value: string };
-
+export type SelectOption = { label: string; value: string };
 
 const props = defineProps<{
   id: string;
@@ -86,15 +85,14 @@ onMounted(() => {
 
 function handleSelectOption(value: string | SelectOption) {
   if (typeof value === 'object') {
-    value = value.value
-  };
+    value = value.value;
+  }
   handleChange(value);
   emits('selectOption', value);
 }
 </script>
 
 <style lang="scss">
-
 .focus-visible {
   outline: 2px solid;
   outline-color: hsl(191, 96%, 36%);
@@ -110,6 +108,7 @@ function handleSelectOption(value: string | SelectOption) {
 .v-select .vs__dropdown-menu {
   @apply mt-[8px] bg-white shadow-none border-grey-300 rounded-xl;
   height: var(--vs-dropdown-height);
+  border-top-style: solid;
 }
 
 .v-select .vs__clear {
@@ -123,6 +122,14 @@ function handleSelectOption(value: string | SelectOption) {
   @apply text-grey-500;
 }
 
+.v-select .vs__dropdown-option:first-child {
+  @apply mt-[0.5rem];
+}
+
+.v-select .vs__dropdown-option:last-child {
+  @apply mb-[0.5rem];
+}
+
 .v-select .vs__dropdown-option--highlight {
   @apply bg-green-500 text-white;
 }
@@ -130,4 +137,8 @@ function handleSelectOption(value: string | SelectOption) {
 .v-select.invalid > .vs__dropdown-toggle {
   @apply border border-red;
 }
+
+.vs__selected {
+  @apply m-0;
+}
 </style>
diff --git a/frontend_vue/src/components/tokens/idp_app/GenerateTokenForm.vue b/frontend_vue/src/components/tokens/idp_app/GenerateTokenForm.vue
index 9478491b8..abd453ee0 100644
--- a/frontend_vue/src/components/tokens/idp_app/GenerateTokenForm.vue
+++ b/frontend_vue/src/components/tokens/idp_app/GenerateTokenForm.vue
@@ -15,7 +15,9 @@
           <div class="flex flex-row items-center gap-16">
             <div
               alt="icon"
-              :style="{ backgroundImage: `url(${getImageUrl('idp_icons/'+option.value+'.png')})` }"
+              :style="{
+                backgroundImage: `url(${getImageUrl('idp_icons/' + option.value + '.png')})`,
+              }"
               class="bg-cover w-[2rem] h-[2rem] duration-100"
             ></div>
             {{ option.label }}
@@ -23,10 +25,12 @@
         </template>
 
         <template #selected-option="{ option }">
-          <div class="flex flex-row items-center gap-16">
+          <div class="flex flex-row items-center gap-8">
             <div
               alt="icon"
-              :style="{ backgroundImage: `url(${getImageUrl('idp_icons/'+option.value+'.png')})` }"
+              :style="{
+                backgroundImage: `url(${getImageUrl('idp_icons/' + option.value + '.png')})`,
+              }"
               class="bg-cover w-[1.5rem] h-[1.5rem] duration-100"
             ></div>
             {{ option.label }}
@@ -61,6 +65,6 @@ type SelectedAppType = {
 const selectedApp = ref<SelectedAppType>();
 
 function handleSelectedApp(selected: string) {
-  selectedApp.value = IDP_OPTIONS.find(o => o.value === selected);
+  selectedApp.value = IDP_OPTIONS.find((o) => o.value === selected);
 }
 </script>