NeoModalHead to tailwindcss

libs/ui/src/components/NeoModalHead/NeoModalHead.vue

@@ -1,16 +1,17 @@
 <template>
-  <header v-if="isMobile" class="modal-card-head">
-    <div class="modal-card-title">
-      <a class="has-text-inherit" @click.stop="emit('close')">
-        <NeoIcon icon="chevron-left" />
-      </a>
-      {{ title }}
-    </div>
+  <header
+    class="flex lg:hidden py-0 px-tw-5 min-h-[64px] items-center border-b border-border-color bg-background-color-inverse">
+    <button
+      type="button"
+      class="w-full h-full text-left cursor-pointer p-0 bg-transparent text-base/normal text-text-color-inverse"
+      @click="emit('close')">
+      <NeoIcon icon="chevron-left" />
+      <span>{{ title }}</span>
+    </button>
   </header>
   <header
-    v-else
-    class="modal-card-head is-flex is-justify-content-space-between border-bottom">
-    <span class="modal-card-title is-size-6 has-text-weight-bold">
+    class="hidden lg:flex py-4 px-tw-8 justify-between items-center border-b border-border-color bg-background-color">
+    <span class="text-base font-bold">
       {{ title }}
     </span>
     <NeoButton
@@ -25,18 +26,11 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
 import { NeoButton, NeoIcon } from '@kodadot1/brick'
 
 defineProps<{
   title: string
 }>()
 
-const isMobile = ref(window.innerWidth < 1024)
-
 const emit = defineEmits(['close'])
 </script>
-
-<style lang="scss" scoped>
-@import './NeoModalHead.scss';
-</style>

libs/ui/tailwind.config.js

@@ -88,6 +88,11 @@ module.exports = {
         'icon-spin':
           'icon-spin infinite linear var(--oruga-icon-spin-duration, 1.5s)',
       },
+      // TODO: remove it after removing bulma
+      padding: {
+        'tw-5': '1.25rem',
+        'tw-8': '2rem',
+      },
     },
   },
   plugins: [],