small design improvements for preset items

src/App.vue

@@ -171,7 +171,6 @@ function switchView(val) {
 }
 
 // EXPORT / IMPORT
-
 function exportPresets() {
   const json = JSON.stringify(presets.value, null, 2);
   const blob = new Blob([json], { type: "application/json" });
@@ -258,8 +257,9 @@ watch(
       <h2 id="presetsMessage" v-if="presets.length == 0">No Presets defined</h2>
       <div id="presetsItems" :class="{ list: view == 'list', grid: view == 'grid' }">
         <button v-for="preset in sortedPresets" :key="preset.id" class="presetItem" :class="{ selected: selectedPreset === preset }" @click="startPreset(preset)">
+          <h3 class="grow left">{{ preset.title || preset.tempo }}</h3>
           <h2>{{ preset.tempo }}</h2>
-          BPM
+          <span style="color: var(--neutral-gray);">bpm</span>
         </button>
       </div>
     </div>

src/assets/main.css

@@ -155,13 +155,29 @@ button#stop {
 
 #presetsItems.list .presetItem {
   align-items: center;
+}
 
+#presetsItems.list .presetItem h2 {
+  margin: 0 4px;
+}
+
+#presetsItems.list .presetItem h3 {
+  text-align: left;
 }
 
 #presetsItems.grid .presetItem {
   min-width: 86px;
   text-align: center;
   flex-direction: column;
+  padding: 4px;
+}
+
+#presetsItems.grid .presetItem h2 {
+  margin: 8px;
+}
+
+#presetsItems.grid .presetItem h3 {
+  margin: 0;
 }
 
 .presetItem.selected {