chore: improved inputs & warnings styles

src/components/Timetable/TimetableWarnings.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- Local  -->
-  <div class="my-2 print:hidden" v-if="globalStore.currentTimetableData?.savedTimestamp">
+  <div class="print:hidden" v-if="globalStore.currentTimetableData?.savedTimestamp">
-    <div class="flex gap-2">
+    <div class="flex gap-2 mt-1">
       <div class="flex items-center gap-2 bg-zinc-900 p-1 w-full">
         <div>
           <InfoIcon :size="20" />
@@ -25,14 +25,14 @@
       </div>
 
       <button
-        class="font-bold bg-zinc-900 p-1 hover:bg-zinc-800"
+        class="font-bold bg-zinc-900 p-1 hover:bg-zinc-800 rounded-md"
         @click="removeTimetable(globalStore.currentTimetableData.timetableId)"
       >
         <Trash2Icon />
       </button>
 
       <button
-        class="font-bold bg-zinc-900 p-1 hover:bg-zinc-800"
+        class="font-bold bg-zinc-900 p-1 hover:bg-zinc-800 rounded-md"
         @click="globalStore.selectedStorageTimetable = null"
       >
         <Undo2Icon />
@@ -41,8 +41,8 @@
   </div>
 
   <!-- Journal -->
-  <div class="my-2 print:hidden" v-else-if="globalStore.currentTimetableData?.journalCreatedAt">
+  <div class="print:hidden" v-else-if="globalStore.currentTimetableData?.journalCreatedAt">
-    <div class="flex gap-2">
+    <div class="flex gap-2 mt-1">
       <div class="flex items-center gap-2 bg-zinc-900 p-1 w-full">
         <div>
           <InfoIcon :size="20" />
@@ -64,7 +64,7 @@
       </div>
 
       <button
-        class="font-bold bg-zinc-900 p-1 hover:bg-zinc-800"
+        class="font-bold bg-zinc-900 p-1 hover:bg-zinc-800 rounded-md"
         @click="globalStore.selectedJournalTimetable = null"
       >
         <Undo2Icon />

src/components/TimetableSearch/JournalSearchInput.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex gap-2 items-center">
+  <div class="flex gap-2 items-center" v-if="globalStore.currentTimetableData == null">
     <div class="flex gap-2 w-full">
       <input
         v-model="globalStore.journalTimetableSearch.driverName"

src/components/TimetableSearch/LocalSearchInput.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex gap-2">
+  <div class="flex gap-2" v-if="globalStore.currentTimetableData == null">
     <div class="w-full">
       <input
         v-model="globalStore.localTimetableSearch"

src/components/TimetableSearch/SearchContainer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex gap-2 flex-col mb-2 print:hidden">
+  <div class="flex gap-2 flex-col print:hidden">
     <!-- Top Actions & Modes -->
     <SearchModeActions />
 

src/components/TimetableSearch/SearchModeActions.vue

@@ -31,7 +31,7 @@
         }`"
         @click="toggleViewMode('journal')"
       >
-        <NotebookPenIcon />
+        <HistoryIcon />
       </button>
     </div>
 
@@ -71,8 +71,8 @@ import type { ViewMode, TimetableData } from '../../types/common.types';
 import {
   ArchiveIcon,
   FolderDownIcon,
+  HistoryIcon,
   MoonIcon,
-  NotebookPenIcon,
   PrinterIcon,
   SunIcon,
   WifiIcon

src/components/TimetableViews/JournalStorageView.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="text-white">
-    <h2 class="font-bold p-2 bg-zinc-700 mb-3 text-2xl">
+    <h2 class="font-bold p-2 bg-zinc-700 mb-3 text-2xl flex items-center gap-2 justify-center flex-wrap">
+      <HistoryIcon :size="25" />
       {{ $t('journal-preview-title') }}
     </h2>
 
@@ -65,6 +66,7 @@
 </template>
 
 <script setup lang="ts">
+import { HistoryIcon } from 'lucide-vue-next';
 import { useApiStore } from '../../stores/api.store';
 import { useGlobalStore } from '../../stores/global.store';
 import { DataStatus } from '../../types/api.types';
@@ -80,7 +82,7 @@ async function fetchTimetableDetails(id: number) {
         params: {
           timetableId: id,
           hasStopsDetails: 1,
-          returnType: "detailed"
+          returnType: 'detailed'
         }
       })
     ).data;