add dark mode (#482) (#489)

frontend/src/views/AuditView.vue

@@ -26,7 +26,7 @@ onMounted(async () => {
       <div class="form-group d-inline">
         <div class="input-group mb-3">
           <input v-model="audit.filter" class="form-control" :placeholder="$t('general.search.placeholder')" type="text" @keyup="audit.afterPageSizeChange">
-          <button class="input-group-text btn btn-primary" :title="$t('general.search.button')"><i class="fa-solid fa-search"></i></button>
+          <button class="btn btn-primary" :title="$t('general.search.button')"><i class="fa-solid fa-search"></i></button>
         </div>
       </div>
     </div>

frontend/src/views/HomeView.vue

@@ -13,21 +13,21 @@ const auth = authStore()
   <p class="lead">{{ $t('home.abstract') }}</p>
 
 
-  <div class="bg-light p-5" v-if="auth.IsAuthenticated">
+  <div class="card border-secondary p-5" v-if="auth.IsAuthenticated">
     <h2 class="display-5">{{ $t('home.profiles.headline') }}</h2>
     <p class="lead">{{ $t('home.profiles.abstract') }}</p>
     <hr class="my-4">
-    <p>{{ $t('home.profiles.content') }}</p>
+    <p class="card-text">{{ $t('home.profiles.content') }}</p>
     <p class="lead">
       <RouterLink :to="{ name: 'profile' }" class="btn btn-primary btn-lg">{{ $t('home.profiles.button') }}</RouterLink>
     </p>
   </div>
 
-  <div class="bg-light p-5 mt-4" v-if="auth.IsAuthenticated && auth.IsAdmin">
+  <div class="card border-secondary p-5 mt-4" v-if="auth.IsAuthenticated && auth.IsAdmin">
     <h2 class="display-5">{{ $t('home.admin.headline') }}</h2>
     <p class="lead">{{ $t('home.admin.abstract') }}</p>
     <hr class="my-4">
-    <p>{{ $t('home.admin.content') }}</p>
+    <p class="card-text">{{ $t('home.admin.content') }}</p>
     <p class="lead">
       <RouterLink :to="{ name: 'interfaces' }" class="btn btn-primary btn-lg me-2">{{ $t('home.admin.button-admin') }}
       </RouterLink>

frontend/src/views/InterfaceView.vue

@@ -112,7 +112,7 @@ onMounted(async () => {
       </div>
       <div class="form-group">
         <div class="input-group mb-3">
-          <button class="input-group-text btn btn-primary" :title="$t('interfaces.button-add-interface')" @click.prevent="editInterfaceId='#NEW#'">
+          <button class="btn btn-primary" :title="$t('interfaces.button-add-interface')" @click.prevent="editInterfaceId='#NEW#'">
             <i class="fa-solid fa-plus-circle"></i>
           </button>
           <select v-model="interfaces.selected" :disabled="interfaces.Count===0" class="form-select" @change="() => { peers.LoadPeers(); peers.LoadStats() }">
@@ -314,7 +314,7 @@ onMounted(async () => {
       <div class="form-group d-inline">
         <div class="input-group mb-3">
           <input v-model="peers.filter" class="form-control" :placeholder="$t('general.search.placeholder')" type="text" @keyup="peers.afterPageSizeChange">
-          <button class="input-group-text btn btn-primary" :title="$t('general.search.button')"><i class="fa-solid fa-search"></i></button>
+          <button class="btn btn-primary" :title="$t('general.search.button')"><i class="fa-solid fa-search"></i></button>
         </div>
       </div>
     </div>
@@ -429,3 +429,5 @@ onMounted(async () => {
     </div>
   </div>
 </template>
+<style>
+</style>

frontend/src/views/ProfileView.vue

@@ -65,7 +65,7 @@ onMounted(async () => {
         <div class="input-group mb-3">
           <input v-model="profile.filter" class="form-control" :placeholder="$t('general.search.placeholder')" type="text"
             @keyup="profile.afterPageSizeChange">
-          <button class="input-group-text btn btn-primary" :title="$t('general.search.button')"><i
+          <button class="btn btn-primary" :title="$t('general.search.button')"><i
               class="fa-solid fa-search"></i></button>
         </div>
       </div>
@@ -73,7 +73,7 @@ onMounted(async () => {
     <div class="col-12 col-lg-3 text-lg-end">
       <div class="form-group" v-if="settings.Setting('SelfProvisioning')">
         <div class="input-group mb-3">
-          <button class="input-group-text btn btn-primary" :title="$t('interfaces.button-add-peer')" @click.prevent="editPeerId = '#NEW#'">
+          <button class="btn btn-primary" :title="$t('interfaces.button-add-peer')" @click.prevent="editPeerId = '#NEW#'">
             <i class="fa fa-plus me-1"></i><i class="fa fa-user"></i>
           </button>
           <select v-model="profile.selectedInterfaceId" :disabled="profile.CountInterfaces===0" class="form-select">

frontend/src/views/SettingsView.vue

@@ -44,7 +44,7 @@ async function saveRename(credential) {
   <p class="lead">{{ $t('settings.abstract') }}</p>
 
   <div v-if="auth.IsAdmin || !settings.Setting('ApiAdminOnly')">
-    <div class="bg-light p-5" v-if="profile.user.ApiToken">
+    <div class="card border-secondary p-5" v-if="profile.user.ApiToken">
       <h2 class="display-7">{{ $t('settings.api.headline') }}</h2>
       <p class="lead">{{ $t('settings.api.abstract') }}</p>
       <hr class="my-4">
@@ -72,7 +72,7 @@ async function saveRename(credential) {
       </div>
       <div class="row mt-5">
         <div class="col-6">
-          <button class="input-group-text btn btn-primary" :title="$t('settings.api.button-disable-title')" @click.prevent="profile.disableApi()" :disabled="profile.isFetching">
+          <button class="btn btn-primary" :title="$t('settings.api.button-disable-title')" @click.prevent="profile.disableApi()" :disabled="profile.isFetching">
             <i class="fa-solid fa-minus-circle"></i> {{ $t('settings.api.button-disable-text') }}
           </button>
         </div>
@@ -81,18 +81,18 @@ async function saveRename(credential) {
         </div>
       </div>
     </div>
-    <div class="bg-light p-5" v-else>
+    <div class="card border-secondary p-5" v-else>
       <h2 class="display-7">{{ $t('settings.api.headline') }}</h2>
       <p class="lead">{{ $t('settings.api.abstract') }}</p>
       <hr class="my-4">
       <p>{{ $t('settings.api.inactive-description') }}</p>
-      <button class="input-group-text btn btn-primary" :title="$t('settings.api.button-enable-title')" @click.prevent="profile.enableApi()" :disabled="profile.isFetching">
+      <button class="btn btn-primary" :title="$t('settings.api.button-enable-title')" @click.prevent="profile.enableApi()" :disabled="profile.isFetching">
         <i class="fa-solid fa-plus-circle"></i> {{ $t('settings.api.button-enable-text') }}
       </button>
     </div>
   </div>
 
-  <div class="bg-light p-5 mt-5" v-if="settings.Setting('WebAuthnEnabled')">
+  <div class="card border-secondary p-5 mt-5" v-if="settings.Setting('WebAuthnEnabled')">
     <h2 class="display-7">{{ $t('settings.webauthn.headline') }}</h2>
     <p class="lead">{{ $t('settings.webauthn.abstract') }}</p>
     <hr class="my-4">
@@ -101,7 +101,7 @@ async function saveRename(credential) {
 
     <div class="row">
       <div class="col-6">
-        <button class="input-group-text btn btn-primary" :title="$t('settings.webauthn.button-register-text')" @click.prevent="auth.RegisterWebAuthn" :disabled="auth.isFetching">
+        <button class="btn btn-primary" :title="$t('settings.webauthn.button-register-text')" @click.prevent="auth.RegisterWebAuthn" :disabled="auth.isFetching">
           <i class="fa-solid fa-plus-circle"></i> {{ $t('settings.webauthn.button-register-title') }}
         </button>
       </div>

frontend/src/views/UserView.vue

@@ -35,7 +35,7 @@ onMounted(() => {
       <div class="form-group d-inline">
         <div class="input-group mb-3">
           <input v-model="users.filter" class="form-control" :placeholder="$t('general.search.placeholder')" type="text" @keyup="users.afterPageSizeChange">
-          <button class="input-group-text btn btn-primary" :title="$t('general.search.button')"><i class="fa-solid fa-search"></i></button>
+          <button class="btn btn-primary" :title="$t('general.search.button')"><i class="fa-solid fa-search"></i></button>
         </div>
       </div>
     </div>