Maintenance: Drop Daisy UI library

app/frontend/apps/desktop/components/CommonButton/CommonButton.vue

@@ -27,10 +27,9 @@ const props = withDefaults(defineProps<Props>(), {
 const variantClasses = computed(() => {
   switch (props.variant) {
     case 'primary':
-      return ['btn-primary', 'bg-blue-800', 'hover:bg-blue-800', 'text-white']
+      return ['bg-blue-800', 'hover:bg-blue-800', 'text-white']
     case 'tertiary':
       return [
-        'btn-neutral',
         'bg-green-200',
         'hover:bg-green-200',
         'dark:bg-gray-600',
@@ -39,15 +38,9 @@ const variantClasses = computed(() => {
         'dark:text-neutral-400',
       ]
     case 'submit':
-      return [
-        'btn-accent',
-        'bg-yellow-300',
-        'hover:bg-yellow-300',
-        'text-black',
-      ]
+      return ['bg-yellow-300', 'hover:bg-yellow-300', 'text-black']
     case 'danger':
       return [
-        'btn-error',
         'bg-pink-100',
         'hover:bg-pink-100',
         'dark:bg-red-900',
@@ -56,7 +49,6 @@ const variantClasses = computed(() => {
       ]
     case 'remove':
       return [
-        'btn-info',
         'bg-red-400',
         'hover:bg-red-400',
         'dark:bg-red-600',
@@ -65,7 +57,6 @@ const variantClasses = computed(() => {
       ]
     case 'subtle':
       return [
-        'btn-ghost',
         'bg-blue-600',
         'dark:bg-blue-900',
         'hover:bg-blue-600',
@@ -75,7 +66,6 @@ const variantClasses = computed(() => {
       ]
     case 'neutral':
       return [
-        'btn-secondary',
         'bg-transparent',
         'hover:bg-transparent',
         'text-gray-100',
@@ -83,12 +73,7 @@ const variantClasses = computed(() => {
       ]
     case 'secondary':
     default:
-      return [
-        'btn-secondary',
-        'bg-transparent',
-        'hover:bg-transparent',
-        'text-blue-800',
-      ]
+      return ['bg-transparent', 'hover:bg-transparent', 'text-blue-800']
   }
 })
 
@@ -152,7 +137,7 @@ const iconSizeClass = computed(() => {
 
 <template>
   <button
-    class="btn h-min min-h-min flex-nowrap gap-x-1 border-0 font-normal shadow-none hover:outline hover:outline-1 hover:outline-offset-1 hover:outline-blue-600 focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-blue-800 dark:hover:outline-blue-900"
+    class="inline-flex h-min min-h-min flex-shrink-0 flex-nowrap items-center justify-center gap-x-1 border-0 font-normal shadow-none transition duration-200 hover:outline hover:outline-1 hover:outline-offset-1 hover:outline-blue-600 focus:outline-none focus:outline-0 focus:outline-offset-0 focus:hover:outline focus:hover:outline-1 focus:hover:outline-offset-1 focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-blue-800 focus:active:scale-[95%] dark:hover:outline-blue-900"
     :class="[
       ...variantClasses,
       ...sizeClasses,

app/frontend/apps/desktop/components/CommonButton/__tests__/CommonButton.spec.ts

@@ -10,7 +10,7 @@ describe('CommonButton.vue', () => {
     const button = view.getByRole('button')
 
     expect(button).toHaveAttribute('type', 'button')
-    expect(button).toHaveClasses(['btn', 'btn-secondary', 'btn-sm'])
+    expect(button).toHaveClasses(['inline-flex', 'bg-transparent', 'btn-sm'])
   })
 
   it('renders default slot as the button label', async () => {
@@ -66,35 +66,35 @@ describe('CommonButton.vue', () => {
   it.each([
     {
       variant: 'primary',
-      classes: ['btn-primary'],
+      classes: ['bg-blue-800'],
     },
     {
       variant: 'secondary',
-      classes: ['btn-secondary'],
+      classes: ['bg-transparent'],
     },
     {
       variant: 'tertiary',
-      classes: ['btn-neutral'],
+      classes: ['bg-green-200'],
     },
     {
       variant: 'submit',
-      classes: ['btn-accent'],
+      classes: ['bg-yellow-300'],
     },
     {
       variant: 'danger',
-      classes: ['btn-error'],
+      classes: ['bg-pink-100'],
     },
     {
       variant: 'remove',
-      classes: ['btn-info'],
+      classes: ['bg-red-400'],
     },
     {
       variant: 'subtle',
-      classes: ['btn-ghost'],
+      classes: ['bg-blue-600'],
     },
     {
       variant: 'neutral',
-      classes: ['btn-secondary'],
+      classes: ['bg-transparent'],
     },
   ])('supports $variant variant', async ({ variant, classes }) => {
     const view = renderComponent(CommonButton, {

app/frontend/apps/desktop/components/CommonButtonGroup/__tests__/CommonButtonGroup.spec.ts

@@ -48,7 +48,7 @@ describe('CommonButtonGroup.vue', () => {
 
     const primaryButton = buttons[0]
     expect(primaryButton).toHaveAttribute('type', 'button')
-    expect(primaryButton).toHaveClasses(['btn-primary', 'bg-blue-800'])
+    expect(primaryButton).toHaveClasses(['bg-blue-800', 'bg-blue-800'])
     expect(getByIconName(primaryButton, 'logo-flat')).toBeInTheDocument()
 
     await view.events.click(primaryButton)
@@ -58,6 +58,6 @@ describe('CommonButtonGroup.vue', () => {
     expect(submitButton).toHaveAttribute('type', 'submit')
 
     const dangerButton = buttons[4]
-    expect(dangerButton).toHaveClasses(['btn-error', 'text-red-500'])
+    expect(dangerButton).toHaveClasses(['bg-pink-100', 'text-red-500'])
   })
 })

app/frontend/apps/desktop/components/CommonConfirmationDialog/__tests__/CommonConfirmationDialog.spec.ts

@@ -90,7 +90,7 @@ describe('dialog confirm behaviour', () => {
     ).toBeInTheDocument()
     expect(
       wrapper.getByRole('button', { name: 'Custom button title' }),
-    ).toHaveClass('btn-error')
+    ).toHaveClass('bg-pink-100')
   })
 
   it('closes the confirmation dialog by using cancel', async () => {

app/frontend/apps/desktop/components/CommonProgressBar/CommonProgressBar.vue

@@ -21,14 +21,14 @@ defineProps<Props>()
 
 <style scoped>
 .progress {
-  @apply rounded-box h-2 bg-blue-200 dark:bg-gray-700;
+  @apply h-2 rounded-2xl bg-blue-200 dark:bg-gray-700;
 
   &::-moz-progress-bar {
     @apply rounded-none bg-blue-800;
   }
 
   &::-webkit-progress-bar {
-    @apply rounded-box;
+    @apply rounded-2xl;
   }
 
   &::-webkit-progress-value {

app/frontend/apps/desktop/components/CommonSimpleTable/__tests__/CommonSimpleTable.spec.ts.snapshot.txt

@@ -102,7 +102,7 @@
           <button
             aria-haspopup="true"
             aria-label="Action menu button"
-            class="btn h-min min-h-min flex-nowrap gap-x-1 border-0 font-normal shadow-none hover:outline hover:outline-1 hover:outline-offset-1 hover:outline-blue-600 focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-blue-800 dark:hover:outline-blue-900 btn-secondary bg-transparent hover:bg-transparent text-blue-800 btn-md text-sm p-1 rounded-lg w-min text-stone-200 dark:text-neutral-500"
+            class="inline-flex h-min min-h-min flex-shrink-0 flex-nowrap items-center justify-center gap-x-1 border-0 font-normal shadow-none transition duration-200 hover:outline hover:outline-1 hover:outline-offset-1 hover:outline-blue-600 focus:outline-none focus:outline-0 focus:outline-offset-0 focus:hover:outline focus:hover:outline-1 focus:hover:outline-offset-1 focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-blue-800 focus:active:scale-[95%] dark:hover:outline-blue-900 bg-transparent hover:bg-transparent text-blue-800 btn-md text-sm p-1 rounded-lg w-min text-stone-200 dark:text-neutral-500"
             id="action-menu-1"
             type="button"
           >

app/frontend/apps/desktop/components/Form/fields/FieldDate/FieldDateTimeInput.vue

@@ -173,7 +173,7 @@ const dark = computed(() => theme.value === 'dark')
   --dp-primary-text-color: theme(colors.white);
   --dp-secondary-color: theme(colors.stone.200);
   --dp-border-color: theme(colors.transparent);
-  --dp-menu-border-color: theme(colors[neutral-100]);
+  --dp-menu-border-color: theme(colors.neutral.100);
   --dp-border-color-hover: theme(colors.transparent);
   --dp-disabled-color: theme(colors.transparent);
   --dp-disabled-color-text: theme(colors.stone.200);
@@ -188,7 +188,7 @@ const dark = computed(() => theme.value === 'dark')
   --dp-highlight-color: theme(colors.blue.800);
   --dp-range-between-dates-background-color: theme(colors.blue.500);
   --dp-range-between-dates-text-color: theme(colors.blue.800);
-  --dp-range-between-border-color: theme(colors[neutral-100]);
+  --dp-range-between-border-color: theme(colors.neutral.100);
   --dp-input-background-color: theme(colors.blue.200);
 
   .dp {
@@ -225,17 +225,17 @@ const dark = computed(() => theme.value === 'dark')
   --dp-primary-color: theme(colors.blue.800);
   --dp-primary-disabled-color: theme(colors.blue.950);
   --dp-primary-text-color: theme(colors.white);
-  --dp-secondary-color: theme(colors[neutral-500]);
+  --dp-secondary-color: theme(colors.neutral.500);
   --dp-border-color: theme(colors.transparent);
   --dp-menu-border-color: theme(colors.gray.900);
   --dp-border-color-hover: theme(colors.transparent);
   --dp-disabled-color: theme(colors.transparent);
-  --dp-disabled-color-text: theme(colors[neutral-500]);
+  --dp-disabled-color-text: theme(colors.neutral.500);
   --dp-scroll-bar-background: theme(colors.gray.700);
   --dp-scroll-bar-color: theme(colors.gray.400);
   --dp-success-color: theme(colors.green.500);
   --dp-success-color-disabled: theme(colors.green.900);
-  --dp-icon-color: theme(colors[neutral-500]);
+  --dp-icon-color: theme(colors.neutral.500);
   --dp-danger-color: theme(colors.red.500);
   --dp-marker-color: theme(colors.blue.700);
   --dp-tooltip-color: theme(colors.gray.700);
@@ -264,7 +264,7 @@ const dark = computed(() => theme.value === 'dark')
 
     &__button,
     &__action_button {
-      color: theme(colors[neutral-400]);
+      color: theme(colors.neutral.400);
       background: theme(colors.gray.600);
     }
   }

app/frontend/apps/desktop/components/layout/LayoutPage.vue

@@ -25,7 +25,7 @@ const {
 
 <template>
   <div
-    class="grid h-full transition-[grid-template-columns] duration-100"
+    class="grid h-full duration-100"
     :class="{ 'transition-none': noTransition }"
     :style="gridColumns"
   >

app/frontend/apps/desktop/initializer/initializeGlobalComponentStyles.ts

@@ -10,25 +10,24 @@ import { initializeNotificationClasses } from '#shared/initializer/initializeNot
 
 export const initializeGlobalComponentStyles = () => {
   initializeBadgeClasses({
-    base: 'badge border-0',
+    base: 'inline-flex justify-center items-center border-0',
     success:
-      'badge-success bg-green-300 text-green-500 dark:bg-green-900 dark:text-green-500',
-    info: 'badge-info bg-blue-500 text-blue-800 dark:bg-blue-950 dark:text-blue-800',
+      'bg-green-300 text-green-500 dark:bg-green-900 dark:text-green-500',
+    info: 'bg-blue-500 text-blue-800 dark:bg-blue-950 dark:text-blue-800',
     warning:
-      'badge-warning bg-yellow-50 text-yellow-600 dark:bg-yellow-900 dark:text-yellow-600',
-    danger:
-      'badge-error bg-pink-100 text-red-500 dark:bg-red-900 dark:text-red-500',
+      'bg-yellow-50 text-yellow-600 dark:bg-yellow-900 dark:text-yellow-600',
+    danger: 'bg-pink-100 text-red-500 dark:bg-red-900 dark:text-red-500',
     neutral:
-      'badge-neutral bg-blue-200 text-stone-200 dark:bg-gray-700 dark:text-neutral-500',
+      'bg-blue-200 text-stone-200 dark:bg-gray-700 dark:text-neutral-500',
     custom: 'badge-custom',
   })
 
   initializeAlertClasses({
-    base: 'alert w-auto text-sm',
-    success: 'alert-success bg-green-300 dark:bg-green-900 text-green-500',
-    info: 'alert-info bg-blue-500 dark:bg-blue-950 text-blue-800',
-    warning: 'alert-warning bg-yellow-50 dark:bg-yellow-900 text-yellow-600',
-    danger: 'alert-error bg-pink-100 dark:bg-red-900 text-red-500',
+    base: 'grid gap-4 text-center md:text-start text-sm items-center justify-center md:justify-start grid-flow-row md:grid-flow-col md:grid-cols-[auto_minmax(auto,_1fr)] w-full md:w-auto',
+    success: 'bg-green-300 dark:bg-green-900 text-green-500',
+    info: 'bg-blue-500 dark:bg-blue-950 text-blue-800',
+    warning: 'bg-yellow-50 dark:bg-yellow-900 text-yellow-600',
+    danger: 'bg-pink-100 dark:bg-red-900 text-red-500',
     link: 'hover:underline',
   })
 
@@ -60,12 +59,12 @@ export const initializeGlobalComponentStyles = () => {
   })
 
   initializeNotificationClasses({
-    base: 'alert rounded-lg gap-1.5 p-2 border-transparent',
+    base: 'grid gap-4 text-center md:text-start text-sm items-center justify-center md:justify-start grid-flow-row md:grid-flow-col md:grid-cols-[auto_minmax(auto,_1fr)] w-full rounded-lg gap-1.5 p-2 border-transparent',
     baseContainer: 'mx-auto',
-    error: 'alert-error bg-pink-100 dark:bg-red-900 text-red-500',
-    info: 'alert-info bg-blue-500 dark:bg-blue-950 text-blue-800',
+    error: 'bg-pink-100 dark:bg-red-900 text-red-500',
+    info: 'bg-blue-500 dark:bg-blue-950 text-blue-800',
     message: '',
-    success: 'alert-success bg-green-300 dark:bg-green-900 text-green-500',
-    warn: 'alert-warning bg-yellow-50 dark:bg-yellow-900 text-yellow-600',
+    success: 'bg-green-300 dark:bg-green-900 text-green-500',
+    warn: 'bg-yellow-50 dark:bg-yellow-900 text-yellow-600',
   })
 }

app/frontend/apps/desktop/pages/personal-setting/views/PersonalSetting.vue

@@ -15,10 +15,7 @@ const { gridColumns, collapseSidebar, expandSidebar } =
 </script>
 
 <template>
-  <div
-    class="grid h-full transition-[grid-template-columns] duration-100"
-    :style="gridColumns"
-  >
+  <div class="grid h-full duration-100" :style="gridColumns">
     <LayoutSidebar
       id="personal-settings-sidebar"
       :name="storageKeyId"