From 272c3c0f6dbbf76c60e7a6f4815a93a8a39534b1 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Mon, 25 Apr 2022 12:39:33 -0400
Subject: [PATCH] Add new Pulse effect in vanilla CSS

---
 .../public_layout/components/header.tsx       |  2 +-
 .../public_layout/components/pulse.tsx        | 46 +++++--------------
 tailwind.config.js                            | 24 ++++++++++
 3 files changed, 36 insertions(+), 36 deletions(-)

diff --git a/app/soapbox/features/public_layout/components/header.tsx b/app/soapbox/features/public_layout/components/header.tsx
index 95dd1ed71..1878a2027 100644
--- a/app/soapbox/features/public_layout/components/header.tsx
+++ b/app/soapbox/features/public_layout/components/header.tsx
@@ -72,7 +72,7 @@ const Header = () => {
       <nav className='max-w-7xl mx-auto px-4 sm:px-6 lg:px-8' aria-label='Header'>
         <div className='w-full py-6 flex items-center justify-between border-b border-indigo-500 lg:border-none'>
           <div className='flex items-center justify-center relative w-36'>
-            <div className='hidden sm:block absolute z-0 left-0 top-0 -ml-[330px] -mt-[400px]'>
+            <div className='hidden sm:block absolute z-0 -top-24 -left-6'>
               <Pulse />
             </div>
             <Link to='/' className='z-10'>
diff --git a/app/soapbox/features/public_layout/components/pulse.tsx b/app/soapbox/features/public_layout/components/pulse.tsx
index 33e94dae2..ad8171ae8 100644
--- a/app/soapbox/features/public_layout/components/pulse.tsx
+++ b/app/soapbox/features/public_layout/components/pulse.tsx
@@ -1,38 +1,14 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 
-import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
-
-const LottieAsync = () => {
-  return import(/* webpackChunkName: "lottie" */'soapbox/components/lottie');
-};
-
-const fetchAnimationData = () => {
-  return import(/* webpackChunkName: "lottie" */'images/circles.json');
-};
-
-/** Homepage pulse animation chunked to not bloat the entrypoint */
-const Pulse: React.FC = () => {
-  const [animationData, setAnimationData] = useState<any>(undefined);
-
-  useEffect(() => {
-    fetchAnimationData()
-      .then(({ default: json }) => {
-        setAnimationData(json);
-      })
-      .catch(console.error);
-  }, []);
-
-  if (animationData) {
-    return (
-      <BundleContainer fetchComponent={LottieAsync}>
-        {Component => (
-          <Component animationData={animationData} width={800} height={800} />
-        )}
-      </BundleContainer>
-    );
-  } else {
-    return null;
-  }
-};
+const Pulse = () => (
+  <div className='relative'>
+    <div className='relative w-48 h-48 bg-white rounded-full'>
+      <div className='animate-pulse-scale-4 absolute top-0 left-0 w-full h-full rounded-full bg-primary-600/25 opacity-0 -z-[1] pointer-events-none' />
+      <div className='animate-pulse-scale-3 absolute top-0 left-0 w-full h-full rounded-full bg-primary-600/25 opacity-0 -z-[1] pointer-events-none' />
+      <div className='animate-pulse-scale-2 absolute top-0 left-0 w-full h-full rounded-full bg-primary-600/25 opacity-0 -z-[1] pointer-events-none' />
+      <div className='animate-pulse-scale-1 absolute top-0 left-0 w-full h-full rounded-full bg-primary-600/25 opacity-0 -z-[1] pointer-events-none' />
+    </div>
+  </div>
+);
 
 export default Pulse;
diff --git a/tailwind.config.js b/tailwind.config.js
index 2bc311c4f..cafcbd52a 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -47,6 +47,30 @@ module.exports = {
         'bg-shape-1': true,
         'bg-shape-2': true,
       }),
+      animation: {
+        'pulse-scale-4': 'pulse-scale-4 3s linear infinite',
+        'pulse-scale-3': 'pulse-scale-3 3s 0.5s linear infinite',
+        'pulse-scale-2': 'pulse-scale-2 3s 1s linear infinite',
+        'pulse-scale-1': 'pulse-scale-1 3s 1.5s linear infinite',
+      },
+      keyframes: {
+        'pulse-scale-4': {
+          from: { opacity: '0.4' },
+          to: { opacity: 0, transform: 'scale(4)' },
+        },
+        'pulse-scale-3': {
+          from: { opacity: '0.4' },
+          to: { opacity: 0, transform: 'scale(3.5)' },
+        },
+        'pulse-scale-2': {
+          from: { opacity: '0.4' },
+          to: { opacity: 0, transform: 'scale(3)' },
+        },
+        'pulse-scale-1': {
+          from: { opacity: '0.4' },
+          to: { opacity: 0, transform: 'scale(2.5)' },
+        },
+      },
     },
   },
   plugins: [