Improve styling

dejan · Apr 27, 2024 · 0edf351 · 0edf351
1 parent 0a7a42f
commit 0edf351
Showing 1 changed file with 2 additions and 2 deletions.
diff --git a/extension/src/components/Toolbar.vue b/extension/src/components/Toolbar.vue
@@ -1,15 +1,15 @@
 <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"/>
 </template>
 
 <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';