design

src/components/TableActions.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="table-actions">
     <div class="pane info-pane">
+      <img src="favicon.svg" width="50" alt="" />
+
       <div>
         <span v-if="store.user">
           Zalogowany jako <b>{{ store.user.name }}</b>
@@ -11,22 +13,22 @@
           <span v-if="store.dataState == 'LOADED'">Załadowano dane z bazy!</span>
           <span v-if="store.dataState == 'ERROR'">Błąd podczas pobierania danych!</span>
         </span>
-        //
-        <span class="file-changes" style="color: salmon" v-if="store.unsavedChanges">Niezapisane zmiany!</span>
-        <span class="file-changes" style="color: #aaa" v-else>Brak niezapisanych zmian</span>
+        <div>
+          <span class="file-changes" style="color: salmon" v-if="store.unsavedChanges">Niezapisane zmiany!</span>
+          <span class="file-changes" style="color: #aaa" v-else>Brak niezapisanych zmian</span>
+        </div>
       </div>
     </div>
 
     <div class="pane actions-pane">
       <button @click="addNewStation">Dodaj nową stację</button>
       <button @click="confirmLoadData">Odśwież dane</button>
-      &nbsp;
       <button @click="confirmUpdateList" :data-disabled="!store.unsavedChanges" :disabled="!store.unsavedChanges">Zapisz zmiany</button>
       <button @click="signOut">Wyloguj się</button>
     </div>
 
     <div class="pane notify-pane">
-      <label id="notify">
+      <label class="notify">
         <input type="checkbox" v-model="store.notifyDiscord" @input="onNotifyCheckboxChange(($event.target as HTMLInputElement)!.checked)" />
         <span>
           Powiadom o zmianach: <b>{{ store.notifyDiscord ? 'TAK' : 'NIE' }}</b>
@@ -37,12 +39,12 @@
     <div class="pane search-pane">
       <input class="search" ref="search" type="text" v-model="store.searchedSceneryName" placeholder="Wpisz nazwę scenerii..." width="350" />
 
-      <button style="margin-left: 0.5em" @click="clearInput">Wyczyść</button>
+      <button @click="clearInput">Wyczyść</button>
     </div>
 
     <div class="pane">
       Pokazuj maks.
-      <input type="number" min="1" v-model="store.maxVisibleResults" style="width: 50px; margin: 0 0.5em" />
+      <input type="number" min="1" v-model="store.maxVisibleResults" style="width: 50px" />
       wyników
     </div>
 
@@ -57,7 +59,7 @@
     </div>
 
     <div class="changelog" v-if="changelogVisible">
-      <div style="margin-bottom: 0.25em">Changelog:</div>
+      <div>Changelog:</div>
 
       <div v-html="changelog || 'brak zmian'"></div>
     </div>
@@ -68,9 +70,8 @@
 import { defineComponent } from 'vue';
 import routesMixin from '../mixins/routesMixin';
 import { useStore } from '../store';
-import { AuthState, Availability, ChangeProp, HeaderTypes, SceneryRoutesInfo, SceneryRowItem } from '../types/types';
+import { Availability, ChangeProp, HeaderTypes, SceneryRoutesInfo, SceneryRowItem } from '../types/types';
 import { getAvailabilityValue } from '../types/typeUitls';
-import axios from 'axios';
 import client from '../common/http';
 
 export default defineComponent({
@@ -106,7 +107,7 @@ export default defineComponent({
             if (propChange == 'availability') value = getAvailabilityValue(changeItem[propChange] as Availability);
             if (propChange == 'routesInfo') value = this.getRouteNames(changeItem[propChange] as SceneryRoutesInfo[]);
 
-            itemChanges.push(`<i>${(HeaderTypes as any)[propChange]}:</i> ${value || '-'}`);
+            itemChanges.push(`<i style='color: white'>${(HeaderTypes as any)[propChange]}:</i> ${value ?? '-'}`);
           }
 
           return `<b class='text--accent'>${changeItem.name} -></b> ` + itemChanges.join('; ');
@@ -234,6 +235,13 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 button {
+  background-color: #3c5a89;
+
+  &:hover:not([data-disabled='true']),
+  &:focus-visible {
+    background-color: lighten($color: #3c5a89, $amount: 10%);
+  }
+
   &[data-disabled='true'] {
     user-select: none;
     -moz-user-select: none;
@@ -243,6 +251,23 @@ button {
   }
 }
 
+.table-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+}
+
+.pane {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.info-pane {
+  display: flex;
+  gap: 0.5em;
+}
+
 .info-file {
   color: greenyellow;
 }
@@ -259,55 +284,53 @@ button {
   color: gold;
 }
 
-.search {
-  color: black;
-
-  border: 1px solid white;
-  outline: none;
-  appearance: none;
-
-  padding: 0.35em 0.4em;
-}
-
-.pane {
+.search-pane {
   display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-}
 
-.actions-pane {
-  margin-top: 1em;
+  gap: 0.5em;
 
-  button {
-    margin: 0.5em 0.5em 0 0;
+  .search {
+    color: black;
+
+    border: 1px solid white;
+    outline: none;
+    appearance: none;
+
+    padding: 0.35em 0.4em;
   }
 }
 
-.notify-pane {
-  margin: 1em 0;
+.actions-pane {
+  display: flex;
+  gap: 0.5em;
 }
 
-.search-pane {
-  margin-top: 0.5em;
-}
-
-label#notify {
+label.notify {
+  display: flex;
   cursor: pointer;
   text-align: center;
 
   color: #000;
 
   span {
-    padding: 0.3em 0.25em;
+    padding: inherit;
     background-color: salmon;
+    padding: 0.3em 2em;
   }
 
   input {
-    display: none;
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    opacity: 0;
 
     &:checked + span {
       background-color: lightblue;
     }
+
+    &:focus-visible + span {
+      outline: 1px solid gold;
+    }
   }
 }
 .changelog {

src/components/UpdateCard.vue

@@ -65,10 +65,11 @@ export default defineComponent({
 
 .card_body {
   display: grid;
-  grid-template-rows: 60px 80%;
+  grid-template-rows: auto 1fr auto;
   height: 90vh;
   max-height: 550px;
   padding: 0.5em;
+  gap: 1em;
 }
 
 .card_content {
@@ -82,12 +83,11 @@ export default defineComponent({
 h1 {
   text-align: center;
   margin: 0;
-  padding: 0.5em 0;
+  font-size: 2.5em;
 }
 
 .card_actions {
-  display: flex;
-  justify-content: flex-end;
+  display: grid;
+  grid-template-columns: minmax(100px, 1fr);
 }
 </style>
-