From 837528fd080c10fa6a376740b65fb9e3dd887d01 Mon Sep 17 00:00:00 2001 From: EleanorMao Date: Mon, 1 May 2023 23:39:21 +0800 Subject: [PATCH] feat: history --- src/components/Steps/Steps.tsx | 53 ++++++-- src/components/Tag/Tag.tsx | 5 +- src/components/Typography/Paragraph.tsx | 20 ++- src/components/Typography/Title.tsx | 17 +++ src/components/Typography/index.ts | 5 +- src/icons/download.svg | 6 +- .../pages/activate/ActivateStarter.tsx | 8 +- .../activate/pages/activate/styled.tsx | 1 - .../activate/pages/creation/Creation.tsx | 6 +- .../activate/pages/creation/Done.tsx | 3 +- .../activate/pages/creation/Review.tsx | 3 +- .../activate/pages/creation/TesterInfo.tsx | 5 +- .../activate/pages/creation/styled.tsx | 38 ++---- .../activation/login/ForgetPasswordModal.tsx | 1 + src/pages/activation/login/Login.tsx | 2 +- src/pages/activation/login/styled.tsx | 1 - .../customerPortal/components/Container.tsx | 15 +++ .../customerPortal/components/EmptyBlock.tsx | 91 +++++++++++++ .../components/InProgressItem.tsx | 123 +++++++++++++++++ .../customerPortal/components/ResultItem.tsx | 127 ++++++++++++++++++ .../customerPortal/dashboard/Dashboard.tsx | 9 +- src/pages/customerPortal/history/History.tsx | 38 ++++++ src/pages/customerPortal/history/index.ts | 1 + src/pages/customerPortal/images/box.svg | 3 + src/pages/customerPortal/images/emptyBox.svg | 25 ++++ src/routes/AppRoutes.tsx | 2 + src/styles/reset.css | 4 + 27 files changed, 533 insertions(+), 79 deletions(-) create mode 100644 src/components/Typography/Title.tsx create mode 100644 src/pages/customerPortal/components/Container.tsx create mode 100644 src/pages/customerPortal/components/EmptyBlock.tsx create mode 100644 src/pages/customerPortal/components/InProgressItem.tsx create mode 100644 src/pages/customerPortal/components/ResultItem.tsx create mode 100644 src/pages/customerPortal/history/History.tsx create mode 100644 src/pages/customerPortal/history/index.ts create mode 100644 src/pages/customerPortal/images/box.svg create mode 100644 src/pages/customerPortal/images/emptyBox.svg diff --git a/src/components/Steps/Steps.tsx b/src/components/Steps/Steps.tsx index f243fa1..3bbe5eb 100644 --- a/src/components/Steps/Steps.tsx +++ b/src/components/Steps/Steps.tsx @@ -2,42 +2,67 @@ import React, { FC } from 'react' import { Steps as AntdSteps, StepsProps as AntdStepsProps } from 'antd' import { StepProps } from 'antd/es/steps' import styled from 'styled-components' -import {StepIcon} from './StepIcon' +import { StepIcon } from './StepIcon' +import { useBreakpoint } from '../Breakpoint' + export type StepsProps = Omit & { items: Omit[] + showBar?: boolean + barStyle?: React.CSSProperties } const StyledSteps = styled(AntdSteps)` &.ant-steps-label-vertical { - .ant-steps-item-content { - margin-top: 5px; - } + .ant-steps-item-content { + margin-top: 5px; + } - .ant-steps-item-tail { - top: 8px; - margin-inline-start: 53px; - padding: 4px 12px; - } + .ant-steps-item-tail { + top: 8px; + margin-inline-start: 53px; + padding: 4px 12px; + } } .ant-steps-item-title { - font-size: 12px; - line-height: 14px; + font-size: 12px; + line-height: 14px; } .ant-steps-item-finish > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title { - color: #8F9296; + color: #8F9296; + } +` +export const StyledBar = styled.div` + height: 5px; + margin-bottom: 9px; + position: relative; + + &:after { + content: ''; + position: absolute; + height: 5px; + width: 134px; + background: #000022; + border-radius: 5px; + top: 0; + left: 50%; + transform: translate3d(-50%, 0, 0); } ` -export const Steps: FC = ({ items, current = 0, ...props }) => { +export const Steps: FC = ({ items, current = 0, barStyle, showBar, ...props }) => { const formattedItems = items.map((item, index) => { return { ...item, icon: {index + 1} } }) + const isSmallScreen = useBreakpoint({ s: true, down: true }) return ( - + <> + + {isSmallScreen || showBar ? : null} + ) } diff --git a/src/components/Tag/Tag.tsx b/src/components/Tag/Tag.tsx index dbbfaae..da3a0f7 100644 --- a/src/components/Tag/Tag.tsx +++ b/src/components/Tag/Tag.tsx @@ -4,14 +4,17 @@ import {TinyText} from '../Typography' const StyledTag = styled.div` background: #FFAB83; - border-radius: 7px; + border-radius: 12px; text-align: center; height: 22px; line-height: 22px; + padding: 0 10px; + vertical-align: bottom; display: inline-block; > span { position: relative; + vertical-align: bottom; display: inline-block; line-height: 22px; } diff --git a/src/components/Typography/Paragraph.tsx b/src/components/Typography/Paragraph.tsx index f6349db..4872c90 100644 --- a/src/components/Typography/Paragraph.tsx +++ b/src/components/Typography/Paragraph.tsx @@ -3,15 +3,23 @@ import { Typography, TypographyProps } from 'antd' import styled from 'styled-components' type AdditionalParagraphProps = ComponentProps & { - level?: 1 | 2 + level?: 1 | 2; + primary?: boolean; } -const StyledParagraph2 = styled(Typography.Paragraph)` - font-size: 12px; +const StyledParagraph = styled(Typography.Paragraph)<{$primary?:boolean}>` + ${({ $primary, theme }) => $primary ? `color: ${theme.brandPrimary}` : ''} ` -export const Paragraph: FC = ({ level = 1, ...props }) => { + +const StyledParagraph2 = styled(Typography.Paragraph)<{ + $primary?:boolean +}>` + font-size: 12px; + ${({ $primary, theme }) => $primary ? `color: ${theme.brandPrimary}` : ''} +` +export const Paragraph: FC = ({ level = 1, primary, ...props }) => { if (level === 2) { - return + return } - return + return } diff --git a/src/components/Typography/Title.tsx b/src/components/Typography/Title.tsx new file mode 100644 index 0000000..1cb713c --- /dev/null +++ b/src/components/Typography/Title.tsx @@ -0,0 +1,17 @@ +import React, { FC, ComponentProps } from 'react' +import { Typography, TypographyProps } from 'antd' +import styled from 'styled-components' + +type AdditionalTitleProps = Omit, 'level'> & { + level?: 0 | 1 | 2 | 3 | 4 | 5 +} + +const StyledTitle0 = styled(Typography.Title)` + font-size: 36px!important; +` +export const Title: FC = ({ level = 1, ...props }) => { + if (level === 0) { + return + } + return +} diff --git a/src/components/Typography/index.ts b/src/components/Typography/index.ts index fa4df4e..6ad0a79 100644 --- a/src/components/Typography/index.ts +++ b/src/components/Typography/index.ts @@ -1,10 +1,7 @@ -import { Typography } from 'antd' - -const { Title } = Typography export * from './Paragraph' export * from './ButtonText' export * from './TinyText' export * from './Text' +export * from './Title' export * from './Link' -export { Title } diff --git a/src/icons/download.svg b/src/icons/download.svg index 32e6a05..62e1280 100644 --- a/src/icons/download.svg +++ b/src/icons/download.svg @@ -1,5 +1,3 @@ - - - - + + diff --git a/src/pages/activation/activate/pages/activate/ActivateStarter.tsx b/src/pages/activation/activate/pages/activate/ActivateStarter.tsx index 97cb021..ec859fc 100644 --- a/src/pages/activation/activate/pages/activate/ActivateStarter.tsx +++ b/src/pages/activation/activate/pages/activate/ActivateStarter.tsx @@ -18,7 +18,7 @@ import { ActivationStore } from 'stores/ActivationStore' import { Paths } from 'routes/Paths' export const ActivateStarter: FC = observer(() => { - const { logined } = AuthStore.instance() + const { logined, userName } = AuthStore.instance() const [activationStore] = useState(ActivationStore.instance()) const [showModal, setModal] = useState(false) const handleShowModal = () => { @@ -43,13 +43,13 @@ export const ActivateStarter: FC = observer(() => { {logined ? ( - - Hello, John + + Hello, {userName}
Welcome to your kit activation. ) : ( - + Welcome to your kit activation. )} diff --git a/src/pages/activation/activate/pages/activate/styled.tsx b/src/pages/activation/activate/pages/activate/styled.tsx index 8d8a07b..c3d7e6b 100644 --- a/src/pages/activation/activate/pages/activate/styled.tsx +++ b/src/pages/activation/activate/pages/activate/styled.tsx @@ -48,7 +48,6 @@ export const StyledMainContent = styled.div` export const StyledHeadline = styled(Title)<{$login: boolean}>` margin-bottom: ${({ $login }) => $login ? '0' : '37'}px !important; - font-size: 36px; ${props => props.theme.breakpoints.down('s')} { margin-bottom: 1px !important; diff --git a/src/pages/activation/activate/pages/creation/Creation.tsx b/src/pages/activation/activate/pages/creation/Creation.tsx index d23eace..b4251cb 100644 --- a/src/pages/activation/activate/pages/creation/Creation.tsx +++ b/src/pages/activation/activate/pages/creation/Creation.tsx @@ -1,6 +1,5 @@ import React, { FC } from 'react' import { - StyledBar, StyledContainer, StyledMain, StyledParagraph, StyledStepItemContainer, StyledSteps, } from './styled' import { observer } from 'mobx-react-lite' @@ -9,7 +8,6 @@ import { Account } from './Account' import { TesterInfo } from './TesterInfo' import { Done } from './Done' import { Review } from './Review' -import { Breakpoint } from '../../../../../components/Breakpoint' export const Creation: FC = observer(() => { const { code, step, stepItems } = ActivationStore.instance() @@ -18,10 +16,8 @@ export const Creation: FC = observer(() => { - - - {step !== 3 ? You are activating your iHealth CheckMeSafe Home Collection Kit Critical 2 (HIV & diff --git a/src/pages/activation/activate/pages/creation/Done.tsx b/src/pages/activation/activate/pages/creation/Done.tsx index df80403..a5309c1 100644 --- a/src/pages/activation/activate/pages/creation/Done.tsx +++ b/src/pages/activation/activate/pages/creation/Done.tsx @@ -38,7 +38,6 @@ const StyledImageWrapper = styled.div` } ` const StyledTitle = styled(Title)` - font-size: 36px; margin-bottom: 7px !important; ${props => props.theme.breakpoints.down('s')} { @@ -50,7 +49,7 @@ export const Done: FC = observer(() => { const { code } = store return ( <> - Your kit is activated! + Your kit is activated! You have just activated your iHealth CheckmeSafe Home Collection Kit Critical 2 - HIV & Syphilis ID {code} diff --git a/src/pages/activation/activate/pages/creation/Review.tsx b/src/pages/activation/activate/pages/creation/Review.tsx index 3e4fd48..26f8363 100644 --- a/src/pages/activation/activate/pages/creation/Review.tsx +++ b/src/pages/activation/activate/pages/creation/Review.tsx @@ -10,7 +10,6 @@ import Icon from '@ant-design/icons' import { ReactComponent as CaretLeft } from 'icons/caretLeft.svg' const StyledTitle = styled(Title)` - font-size: 36px; margin-bottom: 11px !important; ${props => props.theme.breakpoints.down('s')} { @@ -66,7 +65,7 @@ export const Review: FC = observer(() => { return ( <> - Hello, {userName} + Hello, {userName} Please review the tester’s information below. diff --git a/src/pages/activation/activate/pages/creation/TesterInfo.tsx b/src/pages/activation/activate/pages/creation/TesterInfo.tsx index 8413f20..70b5803 100644 --- a/src/pages/activation/activate/pages/creation/TesterInfo.tsx +++ b/src/pages/activation/activate/pages/creation/TesterInfo.tsx @@ -48,7 +48,6 @@ const StyledButtonWrapper = styled.div` ` const StyledFormTitle = styled(Title)` - font-size: 36px; margin-bottom: 11px !important; ${props => props.theme.breakpoints.down('s')} { @@ -127,7 +126,7 @@ export const TesterInfo: FC = observer(() => { ) : ( <> - Hello, {userName} + Hello, {userName} Please provide information of the person being tested. { Sex assigned at birth? - + We need to know your sex at birth as the lab requires this information to provide the correct reference range for your results. } diff --git a/src/pages/activation/activate/pages/creation/styled.tsx b/src/pages/activation/activate/pages/creation/styled.tsx index 5496c90..8abdb97 100644 --- a/src/pages/activation/activate/pages/creation/styled.tsx +++ b/src/pages/activation/activate/pages/creation/styled.tsx @@ -11,7 +11,7 @@ export const StyledContainer = styled.div` align-items: center; ${props => props.theme.breakpoints.down('s')} { - padding: 15px 0 58px 0; + padding: 15px 0 58px 0; } ` @@ -20,13 +20,13 @@ export const StyledMain = styled.div` max-width: 512px; ${props => props.theme.breakpoints.down('s')} { - max-width: 100%; + max-width: 100%; } ` export const StyledStepItemContainer = styled.div` ${props => props.theme.breakpoints.down('s')} { - padding: 0 16px 16px; + padding: 0 16px 16px; } ` @@ -34,36 +34,18 @@ export const StyledSteps = styled(Steps)` margin-bottom: 13px; ${props => props.theme.breakpoints.up('s')} { - margin-left: -37px; - width: calc(100% + 37px); - margin-bottom: 75px; + margin-left: -37px; + width: calc(100% + 37px); + margin-bottom: 75px; } ` -export const StyledBar = styled.div` - height: 5px; - margin-bottom: 22px; - position: relative; - - &:after { - content: ''; - position: absolute; - height: 5px; - width: 134px; - background: #000022; - border-radius: 5px; - top: 0; - left: 50%; - transform: translate3d(-50%, 0, 0); - } -` - export const StyledParagraph = styled(Paragraph)` margin-bottom: 40px !important; ${props => props.theme.breakpoints.down('s')} { - margin-bottom: 6px !important; + margin-bottom: 6px !important; } ` @@ -75,11 +57,11 @@ export const StyledAccountForm = styled(Form)` margin-top: 37px; ${props => props.theme.breakpoints.down('s')} { - margin-top: 32px; + margin-top: 32px; } .ant-form-item-required { - width: 100%; + width: 100%; } ` export const StyledHelp = styled.div` @@ -93,7 +75,7 @@ export const StyledSubmitButton = styled(Button)` width: 358px; ${props => props.theme.breakpoints.down('s')} { - width: 100%; + width: 100%; } ` diff --git a/src/pages/activation/login/ForgetPasswordModal.tsx b/src/pages/activation/login/ForgetPasswordModal.tsx index 5716a0a..0b80b48 100644 --- a/src/pages/activation/login/ForgetPasswordModal.tsx +++ b/src/pages/activation/login/ForgetPasswordModal.tsx @@ -53,6 +53,7 @@ const TitleCopies = [ 'Password Reset' ] +// TODO: replace email const DescriptionCopies = [ 'Enter your email address to reset your password.', 'A 6-digit code has been sent to John.smith@gmail.com', diff --git a/src/pages/activation/login/Login.tsx b/src/pages/activation/login/Login.tsx index 87ecb23..d4cb736 100644 --- a/src/pages/activation/login/Login.tsx +++ b/src/pages/activation/login/Login.tsx @@ -31,7 +31,7 @@ export const Login: FC = () => { - Welcome Back! + Welcome Back! Log in to continue
props.theme.breakpoints.down('s')} { margin-bottom: 4px !important; diff --git a/src/pages/customerPortal/components/Container.tsx b/src/pages/customerPortal/components/Container.tsx new file mode 100644 index 0000000..91d284c --- /dev/null +++ b/src/pages/customerPortal/components/Container.tsx @@ -0,0 +1,15 @@ +import React, { FC, PropsWithChildren } from 'react' +import styled from 'styled-components' + +const StyledDiv = styled.div` + padding: 56px 77px; + + ${props => props.theme.breakpoints.down('s')} { + padding: 43px 20px; + } +` +export const Container: FC = ({children}) => { + return ( + {children} + ) +} diff --git a/src/pages/customerPortal/components/EmptyBlock.tsx b/src/pages/customerPortal/components/EmptyBlock.tsx new file mode 100644 index 0000000..cb8a08d --- /dev/null +++ b/src/pages/customerPortal/components/EmptyBlock.tsx @@ -0,0 +1,91 @@ +import React, { FC } from 'react' +import styled from 'styled-components' +import { ExternalPaths, Paths } from 'routes/Paths' +import { Button } from 'components/Button' +import { Paragraph } from 'components/Typography' +import { ReactComponent as EmptySvg } from '../images/emptyBox.svg' + +const StyledCard = styled.div` + width: 100%; + background: #FFFFFF; + border-radius: 7px; + box-shadow: 2px 1px 4px 1px rgba(0, 0, 0, 0.1); + display: flex; + flex-direction: row; + padding: 28px 32px; + + ${props => props.theme.breakpoints.down('s')} { + padding: 0 16px 30px 16px; + flex-direction: column; + } +` +const StyledImageWrapper = styled.div` + > svg { + width: 108px; + height: 89px; + } + + ${props => props.theme.breakpoints.down('s')} { + text-align: center; + + > svg { + width: 113px; + height: 145px; + } + } + +` +const StyledInfo = styled.div` + display: flex; + flex-direction: column; + box-sizing: border-box; + justify-content: center; + + ${props => props.theme.breakpoints.down('s')} { + margin-top: -20px; + } + + ${props => props.theme.breakpoints.up('s')} { + width: 56%; + max-width: 566px; + padding: 0 20px; + } +` +const StyledParagraph = styled(Paragraph)` + ${props => props.theme.breakpoints.up('s')} { + margin-bottom: 10px !important; + } +` +const StyledButtonGroup = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + gap: 15px; + + ${props => props.theme.breakpoints.down('s')} { + align-items: center; + margin-top: 20px; + } +` +const StyledButton = styled(Button)` + width: 152px; + height: 28px; + font-size: 12px; + line-height: 28px; +` +export const EmptyBlock: FC = () => { + return ( + + + + Take the next step on your health and wellness journey! + Activate your iHealth CheckMeSafe kit, or shop our kits to get started. + + + Activate Kit + Shop + Products + + + ) +} diff --git a/src/pages/customerPortal/components/InProgressItem.tsx b/src/pages/customerPortal/components/InProgressItem.tsx new file mode 100644 index 0000000..429b1c3 --- /dev/null +++ b/src/pages/customerPortal/components/InProgressItem.tsx @@ -0,0 +1,123 @@ +import React, { FC } from 'react' +import styled from 'styled-components' +import { Paragraph } from 'components/Typography' +import { Steps } from 'components/Steps' +import { ExternalPaths } from 'routes/Paths' +import { ReactComponent as BoxSvg } from '../images/box.svg' +import { useBreakpoint } from 'components/Breakpoint' + +const StyledCard = styled.div` + background: #FFFFFF; + box-shadow: 2px 1px 4px 1px rgba(0, 0, 0, 0.1); + border-radius: 7px; + padding: 18px 13px; + margin-bottom: 31px; + + ${props => props.theme.breakpoints.down('s')} { + padding: 17px 0; + } +` + +const StyledTitle = styled(Paragraph)` + padding: 0 15px 12px; +` +const StyledVideo = styled.video` + width: 100%; + height: 163px; + margin-top: 12px; + margin-bottom: 8px; + background: #000000; + + ${props => props.theme.breakpoints.up('s')} { + margin-bottom: 15px; + } +` +const StyledVideoInfo = styled(Paragraph)` + font-size: 14px; + text-align: center; +` + +const StyledStep2Content = styled.div` + padding: 13px 28px 24px 18px; + + + ${props => props.theme.breakpoints.down('s')} { + height: 153px; + padding: 0 28px 0 18px; + display: flex; + flex-direction: column; + } + +` + +const StyledStep2SvgWrapper = styled.div` + display: flex; + align-items: center; + justify-content: center; + + ${props => props.theme.breakpoints.down('s')} { + flex: auto; + } + + ${props => props.theme.breakpoints.up('s')} { + height: 52px; + flex: 0 0 52px; + padding-bottom: 16px; + } +` + +const StyledStep2Info = styled.div` + flex: 0 0 auto; +` + +export interface InProgressResultItemProps { + step: number + error?: boolean +} + +export const InProgressItem: FC = ({ step, error }) => { + const isSmallScreen = useBreakpoint({ s: true, down: true }) + return ( + + Critical 2 (Kit ID: xxxxxx) + + {step === 0 ? ( + <> + + Watch video on how to collect your sample + + ) : null} + {step === 1 ? ( + + + + + {error ? ( + + ACTION REQUIRED + + There was a problem processing your sample. Please check your email for the details and instructions on + how to proceed with the next step. + ) : ( + + We are analyzing your sample, the result will be ready soon. + We will contact you if there are problems processing + your sample. + + )} + + ) : null} + + ) +} diff --git a/src/pages/customerPortal/components/ResultItem.tsx b/src/pages/customerPortal/components/ResultItem.tsx new file mode 100644 index 0000000..640c1cb --- /dev/null +++ b/src/pages/customerPortal/components/ResultItem.tsx @@ -0,0 +1,127 @@ +import React, { FC } from 'react' +import styled from 'styled-components' +import Icon from '@ant-design/icons' +import { Tag } from 'components/Tag' +import { Paragraph } from 'components/Typography' +import { Button } from 'components/Button' +import { ReactComponent as HeartSvg } from 'icons/heart.svg' +import { ReactComponent as DownloadSvg } from 'icons/download.svg' + +const StyledContent = styled.div` + padding: 4px 14px 9px; + background: #FFFFFF; + box-shadow: 2px 1px 4px 1px rgba(0, 0, 0, 0.1); + border-radius: 7px; + margin-bottom: 22px; + + ${props => props.theme.breakpoints.down('s')} { + padding-top: 16px; + margin-bottom: 25px; + padding-bottom: 10px; + } +` +const StyledItem = styled.div` + margin-bottom: 10px; + margin-left: 1px; + margin-right: 1px; + background: #F5F5F5; + border: 0.5px solid #FF5200; + border-radius: 7px; + padding: 16px; + display: flex; + flex-direction: row; + + ${props => props.theme.breakpoints.down('s')} { + padding-left: 14px; + padding-right: 7px; + } +` + +const StyledName = styled.div` + flex: auto; +` +const StyledTagContent = styled.div` + padding-left: 16px; + flex: 0 0 auto; + + ${props => props.theme.breakpoints.down('s')} { + padding-left: 8px; + + } +` + +const StyledTitleContent = styled.div` + display: flex; + flex-direction: row; + padding-bottom: 8px; + + ${props => props.theme.breakpoints.down('s')} { + padding-bottom: 13px; + } +` +const StyledTitleMain = styled.div` + flex: auto; + display: flex; + flex-direction: row; +` +const StyledIcon = styled(Icon)` + width: 16px; + height: 14px; + padding-top: 5px; + display: inline-block; + + ${props => props.theme.breakpoints.down('s')} { + padding-top: 6px; + } +` +const StyledTitleInfo = styled.div` + padding-left: 5px; + flex: 1; +` +const StyledParagraph = styled(Paragraph)`` +const StyledDownloadButton = styled(Button)` + height: 25px; + line-height: 25px; + font-weight: 400; + font-size: 12px; + width: 108px; + border-radius: 8px; +` +const StyledDownloadContent = styled.div` + padding-left: 18px; + padding-top: 11px; + flex: 0 0 auto; + + ${props => props.theme.breakpoints.down('s')} { + padding-top: 15px; + } +` + +export interface ResultItem { +} + +export const ResultItem: FC = () => { + return ( + + + + + + Critical 2 (Kit ID: xxxxxx) + Report Date: 05/13/2023 + + + + + Download + + + + + + Infection Name + Not Detected + + + ) +} diff --git a/src/pages/customerPortal/dashboard/Dashboard.tsx b/src/pages/customerPortal/dashboard/Dashboard.tsx index 8398a03..923e77e 100644 --- a/src/pages/customerPortal/dashboard/Dashboard.tsx +++ b/src/pages/customerPortal/dashboard/Dashboard.tsx @@ -1,9 +1,12 @@ import React from 'react' +import { EmptyBlock } from '../components/EmptyBlock' +import { Container } from '../components/Container' +import { InProgressItem } from '../components/InProgressItem' export const Dashboard = () => { return ( -
- Hello World -
+ + + ) } diff --git a/src/pages/customerPortal/history/History.tsx b/src/pages/customerPortal/history/History.tsx new file mode 100644 index 0000000..4e521a2 --- /dev/null +++ b/src/pages/customerPortal/history/History.tsx @@ -0,0 +1,38 @@ +import React, { useState } from 'react' +import { EmptyBlock } from '../components/EmptyBlock' +import { Container } from '../components/Container' +import { Paragraph, Title } from 'components/Typography' +import styled from 'styled-components' +import { ResultItem } from '../components/ResultItem' +import { Breakpoint } from '../../../components/Breakpoint' + +const StyledMain = styled.div` + padding-top: 43px; + + ${props => props.theme.breakpoints.down('s')} { + padding-top: 23px; + } +` +export const History = () => { + const [testLength] = useState(2) + const [infectionNum] = useState(3) + return ( + + + Test History + + + Test History + + {testLength === 0 ? 'You do not have any past tests.' : `You have completed ${testLength} health tests, covering ${infectionNum} different infections.`} + + {testLength === 0 ? : ( + <> + + + + )} + + + ) +} diff --git a/src/pages/customerPortal/history/index.ts b/src/pages/customerPortal/history/index.ts new file mode 100644 index 0000000..b3ba42c --- /dev/null +++ b/src/pages/customerPortal/history/index.ts @@ -0,0 +1 @@ +export * from './History' diff --git a/src/pages/customerPortal/images/box.svg b/src/pages/customerPortal/images/box.svg new file mode 100644 index 0000000..7d815a3 --- /dev/null +++ b/src/pages/customerPortal/images/box.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/pages/customerPortal/images/emptyBox.svg b/src/pages/customerPortal/images/emptyBox.svg new file mode 100644 index 0000000..89dae00 --- /dev/null +++ b/src/pages/customerPortal/images/emptyBox.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/routes/AppRoutes.tsx b/src/routes/AppRoutes.tsx index 03053ff..b1c954f 100644 --- a/src/routes/AppRoutes.tsx +++ b/src/routes/AppRoutes.tsx @@ -6,6 +6,7 @@ import { Home } from 'pages/activation/home' import { Login } from 'pages/activation/login' import { Activate } from 'pages/activation/activate' import { Dashboard } from 'pages/customerPortal/dashboard' +import { History } from 'pages/customerPortal/history' import { RequireAuth } from './RequireAuth' export const AppRoutes: FC = () => { @@ -19,6 +20,7 @@ export const AppRoutes: FC = () => { }> } /> } /> + } /> ) diff --git a/src/styles/reset.css b/src/styles/reset.css index befd084..8b96678 100644 --- a/src/styles/reset.css +++ b/src/styles/reset.css @@ -30,6 +30,10 @@ html, body { color: #1E1D1F; } +.ant-typography i { + font-weight: 300; +} + .ant-modal .ant-modal-close { top: 9px !important; right: 9px !important;