feat: finaliza estilizacao da tabela

src/components/defaults/DefaultInput.vue

@@ -12,6 +12,7 @@
         hide-bottom-space
         :class="inputClass"
         :input-class="nativeInputClass"
+        :bg-color="bgColor"
         @update:model-value="error = null"
       >
         <template v-for="(_, slotName) in $slots" #[slotName]>
@@ -40,28 +41,33 @@ defineOptions({
   inheritAttrs: false,
 });
 
-const { label, nativeInputClass, inputClass, rules, icon } = defineProps({
-  label: {
-    type: String,
-    default: "",
-  },
-  icon: {
-    type: String,
-    default: "",
-  },
-  rules: {
-    type: Array,
-    default: () => [],
-  },
-  nativeInputClass: {
-    type: String,
-    default: null,
-  },
-  inputClass: {
-    type: String,
-    default: null,
-  },
-});
+const { label, nativeInputClass, inputClass, rules, icon, bgColor } =
+  defineProps({
+    label: {
+      type: String,
+      default: "",
+    },
+    icon: {
+      type: String,
+      default: "",
+    },
+    rules: {
+      type: Array,
+      default: () => [],
+    },
+    nativeInputClass: {
+      type: String,
+      default: null,
+    },
+    inputClass: {
+      type: String,
+      default: null,
+    },
+    bgColor: {
+      type: String,
+      default: "suface",
+    },
+  });
 
 const attrs = useAttrs();
 

src/components/defaults/DefaultTable.vue

@@ -47,14 +47,18 @@
           v-if="showSearchField"
           v-model="filter"
           debounce="250"
+          label="Busque por Unidade, status ou Responsavel"
           :placeholder="$t('common.actions.search')"
           clearable
           autofocus
-          class="q-mt-sm q-ml-sm"
+          class="q-mt-sm full-width search-input"
           color="primary"
+          bg-color="transparent"
+          dense
+          input-class="q-pl-xs"
         >
-          <template #append>
-            <q-icon name="mdi-magnify" />
+          <template #prepend>
+            <q-icon name="mdi-magnify" color="grey-6" />
           </template>
         </DefaultInput>
         <DefaultSelect

src/css/app.scss

@@ -111,7 +111,7 @@ input[type="number"]::-webkit-outer-spin-button {
 
 .q-field--standout.q-field--rounded .q-field__control {
   border-radius: 8px;
-  box-shadow: 0 0 0 1px #c0c0c0c0;
+  
 }
 
 .q-btn--rectangle {
@@ -130,5 +130,4 @@ input[type="number"]::-webkit-outer-spin-button {
 
 .q-field--standout.q-field--highlighted .q-field__native {
   color: $secondary;
-}
-
+}

src/css/quasar.variables.scss

@@ -59,6 +59,8 @@ $colors: (
   "foreground": #505050,
 
   "btn-badge": #554EF4,
+
+  "transparent": transparent
 );
 
 @each $name, $color in $colors {

src/css/table.scss

@@ -1,7 +1,7 @@
 @use "sass:map";
 @use "src/css/quasar.variables.scss";
 .softpar-table {
-  --table-bg-color: #{map.get($colors, "surface")};
+
   --table-border-color: #{map.get($colors, "surface-light")};
   --table-header-color: #{map.get($colors, "text")};
   --table-ring-color: #c0c0c0c0;
@@ -11,6 +11,8 @@
   border-radius: 8px !important;
   box-shadow: 0 0 0 1px var(--table-ring-color);
 
+  background-color: transparent;
+
   :deep(.q-table) {
     thead tr:first-child th {
       background-color: $primary !important;