overal cleanup

src/App.vue

@@ -5,7 +5,14 @@ import { Sidebar } from './sidebar';
 
 <template>
     <Sidebar />
-    <div class=" px-4 sm:ml-64">
+    <div class="main-container">
         <RouterView />
     </div>
 </template>
+
+<style scoped>
+div.main-container {
+    @apply px-4 sm:ml-64;
+}
+</style>
+

src/market/MarketResultTable.vue

@@ -16,7 +16,7 @@ type Result = {
     q1: number;
     mmedian: number;
     q3: number;
-    percent: number;
+    profit: number;
 }
 
 interface Props {
@@ -49,14 +49,14 @@ const { sortedArray, headerProps } = useSort<Result>(computed(() => props.items
             q1: quartils.q1,
             mmedian: quartils.median,
             q3: quartils.q3,
-            percent: quartils.q3 / quartils.q1
+            profit: (quartils.q3 / quartils.q1) -1
         };
     })), {
         defaultSortKey: 'name',
         defaultSortDirection: 'asc'
     })
 const getLineColor = (result: Result) => {
-    if (result.percent < 1.1) {
+    if (result.profit < 0.1) {
         return 'line-red';
     } else if (result.sell <= result.q1) {
         return 'line-blue';
@@ -92,7 +92,7 @@ const getLineColor = (result: Result) => {
                 <SortableHeader v-bind="headerProps" sortKey="q1">Q1</SortableHeader>
                 <SortableHeader v-bind="headerProps" sortKey="median">Median</SortableHeader>
                 <SortableHeader v-bind="headerProps" sortKey="q3">Q3</SortableHeader>
-                <SortableHeader v-bind="headerProps" sortKey="percent">Percent</SortableHeader>
+                <SortableHeader v-bind="headerProps" sortKey="profit">Profit</SortableHeader>
                 <th></th>
             </tr>
         </thead>
@@ -106,7 +106,7 @@ const getLineColor = (result: Result) => {
                 <td class="text-right">{{ formatIsk(r.q1) }}</td>
                 <td class="text-right">{{ formatIsk(r.mmedian) }}</td>
                 <td class="text-right">{{ formatIsk(r.q3) }}</td>
-                <td class="text-right">{{  percentFormater.format(r.percent) }}</td>
+                <td class="text-right">{{  percentFormater.format(r.profit) }}</td>
                 <td class="text-right">
                     <button class="btn-icon-stroke" @click="$emit('relaod', r.type)"><ArrowPathIcon /></button>
                 </td>

src/sidebar/Sidebar.vue

@@ -1,24 +1,20 @@
 <script setup lang="ts">
 import { RouterLink } from 'vue-router';
+
+const links = [
+    { name: "Market", path: "/market" },
+    { name: "Reprocess", path: "/reprocess" },
+    { name: "Tools", path: "/tools" }
+];
 </script>
 
 <template>
     <aside class="fixed top-0 left-0 z-40 w-64 h-screen transition-transform -translate-x-full sm:translate-x-0">
         <div class="h-full px-3 py-4 overflow-y-auto bg-slate-700">
             <ul class="space-y-2 font-medium">
-                <li>
-                    <RouterLink to="/reprocess" class="flex items-center p-2 rounded-md">
-                        <span>Reprocess</span>
-                    </RouterLink>
-                </li>
-                <li>
-                    <RouterLink to="/market" class="flex items-center p-2 rounded-md">
-                        <span>Market</span>
-                    </RouterLink>
-                </li>
-                <li>
-                    <RouterLink to="/tools" class="flex items-center p-2 rounded-md">
-                        <span>Tools</span>
+                <li v-for="link in links" :key="link.name">
+                    <RouterLink :to="link.path" class="flex items-center p-2 rounded-md hover:bg-slate-800">
+                        <span>{{ link.name }}</span>
                     </RouterLink>
                 </li>
             </ul>
@@ -28,6 +24,6 @@ import { RouterLink } from 'vue-router';
 
 <style scoped>
 .router-link-active {
-    @apply bg-emerald-500;
+    @apply bg-emerald-500 hover:bg-emerald-700;
 }
 </style>

src/style.css

@@ -31,16 +31,16 @@
             @apply border px-1;
         }
         tr {
-            @apply hover:bg-slate-700;
+            @apply hover:bg-slate-900;
 
             &.line-red {
-                @apply bg-amber-900 hover:bg-amber-800;
+                @apply bg-amber-900 hover:bg-amber-950;
             }
             &.line-blue {
-                @apply bg-sky-600 hover:bg-sky-500;
+                @apply bg-sky-600 hover:bg-sky-800;
             }
             &.line-green {
-                @apply bg-emerald-500 hover:bg-emerald-400;
+                @apply bg-emerald-500 hover:bg-emerald-600;
             }
         }
     }