refactor: class names

components/history/graphql/Card.vue

@@ -149,12 +149,14 @@ export default {
 .stared {
   color: #f8e81c !important;
 }
+
 .fade-enter-active,
 .fade-leave-active {
   transition: all 0.2s;
 }
+
 .fade-enter,
 .fade-leave-to {
-  opacity: 0;
+  @apply opacity-0;
 }
 </style>

components/history/index.vue

@@ -176,18 +176,22 @@ export default {
 <style scoped lang="scss">
 .virtual-list {
   max-height: calc(100vh - 270px);
+
   [readonly] {
-    cursor: default;
+    @apply cursor-default;
   }
 }
+
 ul,
 ol {
-  flex-direction: column;
+  @apply flex-col;
 }
+
 @media (max-width: 720px) {
   .virtual-list.filled {
     min-height: 320px;
   }
+
   .labels {
     display: none;
   }

components/history/rest/Card.vue

@@ -160,12 +160,14 @@ export default {
 .stared {
   color: #f8e81c !important;
 }
+
 .fade-enter-active,
 .fade-leave-active {
   transition: all 0.2s;
 }
+
 .fade-enter,
 .fade-leave-to {
-  opacity: 0;
+  @apply opacity-0;
 }
 </style>