nostr/primal-web-app
1
0
Fork 0
mirror of https://github.com/PrimalHQ/primal-web-app.git synced 2024-09-30 00:41:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix zap lottie animation

Browse Source
This commit is contained in:
Bojan Mojsilovic 2024-04-18 17:20:04 +02:00
parent 1bb40ea185
commit f9cfa51458
4 changed files with 172 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/assets/icons/feed_zap_2.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.4249 6.12675C14.6137 5.87196 14.4248 5.51801 14.0999 5.51801H10.0832L11.0183 0.921281C11.1812 0.120841 10.1102 -0.342098 9.59833 0.307462L2.58206 9.21196C2.38232 9.46542 2.56992 9.82978 2.90014 9.82978H6.88806L5.91321 15.0917C5.76349 15.8998 6.85458 16.3425 7.34959 15.6746L14.4249 6.12675ZM9.14967 3.10463L8.38461 6.86542H12.1596L7.7564 12.8074L8.55767 8.48237H4.91231L9.14967 3.10463Z" fill="#666666"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 561 B

154
src/assets/icons/feed_zap_fill_2.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 60 KiB

14
src/components/Note/NoteFooter/NoteFooter.module.scss
View File

@ -111,8 +111,8 @@
@include typeDiv;
.icon {
@include statIcon;
-webkit-mask: url(../../../assets/icons/feed_zap.svg) no-repeat 0 / 100%;
mask: url(../../../assets/icons/feed_zap.svg) no-repeat 0 / 100%;
-webkit-mask: url(../../../assets/icons/feed_zap_2.svg) no-repeat 0 / 100%;
mask: url(../../../assets/icons/feed_zap_2.svg) no-repeat 0 / 100%;
}
}
@ -123,8 +123,8 @@
}
.icon {
background-color: var(--active-zap);
-webkit-mask: url(../../../assets/icons/feed_zap_fill.svg) no-repeat 0 / 100%;
mask: url(../../../assets/icons/feed_zap_fill.svg) no-repeat 0 / 100%;
-webkit-mask: url(../../../assets/icons/feed_zap_fill_2.svg) no-repeat 0 / 100%;
mask: url(../../../assets/icons/feed_zap_fill_2.svg) no-repeat 0 / 100%;
}
}
@ -179,10 +179,11 @@
}
.largeZapLottie {
width: 341px;
height: 95px;
width: 405px;
height: 54px;
position: absolute;
z-index: 20;
// background-color: red;
}
.mediumZapLottie {
@ -192,7 +193,6 @@
z-index: 20;
}
@media only screen and (max-width: 720px) {
.footer {
width: 100%;

11
src/components/Note/NoteFooter/NoteFooter.tsx
View File

@ -11,7 +11,7 @@ import { truncateNumber } from '../../../lib/notifications';
import { canUserReceiveZaps, zapNote } from '../../../lib/zap';
import { useSettingsContext } from '../../../contexts/SettingsContext';
import zapMD from '../../../assets/lottie/zap_md.json';
import zapMD from '../../../assets/lottie/zap_md_2.json';
import { toast as t } from '../../../translations';
import PrimalMenu from '../../PrimalMenu/PrimalMenu';
import { hookForDev } from '../../../lib/devTools';
@ -219,8 +219,13 @@ const NoteFooter: Component<{
return;
}
const newLeft = props.wide ? 33 : 21;
const newTop = props.wide ? -29 : -29;
let newLeft = props.wide ? 31 : 19;
let newTop = props.wide ? -30 : -30;
if (props.large) {
newLeft = 11;
newTop = -9;
}
medZapAnimation.style.left = `${newLeft}px`;
medZapAnimation.style.top = `${newTop}px`;