Fix analytics service and audio recorder

src/assets/css/components/_voice-recorder.scss

@@ -17,8 +17,14 @@
 .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
   opacity: 0;
 }
+
+.voice-recorder {
+  .v-btn {
+    background-color: black;
+    color: white;
+  }
+
   .voice-recorder-btn {
-  padding: 30px;
     background-color: $voice-recorder-color;
 
     &.recording {
@@ -28,3 +34,4 @@
       background-color: $voice-recorded-color;
     }
   }
+}

src/components/VoiceRecorder.vue

@@ -9,10 +9,10 @@
         <v-row align="center" class="mt-3">
           <v-col cols="4" align="center">
             <v-btn v-show="state == states.RECORDED" icon @click.stop="redo">
-              <v-icon color="white">undo</v-icon>
+              <v-icon>undo</v-icon>
             </v-btn>
             <v-btn v-show="state == states.INITIAL" icon @click.stop="importAudio">
-              <v-icon color="white">$vuetify.icons.audio_import</v-icon>
+              <v-icon>$vuetify.icons.audio_import</v-icon>
               <input
               ref="audio_import"
               type="file"
@@ -23,10 +23,10 @@
             />
             </v-btn>
             <v-btn v-show="state == states.IMPORTED" icon @click.stop="previewAudio">
-              <v-icon color="white">$vuetify.icons.audio_import_play</v-icon>
+              <v-icon>$vuetify.icons.audio_import_play</v-icon>
             </v-btn>
             <v-btn v-show="state == states.PLAYING" icon @click.stop="pauseAudio">
-              <v-icon color="white">pause</v-icon>
+              <v-icon>pause</v-icon>
             </v-btn>
           </v-col>
           <v-col cols="4" align="center">
@@ -36,6 +36,7 @@
               icon
               class="voice-recorder-btn recording"
               @click.stop="pauseRecording"
+              size="60"
             >
               <v-icon color="white">stop</v-icon>
             </v-btn>
@@ -46,6 +47,7 @@
               icon
               :disabled="!recordedFile"
               @click.stop="send"
+              size="60"
             >
               <v-icon color="black">arrow_upward</v-icon>
             </v-btn>
@@ -55,13 +57,14 @@
               class="voice-recorder-btn"
               icon
               @click.stop="startRecording"
+              size="60"
             >
-              <v-icon color="white">fiber_manual_record</v-icon>
+              <v-icon>fiber_manual_record</v-icon>
             </v-btn>
           </v-col>
           <v-col cols="4" align="center">
             <v-btn id="btn-record-cancel" icon @click.stop="cancelRecording">
-              <v-icon color="white">close</v-icon>
+              <v-icon>close</v-icon>
             </v-btn>
           </v-col>
         </v-row>

src/components/createRoomMixin.js

@@ -31,6 +31,7 @@ export default {
         //autofocus: true,
         variant: "solo",
         required: true,
+        class: "text-left"
       };
     },
     roomNameInputListeners() {

src/plugins/vuetify.js

@@ -61,6 +61,13 @@ export default {
           customProperties: true,
         },
         dark: false,
+        themes: {
+          light: {
+            colors: {
+              error: "#ff5252",
+            }
+          },
+        },
       },
     };
     const vuetify = createVuetify(options);

src/services/analytics.service.js

@@ -1,18 +1,15 @@
-import cleaninsights from './cleaninsights.service'
+import cleaninsights from "./cleaninsights.service";
-import matomo from './matomo.service'
+import matomo from "./matomo.service";
 
 export default {
   install(app) {
-        const analyticsService = ({
+    class AnalyticsServiceClass {
-            data() {
+      constructor() {
-                return {
+        this.engines = [];
-                    engines: [],
+        this.cachedEvents = [];
-                    cachedEvents: [],
+        this.initialized = false;
-                    initialized: false
+
-                }
+        app.$config.promise.then((config) => {
-            },
-            created() {
-                this.$config.promise.then((config) => {
           var analytics = config.analytics || {};
           if (!Array.isArray(analytics)) {
             analytics = [analytics];
@@ -42,15 +39,15 @@ export default {
           // Handle cached events
           this.cachedEvents.forEach(([category, action]) => {
             this.event(category, action);
-                    })
+          });
           this.cachedEvents = [];
         });
-            },
+      }
-            methods: {
+
       event(category, action) {
         if (!this.initialized) {
           this.cachedEvents.push([category, action]);
-                        return
+          return;
         }
 
         // Send the event to each configured analytics engine.
@@ -59,9 +56,9 @@ export default {
         });
       }
     }
-        });
 
+    const analyticsService = new AnalyticsServiceClass();
     app.$analytics = analyticsService;
     app.config.globalProperties.$analytics = analyticsService;
-    }
+  },
-}
+};