refactor: quaserify the styles

Author: glorat

examples/vue-quasar/src/components/AnnotationToolbar.vue

@@ -81,6 +81,6 @@ const toggleTool = (toolId: string) => {
 
 <style scoped>
 .annotation-toolbar {
-  border-bottom: 1px solid #cfd4da;
+  border-bottom: 1px solid var(--q-color-grey-4);
 }
 </style>

examples/vue-quasar/src/components/PageControls.vue

@@ -89,18 +89,27 @@ const handleNextPage = () => {
   }
 };
 
-const handleInputChange = (value: string) => {
+const handleInputChange = (value: string | number | null) => {
   // Only allow numeric input
-  const numericValue = value.replace(/[^0-9]/g, '');
+  const numericValue = String(value ?? '').replace(/[^0-9]/g, '');
   inputValue.value = numericValue;
 };
 
 const isPreviousDisabled = computed(() => state.value.currentPage === 1);
 const isNextDisabled = computed(() => state.value.currentPage === state.value.totalPages);
 </script>
 <template>
-  <div @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave" class="page-controls">
-    <q-card flat bordered class="page-controls-card row items-center q-gutter-sm">
+  <div
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
+    class="page-controls"
+    :style="{ opacity: isVisible ? 1 : 0 }"
+  >
+    <q-card
+      flat
+      bordered
+      class="row q-gutter-sm bg-grey-1 rounded-borders q-px-sm q-py-xs items-center"
+    >
       <!-- Previous page button -->
       <q-btn
         flat
@@ -112,7 +121,7 @@ const isNextDisabled = computed(() => state.value.currentPage === state.value.to
       />
 
       <!-- Page input form -->
-      <form @submit.prevent="handlePageSubmit" class="page-form row items-center q-gutter-xs">
+      <form @submit.prevent="handlePageSubmit" class="page-form row q-gutter-xs items-center">
         <q-input
           dense
           outlined
@@ -123,8 +132,8 @@ const isNextDisabled = computed(() => state.value.currentPage === state.value.to
           @keyup.enter.prevent="handlePageSubmit"
           hide-bottom-space
         />
-        <span class="page-text">/</span>
-        <span class="page-text">{{ state.totalPages }}</span>
+        <span class="page-text text-grey-6">/</span>
+        <span class="page-text text-grey-6">{{ state.totalPages }}</span>
       </form>
 
       <!-- Next page button -->
@@ -147,22 +156,14 @@ const isNextDisabled = computed(() => state.value.currentPage === state.value.to
   left: 50%;
   transform: translateX(-50%);
   z-index: 1000;
-  opacity: v-bind(isVisible ? 1: 0);
   transition: opacity 0.2s ease-in-out;
 }
 
-.page-controls-card {
-  background-color: #f8f9fa;
-  padding: 6px 10px;
-  border-radius: 10px;
-}
-
 .page-input {
   width: 48px;
 }
 
 .page-text {
-  color: #6c757d;
   font-size: 14px;
 }
 </style>

examples/vue-quasar/src/components/RedactToolbar.vue

@@ -70,6 +70,6 @@ const handleClearPending = () => {
 
 <style scoped>
 .redact-toolbar {
-  border-bottom: 1px solid #cfd4da;
+  border-bottom: 1px solid var(--q-color-grey-4);
 }
 </style>

examples/vue-quasar/src/components/Toolbar.vue

@@ -254,7 +254,7 @@ const handlePrintDialogClose = () => {
 
       <q-space />
 
-      <div class="mode-tabs-container">
+      <div class="mode-tabs-container row items-center">
         <q-tabs
           v-model="mode"
           dense
@@ -293,12 +293,7 @@ const handlePrintDialogClose = () => {
 
 <style scoped>
 .toolbar {
-  border-bottom: 1px solid #cfd4da;
-}
-
-.mode-tabs-container {
-  display: flex;
-  align-items: center;
+  border-bottom: 1px solid var(--q-color-grey-4);
 }
 
 .mode-tabs :deep(.q-tab__label) {

examples/vue-quasar/src/components/ZoomControls.vue

@@ -68,12 +68,12 @@ const isMarqueeZoomActive = computed(() => {
 });
 </script>
 <template>
-  <div class="zoom-controls row items-center q-gutter-xs">
+  <div class="zoom-controls row q-gutter-xs bg-grey-2 rounded-borders q-pa-xs items-center">
     <!-- Zoom Level Display with Menu -->
     <q-btn
       flat
       dense
-      class="zoom-display-btn row items-center no-wrap"
+      class="zoom-display-btn row no-wrap items-center"
       :color="menuOpen ? 'primary' : undefined"
     >
       <span class="zoom-level">{{ zoomPercentage }}%</span>
@@ -144,12 +144,6 @@ const isMarqueeZoomActive = computed(() => {
 </template>
 
 <style scoped>
-.zoom-controls {
-  background-color: rgba(0, 0, 0, 0.04);
-  border-radius: 6px;
-  padding: 2px 6px;
-}
-
 .zoom-display-btn {
   min-width: auto;
   padding: 0 8px;