From 51472fe3e43ce9c3dafda1b1876fef0316fed511 Mon Sep 17 00:00:00 2001 From: eladonline Date: Wed, 7 Aug 2019 15:51:55 +0300 Subject: [PATCH 01/17] fix: init --- src/components/layout.css | 33 +++++++++++++++---- src/components/messages/error.tsx | 6 +++- src/components/messages/info.tsx | 5 ++- src/components/pageTemplate/style.ts | 2 +- src/components/pageTemplate/template.tsx | 23 +++++++++++-- src/components/title/style.ts | 19 +++++++++++ src/components/title/title.tsx | 22 ++++++++----- src/screens/approvePayment/ApprovePayment.tsx | 2 +- src/screens/homepage/homepage.tsx | 17 ++++++---- src/screens/homepage/style.ts | 14 ++++---- src/screens/homepage/text.json | 6 ++++ src/screens/keyAccess/KeyAccess.tsx | 2 +- src/screens/ledger/ledger.tsx | 2 +- src/screens/reviewPayment/ReviewPayment.tsx | 2 +- src/screens/transaction/transaction.tsx | 2 +- .../TransactionApproved.tsx | 2 +- src/style/common/selectors.ts | 26 +++++++++++---- 17 files changed, 139 insertions(+), 46 deletions(-) create mode 100644 src/screens/homepage/text.json diff --git a/src/components/layout.css b/src/components/layout.css index ed173b4..9af8a6f 100644 --- a/src/components/layout.css +++ b/src/components/layout.css @@ -14,23 +14,44 @@ font-family: SailecBold; src: url('../../static/fonts/SailecBold.otf'); } - -html { +:root { + --gradientHeight: 737px; + --gradient-sm-Height: 504px; + --gradient-md-Height: 421px; + --gradient-lg-Height: 496px; + --gradient-xl-Height: 397px; } + body { margin: 0; overflow-x: hidden; background: rgb(111, 65, 232); - background: linear-gradient(to bottom, rgba(147, 107, 251, 1) 504px, rgba(111, 65, 232, 1) 504px); + background: linear-gradient(to bottom, rgba(147, 107, 251, 1) var(--gradientHeight), rgba(111, 65, 232, 1) var(--gradientHeight)); } -#___gatsby, body { +#___gatsby, +body { background: rgb(111, 65, 232); - background: linear-gradient(to bottom, rgba(147, 107, 251, 1) 504px, rgba(111, 65, 232, 1) 504px); + background: linear-gradient(to bottom, rgba(147, 107, 251, 1) var(--gradientHeight), rgba(111, 65, 232, 1) var(--gradientHeight)); } +@media screen and (min-width: 504px) { + #___gatsby { + background: linear-gradient(to bottom, rgba(147, 107, 251, 1) var(--gradient-sm-Height), rgba(111, 65, 232, 1) var(--gradient-sm-Height)); + } +} +@media screen and (min-width: 768px) { + #___gatsby { + background: linear-gradient(to bottom, rgba(147, 107, 251, 1) var(--gradient-md-Height), rgba(111, 65, 232, 1) var(--gradient-md-Height)); + } +} @media screen and (min-width: 992px) { #___gatsby { - background: linear-gradient(to bottom, rgba(147, 107, 251, 1) 537px, rgba(111, 65, 232, 1) 537px); + background: linear-gradient(to bottom, rgba(147, 107, 251, 1) var(--gradient-lg-Height), rgba(111, 65, 232, 1) var(--gradient-lg-Height)); + } +} +@media screen and (min-width: 1366px) { + #___gatsby { + background: linear-gradient(to bottom, rgba(147, 107, 251, 1) var(--gradient-xl-Height), rgba(111, 65, 232, 1) var(--gradient-xl-Height)); } } diff --git a/src/components/messages/error.tsx b/src/components/messages/error.tsx index fc00cdd..053813e 100644 --- a/src/components/messages/error.tsx +++ b/src/components/messages/error.tsx @@ -1,5 +1,7 @@ import React, { useEffect } from 'react'; import { MessageBox, ErrorContainer, ErrorText } from './style'; +import { T_14_16_lg } from '../../style/common/selectors'; +import { volcanoRed } from 'src/style/theme/generalVariables'; interface IError { errors: string[]; @@ -10,7 +12,9 @@ const Error: React.SFC = ({ errors }) => { aErros.map((sError, i) => { return ( - {sError} + + {sError} + ); }); diff --git a/src/components/messages/info.tsx b/src/components/messages/info.tsx index c69b04d..771c48f 100644 --- a/src/components/messages/info.tsx +++ b/src/components/messages/info.tsx @@ -2,6 +2,7 @@ import React, { useEffect } from 'react'; import { ErrorContainer, ErrorText } from './style'; import { MessageBox, MessageBoxTextOnly } from './style'; import { SmallTitle, P } from 'common/selectors'; +import { T_14_16_lg } from '../../style/common/selectors'; interface IMessage { errors: []; @@ -13,7 +14,9 @@ export const MessageHeadAText: React.SFC = ({ errors }) => { aMessages.map(({ head, text }, i) => { return ( - {head} + + {head} + {text} ); diff --git a/src/components/pageTemplate/style.ts b/src/components/pageTemplate/style.ts index b67f5be..c74a622 100644 --- a/src/components/pageTemplate/style.ts +++ b/src/components/pageTemplate/style.ts @@ -8,7 +8,7 @@ export const Structure_container = styled.div` ${grid('0em', 'initial', 'initial', '222px auto', 'auto')} `} ${media.lg` - ${grid('0em', 'initial', 'initial', '222px auto', 'auto')} + ${grid('0em', 'initial', 'initial', '312px auto', 'auto')} `} ${media.xl` ${grid('0em', 'initial', 'initial', 'auto auto', 'auto')} diff --git a/src/components/pageTemplate/template.tsx b/src/components/pageTemplate/template.tsx index dd55e74..47cde03 100644 --- a/src/components/pageTemplate/template.tsx +++ b/src/components/pageTemplate/template.tsx @@ -35,13 +35,13 @@ interface ITemplateProps { step: number; outOf: number; children: ReactNode; - actions: object; + actions: Iactions; github: boolean; hide: string; location: { pathname: string; }; - store: Object; + store: { errors: Array; loading: boolean }; } const Template: FunctionComponent = props => { @@ -132,3 +132,22 @@ export default connect( mapStateToProps, mapDispatchToProps )(props => {locationProps =>