chore: dark & light mode improvements

src/components/Order.vue

@@ -170,7 +170,11 @@ $darkModeTextCol: #eee;
 
   select {
     color: $darkModeTextCol !important;
-    border-color: $darkModeTextCol !important;
+    border-color: $darkModeTextCol;
+
+    &:focus-visible {
+      border-color: $accentCol;
+    }
   }
 
   option,

src/components/OrderList.vue

@@ -31,8 +31,8 @@
         <hr />
 
         <div class="buttons">
-          <button class="g-button action" @click="selectLocalOrder(order)">Wybierz</button>
-          <button class="g-button action" @click="removeOrder(order)">Usuń</button>
+          <button class="g-button" @click="selectLocalOrder(order)">Wybierz</button>
+          <button class="g-button" @click="removeOrder(order)">Usuń</button>
         </div>
       </li>
     </transition-group>
@@ -178,5 +178,18 @@ li {
 .buttons {
   display: flex;
   gap: 0.5em;
+
+  button {
+    padding: 0.5em;
+    background-color: $bgColLighter;
+
+    &:hover {
+      background-color: #666;
+    }
+
+    &:focus-visible {
+      outline: 2px solid $accentCol;
+    }
+  }
 }
 </style>

src/styles/global.scss

@@ -67,7 +67,8 @@ button {
 
 button.g-button {
   text-align: center;
-  color: white;
+  color: inherit;
+  
   transition:
     color 100ms ease-in,
     background-color 100ms ease-in;