Settings content updates

client/components/app/SettingsContent.vue

@@ -8,7 +8,7 @@
       </div>
     </div>
 
-    <p v-if="description" id="description" class="mb-6 text-gray-200" v-html="description" />
+    <p v-if="description" id="settings-description" class="mb-6 text-gray-200" v-html="description" />
 
     <slot></slot>
   </div>
@@ -24,21 +24,21 @@ export default {
   },
   methods: {
     clicked() {
-      this.$emit('clicked');
+      this.$emit('clicked')
     }
   }
 }
 </script>
 
 <style>
-#description a {
+#settings-description a {
   color: rgb(96 165 250);
 }
-#description a:hover {
+#settings-description a:hover {
   color: rgb(147 197 253);
   text-decoration-line: underline;
 }
-#description code {
+#settings-description code {
   font-size: 0.875rem;
   border-radius: 6px;
   background-color: rgb(82, 82, 82);

client/pages/config/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <app-settings-content :headerText="$strings.HeaderSettings">
+    <app-settings-content :header-text="$strings.HeaderSettings">
       <div class="lg:flex">
         <div class="flex-1">
           <div class="pt-4">

client/pages/config/libraries.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <app-settings-content :headerText="$strings.HeaderLibraries" showAddButton=true @clicked="setShowLibraryModal">
+    <app-settings-content :header-text="$strings.HeaderLibraries" show-add-button @clicked="setShowLibraryModal">
       <tables-library-libraries-table @showLibraryModal="setShowLibraryModal" />
     </app-settings-content>
     <modals-libraries-edit-modal v-model="showLibraryModal" :library="selectedLibrary" />

client/pages/config/library-stats.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <app-settings-content :headerText="$strings.HeaderLibraryStats + ': ' + currentLibraryName">
+    <app-settings-content :header-text="$strings.HeaderLibraryStats + ': ' + currentLibraryName">
       <stats-preview-icons v-if="totalItems" :library-stats="libraryStats" />
 
       <div class="flex lg:flex-row flex-wrap justify-between flex-col mt-8">

client/pages/config/sessions.vue

@@ -1,8 +1,6 @@
 <template>
   <div>
-    <app-settings-content :headerText="$strings.HeaderListeningSessions">
-
-
+    <app-settings-content :header-text="$strings.HeaderListeningSessions">
       <div class="flex justify-end mb-2">
         <ui-dropdown v-model="selectedUser" :items="userItems" :label="$strings.LabelFilterByUser" small class="max-w-48" @input="updateUserFilter" />
       </div>

client/pages/config/stats.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <app-settings-content :headerText="$strings.HeaderYourStats">
+    <app-settings-content :header-text="$strings.HeaderYourStats">
       <div class="flex justify-center">
         <div class="flex p-2">
           <svg class="hidden sm:block h-14 w-14 lg:h-18 lg:w-18" viewBox="0 0 24 24">

client/pages/config/users/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <app-settings-content :headerText="$strings.HeaderUsers" showAddButton=true @clicked="setShowUserModal">
+    <app-settings-content :header-text="$strings.HeaderUsers" show-add-button @clicked="setShowUserModal">
       <tables-users-table />
     </app-settings-content>
     <modals-account-modal ref="accountModal" v-model="showAccountModal" :account="selectedAccount" />
@@ -12,7 +12,7 @@ export default {
   data() {
     return {
       selectedAccount: null,
-      showAccountModal: false,
+      showAccountModal: false
     }
   },
   computed: {},