chore: refine animation

hirosystems · Nov 28, 2023 · 0771425 · 0771425
1 parent 590c85a
commit 0771425
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 5 deletions.
diff --git a/packages/connect-ui/src/components/modal/modal.tsx b/packages/connect-ui/src/components/modal/modal.tsx
@@ -78,8 +78,8 @@ export class Modal {
     const hasMore = notInstalledProviders.length > 0;
 
     return (
-      <div class="modal-container fixed inset-0 z-[8999] box-border flex h-full w-full items-center justify-center overflow-y-scroll bg-[#00000040] animate-in fade-in">
-        <div class="modal-body box-border flex max-h-[calc(100%-48px)] w-[400px] max-w-full cursor-default flex-col overflow-y-scroll rounded-2xl bg-white p-6 text-sm leading-snug shadow-[0_4px_5px_0_#00000005,0_16px_40px_0_#00000014] animate-in zoom-in">
+      <div class="modal-container animate-in fade-in fixed inset-0 z-[8999] box-border flex h-full w-full items-end overflow-y-scroll bg-[#00000040] md:items-center md:justify-center">
+        <div class="modal-body animate-in md:zoom-in-50 slide-in-from-bottom md:slide-in-from-bottom-0 box-border flex max-h-[calc(100%-24px)] w-full max-w-full cursor-default flex-col overflow-y-scroll rounded-2xl rounded-b-none bg-white p-6 text-sm leading-snug shadow-[0_4px_5px_0_#00000005,0_16px_40px_0_#00000014] md:max-h-[calc(100%-48px)] md:w-[400px] md:rounded-b-2xl">
           {/* INTRO */}
           <div class="flex flex-col space-y-[10px]">
             <div class="flex items-center">

diff --git a/packages/connect-ui/stencil.config.ts b/packages/connect-ui/stencil.config.ts
@@ -1,6 +1,8 @@
 import { Config } from '@stencil/core';
 import { sass } from '@stencil/sass';
-import tailwind, { tailwindHMR } from 'stencil-tailwind-plugin';
+import tailwind, { tailwindHMR, PluginOpts } from 'stencil-tailwind-plugin';
+
+import tailwindConf from './tailwind.config.ts';
 
 export const config: Config = {
   namespace: 'connect-ui',
@@ -19,7 +21,14 @@ export const config: Config = {
       serviceWorker: null, // disable service workers
     },
   ],
-  plugins: [sass(), tailwind(), tailwindHMR()],
+  plugins: [
+    sass(),
+    tailwind({
+      ...PluginOpts.DEFAULT,
+      tailwindConf,
+    }),
+    tailwindHMR(),
+  ],
   extras: {
     experimentalImportInjection: true,
   },

diff --git a/packages/connect-ui/tailwind.config.ts b/packages/connect-ui/tailwind.config.ts
@@ -1,3 +1,5 @@
-module.exports = {
+const config = {
   plugins: [require('tailwindcss-animate')],
 };
+
+export default config;