IN-188-add-tunis #25
Merged
andrey.dekterev
merged 5 commits from IN-188-add-tunis into develop 3 years ago
|
After Width: | Height: | Size: 7.4 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 6.5 KiB |
@ -0,0 +1,12 @@ |
||||
<?xml version="1.0" encoding="utf-8"?> |
||||
<browserconfig> |
||||
<msapplication> |
||||
<tile> |
||||
<square70x70logo src="/mstile-70x70.png"/> |
||||
<square144x144logo src="/mstile-144x144.png"/> |
||||
<square150x150logo src="/mstile-150x150.png"/> |
||||
<square310x310logo src="/mstile-310x310.png"/> |
||||
<TileColor>#da532c</TileColor> |
||||
</tile> |
||||
</msapplication> |
||||
</browserconfig> |
||||
|
After Width: | Height: | Size: 477 B |
|
After Width: | Height: | Size: 982 B |
|
After Width: | Height: | Size: 15 KiB |
@ -0,0 +1,19 @@ |
||||
{ |
||||
"name": "", |
||||
"short_name": "", |
||||
"icons": [ |
||||
{ |
||||
"src": "/android-chrome-192x192.png", |
||||
"sizes": "192x192", |
||||
"type": "image/png" |
||||
}, |
||||
{ |
||||
"src": "/android-chrome-512x512.png", |
||||
"sizes": "512x512", |
||||
"type": "image/png" |
||||
} |
||||
], |
||||
"theme_color": "#ffffff", |
||||
"background_color": "#ffffff", |
||||
"display": "standalone" |
||||
} |
||||
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 5.6 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 6.7 KiB |
|
After Width: | Height: | Size: 1.4 MiB |
@ -1,57 +0,0 @@ |
||||
import { css } from 'styled-components/macro' |
||||
|
||||
import { |
||||
ClientConfig, |
||||
ClientIds, |
||||
ClientNames, |
||||
} from './types' |
||||
|
||||
const randomHash = () => ( |
||||
(Math.random() ** Math.random()) * 9999999999999999 |
||||
) |
||||
|
||||
export const tunis: ClientConfig = { |
||||
auth: { |
||||
clientId: ClientIds.Tunis, |
||||
metaDataUrlParams: `?hash=${randomHash()}`, |
||||
}, |
||||
defaultLanguage: 'fr', |
||||
description: 'Live sports streaming platform. All matches playing under the auspices of Czech Republic FA. Access to full matches, various player playlists, and highlights. Free access in the Czech Republic. Available across all devices', |
||||
disabledPreferences: false, |
||||
name: ClientNames.Tunis, |
||||
privacyLink: '/privacy-policy-and-statement', |
||||
showSearch: false, |
||||
styles: { |
||||
background: '', |
||||
homePageHeader: css` |
||||
background: radial-gradient( |
||||
160.34% 257.27% at -7.45% 162.22%, |
||||
#2AB7AA 3.27%, |
||||
#02505C 43.69%, #0B2E4D 100%); |
||||
`,
|
||||
logo: 'tunis-logo.svg', |
||||
logoHeight: 6.3, |
||||
logoLeft: 1.1, |
||||
logoTop: 1.74, |
||||
logoWidth: 8.25, |
||||
matchLogoHeight: 3.4, |
||||
matchLogoTopMargin: 0.9, |
||||
matchLogoWidth: 4.5, |
||||
matchPageMobileHeaderLogo: css` |
||||
width: 35px; |
||||
height: 25px; |
||||
top: 2px; |
||||
`,
|
||||
mobileHeaderLogo: css` |
||||
width: 48px; |
||||
height: 37px; |
||||
`,
|
||||
userAccountLogo: css` |
||||
width: 4.56rem; |
||||
height: 3.488rem; |
||||
`,
|
||||
}, |
||||
termsLink: '/terms-and-conditions?client_id=facr-ott-web', |
||||
title: 'FACR.TV - The home of Czech football streaming', |
||||
userAccountLinksDisabled: true, |
||||
} |
||||
@ -0,0 +1,58 @@ |
||||
import { css } from 'styled-components/macro' |
||||
|
||||
import { |
||||
ClientConfig, |
||||
ClientIds, |
||||
ClientNames, |
||||
} from './types' |
||||
|
||||
const randomHash = () => ( |
||||
(Math.random() ** Math.random()) * 9999999999999999 |
||||
) |
||||
|
||||
export const tunisia: ClientConfig = { |
||||
auth: { |
||||
clientId: ClientIds.Tunisia, |
||||
metaDataUrlParams: `?hash=${randomHash()}`, |
||||
}, |
||||
defaultLanguage: 'fr', |
||||
description: '', |
||||
disabledFilters: true, |
||||
disabledHighlights: true, |
||||
disabledPreferences: true, |
||||
name: ClientNames.Tunisia, |
||||
privacyLink: '/privacy-policy-and-statement?client_id=insports-ott-web', |
||||
showSearch: true, |
||||
styles: { |
||||
background: '', |
||||
homePageHeader: css` |
||||
background: radial-gradient( |
||||
160.34% 257.27% at -7.45% 162.22%, |
||||
#2AB7AA 3.27%, |
||||
#02505C 43.69%, #0B2E4D 100%); |
||||
`,
|
||||
logo: 'tunis-logo.svg', |
||||
logoHeight: 1.922, |
||||
logoLeft: 1.1, |
||||
logoTop: 1.74, |
||||
logoWidth: 9, |
||||
matchLogoHeight: 1.922, |
||||
matchLogoTopMargin: 1, |
||||
matchLogoWidth: 9, |
||||
matchPageMobileHeaderLogo: css` |
||||
width: 100px; |
||||
height: 21px; |
||||
top: 5px; |
||||
`,
|
||||
mobileHeaderLogo: css` |
||||
width: 100px; |
||||
height: 21px; |
||||
`,
|
||||
userAccountLogo: css` |
||||
width: 9rem; |
||||
height: 1.922rem; |
||||
`,
|
||||
}, |
||||
termsLink: '/terms-and-conditions?client_id=insports-ott-web', |
||||
title: 'Diwan Sport - The home of Tunisian Ligue Professionnelle 1', |
||||
} |
||||
@ -0,0 +1,22 @@ |
||||
import { ClientNames } from './clients/types' |
||||
|
||||
export enum PaymentSystem { |
||||
PagBrazil = 'pag_brasil', |
||||
Paymee = 'paymee', |
||||
Paytm = 'paytm', |
||||
Stripe = 'stripe' |
||||
} |
||||
|
||||
type PaymentsType = { |
||||
[key in ClientNames]: PaymentSystem |
||||
} |
||||
|
||||
export const payments: PaymentsType = { |
||||
[ClientNames.Tunisia]: PaymentSystem.Paymee, |
||||
brasil: PaymentSystem.PagBrazil, |
||||
[ClientNames.India]: PaymentSystem.Paytm, |
||||
[ClientNames.Insports]: PaymentSystem.Stripe, |
||||
[ClientNames.Instat]: PaymentSystem.Stripe, |
||||
[ClientNames.Facr]: PaymentSystem.Stripe, |
||||
[ClientNames.Lff]: PaymentSystem.Stripe, |
||||
} |
||||
@ -1,101 +0,0 @@ |
||||
import { |
||||
useEffect, |
||||
useState, |
||||
MouseEvent, |
||||
} from 'react' |
||||
|
||||
import { useHistory } from 'react-router-dom' |
||||
|
||||
import { ProfileTypes } from 'config' |
||||
|
||||
import isNumber from 'lodash/isNumber' |
||||
|
||||
import { useLexicsStore } from 'features/LexicsStore' |
||||
import { useBuyMatchPopupStore } from 'features/BuyMatchPopup/store' |
||||
import { getProfileUrl } from 'features/ProfileLink/helpers' |
||||
|
||||
import { getMatchInfo } from 'requests/getMatchInfo' |
||||
import { getBrazilPaymentUrl } from 'requests/getBrazilPaymentUrl' |
||||
|
||||
import type { Props } from './index' |
||||
|
||||
type ResponsePayment = { |
||||
url: string, |
||||
} |
||||
|
||||
type ResponsePaymentArray = ResponsePayment | null |
||||
|
||||
export const useBrazilPayment = ({ |
||||
match, |
||||
open, |
||||
selectedPackage, |
||||
setIsOpenBrasilian, |
||||
}: Props) => { |
||||
const history = useHistory() |
||||
const { close } = useBuyMatchPopupStore() |
||||
|
||||
const [src, setSrc] = useState('') |
||||
const [error, setError] = useState('') |
||||
const { translate } = useLexicsStore() |
||||
|
||||
const { id, sportType } = match |
||||
|
||||
const { |
||||
name, |
||||
nameLexic, |
||||
originalObject, |
||||
pass, |
||||
} = selectedPackage |
||||
|
||||
const teams = isNumber(nameLexic) ? translate(String(nameLexic)) : name |
||||
const pack = translate(String(pass)) |
||||
|
||||
const matchLink = getProfileUrl({ |
||||
id, |
||||
profileType: ProfileTypes.MATCHES, |
||||
sportType, |
||||
}) |
||||
|
||||
const closePopup = async (e?: MouseEvent) => { |
||||
e?.stopPropagation() |
||||
setIsOpenBrasilian(false) |
||||
setError('') |
||||
|
||||
const accessMatch = await getMatchInfo(sportType, id) |
||||
if (accessMatch?.access) { |
||||
close() |
||||
history.push(matchLink) |
||||
} |
||||
} |
||||
|
||||
// eslint-disable-next-line
|
||||
window.onmessage = function (event) { |
||||
if (event.data === 'close') { |
||||
closePopup() |
||||
} |
||||
} |
||||
useEffect(() => { |
||||
if (open) { |
||||
(async () => { |
||||
try { |
||||
const json: ResponsePaymentArray = await getBrazilPaymentUrl({ |
||||
action: pass === 'pass_match_access' ? 'one_payment' : 'create_subscription', |
||||
item: originalObject, |
||||
product_name: `${pack} ${teams}`, |
||||
}) |
||||
setSrc(json?.url || '') |
||||
} catch (err) { |
||||
setError('error_payment_unsuccessful') |
||||
} |
||||
})() |
||||
} |
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [selectedPackage, open]) |
||||
|
||||
return { |
||||
closePopup, |
||||
error, |
||||
matchLink, |
||||
src, |
||||
} |
||||
} |
||||
@ -0,0 +1,147 @@ |
||||
import { |
||||
MouseEvent, |
||||
useCallback, |
||||
useEffect, |
||||
useState, |
||||
} from 'react' |
||||
|
||||
import { useHistory } from 'react-router-dom' |
||||
|
||||
import { PAGES, ProfileTypes } from 'config' |
||||
import { ClientNames } from 'config/clients/types' |
||||
import { payments, PaymentSystem } from 'config/payments' |
||||
|
||||
import isNumber from 'lodash/isNumber' |
||||
|
||||
import { useLexicsStore } from 'features/LexicsStore' |
||||
import { useBuyMatchPopupStore } from 'features/BuyMatchPopup/store' |
||||
import { getProfileUrl } from 'features/ProfileLink/helpers' |
||||
|
||||
import { getMatchInfo } from 'requests/getMatchInfo' |
||||
import { getPaymentUrl } from 'requests/getPaymentUrl' |
||||
|
||||
import type { Props } from './index' |
||||
|
||||
type ResponsePayment = { |
||||
url: string, |
||||
} |
||||
|
||||
type ResponsePaymentArray = ResponsePayment | null |
||||
|
||||
export const useIframePayment = ({ |
||||
match, |
||||
open, |
||||
paymentSystem, |
||||
selectedPackage, |
||||
setIsOpenIframe, |
||||
}: Props) => { |
||||
const history = useHistory() |
||||
const { close } = useBuyMatchPopupStore() |
||||
|
||||
const [src, setSrc] = useState('') |
||||
const [error, setError] = useState('') |
||||
const { translate } = useLexicsStore() |
||||
|
||||
const { id, sportType } = match |
||||
|
||||
const { |
||||
name, |
||||
nameLexic, |
||||
originalObject, |
||||
pass, |
||||
} = selectedPackage |
||||
|
||||
const teams = isNumber(nameLexic) ? translate(String(nameLexic)) : name |
||||
const pack = translate(String(pass)) |
||||
|
||||
const matchLink = getProfileUrl({ |
||||
id, |
||||
profileType: ProfileTypes.MATCHES, |
||||
sportType, |
||||
}) |
||||
|
||||
const closePopup = useCallback(async (e?: MouseEvent) => { |
||||
e?.stopPropagation() |
||||
setIsOpenIframe(false) |
||||
setError('') |
||||
|
||||
const accessMatch = await getMatchInfo(sportType, id) |
||||
if (accessMatch?.access) { |
||||
close() |
||||
history.push(matchLink) |
||||
} |
||||
}, [close, history, id, matchLink, setIsOpenIframe, sportType]) |
||||
|
||||
const paymentRequest = async () => { |
||||
let url_return |
||||
|
||||
switch (paymentSystem) { |
||||
case PaymentSystem.Paymee: |
||||
url_return = undefined |
||||
break |
||||
default: |
||||
url_return = `${window.location.origin}${PAGES.thanksForSubscribe}` |
||||
break |
||||
} |
||||
|
||||
const payment: ResponsePaymentArray = await getPaymentUrl({ |
||||
action: pass === 'pass_match_access' ? 'one_payment' : 'create_subscription', |
||||
item: originalObject, |
||||
product_name: `${pack} ${teams}`, |
||||
service: paymentSystem, |
||||
url_return, |
||||
}) |
||||
setSrc(payment?.url || '') |
||||
} |
||||
|
||||
if (paymentSystem === payments[ClientNames.Brasil]) { |
||||
// eslint-disable-next-line
|
||||
window.onmessage = function (event) { |
||||
if (event.data === 'close') { |
||||
closePopup() |
||||
} |
||||
} |
||||
} |
||||
|
||||
useEffect(() => { |
||||
const paymentCallback = (event: MessageEvent<{ event_id: string }>) => { |
||||
if (event.data.event_id === 'paymee.complete') { |
||||
closePopup() |
||||
} |
||||
} |
||||
if (paymentSystem === payments[ClientNames.Tunisia]) { |
||||
window.addEventListener( |
||||
'message', |
||||
paymentCallback, |
||||
false, |
||||
) |
||||
} |
||||
return () => { |
||||
window.removeEventListener( |
||||
'message', |
||||
paymentCallback, |
||||
false, |
||||
) |
||||
} |
||||
}, [closePopup, paymentSystem]) |
||||
|
||||
useEffect(() => { |
||||
if (open) { |
||||
(async () => { |
||||
try { |
||||
await paymentRequest() |
||||
} catch (err) { |
||||
setError('error_payment_unsuccessful') |
||||
} |
||||
})() |
||||
} |
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [selectedPackage, open]) |
||||
|
||||
return { |
||||
closePopup, |
||||
error, |
||||
matchLink, |
||||
src, |
||||
} |
||||
} |
||||
@ -0,0 +1,3 @@ |
||||
import format from 'date-fns/format' |
||||
|
||||
export const getCurrentYear = () => format(new Date(), 'Y') |
||||
@ -0,0 +1,78 @@ |
||||
import { Fragment } from 'react' |
||||
|
||||
import format from 'date-fns/format' |
||||
|
||||
import { isMobileDevice } from 'config' |
||||
import { joinMatchLexics } from 'config/lexics/joinMatch' |
||||
|
||||
import { T9n } from 'features/T9n' |
||||
import { useLexicsConfig } from 'features/LexicsStore' |
||||
|
||||
import { useAuthStore } from 'features/AuthStore' |
||||
|
||||
import { |
||||
Wrapper, |
||||
TunisiaLogo, |
||||
HeaderWrapper, |
||||
Footer, |
||||
BlockWrapper, |
||||
MatchInfo, |
||||
LigueImgWrapper, |
||||
Season, |
||||
MainInfoTitle, |
||||
MainInfoButton, |
||||
MainInfoContainer, |
||||
MainInfoText, |
||||
FooterRights, |
||||
ClubsLogo, |
||||
InsportsLogo, |
||||
ScGradient, |
||||
LigueImg, |
||||
} from './styled' |
||||
|
||||
export const DiwanInsportsTv = () => { |
||||
useLexicsConfig(joinMatchLexics) |
||||
const { login } = useAuthStore() |
||||
|
||||
const currentYear = format(new Date(), 'Y') |
||||
|
andrey.dekterev marked this conversation as resolved
|
||||
|
||||
return ( |
||||
<Wrapper> |
||||
<HeaderWrapper> |
||||
<InsportsLogo /> |
||||
{isMobileDevice && <TunisiaLogo />} |
||||
</HeaderWrapper> |
||||
<MainInfoContainer> |
||||
<BlockWrapper> |
||||
<LigueImgWrapper> |
||||
<ScGradient /> |
||||
<LigueImg /> |
||||
</LigueImgWrapper> |
||||
<MatchInfo> |
||||
<Season> |
||||
<T9n t='diwan_season' /> |
||||
</Season> |
||||
<MainInfoTitle> |
||||
<T9n t='diwan_title' /> |
||||
</MainInfoTitle> |
||||
<MainInfoText> |
||||
<T9n t='diwan_desc' /> |
||||
</MainInfoText> |
||||
<MainInfoButton onClick={login}> |
||||
<T9n t='diwan_join' /> |
||||
</MainInfoButton> |
||||
{!isMobileDevice && ( |
||||
<Fragment> |
||||
<TunisiaLogo /> |
||||
<ClubsLogo /> |
||||
</Fragment> |
||||
)} |
||||
</MatchInfo> |
||||
</BlockWrapper> |
||||
</MainInfoContainer> |
||||
<Footer> |
||||
<FooterRights>©inSports.tv {currentYear}</FooterRights> |
||||
</Footer> |
||||
</Wrapper> |
||||
) |
||||
} |
||||
@ -0,0 +1,302 @@ |
||||
import styled, { css } from 'styled-components/macro' |
||||
|
||||
import { devices } from 'config' |
||||
import { isMobileDevice } from 'config/userAgent' |
||||
|
||||
import { ButtonSolid } from 'features/Common' |
||||
|
||||
export const Wrapper = styled.div` |
||||
width: 100vw; |
||||
height: 100vh; |
||||
color: white; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-between; |
||||
${isMobileDevice |
||||
? css` |
||||
height: 100%; |
||||
` |
||||
: ''}; |
||||
` |
||||
|
||||
export const HeaderWrapper = styled.div` |
||||
padding: 20px 0; |
||||
padding-left: 20%; |
||||
width: 100%; |
||||
background: rgba(19, 21, 27, 0.7); |
||||
backdrop-filter: blur(20px); |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
@media ${devices.laptop} { |
||||
padding-left: 5%; |
||||
} |
||||
|
||||
${isMobileDevice |
||||
? css` |
||||
background: #000000; |
||||
` |
||||
: ''}; |
||||
` |
||||
|
||||
export const TunisiaLogo = styled.div` |
||||
background-image: url(/images/tunis-logo.svg); |
||||
background-size: contain; |
||||
background-repeat: no-repeat; |
||||
width: 229px; |
||||
height: 49px; |
||||
margin-bottom: 50px; |
||||
|
||||
${isMobileDevice |
||||
? css` |
||||
width: 66px; |
||||
height: 14px; |
||||
margin-bottom: 0; |
||||
` |
||||
: ''}; |
||||
` |
||||
|
||||
export const InsportsLogo = styled.div` |
||||
background-image: url(/images/insports-logo.svg); |
||||
background-size: contain; |
||||
background-repeat: no-repeat; |
||||
width: 80px; |
||||
height: 25px; |
||||
margin-right: 25px; |
||||
position: relative; |
||||
|
||||
|
||||
|
||||
${isMobileDevice |
||||
? css` |
||||
width: 57px; |
||||
height: 18px; |
||||
|
||||
::after { |
||||
content: ''; |
||||
position: absolute; |
||||
width: 0.5px; |
||||
height: 25px; |
||||
background: #FFFFFF; |
||||
right: -13px; |
||||
top: -3px; |
||||
opacity: 0.6; |
||||
} |
||||
` |
||||
: ''}; |
||||
` |
||||
|
||||
export const ClubsLogo = styled.div` |
||||
background-image: url(/images/tunis_clubs.svg); |
||||
background-size: contain; |
||||
background-repeat: no-repeat; |
||||
width: 408px; |
||||
height: 86px; |
||||
` |
||||
|
||||
export const MainInfoContainer = styled.div` |
||||
${isMobileDevice |
||||
? css` |
||||
margin-top: 50px; |
||||
height: 100%; |
||||
` |
||||
: ''}; |
||||
` |
||||
|
||||
export const BlockWrapper = styled.div` |
||||
height: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
padding-left: 20%; |
||||
width: 100%; |
||||
position: relative; |
||||
|
||||
@media ${devices.laptop} { |
||||
padding-left: 5%; |
||||
} |
||||
@media ${devices.mobile} { |
||||
padding-left: 5.4rem; |
||||
} |
||||
${isMobileDevice |
||||
? css` |
||||
flex-direction: column; |
||||
padding: 5.4rem; |
||||
@media screen and (orientation: landscape){ |
||||
padding-top: 20px; |
||||
height: auto; |
||||
} |
||||
` |
||||
: ''}; |
||||
` |
||||
|
||||
export const ScGradient = styled.div` |
||||
content: ''; |
||||
position: absolute; |
||||
width: 620px; |
||||
height: 310px; |
||||
border-radius: 50%; |
||||
background: rgba(29, 185, 171, 0.4); |
||||
opacity: 0.7; |
||||
filter: blur(104.135px); |
||||
top: 30%; |
||||
left: 25px; |
||||
z-index: 1; |
||||
|
||||
${isMobileDevice |
||||
? css` |
||||
filter: blur(50.135px); |
||||
border-radius: 40%; |
||||
width: 349px; |
||||
height: 210px; |
||||
left: -35px; |
||||
top: -71px; |
||||
` |
||||
: ''}; |
||||
|
||||
` |
||||
|
||||
export const LigueImg = styled.div` |
||||
background-image: url(/images/landing_${() => ( |
||||
isMobileDevice |
||||
? 'mobile_ligue_1.png' |
||||
: 'ligue_1.png' |
||||
)}); |
||||
background-repeat: no-repeat; |
||||
background-position: center; |
||||
background-size: contain; |
||||
width: 670px; |
||||
height: 156px; |
||||
z-index: 2; |
||||
|
||||
${isMobileDevice |
||||
? css` |
||||
width: 288px; |
||||
height: 66px; |
||||
` |
||||
: ''}; |
||||
` |
||||
|
||||
export const LigueImgWrapper = styled.div` |
||||
display: flex; |
||||
align-items: center; |
||||
height: 80%; |
||||
margin-right: 5%; |
||||
position: relative; |
||||
|
||||
${isMobileDevice |
||||
? css` |
||||
margin-right: 0; |
||||
margin-bottom: 83px; |
||||
@media screen and (orientation: landscape){ |
||||
display: block; |
||||
height: 100%; |
||||
width: 70%; |
||||
} |
||||
` |
||||
: ''}; |
||||
` |
||||
|
||||
export const MatchInfo = styled.div` |
||||
margin-bottom: 60px; |
||||
max-width: 670px; |
||||
|
||||
${isMobileDevice |
||||
? css` |
||||
width: 100%; |
||||
height: 100%; |
||||
@media screen and (orientation: landscape){ |
||||
padding-top: 0; |
||||
} |
||||
` |
||||
: ''}; |
||||
` |
||||
|
||||
export const Season = styled.div` |
||||
text-transform: uppercase; |
||||
background-color: rgba(0,0,0,0.4); |
||||
padding: 8px 25px; |
||||
color: #B9B9B9; |
||||
border-radius: 5px; |
||||
font-size: 13px; |
||||
font-weight: 600; |
||||
display: inline-flex; |
||||
margin-bottom: 50px; |
||||
|
||||
${isMobileDevice |
||||
? css` |
||||
margin-bottom: 15px; |
||||
padding: 0.7em 2.5rem; |
||||
font-size: 10px; |
||||
` |
||||
: ''}; |
||||
` |
||||
|
||||
export const MainInfoTitle = styled.div` |
||||
font-weight: 600; |
||||
font-size: 2rem; |
||||
${isMobileDevice |
||||
? css` |
||||
font-size: 24px; |
||||
margin-bottom: 25px; |
||||
` |
||||
: ''}; |
||||
` |
||||
|
||||
export const MainInfoButton = styled(ButtonSolid)` |
||||
width: auto; |
||||
height: 70px; |
||||
font-size: 24px; |
||||
font-weight: 600; |
||||
border-radius: 5px; |
||||
margin-bottom: 50px; |
||||
|
||||
${isMobileDevice |
||||
? css` |
||||
width: 100%; |
||||
font-size: 17px; |
||||
margin-bottom: 30px; |
||||
height: 40px; |
||||
` |
||||
: ''}; |
||||
` |
||||
|
||||
export const MainInfoText = styled.div` |
||||
margin: 40px 0; |
||||
font-size: 17px; |
||||
line-height: 150%; |
||||
${isMobileDevice |
||||
? css` |
||||
font-size: 12px; |
||||
margin: 0 0 25px; |
||||
letter-spacing: 0.1px; |
||||
` |
||||
: ''}; |
||||
` |
||||
|
||||
export const Footer = styled.div` |
||||
font-size: 14px; |
||||
background-color: black; |
||||
padding: 16px 0; |
||||
padding-left: 20%; |
||||
width: 100%; |
||||
@media ${devices.laptop} { |
||||
padding-left: 5%; |
||||
} |
||||
@media ${devices.mobile} { |
||||
padding-left: 35px; |
||||
} |
||||
${isMobileDevice |
||||
? css` |
||||
display: none; |
||||
` |
||||
: ''}; |
||||
` |
||||
|
||||
export const FooterRights = styled.div` |
||||
opacity: .5; |
||||
${isMobileDevice |
||||
? css` |
||||
font-size: 12px; |
||||
` |
||||
: ''}; |
||||
` |
||||
Loading…
Reference in new issue
уже несколько раз это выражение встречается, можно вынести в хэлпер https://monosnap.com/file/wfiYt40sj6lzRm7aYdEEAL2VQeRlZa
исправил