@@ -6,16 +6,17 @@ import useAnalytics from '@hooks/useAnalytics';
66import usePushToHistory from '@hooks/usePushToHistory' ;
77import { EARN_ROUTE } from '@constants/routes' ;
88
9- const EarnBannerShapeUrl = 'url("https://ipfs.io/ipfs/QmUfxE7Zgeja78QuX5UnZ3D3qorFrvK7869NZSf97pbdeB ")' ;
9+ const EarnBannerShapeUrl = 'url("https://ipfs.io/ipfs/QmfYXVF5qDke64ZSepiSo4z2Pp5o9RTTjQ959VELZQtKrf ")' ;
1010
1111const StyledBannerContainer = styled ( ContainerBox ) . attrs ( {
1212 justifyContent : 'space-between' ,
13- alignItems : 'center ' ,
13+ alignItems : 'flex-start ' ,
1414 fullWidth : true ,
1515} ) `
1616 ${ ( { theme : { palette, spacing } } ) => `
1717 padding: ${ spacing ( 4 ) } ;
1818 background: ${ EarnBannerShapeUrl } center no-repeat, ${ palette . gradient . newsBanner } ;
19+ background-size: cover;
1920 border-radius: ${ spacing ( 4 ) } ;
2021 overflow: hidden;
2122 position: relative;
@@ -24,29 +25,6 @@ const StyledBannerContainer = styled(ContainerBox).attrs({
2425 ` }
2526` ;
2627
27- const StyledEarnGuardianPill = styled ( ContainerBox ) . attrs ( {
28- justifyContent : 'center' ,
29- alignItems : 'center' ,
30- } ) `
31- ${ ( { theme : { spacing } } ) => `
32- padding: ${ spacing ( 0.5 ) } ${ spacing ( 1 ) } ;
33- background: #D0CCFF;
34- border: 0.5px solid #FFFFFF;
35- border-radius: ${ spacing ( 4 ) } ;
36- position: absolute;
37- top: 20px;
38- right: 40px;
39- ` }
40- ` ;
41-
42- const EarnGuardianPill = ( ) => (
43- < StyledEarnGuardianPill >
44- < Typography variant = "bodyExtraExtraSmallBold" color = "#791AFF" >
45- < FormattedMessage defaultMessage = "Earn Guardian 🛡️" description = "earn.banner.earn-guardian-pill" />
46- </ Typography >
47- </ StyledEarnGuardianPill >
48- ) ;
49-
5028const LMEarnBanner = ( ) => {
5129 const { trackEvent } = useAnalytics ( ) ;
5230 const pushToHistory = usePushToHistory ( ) ;
@@ -57,17 +35,21 @@ const LMEarnBanner = () => {
5735 } ;
5836
5937 return (
60- < >
61- < StyledBannerContainer onClick = { handleClick } >
62- < EarnGuardianPill />
63- < Typography variant = "h6Bold" color = "#FFF" style = { { maxWidth : '40%' , textWrap : 'wrap' } } >
64- < FormattedMessage
65- defaultMessage = "Don't miss $150k in $OP incentives!"
66- description = "earn.banner.lm-rewards-150-op"
67- />
68- </ Typography >
69- </ StyledBannerContainer >
70- </ >
38+ < StyledBannerContainer onClick = { handleClick } >
39+ < Typography variant = "h6Bold" color = "#FFF" style = { { maxWidth : '35%' , textWrap : 'wrap' } } >
40+ < FormattedMessage defaultMessage = "EARN GUARDIAN" description = "earn.banner.earn-guardian" />
41+ </ Typography >
42+ < Typography
43+ variant = "bodyBold"
44+ color = "#FFF"
45+ textAlign = "right"
46+ alignSelf = "end"
47+ lineHeight = "1.2"
48+ style = { { maxWidth : '35%' , textWrap : 'wrap' } }
49+ >
50+ < FormattedMessage defaultMessage = "on GNOSIS!" description = "earn.banner.on-gnosis" />
51+ </ Typography >
52+ </ StyledBannerContainer >
7153 ) ;
7254} ;
7355
0 commit comments