diff --git a/.gitignore b/.gitignore index d92557e7..c8f29b44 100644 --- a/.gitignore +++ b/.gitignore @@ -24,3 +24,6 @@ yarn-error.log* yarn.lock package-lock.json + +# IntelliJ IDEA products +.idea diff --git a/public/images/masterLogo.png b/public/images/masterLogo.png new file mode 100644 index 00000000..1c2abec0 Binary files /dev/null and b/public/images/masterLogo.png differ diff --git a/public/images/plusIcon.png b/public/images/plusIcon.png new file mode 100644 index 00000000..ff276379 Binary files /dev/null and b/public/images/plusIcon.png differ diff --git a/public/images/visaLogo.png b/public/images/visaLogo.png new file mode 100644 index 00000000..127c70d8 Binary files /dev/null and b/public/images/visaLogo.png differ diff --git a/src/config/pages.tsx b/src/config/pages.tsx index 7bbf6211..affdcc95 100644 --- a/src/config/pages.tsx +++ b/src/config/pages.tsx @@ -6,4 +6,5 @@ export const PAGES = { register: '/register', team: '/teams', tournament: '/tournaments', + useraccount: '/useraccount', } diff --git a/src/features/App/UnauthenticatedApp.tsx b/src/features/App/UnauthenticatedApp.tsx index 90b464bb..f63a7029 100644 --- a/src/features/App/UnauthenticatedApp.tsx +++ b/src/features/App/UnauthenticatedApp.tsx @@ -12,6 +12,7 @@ import { Login } from 'features/Login' import { Register } from 'features/Register' import { LanguageSelect } from 'features/LanguageSelect' import { useLexicsConfig } from 'features/LexicsStore' +import { UserAccount } from 'features/UserAccount' export const UnauthenticatedApp = () => { useLexicsConfig(publicLexics) @@ -27,6 +28,10 @@ export const UnauthenticatedApp = () => { + + + + diff --git a/src/features/UserAccount/CardNumber/index.tsx b/src/features/UserAccount/CardNumber/index.tsx new file mode 100644 index 00000000..849d0023 --- /dev/null +++ b/src/features/UserAccount/CardNumber/index.tsx @@ -0,0 +1,28 @@ +import React from 'react' + +import { Radio } from 'features/Common/Radio' + +import { VisaLogoWrapper } from '../VisaLogo' +import { CardNumberWrapper, CardNumberTextWrapper } from './styled' + +type TUserAccountInput = { + checked?: boolean, + label: string, + visa?: boolean, +} + +export const CardNumber = ({ + checked, + label, + visa, +}: TUserAccountInput) => ( + + {}} + /> + + Удалить карту + +) diff --git a/src/features/UserAccount/CardNumber/styled.tsx b/src/features/UserAccount/CardNumber/styled.tsx new file mode 100644 index 00000000..f1b0a164 --- /dev/null +++ b/src/features/UserAccount/CardNumber/styled.tsx @@ -0,0 +1,66 @@ +import styled, { css } from 'styled-components/macro' + +import { Label } from 'features/Common/Radio/styled' +import { PriceAmount, PriceDetails } from 'features/Register/components/Price/styled' + +export const CardNumberWrapper = styled.div` + display: flex; + align-items: center; + justify-content: space-between; + height: 48px; + background-color: #3F3F3F; + border-radius: 2px; + margin: 20px 0; + width: 100%; + + ${Label} { + font-size: 20px; + line-height: 24px; + + &::before { + margin-left: 22px; + } + } +` + +export const TextWrapper = styled.p` + font-family: Montserrat, sans-serif; + font-style: normal; + font-weight: normal; + font-size: 14px; + line-height: 24px; + color: #666666; + white-space: nowrap; + margin-right: 0; + + &:hover { + cursor: pointer; + } +` + +export const CardNumberTextWrapper = styled(TextWrapper)` + margin-right: 24px; +` + +export type TPriceWrapper = { + noMarginRight?: boolean, +} + +export const priceWrapperStyles = css` + margin-left: auto; + margin-right: 24px; + + ${PriceAmount} { + font-size: 24px; + line-height: 21px; + } + + ${PriceDetails} { + font-size: 12px; + line-height: 12px; + } +` + +export const PriceWrapper = styled.div` + ${priceWrapperStyles} +` diff --git a/src/features/UserAccount/PageTitle/index.tsx b/src/features/UserAccount/PageTitle/index.tsx new file mode 100644 index 00000000..cc49cb90 --- /dev/null +++ b/src/features/UserAccount/PageTitle/index.tsx @@ -0,0 +1,19 @@ +import React from 'react' + +import { Logo } from 'features/Logo' +import { BlockTitle } from 'features/Login/styled' + +import { PageTitleWrapper, TitleTextWrapper } from './styled' + +type TPageTitle = { + titleText: string, +} + +export const PageTitle = ({ titleText }: TPageTitle) => ( + + + + {titleText} + + +) diff --git a/src/features/UserAccount/PageTitle/styled.tsx b/src/features/UserAccount/PageTitle/styled.tsx new file mode 100644 index 00000000..75c4a046 --- /dev/null +++ b/src/features/UserAccount/PageTitle/styled.tsx @@ -0,0 +1,18 @@ +import styled from 'styled-components/macro' + +import { BlockTitle } from 'features/Login/styled' + +export const PageTitleWrapper = styled.div` + display: flex; + justify-content: flex-start; + align-items: flex-end; +` + +export const TitleTextWrapper = styled.div` + margin-left: 14px; + + ${BlockTitle} { + margin-bottom: 0; + line-height: 28px; + } +` diff --git a/src/features/UserAccount/PlusIcon/index.tsx b/src/features/UserAccount/PlusIcon/index.tsx new file mode 100644 index 00000000..9bc65a52 --- /dev/null +++ b/src/features/UserAccount/PlusIcon/index.tsx @@ -0,0 +1 @@ +export * from './styled' diff --git a/src/features/UserAccount/PlusIcon/styled.tsx b/src/features/UserAccount/PlusIcon/styled.tsx new file mode 100644 index 00000000..567fc944 --- /dev/null +++ b/src/features/UserAccount/PlusIcon/styled.tsx @@ -0,0 +1,8 @@ +import styled from 'styled-components/macro' + +export const PlusIconWrapper = styled.span` + width: 20px; + height: 20px; + margin: 0 22px; + background: url('/images/plusIcon.png') no-repeat; +` diff --git a/src/features/UserAccount/TextNoBorder/index.tsx b/src/features/UserAccount/TextNoBorder/index.tsx new file mode 100644 index 00000000..a805f2e0 --- /dev/null +++ b/src/features/UserAccount/TextNoBorder/index.tsx @@ -0,0 +1,23 @@ +import React from 'react' + +import { Price } from 'features/Register/components/Price' + +import { TextNoBorderWrapper, TextNoBorderTextWrapper } from './styled' +import { PriceWrapper } from '../CardNumber/styled' + +type TTextNoBorder = { + amount: number, + text: string, +} + +export const TextNoBorder = ({ + amount, + text, +}: TTextNoBorder) => ( + + {text} + + + + +) diff --git a/src/features/UserAccount/TextNoBorder/styled.tsx b/src/features/UserAccount/TextNoBorder/styled.tsx new file mode 100644 index 00000000..ecbba47c --- /dev/null +++ b/src/features/UserAccount/TextNoBorder/styled.tsx @@ -0,0 +1,22 @@ +import styled from 'styled-components/macro' + +import { PriceWrapper, TextWrapper } from '../CardNumber/styled' + +export const TextNoBorderWrapper = styled.div` + display: flex; + align-items: center; + justify-content: space-between; + height: 48px; + background-color: transparent; + border: none; + margin-top: 20px; + width: 100%; + + ${PriceWrapper} { + margin-right: 0; + } +` + +export const TextNoBorderTextWrapper = styled(TextWrapper)` + font-size: 20px; +` diff --git a/src/features/UserAccount/UserAccountButton/index.tsx b/src/features/UserAccount/UserAccountButton/index.tsx new file mode 100644 index 00000000..6fafbd1c --- /dev/null +++ b/src/features/UserAccount/UserAccountButton/index.tsx @@ -0,0 +1,11 @@ +import React from 'react' + +import { PlusIconWrapper } from '../PlusIcon' +import { UserAccountButtonWrapper, PlusIconTextWrapper } from './styled' + +export const UserAccountButton = ({ text }: { text: string }) => ( + + + {text} + +) diff --git a/src/features/UserAccount/UserAccountButton/styled.tsx b/src/features/UserAccount/UserAccountButton/styled.tsx new file mode 100644 index 00000000..76e71c03 --- /dev/null +++ b/src/features/UserAccount/UserAccountButton/styled.tsx @@ -0,0 +1,24 @@ +import styled from 'styled-components/macro' + +import { TextWrapper } from '../CardNumber/styled' + +export const UserAccountButtonWrapper = styled.div` + display: flex; + align-items: center; + justify-content: flex-start; + height: 48px; + background-color: transparent; + border: 1.5px solid #3F3F3F; + border-radius: 2px; + margin-top: 20px; + width: 100%; + + &:hover { + cursor: pointer; + } +` + +export const PlusIconTextWrapper = styled(TextWrapper)` + font-size: 20px; + color: #494949; +` diff --git a/src/features/UserAccount/UserAccountSubscription/index.tsx b/src/features/UserAccount/UserAccountSubscription/index.tsx new file mode 100644 index 00000000..7cb05506 --- /dev/null +++ b/src/features/UserAccount/UserAccountSubscription/index.tsx @@ -0,0 +1,60 @@ +import React from 'react' + +import { Price } from 'features/Register/components/Price' +import { Radio } from 'features/Common/Radio' +import { Checkbox } from 'features/Common/Checkbox' + +import { + CheckboxWrapper, + UserAccountSubscriptionWrapper, + UserAccountBoldTextWrapper, + UserAccountNormalTextWrapper, +} from './styled' +import { PriceWrapper } from '../CardNumber/styled' + +type TUserAccountSubscription = { + amount: number, + checked?: boolean, + inputType?: string, + label?: string, + noMarginBottom?: boolean, + noMarginTop?: boolean, + packageAction?: string, + packageName?: string, +} + +export const UserAccountSubscription = ({ + amount, + checked, + inputType, + label, + noMarginBottom, + noMarginTop, + packageAction, + packageName, +}: TUserAccountSubscription) => ( + + {inputType === 'radio' ? ( + {}} + /> + ) : ( + + {}} + label={label} + /> + + )} + {packageName && {packageName}} + {packageAction && {packageAction}} + + + + +) diff --git a/src/features/UserAccount/UserAccountSubscription/styled.tsx b/src/features/UserAccount/UserAccountSubscription/styled.tsx new file mode 100644 index 00000000..496fd98f --- /dev/null +++ b/src/features/UserAccount/UserAccountSubscription/styled.tsx @@ -0,0 +1,75 @@ +import styled, { css } from 'styled-components/macro' + +import { Label as CheckboxLabel } from 'features/Common/Checkbox/styled' +import { Label as RadioLabel } from 'features/Common/Radio/styled' + +import { TextWrapper } from '../CardNumber/styled'; + +export type TUserAccountSubscriptionWrapper = { + noMarginBottom?: boolean, + noMarginTop?: boolean, +} + +export const UserAccountSubscriptionWrapperStyles = css` + display: flex; + align-items: center; + justify-content: flex-start; + height: 48px; + background-color: #3F3F3F; + border-top: ${({ noMarginBottom, noMarginTop }) => (noMarginBottom && noMarginTop ? '1px solid #000' : '')}; + border-bottom: ${({ noMarginBottom, noMarginTop }) => (noMarginBottom && noMarginTop ? '1px solid #000' : '')}; + border-radius: ${({ noMarginBottom, noMarginTop }) => { + if (noMarginTop && noMarginBottom) { + return '0' + } + if (noMarginTop) { + return '0 0 2px 2px' + } + if (noMarginBottom) { + return '2px 2px 0 0' + } + return '2px' + }}; + margin-top: ${({ noMarginTop }) => (noMarginTop ? '0' : '20px')}; + margin-bottom: ${({ noMarginBottom }) => (noMarginBottom ? '0' : '20px')}; + width: 100%; + + ${RadioLabel}::before { + margin-left: 22px; + } +` + +export const UserAccountSubscriptionWrapper = styled.div` + ${UserAccountSubscriptionWrapperStyles}; + + &:nth-child(n+1) { + border-bottom: ${({ noMarginBottom }) => (noMarginBottom ? '1px solid #000' : '')}; + border-top: ${({ noMarginBottom, noMarginTop }) => (noMarginBottom && noMarginTop ? 'none' : '')}; + } +` + +export const CheckboxWrapper = styled.div` + ${CheckboxLabel} { + font-weight: bold; + font-size: 14px; + line-height: 24px; + + &::before { + margin-left: 22px; + } + } +` + +export const UserAccountBoldTextWrapper = styled(TextWrapper)` + color: #fff; + font-weight: bold; + font-size: 20px; + margin-right: 24px; +` + +export const UserAccountNormalTextWrapper = styled(TextWrapper)` + color: #fff; + font-weight: normal; + font-size: 14px; + margin-right: 24px; +` diff --git a/src/features/UserAccount/VisaLogo/index.tsx b/src/features/UserAccount/VisaLogo/index.tsx new file mode 100644 index 00000000..9bc65a52 --- /dev/null +++ b/src/features/UserAccount/VisaLogo/index.tsx @@ -0,0 +1 @@ +export * from './styled' diff --git a/src/features/UserAccount/VisaLogo/styled.tsx b/src/features/UserAccount/VisaLogo/styled.tsx new file mode 100644 index 00000000..c9df5465 --- /dev/null +++ b/src/features/UserAccount/VisaLogo/styled.tsx @@ -0,0 +1,16 @@ +import styled, { css } from 'styled-components/macro' + +type TCardLogoStyled = { + visa?: boolean, +} + +export const CardLogoStyles = css` + width: ${({ visa }) => `${visa ? 37 : 30}px`}; + height: ${({ visa }) => `${visa ? 12 : 19}px`}; + margin-right: 82px; + background: ${({ visa }) => `url(/images/${visa ? 'visaLogo.png' : 'masterLogo.png'}) no-repeat`}; +` + +export const VisaLogoWrapper = styled.span` + ${CardLogoStyles} +` diff --git a/src/features/UserAccount/index.tsx b/src/features/UserAccount/index.tsx new file mode 100644 index 00000000..1a23a8b5 --- /dev/null +++ b/src/features/UserAccount/index.tsx @@ -0,0 +1,221 @@ +import React from 'react' + +import { Background } from 'features/Background' +import { Combobox } from 'features/Combobox' +import { Input } from 'features/Common' +import { Form } from 'features/Login/styled' + +import { CardNumber } from './CardNumber' +import { UserAccountButton } from './UserAccountButton' +import { PageTitle } from './PageTitle' +import { UserAccountSubscription } from './UserAccountSubscription' +import { TextNoBorder } from './TextNoBorder' +import { + FormWrapper, + OutlinedButton, + UserAccountWrapper, + UserAccountFormWrapper, + UserAccountBlockTitle, + UserAccountComponentWrapper, +} from './styled' + +const labelWidth = 78 + +export const UserAccount = () => ( + + + + + + +
+ Основное + + + + + + Сохранить изменения + +
+ +
+ Оплата + + + + + +
+ +
+ Подписки + + + + + + + +
+ + + + + + + + +
+ Основное + + + + + + Сохранить изменения + +
+ +
+ Оплата + + + + + +
+ +
+ Подписки + + + + + + + + + +
+ + + + +) diff --git a/src/features/UserAccount/styled.tsx b/src/features/UserAccount/styled.tsx new file mode 100644 index 00000000..0ec1427a --- /dev/null +++ b/src/features/UserAccount/styled.tsx @@ -0,0 +1,46 @@ +import styled from 'styled-components/macro' + +import { BlockTitle, Form } from 'features/Login/styled' +import { outlineButtonStyles } from 'features/Common/Button' + +export const OutlinedButton = styled.button` + ${outlineButtonStyles}; + width: 288px; + margin-top: 20px; + align-self: flex-start; + color: #005EDD; + border-color: #005EDD; + + &:hover { + cursor: pointer; + } +` + +export const UserAccountFormWrapper = styled.div` + display: flex; + justify-content: center; + flex-wrap: wrap; +` + +export const UserAccountWrapper = styled.div` + width: 1776px; + margin-top: 140px; +` + +export const UserAccountBlockTitle = styled(BlockTitle)` + align-self: flex-start; +` + +export const UserAccountComponentWrapper = styled.div`` + +export const FormWrapper = styled.div` + margin-right: 48px; + + ${Form} { + width: 560px; + } + + &:last-child { + margin-right: 0; + } +`