updated styling in the header components

FAIRsharing · Feb 26, 2025 · 3ebe44b · 3ebe44b
1 parent ab0c654
commit 3ebe44b
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 13 deletions.
diff --git a/src/components/Navigation/Header.vue b/src/components/Navigation/Header.vue
@@ -1,4 +1,4 @@
-<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
+<template>
   <v-app-bar
     id="mainHeader"
     height="150px"
@@ -44,11 +44,10 @@
             >
               <template #activator="{ props }">
                 <v-btn
-                  :size="$vuetify.display.xlOnly ? 'x-large' : $vuetify.display.mdAndDown ? 'small' : undefined"
-                  color="accent3 white--text"
-                  class="mr-1 mt-sm-1"
-                  dark
+                  :size="$vuetify.display.xl ? 'x-large' : $vuetify.display.mdAndDown ? 'small' : undefined"
+                  class="mr-1 mt-sm-1 bg-accent3"
                   v-bind="props"
+                  elevation="3"
                   @click="closePopup(false)"
                 >
                   Login
@@ -250,13 +249,15 @@ header {
 .header-container {
   border-bottom: 3px dashed #253442;
   position: relative !important;
+  height:150px;
   max-height: 150px;
 }
 
 
 .header-container:deep(.v-toolbar__content) {
   flex-direction: column;
   align-items: stretch;
+  padding: 4px 16px
 }
 
 .smallScreen {

diff --git a/src/components/Records/Search/Input/AdvancedSearch/AdvancedSearch.vue b/src/components/Records/Search/Input/AdvancedSearch/AdvancedSearch.vue
@@ -22,9 +22,9 @@
     <!--  On Header Block  -->
     <v-btn
       v-else
-      color="primary"
-      :size="$vuetify.display.xlOnly ? true : false ? 'x-large' : undefined"
-      class="mr-10"
+      :size="$vuetify.display.xl ? true : false ? 'x-large' : undefined"
+      class="mr-10 bg-primary"
+      elevation="3"
       @click="openAdvanceSearch()"
     >
       <v-icon

diff --git a/src/components/Records/Search/Input/StringSearch.vue b/src/components/Records/Search/Input/StringSearch.vue
@@ -14,7 +14,7 @@
         single-line
         clearable
         density="compact"
-        full-width
+        class="full-width"
         :class="$vuetify.display.lgAndDown ? 'v-input' : 'v-input-lg-up'"
         :height="responsiveHeightTextBox"
         :placeholder="placeholder"
@@ -90,6 +90,8 @@
 
 <script>
 import AdvancedSearch from "@/components/Records/Search/Input/AdvancedSearch/AdvancedSearch.vue";
+import { useDisplay } from 'vuetify'
+
 export default {
   name: "StringSearch",
   components: { AdvancedSearch },
@@ -99,6 +101,10 @@ export default {
     addSearchTerms: { default: false, type: Boolean },
     searchPath: { default: "/search", type: String },
   },
+  setup() {
+    const { mdAndDown, md, lg, xl, mobile } = useDisplay()
+    return {mdAndDown, md, lg, xl, mobile}
+  },
   data() {
     return {
       searchTerm: null,
@@ -121,14 +127,14 @@ export default {
     responsiveHeight: function () {
       return {
         "style-sm-xs": this.$vuetify.display.mdAndDown,
-        "style-md": this.$vuetify.display.mdOnly,
-        "style-lg": this.$vuetify.display.lgOnly,
-        "style-xl": this.$vuetify.display.xlOnly,
+        "style-md": this.$vuetify.display.md,
+        "style-lg": this.$vuetify.display.lg,
+        "style-xl": this.$vuetify.display.xl,
       };
     },
     responsiveHeightTextBox: function () {
       let boxHeight = 35;
-      if (this.$vuetify.display.xlOnly) {
+      if (this.$vuetify.display.xl) {
         boxHeight = 50;
       }
       return boxHeight;