From d45a32c15057bfa8208efaed87a8b6d9a08c51fe Mon Sep 17 00:00:00 2001 From: ElAnonimo Date: Mon, 6 Jul 2020 17:32:42 +0300 Subject: [PATCH] feat(ott-46): added user account page layout (#23) --- .gitignore | 3 + public/images/masterLogo.png | Bin 0 -> 653 bytes public/images/plusIcon.png | Bin 0 -> 353 bytes public/images/visaLogo.png | Bin 0 -> 851 bytes src/config/pages.tsx | 1 + src/features/App/UnauthenticatedApp.tsx | 5 + src/features/UserAccount/CardNumber/index.tsx | 28 +++ .../UserAccount/CardNumber/styled.tsx | 66 ++++++ src/features/UserAccount/PageTitle/index.tsx | 19 ++ src/features/UserAccount/PageTitle/styled.tsx | 18 ++ src/features/UserAccount/PlusIcon/index.tsx | 1 + src/features/UserAccount/PlusIcon/styled.tsx | 8 + .../UserAccount/TextNoBorder/index.tsx | 23 ++ .../UserAccount/TextNoBorder/styled.tsx | 22 ++ .../UserAccount/UserAccountButton/index.tsx | 11 + .../UserAccount/UserAccountButton/styled.tsx | 24 ++ .../UserAccountSubscription/index.tsx | 60 +++++ .../UserAccountSubscription/styled.tsx | 75 ++++++ src/features/UserAccount/VisaLogo/index.tsx | 1 + src/features/UserAccount/VisaLogo/styled.tsx | 16 ++ src/features/UserAccount/index.tsx | 221 ++++++++++++++++++ src/features/UserAccount/styled.tsx | 46 ++++ 22 files changed, 648 insertions(+) create mode 100644 public/images/masterLogo.png create mode 100644 public/images/plusIcon.png create mode 100644 public/images/visaLogo.png create mode 100644 src/features/UserAccount/CardNumber/index.tsx create mode 100644 src/features/UserAccount/CardNumber/styled.tsx create mode 100644 src/features/UserAccount/PageTitle/index.tsx create mode 100644 src/features/UserAccount/PageTitle/styled.tsx create mode 100644 src/features/UserAccount/PlusIcon/index.tsx create mode 100644 src/features/UserAccount/PlusIcon/styled.tsx create mode 100644 src/features/UserAccount/TextNoBorder/index.tsx create mode 100644 src/features/UserAccount/TextNoBorder/styled.tsx create mode 100644 src/features/UserAccount/UserAccountButton/index.tsx create mode 100644 src/features/UserAccount/UserAccountButton/styled.tsx create mode 100644 src/features/UserAccount/UserAccountSubscription/index.tsx create mode 100644 src/features/UserAccount/UserAccountSubscription/styled.tsx create mode 100644 src/features/UserAccount/VisaLogo/index.tsx create mode 100644 src/features/UserAccount/VisaLogo/styled.tsx create mode 100644 src/features/UserAccount/index.tsx create mode 100644 src/features/UserAccount/styled.tsx 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 0000000000000000000000000000000000000000..1c2abec0d6f0b339e4f7c0d1c554de1ab78693f7 GIT binary patch literal 653 zcmV;80&@L{P))rg=X zkgx&S&dhUWc3H$U>@*(WleC?@yf@!@?aX@xE(lg+{E5YwKy41vPZkcXlrpeXLT%i{ z*7}L>QFk$Bpr-b3fkwWJG6GVc*m`AUb8VvV9>P!{@9JTU^H-ZyTWr~H(ksyUzM4!5 zJP%%OrvJ<_7L6ptJH7JR2@}B!1gwgVnW zkk2uA)Bx3dxF95ZI{o5nV#eIuByy)r4OgNAD{5CQ6sA7y!xi77E_G+E4j*nLgf4+5 z+v>f;Gd8||Y%fQ`W7OL=PVdOJYgFxiztHY|KZGkpyk&)TwvlU)e?2d>m&n)<+ZdD( z_O8l8JNqqB26}V*F2@C7zH#R2EcS}etO_b916$qttTSebYk=4-7N)@M9FIuMO>Zu? z<{FW2R}1ZOzK#;~tZ)Oik|Zt>MtJb0cE)C^mRhL64a(}HreQaifLzwE+^GZ|e3*mm z4_~b-UzE)#zMuLICunK0ef00000NkvXXu0mjfk)k5h literal 0 HcmV?d00001 diff --git a/public/images/plusIcon.png b/public/images/plusIcon.png new file mode 100644 index 0000000000000000000000000000000000000000..ff27637907b16b0cd6c3ff5bf9b959c1eed5ef72 GIT binary patch literal 353 zcmeAS@N?(olHy`uVBq!ia0vp^Vj#@H1|*Mc$*~4foCO|{#S9GG!XV7ZFl&wkP>``W z$lZxy-8q?;Kn_c~qpu?a!^VE@KZ&eB{x?q-$B+uftHF+ZO$GunUb9zJs3_Vv?RR)| z*w^9%qiJ2^go2PO4QpdrFAE%5d#!nLj@81sFY|7)E@)KsTx2j|GK+(A!Us-Q2h(p> zLar0t1p|6R-MbbkaN3=mp|auJ48vs_Os{*EPWk`wSo8EA#?yzM?Qe2klBs2o9CSEZ z=|E4qQ-^Ep^~>Lsr@i_bwkE50cI33Rvz7(U`TTp|v)Z$kJcn)F7x`{a`16zTjP;`4 zvMS40U$0h1PJ7DQyR?t%*hA?(N^`d7n`^CMSLsV$KKZ-Lyyt%E=a1wYwS9c|^VE&I xZ$G?vyp&JoZ*SjaYsRZL^3QI3&hJq1T)LCb*O(`VqZJqe44$rjF6*2UngI1KkuU%N literal 0 HcmV?d00001 diff --git a/public/images/visaLogo.png b/public/images/visaLogo.png new file mode 100644 index 0000000000000000000000000000000000000000..127c70d84f4ecfbc42ba788fec0c0c285c690ea3 GIT binary patch literal 851 zcmV-Z1FZasP)p}3=^&ldeG(C!kCI{O>l}7vkZNEW_7fB1*eu8WpMZ`ll zH^HLuAP5RZ5O30mC~cCR@x7hdnOzeHX6Ma&Z{GX8f6G2LZ>(M@9900M1A0lxy7`k) zjn%sSga`NAo4{aBUBoVM9>7Snw6qV6(v_I1w~FwG*HL#C1h{w>k=sS9AvDU5j6J2- zM9S4(gG8RYRC~3Rzk7Hcgxu&4r;8w&!vHGLG@pg+TEOkZTZ#aLDB3$H@XIe8bo36X zHRO335X6opb2HX{PhldUVr(cnUb%$G-+Sx3Z&rdQ->#`#M9i^S+OHZ15~JRp??MEZ zjhxA@l0|FU0bP2iTUVR;$Otl^7+ZrZ!+~lm_QBKa@5g64k3Zk668+%ZYY&et1)VLR z@x<7s2IAmH`)56MN}CNK>#$SagGp<-?O|yheWQTXJI?70a~b7f6i0)=;N_2tN|8!J zrAVT0+}YLOQsvN@VqkkPhu{~VEx@EDndM8lWoV|dp9SU5lhGcL4?o>@WYaA|H1wW7tC%*blW zxpGRiw>{R^!2mohg)rbVNni$?m^w)M1)Fs>B@5DtNGdV`6m$~e@Yh*Va!pkJyn0;V z=}GElUi-JO#HAU`M$Jqm0XxNY$z;XGFPI)8WtRe7d47Hz)F2A&BUU%G5Wb-&P2Rt2 zyX<4gq18i&1i(xu@mMq7re|@Tj9flujMBN(4l|0>;5&1BDIm_+h`VMcuf=fO^C0~@?z-bnqgOBPj! dey~d3{|ho|Ed>j)fwBMq002ovPDHLkV1gO_hnWBX literal 0 HcmV?d00001 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; + } +`