From 0edf35147be899073dab9d3254ada666c55e5916 Mon Sep 17 00:00:00 2001
From: Dejan Simic <desimic@gmail.com>
Date: Sat, 27 Apr 2024 09:34:33 +0200
Subject: [PATCH] Improve styling

---
 extension/src/components/Toolbar.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/extension/src/components/Toolbar.vue b/extension/src/components/Toolbar.vue
index f3f55ce..ddeaeab 100644
--- a/extension/src/components/Toolbar.vue
+++ b/extension/src/components/Toolbar.vue
@@ -1,7 +1,7 @@
 <template>
 <span class="fixed right-0 z-10 cursor-pointer space-x-2 text-base p-[6px]">
+  <Toggle v-model="settingsStore.lockOn" off-icon="pi pi-thumbtack" off-label="Pin" on-icon="pi pi-thumbtack" on-label="Pin" />
   <Button size="small" severity="secondary" text outlined rounded class="text-xs" icon="pi pi-ban" label="Clear" @click="eventsStore.clear()"></Button>
-  <InputSwitch v-model="settingsStore.lockOn" /><span class="text-xs">Lock-on</span>
   <Button size="small" severity="secondary" text outlined rounded class="text-xs" icon="pi pi-sliders-h" label="Settings" @click="settingsVisible=true"></Button>
 </span>
 <SettingsDialog v-model:visible="settingsVisible" @save="settingsVisible=false"/>
@@ -9,7 +9,7 @@
 
 <script setup>
 import Button from 'primevue/button';
-import InputSwitch from 'primevue/inputswitch';
+import Toggle from './wrappers/Toggle.vue';
 import SettingsDialog from './SettingsDialog.vue';
 import { useEventsStore } from '../stores/events';
 import { useSettingsStore } from '../stores/settings';