feat(board): tailwind ping animation

entur · May 21, 2024 · fdd99e3 · fdd99e3
1 parent 9a932fa
commit fdd99e3
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 86 deletions.
diff --git a/next-tavla/src/Board/components/TileLoader/index.tsx b/next-tavla/src/Board/components/TileLoader/index.tsx
@@ -1,13 +1,11 @@
-import classes from './styles.module.css'
+import { Loader } from '@entur/loader'
 
 function TileLoader() {
     return (
         <div className="w-full h-full flex flex-col justify-center ">
             <div className="w-full text-center">
                 Henter avganger...
-                <div className={classes.loader}>
-                    <div className={classes.loaderBar}></div>
-                </div>
+                <Loader />
             </div>
         </div>
     )

diff --git a/next-tavla/src/Board/scenarios/Board/styles.module.css b/next-tavla/src/Board/scenarios/Board/styles.module.css
diff --git a/next-tavla/src/Shared/components/Pulse/index.tsx b/next-tavla/src/Shared/components/Pulse/index.tsx
@@ -1,10 +1,8 @@
-import classes from './styles.module.css'
-
 function Pulse() {
     return (
-        <div className={classes.pulse}>
-            <div className={classes.heartbeat} />
-            <div className={classes.dot} />
+        <div className="relative flex h-full w-full">
+            <span className="animate-ping-slow absolute inline-flex rounded-full bg-success h-[0.75em] w-[0.75em] left-[calc(50%-(0.75em/2))] bottom-[calc(50%-(0.75em/2))]"></span>
+            <span className="relative inline-flex rounded-full bg-success  h-[0.75em] w-[0.75em] left-[calc(50%-(0.75em/2))] bottom-[calc(50%-(0.75em/2))]"></span>
         </div>
     )
 }

diff --git a/next-tavla/src/Shared/components/Pulse/styles.module.css b/next-tavla/src/Shared/components/Pulse/styles.module.css
diff --git a/next-tavla/tailwind.config.ts b/next-tavla/tailwind.config.ts
@@ -68,27 +68,23 @@ module.exports = {
             gridTemplateColumns: {
                 'auto-fit-minmax': 'repeat(auto-fit, minmax(60vmin, 1fr))',
             },
+            content: {
+                content: ' ',
+            },
+            animation: {
+                'ping-slow': 'ping 8s  infinite',
+            },
             keyframes: {
-                grow: {
-                    '0%, 100%': {
-                        transform: 'none',
+                ping: {
+                    '0%,75%': {
+                        transform: 'scale(1)',
+                        opacity: '1',
                     },
-
-                    '50%': {
-                        transform: 'scaleX(2)',
+                    '100%': {
+                        transform: 'scale(2)',
+                        opacity: '0',
                     },
                 },
-                'back-and-forth': {
-                    '0%, 100%': { transform: 'translateX(calc(0% - 3em))' },
-                    '50%': { transform: 'translateX(calc(100% - 3em))' },
-                },
-            },
-            animation: {
-                loaderBar: 'back-and-forth 1s alternate infinite ease-in-out',
-                loaderBarAfter: 'grow 1s alternate infinite ease-in-out',
-            },
-            content: {
-                content: ' ',
             },
         },
     },