feat(): change tippy

apps/mix-cms/src/app/app.config.ts

@@ -226,7 +226,7 @@ export const appConfig: ApplicationConfig = {
       defaultVariation: 'tooltip',
       variations: {
         tooltip: tooltipVariation,
-        popper: popperVariation,
+        popper: { ...popperVariation, animation: 'scale' },
       },
       appendTo: document.body,
     }),

apps/mix-database/src/app/app.module.ts

@@ -21,7 +21,6 @@ import {
 } from '@mixcore/share/base';
 import { MixModalModule } from '@mixcore/ui/modal';
 import { TranslocoModule } from '@ngneat/transloco';
-import { TuiPreviewModule } from '@taiga-ui/addon-preview';
 import { TuiPortalModule } from '@taiga-ui/cdk';
 import { TuiAlertModule, TuiDialogModule, TuiRootModule } from '@taiga-ui/core';
 import { TuiPushModule } from '@taiga-ui/kit';
@@ -47,15 +46,13 @@ export const domainUrlFactory = () => {
     TuiRootModule,
     MixModalModule,
     TuiAlertModule,
-    TuiPreviewModule,
     TuiPortalModule,
     TuiPushModule,
     HttpClientModule,
     MonacoEditorModule.forRoot(),
     TuiDialogModule,
     ToastImportModule,
     FormlyImportModule,
-    TuiPreviewModule,
     TranslocoModule,
     ServiceWorkerModule.register('ngsw-worker.js', {
       enabled: !isDevMode(),

libs/mix-share/src/bases/base-appconfig.ts

@@ -127,7 +127,7 @@ export const BaseAppProvider = [
     defaultVariation: 'tooltip',
     variations: {
       tooltip: tooltipVariation,
-      popper: popperVariation,
+      popper: { ...popperVariation, animation: 'scale' },
     },
   }),
   {

libs/mix-share/src/components/main-toolbar/user-navigation/user-navigation.component.scss

@@ -22,6 +22,10 @@
     width: 400px !important;
     border-radius: 14px !important;
     padding: 8px 4px;
+
+    .tippy-content {
+      background-color: var(--background-color-primary);
+    }
   }
 
   .mix-menu-item {

libs/mix-share/src/modules/database/components/database-inline-select/database-inline-select.component.html

@@ -17,7 +17,7 @@
                let-hide>
     <div class="popup-container">
       @for (item of vm.data; track item) {
-      <div class="mix-menu-item flex justify-content-between"
+      <div class="mix-menu-item flex justify-between"
            (click)="selectDb(item); hide()">
         <div class="text-500">{{ item.displayName }}</div>
         <div class="text-sub text-s">{{ item.columns.length }} cols</div>

libs/mix-share/src/modules/database/components/db-context-select/db-context-select.component.html

@@ -1,6 +1,7 @@
 <div class="db-context-select"
      [tp]="contextSelect"
      [tpOffset]="[-10, 5]"
+     tpAnimation="scale"
      tpVariation="popper"
      tpPlacement="bottom-start">
   <div class="{{ getLabelSize(size) }} text-600 text-gray-700 hover:text-primary">
@@ -15,7 +16,7 @@
              let-hide>
   <div class="popup-container">
     @for (item of contexts(); track item) {
-    <div class="mix-menu-item flex justify-content-between gap-5"
+    <div class="mix-menu-item flex justify-between gap-5"
          (click)="selectItem(item); hide()">
       @if (getItemVm(item); as item) {
       <div class="text-500">{{ item.displayName }}</div>

libs/mix-ui/src/button/button.component.scss

@@ -3,20 +3,6 @@ mix-button {
   width: fit-content;
 }
 
-.mix-button {
-  width: inherit;
-  line-height: 1;
-
-  .icon {
-    font-weight: 200;
-    margin-right: 6px;
-  }
-
-  .t-content {
-    line-height: 1;
-  }
-}
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

libs/mix-ui/src/data-table/data-table.component.html

@@ -33,7 +33,7 @@
     <tui-loader class="h-full"
                 [overlay]="true"
                 [showLoader]="(loading && !dataset.length) || forceLoading">
-      <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
+      <div class="relative overflow-x-auto sm:rounded-lg">
         <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
           <thead class="text-xs text-gray-700 bg-gray-50 z-10 dark:bg-gray-700 dark:text-gray-400 sticky top-0">
             <tr>

libs/share-styles/src/styles/tippy.scss

@@ -1,6 +1,20 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 .tippy-variation-popper {
   .tippy-content {
     padding: 5px 0px !important;
+    background-color: #eaf0f3e6;
+
+    .popup-container {
+      max-height: 50vh;
+      overflow: auto;
+
+      &::-webkit-scrollbar {
+        display: none; /* Safari and Chrome */
+      }
+    }
   }
 }
 
@@ -9,8 +23,9 @@
 }
 
 .tippy-box {
-  border-radius: 8px !important;
-  box-shadow: 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.3) !important;
+  border-radius: 12px !important;
+  overflow: hidden;
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1), 0 14px 28px rgba(0, 0, 0, 0.14) !important;
 }
 
 .tippy-variation-tooltip.compress-image-preview {
@@ -22,6 +37,7 @@
 }
 
 .mix-menu-item {
+  @apply text-gray-900;
   cursor: pointer;
   padding: 0.5rem 1rem;
   font-size: var(--text-size-s);
@@ -41,3 +57,14 @@
   content: '';
   background-color: var(--border-color-default);
 }
+
+@keyframes popover-open {
+  0% {
+    opacity: 0.5;
+    transform: scale(0.7);
+  }
+  100% {
+    transform: none;
+    opacity: 1;
+  }
+}