TailwindCSS v2.x (#1540)

components/history/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <AppSection class="green" icon="history" :label="$t('history')" ref="history" no-legend>
+  <AppSection icon="history" :label="$t('history')" ref="history" no-legend>
     <div class="show-on-large-screen">
       <input
         aria-label="Search"

components/history/rest/Card.vue

@@ -18,19 +18,21 @@
           class="bg-transparent"
         />
       </li>
-      <button
-        data-testid="star_button"
-        class="icon"
-        :class="{ stared: entry.star }"
-        @click="$emit('toggle-star')"
-        v-tooltip="{
-          content: !entry.star ? $t('add_star') : $t('remove_star'),
-        }"
-      >
-        <i class="material-icons">
-          {{ entry.star ? "star" : "star_border" }}
-        </i>
-      </button>
+      <span>
+        <button
+          data-testid="star_button"
+          class="icon"
+          :class="{ stared: entry.star }"
+          @click="$emit('toggle-star')"
+          v-tooltip="{
+            content: !entry.star ? $t('add_star') : $t('remove_star'),
+          }"
+        >
+          <i class="material-icons">
+            {{ entry.star ? "star" : "star_border" }}
+          </i>
+        </button>
+      </span>
       <!-- <li>
             <button
               class="icon"