bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

pulse -> sonar

Browse source
This commit is contained in:
Justin 2022-04-25 12:48:13 -04:00
parent af5be1c276
commit 61f0439047
3 changed files with 16 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/soapbox/features/public_layout/components/header.tsx
View file

@ -10,7 +10,7 @@ import { useAppSelector, useFeatures, useSoapboxConfig } from 'soapbox/hooks';
import { openModal } from '../../../actions/modals';
import { Button, Form, HStack, IconButton, Input, Tooltip } from '../../../components/ui';
import Pulse from './pulse';
import Sonar from './sonar';
import type { AxiosError } from 'axios';
@ -73,7 +73,7 @@ const 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 -top-24 -left-6'>
<Pulse />
<Sonar />
</div>
<Link to='/' className='z-10'>
<img alt='Logo' src={logo} className='h-6 w-auto cursor-pointer' />

12
app/soapbox/features/public_layout/components/pulse.tsx → app/soapbox/features/public_layout/components/sonar.tsx
View file

@ -1,14 +1,14 @@
import React from 'react';
const Pulse = () => (
const Sonar = () => (
<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 className='animate-sonar-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-sonar-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-sonar-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-sonar-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;
export default Sonar;

16
tailwind.config.js
View file

@ -48,25 +48,25 @@ module.exports = {
'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',
'sonar-scale-4': 'sonar-scale-4 3s linear infinite',
'sonar-scale-3': 'sonar-scale-3 3s 0.5s linear infinite',
'sonar-scale-2': 'sonar-scale-2 3s 1s linear infinite',
'sonar-scale-1': 'sonar-scale-1 3s 1.5s linear infinite',
},
keyframes: {
'pulse-scale-4': {
'sonar-scale-4': {
from: { opacity: '0.4' },
to: { opacity: 0, transform: 'scale(4)' },
},
'pulse-scale-3': {
'sonar-scale-3': {
from: { opacity: '0.4' },
to: { opacity: 0, transform: 'scale(3.5)' },
},
'pulse-scale-2': {
'sonar-scale-2': {
from: { opacity: '0.4' },
to: { opacity: 0, transform: 'scale(3)' },
},
'pulse-scale-1': {
'sonar-scale-1': {
from: { opacity: '0.4' },
to: { opacity: 0, transform: 'scale(2.5)' },
},