Pixel perfect sidebar and settings page

Author: kadiryazici

src/components/AppSidebar.vue

@@ -1,8 +1,6 @@
 <script lang="ts" setup>
 import { open } from '@tauri-apps/api/shell'
-import { useKey } from '../composables/useKey'
 import { Page, REPO_LINK } from '../constants'
-import { AppStorage } from '../storage'
 import { useStore } from '../stores/store'
 import { Icons } from './Icons'
 import SidebarButton from './SidebarButton.vue'
@@ -19,6 +17,7 @@ const store = useStore()
       >
         <img
           style="width: 100%"
+          draggable="false"
           src="/src/assets/img/icon.png"
         >
       </SidebarButton>
@@ -57,9 +56,8 @@ const store = useStore()
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
-  padding: 10px;
+  padding: 20px 10px;
   background-color: var(--sidebar-bg);
-  width: 57px;
 
   .sync-icon-spin {
     animation: 1s spin linear infinite;

src/components/SidebarButton.vue

@@ -21,9 +21,15 @@ const props = withDefaults(defineProps<Props>(), {
 <style lang="scss" scoped>
 .sidebar-button {
   padding: 8px;
+  width: 35px;
   border-radius: 8px;
   color: var(--white-faded);
   border: 1px solid transparent;
+  width: 35px;
+  height: 35px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   @include focus-visible;
 
   &.disabled {

src/pages/SettingsPage.vue

@@ -106,7 +106,7 @@ useKey('esc', handleBack, { prevent: true })
     width: 100%;
     height: 100%;
     overflow-y: auto;
-    padding: 25px 45px;
+    padding: 20px 45px;
     display: flex;
     flex-flow: column nowrap;