Fix/btn placement

app/components/DragAndDrop.vue

@@ -1,4 +1,6 @@
 <script setup>
+  import GlassCard from "~/components/GlassCard.vue"
+
   const props = defineProps({
     multiple: { type: Boolean, default: false },
     accept: { type: String, default: "" },
@@ -31,29 +33,26 @@
 
 <template>
   <v-hover v-slot="{ isHovering, props: hoverProps }">
-    <v-card
+    <GlassCard
       v-bind="hoverProps"
-      class="text-center cursor-pointer"
+      class="text-center cursor-pointer overflow-hidden border-opacity-10 border-white"
       :class="{
         'elevation-4': isHovering || isDragging,
         'elevation-0': !(isHovering || isDragging),
       }"
       :style="{
         position: 'relative',
-        overflow: 'hidden',
-        transition: 'all 0.3s ease',
+        transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
         background:
           isHovering || isDragging
-            ? 'rgba(var(--v-theme-primary), 0.05)'
-            : 'rgba(0, 0, 0, 0.02)',
-        border: `2px dashed ${
-          isHovering || isDragging ? 'rgb(var(--v-theme-primary))' : '#e0e0e0'
-        }`,
+            ? 'rgba(255, 255, 255, 0.08) !important'
+            : 'rgba(255, 255, 255, 0.03) !important',
         transform: isHovering || isDragging ? 'translateY(-2px)' : 'none',
         pointerEvents: loading ? 'none' : 'auto',
         opacity: loading ? 0.6 : 1,
       }"
-      rounded="xl"
+      variant="panel"
+      padding="pa-0"
       @click="triggerFileDialog"
       @dragover.prevent="isDragging = true"
       @dragleave.prevent="isDragging = false"
@@ -62,8 +61,9 @@
       <v-card-text class="pa-8">
         <v-sheet
           class="mx-auto mb-6 d-flex align-center justify-center"
-          :color="isHovering || isDragging ? 'primary' : 'grey-lighten-2'"
-          :elevation="isHovering || isDragging ? 4 : 0"
+          :color="
+            isHovering || isDragging ? 'white' : 'rgba(255, 255, 255, 0.1)'
+          "
           rounded="circle"
           width="80"
           height="80"
@@ -72,16 +72,13 @@
           <v-icon
             :icon="loading ? 'mdi-loading' : 'mdi-cloud-upload'"
             size="40"
-            :color="isHovering || isDragging ? 'white' : 'grey-darken-1'"
+            :color="isHovering || isDragging ? 'primary' : 'white'"
             :class="{ rotating: loading }"
           />
         </v-sheet>
 
         <v-card-title
-          class="text-h6 font-weight-bold justify-center pa-0 mb-1"
-          :class="
-            isHovering || isDragging ? 'text-primary' : 'text-grey-darken-2'
-          "
+          class="text-h6 font-weight-bold justify-center pa-0 mb-1 text-white"
           style="transition: color 0.3s ease"
         >
           {{ loading ? loadingText : isDragging ? dropText : idleText }}
@@ -100,7 +97,7 @@
         :accept="accept"
         @change="handleFileSelect"
       />
-    </v-card>
+    </GlassCard>
   </v-hover>
 </template>
 

app/components/FileUploader.vue

@@ -98,43 +98,60 @@
     @files-selected="processSelectedFiles"
   />
 
-  <v-card-text v-if="internal_files.length" class="mt-4">
-    <v-sheet class="d-flex align-center mb-3" color="transparent">
-      <v-icon icon="mdi-file-check" class="mr-2" color="primary" />
-      <span class="text-subtitle-2 font-weight-bold"> Selected Files </span>
-      <v-chip size="x-small" class="ml-2" color="primary" variant="flat">
+  <v-card-text v-if="internal_files.length" class="mt-6">
+    <v-sheet class="d-flex align-center mb-4" color="transparent">
+      <v-icon icon="mdi-file-check" class="mr-3" color="primary" size="24" />
+      <span class="text-subtitle-1 font-weight-bold text-white">
+        Selected Files
+      </span>
+      <v-chip
+        size="small"
+        class="ml-3 bg-white-opacity-10"
+        color="white"
+        variant="flat"
+      >
         {{ internal_files.length }}
       </v-chip>
     </v-sheet>
 
-    <v-sheet class="d-flex flex-wrap gap-2" color="transparent">
+    <v-sheet class="d-flex flex-wrap ga-2" color="transparent">
       <v-chip
         v-for="(file, index) in internal_files"
         :key="index"
         closable
-        size="small"
-        color="primary"
-        variant="tonal"
-        class="font-weight-medium"
+        size="default"
+        color="white"
+        variant="outlined"
+        class="font-weight-medium glass-ui border-opacity-10 px-4"
+        style="background: rgba(255, 255, 255, 0.05) !important"
         @click:close="removeFile(index)"
       >
-        <v-icon start size="16">mdi-file-outline</v-icon>
-        {{ file.name }}
+        <v-icon start size="18" color="primary">mdi-file-outline</v-icon>
+        <span class="text-white">{{ file.name }}</span>
+        <template #close>
+          <v-icon size="16" class="ml-2 opacity-60 hover-opacity-100"
+            >mdi-close-circle</v-icon
+          >
+        </template>
       </v-chip>
     </v-sheet>
   </v-card-text>
 
-  <v-card-actions v-if="!props.auto_upload && internal_files.length">
+  <v-card-actions
+    v-if="!props.auto_upload && internal_files.length"
+    class="mt-6 pa-0"
+  >
     <v-btn
       color="primary"
-      variant="elevated"
+      variant="flat"
       size="large"
-      rounded="lg"
+      rounded="xl"
       :loading="loading"
-      class="text-none px-3 font-weight-bold"
+      class="text-none px-6 font-weight-bold custom-upload-btn"
+      block
       @click="upload_files"
     >
-      <v-icon start size="20">mdi-cloud-upload-outline</v-icon>
+      <v-icon start size="22">mdi-cloud-upload</v-icon>
       Upload {{ internal_files.length }} file<span
         v-if="internal_files.length > 1"
         >s</span

app/components/GlassCard.vue

@@ -0,0 +1,52 @@
+<script setup>
+  import { useAttrs, computed } from "vue"
+
+  defineProps({
+    variant: {
+      type: String,
+      default: "panel",
+      validator: (v) => ["panel", "ui"].includes(v),
+    },
+    rounded: { type: String, default: "xl" },
+    padding: { type: String, default: "pa-6" },
+    theme: { type: String, default: null },
+  })
+
+  const attrs = useAttrs()
+  const isInteractive = computed(() => !!attrs.onClick)
+</script>
+
+<template>
+  <v-card
+    v-bind="$attrs"
+    @mousedown.stop
+    @click.stop
+    @dblclick.stop
+    @wheel.stop
+    @contextmenu.stop
+    flat
+    :ripple="isInteractive"
+    :theme="theme || (variant === 'panel' ? 'dark' : undefined)"
+    :class="[
+      variant === 'panel' ? 'glass-panel' : 'glass-ui',
+      'border-thin',
+      `rounded-${rounded}`,
+      padding,
+      { 'cursor-default': !isInteractive },
+    ]"
+  >
+    <template v-for="(_, name) in $slots" #[name]="slotProps">
+      <slot :name="name" v-bind="slotProps || {}" />
+    </template>
+  </v-card>
+</template>
+
+<style scoped>
+  .border-thin {
+    border-style: solid !important;
+  }
+
+  .cursor-default {
+    cursor: default !important;
+  }
+</style>

app/components/HybridRenderingView.vue

@@ -1,6 +1,5 @@
 <script setup>
   import VeaseViewToolbar from "@ogw_front/components/VeaseViewToolbar"
-
   import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer"
   import { useViewerStore } from "@ogw_front/stores/viewer"
 
@@ -50,7 +49,7 @@
 
 <template>
   <ClientOnly>
-    <div class="fill-height" style="position: relative">
+    <div class="fill-height" style="position: relative; height: 100%">
       <VeaseViewToolbar />
       <slot name="ui"></slot>
       <v-col

app/components/RemoteRenderingView.vue

@@ -100,7 +100,7 @@
 
 <template>
   <ClientOnly>
-    <div style="position: relative; width: 100%; height: calc(100vh - 80px)">
+    <div style="position: relative; width: 100%; height: 100%">
       <ViewToolbar />
       <slot name="ui"></slot>
       <v-col

app/components/Screenshot.vue

@@ -1,5 +1,6 @@
 <script setup>
   import fileDownload from "js-file-download"
+  import GlassCard from "~/components/GlassCard.vue"
   import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json"
 
   import { useViewerStore } from "@ogw_front/stores/viewer"
@@ -46,49 +47,59 @@
   })
 </script>
 <template>
-  <OptionCard
+  <GlassCard
     v-if="props.show_dialog"
+    @click.stop
     title="Take a screenshot"
     :width="props.width"
-    class="position-absolute"
+    :ripple="false"
+    variant="panel"
+    padding="pa-0"
+    class="position-absolute elevation-24"
     style="z-index: 2; top: 90px; right: 55px"
   >
-    <v-container>
-      <v-row>
-        <v-col cols="8" class="py-0">
-          <v-text-field v-model="filename" label="File name"></v-text-field>
-        </v-col>
-        <v-col cols="4" class="py-0">
-          <v-select
-            v-model="output_extension"
-            :items="output_extensions"
-            label="Extension"
-            required
-          />
-        </v-col>
-      </v-row>
+    <v-card-text class="pa-5">
+      <v-container>
+        <v-row>
+          <v-col cols="8" class="py-0">
+            <v-text-field v-model="filename" label="File name"></v-text-field>
+          </v-col>
+          <v-col cols="4" class="py-0">
+            <v-select
+              v-model="output_extension"
+              :items="output_extensions"
+              label="Extension"
+              required
+            />
+          </v-col>
+        </v-row>
 
-      <v-row>
-        <v-col cols="12" class="py-0">
-          <v-switch
-            v-model="include_background"
-            :disabled="output_extension !== 'png'"
-            label="Include background"
-            inset
-          ></v-switch>
-        </v-col>
-      </v-row>
-    </v-container>
+        <v-row>
+          <v-col cols="12" class="py-0">
+            <v-switch
+              v-model="include_background"
+              :disabled="output_extension !== 'png'"
+              label="Include background"
+              inset
+            ></v-switch>
+          </v-col>
+        </v-row>
+      </v-container>
+    </v-card-text>
 
     <template #actions>
-      <v-btn variant="text" color="white" @click="emit('close')">Close</v-btn>
-      <v-btn
-        variant="outlined"
-        :disabled="!filename || !output_extension"
-        color="white"
-        @click="takeScreenshot()"
-        >Screenshot</v-btn
-      >
+      <v-card-actions class="justify-center pb-4">
+        <v-btn variant="text" color="primary" @click="emit('close')"
+          >Close</v-btn
+        >
+        <v-btn
+          variant="outlined"
+          :disabled="!filename || !output_extension"
+          color="primary"
+          @click="takeScreenshot()"
+          >Screenshot</v-btn
+        >
+      </v-card-actions>
     </template>
-  </OptionCard>
+  </GlassCard>
 </template>