Styles update (#10)

* fix: complex button styles

* fix: optimize button styles

* fix: round button styles

* fix: recent route list styles

* fix: Scan QR code -> Scan QR

src/components/complex-button.vue

@@ -1,7 +1,12 @@
 <template>
-  <div class="flex gap-2">
-    <span :class="props.icon"></span>
-    <router-link :to="props.to" class="btn"> <slot /></router-link>
+  <div class="flex items-center gap-2 px-4 py-2 rounded hover:bg-gray-200 transition">
+    <i :class="['pi', props.icon, 'text-xl']"></i>
+    <router-link
+      :to="props.to"
+      class="flex items-center btn"
+    >
+      <slot />
+    </router-link>
   </div>
 </template>
 

src/components/optimize-route-button.vue

@@ -31,7 +31,7 @@ const onClick = async () => {
 <template>
   <button
     type="button"
-    class="mt-4 w-full border-2 border-blue-500 text-blue-500 py-2 rounded hover:bg-blue-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50"
+    class="mt-4 w-full border-2 border-blue-500 text-blue-500 py-2 rounded hover:bg-blue-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 flex items-center justify-center"
     @click="onClick"
   >
     Optimize route

src/components/recent-route-list.vue

@@ -31,7 +31,7 @@ const getDateString = (dateString) => {
     <hr class="mb-4">
     <ul class="space-y-2">
       <li v-for="route in store.state.recentRoutes" :key="route._id"
-          class="p-4 bg-gray-100 rounded-lg shadow hover:bg-gray-200 transition-colors duration-300">
+          class="p-4 rounded-lg border-2 border-gray-200 hover:bg-gray-200 transition-colors duration-300">
         <div class="flex justify-between items-center">
           <router-link :to="getRouteTo(route._id)" class="text-blue-500 hover:underline">
             {{ getRouteString(route._id) }}

src/components/round-button.vue

@@ -23,6 +23,6 @@ const props = defineProps({
 const emits = defineEmits(['clickCallback'])
 
 const buttonClasses = computed(() =>
-  `${props.position} fixed bg-blue-500 text-white p-2 rounded-full shadow-lg z-[9999] min-w-10 min-h-10`)
-
+  `${props.position} fixed bg-blue-500 text-white p-4 rounded-full shadow-lg z-[9999] flex items-center justify-center w-12 h-12`
+)
 </script>

src/views/HomeView.vue

@@ -11,7 +11,7 @@ import RecentRouteList from '@/components/recent-route-list.vue'
       <div class="flex justify-center gap-4">
         <complex-button icon="pi pi-table" to="/import-file">Import File</complex-button>
         <complex-button icon="pi pi-search" to="/">Input Manually</complex-button>
-        <complex-button icon="pi pi-qrcode" to="/scan-qr">Scan QR Code</complex-button>
+        <complex-button icon="pi pi-qrcode" to="/scan-qr">Scan QR</complex-button>
       </div>
     </div>
     <recent-route-list />

src/views/MapDisplay.vue

@@ -5,7 +5,7 @@
     </div>
 
     <round-button
-      position="bottom-4 right-4"
+      position="bottom-2 right-4"
       icon-class="pi pi-cog"
       @clickCallback="changeMapSummaryVisibility(true)"
     />