refactor: dialog to tailwind

* fix: divider color fix

* refactor: dialog to tailwind

Author: lukonik

projects/ngverse/src/lib/dialog/dialog/dialog.component.css

@@ -1,14 +0,0 @@
-.dialog {
-  background: var(--color-background);
-  border-radius: var(--border-radius);
-  border: var(--border);
-  box-shadow: var(--color-shadow);
-}
-
-.dialog-header {
-  padding: 10px;
-  display: flex;
-  button {
-    margin-left: auto;
-  }
-}

projects/ngverse/src/lib/dialog/dialog/dialog.component.html

@@ -1,10 +1,10 @@
-<div @dialogEnter class="dialog">
-  <div class="dialog-header">
+<div @dialogEnter class="rounded-md bg-background shadow-md">
+  <div class="flex p-3">
     @if (title) {
       <p>{{ title }}</p>
     }
     @if (showClose) {
-      <button appDialogClose>
+      <button appDialogClose aria-label="Close the dialog" class="ml-auto">
         <app-dialog-close-icon></app-dialog-close-icon>
       </button>
     }

projects/ngverse/src/lib/dialog/dialog/dialog.component.spec.ts

@@ -63,9 +63,9 @@ describe('DialogComponent', () => {
   });
 
   it('should display title', () => {
-    expect(
-      fixture.nativeElement.querySelector('.dialog-header p').textContent.trim()
-    ).toBe('Dialog');
+    expect(fixture.nativeElement.querySelector('p').textContent.trim()).toBe(
+      'Dialog'
+    );
   });
 
   it('should display component', () => {

projects/ngverse/src/lib/divider/divider.component.ts

@@ -8,7 +8,7 @@ import { ChangeDetectionStrategy, Component, input } from '@angular/core';
   styles: `
     :host {
       display: block;
-      background-color: var(--nv-divider);
+      background-color: var(--color-divider);
       height: 1px;
       width: 100%;