Display: Rename modals styles to dialog

Author: AngelFQC

assets/css/scss/index.scss

@@ -67,7 +67,7 @@
 @include meta.load-css("organisms/datatable");
 @include meta.load-css("organisms/dataview");
 @include meta.load-css("organisms/external_logins");
-@include meta.load-css("organisms/modals");
+@include meta.load-css("organisms/dialog");
 @include meta.load-css("organisms/menu");
 @include meta.load-css("organisms/sidebar");
 @include meta.load-css("organisms/section_header");

assets/css/scss/organisms/_modals.scss assets/css/scss/organisms/_dialog.scssassets/css/scss/organisms/_modals.scss renamed to assets/css/scss/organisms/_dialog.scss

@@ -1,7 +1,7 @@
 .p-dialog {
   @apply max-h-[90%] scale-100 drop-shadow-lg rounded-lg border-0 border-none;
 
-  .p-dialog-header {
+  &-header {
     @apply bg-white border-b border-solid border-gray-30 gap-4 rounded-t-lg p-4;
 
     .p-dialog-title {
@@ -13,11 +13,11 @@
     }
   }
 
-  .p-dialog-header-icons {
+  &-header-icons {
     @apply flex gap-4 items-center;
   }
 
-  .p-dialog-header-icon {
+  &-header-icon {
     @apply flex items-center justify-center overflow-hidden relative;
 
     &:enabled {
@@ -27,31 +27,31 @@
       }
     }
   }
-}
 
-.p-dialog-content {
-  @apply overflow-y-auto bg-white overscroll-contain p-4;
-}
+  &-content {
+    @apply overflow-y-auto bg-white overscroll-contain p-4;
+  }
 
-.p-dialog-header {
-  @apply flex items-center justify-between flex-shrink-0;
-}
+  &-header {
+    @apply flex items-center justify-between flex-shrink-0;
+  }
 
-.p-dialog-footer {
-  @apply flex-shrink-0 bg-gray-15 flex gap-4 justify-end rounded-b-lg p-4;
-}
+  &-footer {
+    @apply flex-shrink-0 bg-gray-15 flex gap-4 justify-end rounded-b-lg p-4;
+  }
 
-.p-dialog-enter-active {
-  @apply transition-all duration-150 ease-in;
-}
+  &-enter-active {
+    @apply transition-all duration-150 ease-in;
+  }
 
-.p-dialog-leave-active {
-  @apply transition-all duration-150 ease-out;
-}
+  &-leave-active {
+    @apply transition-all duration-150 ease-out;
+  }
 
-.p-dialog-enter-from,
-.p-dialog-leave-to {
-  @apply opacity-0 scale-75;
+  &-enter-from,
+  &-leave-to {
+    @apply opacity-0 scale-75;
+  }
 }
 
 .p-dialog.p-confirm-dialog {