diff --git a/public/images/edit-icon.svg b/public/images/edit-icon.svg
new file mode 100644
index 00000000..e5cce7f4
--- /dev/null
+++ b/public/images/edit-icon.svg
@@ -0,0 +1,4 @@
+
diff --git a/src/features/AddCardForm/index.tsx b/src/features/AddCardForm/index.tsx
new file mode 100644
index 00000000..31440386
--- /dev/null
+++ b/src/features/AddCardForm/index.tsx
@@ -0,0 +1,44 @@
+import { SolidButton } from 'features/UserAccount/styled'
+
+import {
+ Form,
+ Column,
+ ButtonsBlock,
+ Input,
+} from './styled'
+
+export const AddCardForm = () => (
+
+)
diff --git a/src/features/AddCardForm/styled.tsx b/src/features/AddCardForm/styled.tsx
new file mode 100644
index 00000000..58d40c41
--- /dev/null
+++ b/src/features/AddCardForm/styled.tsx
@@ -0,0 +1,34 @@
+import styled from 'styled-components/macro'
+
+import { Input as InputBase } from 'features/Common'
+import { InputWrapper } from 'features/Common/Input/styled'
+
+export const Form = styled.form``
+
+export const Column = styled.div`
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ flex-wrap: wrap;
+`
+
+export const ButtonsBlock = styled.div`
+ display: flex;
+ margin-top: 40px;
+`
+
+export const Input = styled(InputBase).attrs(() => ({
+ withError: false,
+}))`
+ width: auto;
+
+ ${InputWrapper} {
+ height: 50px;
+ padding: 0 24px;
+ margin-top: 10px;
+ }
+
+ :first-child ${InputWrapper} {
+ margin-top: 0;
+ }
+`
diff --git a/src/features/App/AuthenticatedApp.tsx b/src/features/App/AuthenticatedApp.tsx
index 16274879..092e6834 100644
--- a/src/features/App/AuthenticatedApp.tsx
+++ b/src/features/App/AuthenticatedApp.tsx
@@ -15,7 +15,7 @@ import { MatchPage } from 'features/MatchPage'
import { PlayerPage } from 'features/PlayerPage'
import { TournamentPage } from 'features/TournamentPage'
import { ExtendedSearchStore, ExtendedSearchPage } from 'features/ExtendedSearchPage'
-import { UserAccountForm } from 'features/UserAccount'
+import { UserAccount } from 'features/UserAccount'
import { MatchSwitchesStore } from 'features/MatchSwitches'
import { UserFavoritesStore } from 'features/UserFavorites/store'
@@ -36,7 +36,7 @@ export const AuthenticatedApp = () => {
{/* в Switch как прямой children можно рендерить только Route или Redirect */}
-
+
diff --git a/src/features/BuyMatchPopup/components/PaymentPeriods/index.tsx b/src/features/BuyMatchPopup/components/PaymentPeriods/index.tsx
deleted file mode 100644
index ec5d5966..00000000
--- a/src/features/BuyMatchPopup/components/PaymentPeriods/index.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import styled, { css } from 'styled-components/macro'
-
-import { SubscriptionType } from 'requests'
-
-import { T9n } from 'features/T9n'
-import { useBuyMatchPopupStore } from 'features/BuyMatchPopup/store'
-
-const List = styled.ul`
- display: flex;
- padding: 0 35px;
- margin-top: 9px;
-`
-
-type ItemProps = {
- active?: boolean,
-}
-
-const Item = styled.li.attrs(() => ({
- tabIndex: 0,
-}))`
- width: 50%;
- font-size: 20px;
- line-height: 42px;
-
- display: flex;
- align-items: center;
- justify-content: center;
- color: rgba(255, 255, 255, 0.5);
- cursor: pointer;
-
- ${({ active }) => (
- active
- ? css`
- border-bottom: 3px solid #fff;
- color: #fff;
- `
- : ''
- )}
-`
-
-export const PaymentPeriods = () => {
- const { onPeriodSelect, selectedPeriod } = useBuyMatchPopupStore()
- return (
-
- - onPeriodSelect(SubscriptionType.Month)}
- >
-
-
- - onPeriodSelect(SubscriptionType.Year)}
- >
-
-
-
- )
-}
diff --git a/src/features/BuyMatchPopup/components/Subscriptions/index.tsx b/src/features/BuyMatchPopup/components/Subscriptions/index.tsx
index a1e79b80..e050f5a0 100644
--- a/src/features/BuyMatchPopup/components/Subscriptions/index.tsx
+++ b/src/features/BuyMatchPopup/components/Subscriptions/index.tsx
@@ -1,8 +1,9 @@
import styled from 'styled-components/macro'
import { T9n } from 'features/T9n'
+import { useBuyMatchPopupStore } from 'features/BuyMatchPopup'
+import { PaymentPeriodTabs } from 'features/PaymentPeriodTabs'
-import { PaymentPeriods } from '../PaymentPeriods'
import { SubscriptionsList } from '../SubscriptionsList'
const Wrapper = styled.div`
@@ -20,12 +21,18 @@ const Title = styled.span`
padding: 0 35px;
`
-export const Subscriptions = () => (
-
-
-
- <T9n t='choose_subscription' />
-
-
-
-)
+export const Subscriptions = () => {
+ const { onPeriodSelect, selectedPeriod } = useBuyMatchPopupStore()
+ return (
+
+
+
+ <T9n t='choose_subscription' />
+
+
+
+ )
+}
diff --git a/src/features/Combobox/index.tsx b/src/features/Combobox/index.tsx
index aaa60374..c387bf2c 100644
--- a/src/features/Combobox/index.tsx
+++ b/src/features/Combobox/index.tsx
@@ -36,6 +36,7 @@ export const Combobox = (props: Props) => {
maxLength,
title,
withArrow,
+ withError,
} = props
const {
@@ -105,7 +106,7 @@ export const Combobox = (props: Props) => {
)}
-
+ {withError && }
)
}
diff --git a/src/features/Combobox/types.tsx b/src/features/Combobox/types.tsx
index 3a8e2125..eef97a98 100644
--- a/src/features/Combobox/types.tsx
+++ b/src/features/Combobox/types.tsx
@@ -28,4 +28,5 @@ export type Props = Pick, (
options: Array,
value?: string,
withArrow?: boolean,
+ withError?: boolean,
}
diff --git a/src/features/Common/Button/styled.tsx b/src/features/Common/Button/styled.tsx
index b7543b77..fd00b4d6 100644
--- a/src/features/Common/Button/styled.tsx
+++ b/src/features/Common/Button/styled.tsx
@@ -13,6 +13,11 @@ const baseButtonStyles = css`
font-style: normal;
font-size: 20px;
outline-color: white;
+ cursor: pointer;
+
+ :disabled {
+ opacity: 0.5;
+ }
`
export const outlineButtonStyles = css`
@@ -31,7 +36,6 @@ export const solidButtonStyles = css`
color: #fff;
font-weight: bold;
- cursor: pointer;
border-color: transparent;
background: ${({ theme: { colors } }) => colors.primary};
diff --git a/src/features/Common/Input/index.tsx b/src/features/Common/Input/index.tsx
index a4c65069..47c1cf1d 100644
--- a/src/features/Common/Input/index.tsx
+++ b/src/features/Common/Input/index.tsx
@@ -18,6 +18,7 @@ import {
type Props = {
autoComplete?: string,
+ className?: string,
defaultValue?: string,
editIcon?: boolean,
inputWidth?: number,
@@ -33,10 +34,12 @@ type Props = {
title?: string,
type?: string,
value?: string,
+ withError?: boolean,
} & WrapperProps
export const Input = ({
autoComplete = '',
+ className,
defaultValue,
editIcon = false,
error,
@@ -54,13 +57,14 @@ export const Input = ({
title,
type,
value,
+ withError = true,
wrapperWidth,
}: Props) => {
const { translate } = useLexicsStore()
const isUserAccountPage = useRouteMatch(PAGES.useraccount)?.isExact || false
return (
-
+
+ {editIcon && }
- {editIcon && }
-
+ {withError && }
)
}
diff --git a/src/features/Common/Input/styled.tsx b/src/features/Common/Input/styled.tsx
index 01abfca1..ae1bfadd 100644
--- a/src/features/Common/Input/styled.tsx
+++ b/src/features/Common/Input/styled.tsx
@@ -228,9 +228,11 @@ export const Icon = styled.div<{ image: string }>`
position: absolute;
right: 22px;
top: 50%;
- width: 15px;
- height: 25px;
+ width: 24px;
+ height: 24px;
+ transform: translateY(-50%);
background-image: url(/images/${({ image }) => `${image}.svg`});
background-size: 100%;
background-repeat: no-repeat;
+ cursor: pointer;
`
diff --git a/src/features/Common/SportName/index.tsx b/src/features/Common/SportName/index.tsx
index ed7a4678..44107cb3 100644
--- a/src/features/Common/SportName/index.tsx
+++ b/src/features/Common/SportName/index.tsx
@@ -1,19 +1,18 @@
import { SportTypes } from 'config'
-import { getSportColor, getSportLexic } from 'helpers'
-
-import { useLexicsStore } from 'features/LexicsStore'
+import { getSportLexic } from 'helpers'
import { Text } from './styled'
-type SportNameProps = { sport: SportTypes }
-
-export const SportName = ({ sport }: SportNameProps) => {
- const { translate } = useLexicsStore()
-
- return (
-
- {translate(getSportLexic(sport))}
-
- )
+type SportNameProps = {
+ className?: string,
+ sport: SportTypes,
}
+
+export const SportName = ({ className, sport }: SportNameProps) => (
+
+)
diff --git a/src/features/Common/SportName/styled.tsx b/src/features/Common/SportName/styled.tsx
index 86cce731..c07511e2 100644
--- a/src/features/Common/SportName/styled.tsx
+++ b/src/features/Common/SportName/styled.tsx
@@ -1,11 +1,19 @@
import styled from 'styled-components/macro'
-import { devices } from 'config/devices'
+import { devices, SportTypes } from 'config'
-export const Text = styled.span<{ color: string }>`
+import { getSportColor } from 'helpers'
+
+import { T9n } from 'features/T9n'
+
+type Props = {
+ sport: SportTypes,
+}
+
+export const Text = styled(T9n)`
margin-right: 10px;
font-size: 11px;
- color: ${({ color }) => color};
+ color: ${({ sport }) => getSportColor(sport)};
letter-spacing: 0.02em;
text-transform: uppercase;
diff --git a/src/features/Menu/index.tsx b/src/features/Menu/index.tsx
index 1035e217..00e7b27c 100644
--- a/src/features/Menu/index.tsx
+++ b/src/features/Menu/index.tsx
@@ -32,7 +32,7 @@ export const Menu = () => {
}