1541f1c · bridge · git.iko.soy

src/style/index.scss+2−1

compare with master

unifiedsplit

@@ -13,5 +13,6 @@

13/* Bridge Styles */

14@import './bridge.scss';

15

16−/* Fade animations */

16+/* Animations */

17@import './fadeable.scss';

18+@import './pulsating-circle-bg.scss';

src/style/pulsating-circle-bg.scssnew file+18

@@ -0,0 +1,18 @@

1+@keyframes pulsating-circular-bg {

2+ 0% {

3+ box-shadow: 0 0 3.3em 0.2em #00DD66;

4+ }

5+ 50% {

6+ box-shadow: 0 0 3.3em 2em #00DD66;

7+ }

8+ 100% {

9+ box-shadow: 0 0 3.3em 0.2em #00DD66;

10+ }

11+}

12+

13+div.pulsating-background {

14+ &.enter {

15+ border-radius: 50%;

16+ animation: pulsating-circular-bg 6000ms ease-in-out infinite;

17+ }

18+}

src/views/Activate/PointPresenter.tsx+18−15

@@ -1,4 +1,5 @@

1import { Box, Text } from '@tlon/indigo-react';

2+import cn from 'classnames';

2import Sigil from 'components/Sigil';

3import Sigil from 'components/Sigil';

3import withFadeable from './withFadeable';

4import withFadeable from './withFadeable';

4

5

@@ -25,23 +26,25 @@ const PointPresenter = ({

25 justifyContent="center"

26 justifyContent="center"

26 alignItems="center"

27 alignItems="center"

27 background="white"

28 background="white"

28− className={className}>

29+ className={cn(['point-presenter', className])}>

29− <Box

30+ <Box className={cn(['pulsating-background', success && 'enter'])} mb={3}>

30− background={success ? '#009F65' : 'black'}

31+ <Box

31− borderRadius={5}

32− padding={24}

33− mb={3}

34− width={64}

35− height={64}>

36− <Sigil

37− patp={patp}

38− colors={[success ? '#009F65' : 'black', 'white']}

32+ background={success ? '#009F65' : 'black'}

39− size={64}

40− display="block"

41− padding={32}

42 borderRadius={5}

33 borderRadius={5}

34+ padding={24}

35+ width={64}

36+ height={64}>

37+ <Sigil

38+ patp={patp}

39+ colors={[success ? '#009F65' : 'black', 'white']}

40+ size={64}

41+ display="block"

42+ padding={32}

43+ borderRadius={5}

43− />

44+ />

45+ </Box>

44 </Box>

46 </Box>

47+

45 {showLabel && (

48 {showLabel && (

46 <Box>

49 <Box>

47 <Text

50 <Text