customize app colors

src/assets/main.scss

@@ -1,11 +1,6 @@
 @charset "utf-8";
 @import url('https://fonts.googleapis.com/css2?family=Oxygen+Mono&display=swap');
-
-$family-monospace: 'Oxygen Mono',
-  monospace;
-
-$family-primary: $family-monospace;
-
+@import "variables";
 @import '../../node_modules/bulma/bulma.sass';
 
 *,

src/assets/variables.scss

@@ -0,0 +1,7 @@
+$family-monospace: 'Oxygen Mono',
+  monospace;
+
+$family-primary: $family-monospace;
+$primary: #192a56;
+$info: #40739e;
+$link: #2f3640;

src/modules/record/components/RecordControls.vue

@@ -89,7 +89,7 @@ whenever(logicAnd(notUsingInput, s), () => {
 </script>
 
 <template>
-  <div class="record-controls buttons">
+  <div class="record-controls buttons has-addons">
     <template v-if="!record || !record.end">
       <button v-if="canStart" @click="startRecording" class="button is-primary">
         start

src/modules/record/components/StepRecord.vue

@@ -73,7 +73,10 @@ const isSuperiorToEstimation = computed(() => {
 </template>
 
 <style scoped lang="scss">
+@import '@/assets/variables';
+
 $blob-size: 15px;
+$blob-color: $link;
 
 .step-record {
   .status {
@@ -96,8 +99,8 @@ $blob-size: 15px;
     border-radius: 50%;
     height: $blob-size;
     width: $blob-size;
-    background: rgba(51, 217, 178, 1);
-    box-shadow: 0 0 0 0 rgba(51, 217, 178, 1);
+    background: $blob-color;
+    box-shadow: 0 0 0 0 $blob-color;
     animation: pulse 2s infinite;
   }
 
@@ -113,7 +116,7 @@ $blob-size: 15px;
 @keyframes pulse {
   0% {
     transform: scale(0.95);
-    box-shadow: 0 0 0 0 rgba(51, 217, 178, 0.7);
+    box-shadow: 0 0 0 0 $blob-color;
   }
 
   70% {