diff --git a/Makefile b/Makefile
index 5820759c..2fe29737 100644
--- a/Makefile
+++ b/Makefile
@@ -130,7 +130,7 @@ b-stage: build-b
rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@staging.instat.tv:/usr/local/www/ott-staging/b-wwwroot/
c-stage: build-c
- rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@staging.instat.tv:/usr/local/www/ott-staging/c-wwwroot/
+ rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@10.0.3.8:/usr/local/www/ott-staging/c-wwwroot/
d-stage: build-d
rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@staging.instat.tv:/usr/local/www/ott-staging/d-wwwroot/
diff --git a/src/features/BuyMatchPopup/components/PackagesList/styled.tsx b/src/features/BuyMatchPopup/components/PackagesList/styled.tsx
index 4575bbe3..f94c2d92 100644
--- a/src/features/BuyMatchPopup/components/PackagesList/styled.tsx
+++ b/src/features/BuyMatchPopup/components/PackagesList/styled.tsx
@@ -9,8 +9,11 @@ import {
Period,
} from 'features/Price/styled'
+import { devices } from '../../../../config'
+
export const List = styled.ul`
width: 100%;
+ height: 460px;
overflow-y: auto;
margin-top: 25px;
padding: 0 40px;
@@ -19,6 +22,7 @@ export const List = styled.ul`
@media (max-width: 1370px) {
max-height: 415px;
+ height: auto;
}
@media (max-height: 768px) {
@@ -210,9 +214,14 @@ export const ScAutoRenewal = styled(PriceDetails)`
line-height: 21px;
font-size: 12px;
text-transform: none;
- white-space: nowrap;
margin: 0;
color: ${({ theme: { colors } }) => colors.text70};
+
+ @media ${devices.mobile} {
+ line-height: normal;
+ font-size: 10px;
+ text-align: center;
+ }
`
export const ScPriceContainer = styled.div`
diff --git a/src/features/Modal/styled.tsx b/src/features/Modal/styled.tsx
index 66b0f288..9e5c4a99 100644
--- a/src/features/Modal/styled.tsx
+++ b/src/features/Modal/styled.tsx
@@ -6,7 +6,7 @@ export const ModalContainer = styled.div`
position: fixed;
top: 0;
left: 0;
- height: 100vh;
+ height: 100%;
width: 100vw;
display: flex;
align-items: center;
diff --git a/src/features/Price/components/BasePrice/index.tsx b/src/features/Price/components/BasePrice/index.tsx
new file mode 100644
index 00000000..4080f83a
--- /dev/null
+++ b/src/features/Price/components/BasePrice/index.tsx
@@ -0,0 +1,51 @@
+import { currencySymbols } from 'config'
+
+import { T9n } from 'features/T9n'
+
+import {
+ Prefix,
+ PriceAmount,
+ PriceDetails,
+ PriceWrapper,
+ Currency,
+ Period,
+} from '../../styled'
+
+type Props = {
+ amount: number,
+ className?: string,
+ currency?: string,
+ isFrom?: boolean,
+ perPeriod?: string | null,
+}
+
+export const BasePrice = ({
+ amount,
+ className,
+ currency = currencySymbols.RUB,
+ isFrom,
+ perPeriod,
+}: Props) => (
+
+ {
+ isFrom
+ ? (
+
+
+
+ )
+ : ''
+ }
+ {amount}
+
+ {currency}
+ {
+ perPeriod && (
+
+ /
+
+ )
+ }
+
+
+)
diff --git a/src/features/Price/components/BrazilianPrice/index.tsx b/src/features/Price/components/BrazilianPrice/index.tsx
new file mode 100644
index 00000000..2abce8a7
--- /dev/null
+++ b/src/features/Price/components/BrazilianPrice/index.tsx
@@ -0,0 +1,51 @@
+import { currencySymbols } from 'config'
+
+import { T9n } from 'features/T9n'
+
+import {
+ Prefix,
+ PriceDetails,
+ PriceWrapper,
+ Currency,
+ Period,
+} from '../../styled'
+import { PriceAmount } from './styled'
+
+type Props = {
+ amount: number,
+ className?: string,
+ currency?: string,
+ isFrom?: boolean,
+ perPeriod?: string | null,
+}
+
+export const BrazilianPrice = ({
+ amount,
+ className,
+ currency = currencySymbols.BRL,
+ isFrom,
+ perPeriod,
+}: Props) => (
+
+ {
+ isFrom
+ ? (
+
+
+
+ )
+ : ''
+ }
+
+ {currency}
+ {amount}
+ {
+ perPeriod && (
+
+ /
+
+ )
+ }
+
+
+)
diff --git a/src/features/Price/components/BrazilianPrice/styled.tsx b/src/features/Price/components/BrazilianPrice/styled.tsx
new file mode 100644
index 00000000..69bbe934
--- /dev/null
+++ b/src/features/Price/components/BrazilianPrice/styled.tsx
@@ -0,0 +1,6 @@
+import styled from 'styled-components'
+import { PriceAmount as BasePriceAmount } from '../../styled'
+
+export const PriceAmount = styled(BasePriceAmount)`
+ margin-right: 4px;
+`
diff --git a/src/features/Price/index.tsx b/src/features/Price/index.tsx
index f40b6257..1c1d85d5 100644
--- a/src/features/Price/index.tsx
+++ b/src/features/Price/index.tsx
@@ -1,17 +1,10 @@
import { currencySymbols } from 'config'
-import { T9n } from 'features/T9n'
+import { useMemo } from 'react'
+import { BasePrice } from './components/BasePrice'
+import { BrazilianPrice } from './components/BrazilianPrice'
-import {
- Prefix,
- PriceAmount,
- PriceDetails,
- PriceWrapper,
- Currency,
- Period,
-} from './styled'
-
-type Props = {
+export type PriceProps = {
amount: number,
className?: string,
currency?: string,
@@ -19,33 +12,37 @@ type Props = {
perPeriod?: string | null,
}
-export const Price = ({
+export const Price: React.FC = ({
amount,
className,
- currency = currencySymbols.RUB,
+ currency,
isFrom,
perPeriod,
-}: Props) => (
-
- {
- isFrom
- ? (
-
-
-
+}) => {
+ const priceContent = useMemo(() => {
+ switch (currency) {
+ case currencySymbols.BRL:
+ return (
+
)
- : ''
- }
- {amount}
-
- {currency}
- {
- perPeriod && (
-
- /
-
+ default:
+ return (
+
)
- }
-
-
-)
+ }
+ }, [amount, className, currency, isFrom, perPeriod])
+
+ return priceContent
+}
diff --git a/src/features/Price/styled.tsx b/src/features/Price/styled.tsx
index dd90ce97..17ffcb42 100644
--- a/src/features/Price/styled.tsx
+++ b/src/features/Price/styled.tsx
@@ -27,10 +27,6 @@ export const PriceAmount = styled.span`
@media ${devices.tablet} {
font-size: 36px;
}
-
- @media ${devices.mobile} {
- margin-left: 8px;
- }
`
export const PriceDetails = styled.span`