style resolution button

app/frontend/src/components/form/DropdownSelect.vue

@@ -1,20 +1,27 @@
 <template lang="pug">
 .dropdown-select
-  select.rounded.bg-ml-dark.text-ml-text.transition-2.hover-shadow.form-item.w-full.text-center.text-3xl.cursor-pointer(
+  select.rounded.bg-ml-dark.text-ml-text.transition-2.hover-shadow.form-item.w-full.text-center.text-3xl.cursor-pointer.pl-5(
     :id="id"
-    class="p-0.5"
+    :class="`p-0.5 ${completed ? 'form-completed' : ''} ${clicked ? '' : 'hover:bg-ml-blue hover:text-ml-black'}`"
     @change="event => $emit('change', event.target.value)"
+    @click="clicked = !clicked"
   )
+    option.cursor-pointer(
+      v-if="withChoose"
+      value=""
+      selected
+      disabled
+    ) Choose
     option.cursor-pointer(
       v-for="(value, index) in values"
       :value="value.value"
       v-text="value.label"
-      :selected="index === selected"
+      :selected="withChoose ? false : index === selected"
     )
 </template>
 
 <script lang="ts">
-import { defineComponent, type PropType } from "vue";
+import { defineComponent, ref, type PropType } from "vue";
 
 export default defineComponent({
   props: {
@@ -30,11 +37,28 @@ export default defineComponent({
       type: Number,
       default: 0,
     },
+    withChoose: {
+      type: Boolean,
+      default: false,
+    },
+    completed: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: ["change"],
   setup() {
 
-    return { };
+    const clicked = ref(false);
+
+    return { clicked };
   },
 });
 </script>
+
+<style scoped>
+option {
+  background-color: theme("colors.ml-dark") !important;
+  color: theme("colors.ml-text") !important;
+}
+</style>

app/frontend/src/views/HomeView.vue

@@ -57,9 +57,11 @@ TrainingDataModal(:handler="td_modal_handler" :id="ModalIds.HOME__TRAINING_DATA_
           DropdownSelect.row-item(
             id="rs-button"
             :values="[{ label: '10x10', value: 10 }, { label: '30x30', value: 30 }, { label: '60x60', value: 60 }]"
+            :completed="resolution !== null"
             :selected="1"
             @change="value => resolution = value"
             v-tippy="{ content: 'This button is used to select the resolution for your classification.' }"
+            withChoose
           )
         .row-2.items-center.row-2-b
           .pr-5.row-item
@@ -129,7 +131,7 @@ export default defineComponent({
     const aoi: Ref<Feature<Polygon> | null> = ref(null);
     const td: Ref<FeatureCollection | null> = ref(null);
     const hyperparams: Ref<{ name: string; value: number }[]> = ref([]);
-    const resolution: Ref<10 | 30 | 60> = ref(30);
+    const resolution: Ref<10 | 30 | 60 | null> = ref(null);
 
     const demo_data_payload = ref(null);
 
@@ -249,7 +251,7 @@ export default defineComponent({
     };
 
     const start_request = async () => {
-      if (aoi.value && toi.value?.length === 2 && tot.value?.length === 2 && td.value) {
+      if (aoi.value && toi.value?.length === 2 && tot.value?.length === 2 && td.value && resolution.value) {
         loading_result.value = true;
 
         const facts_response = await facts_api_request();