feat: dashboard

src/components/Menu/Menu.tsx

@@ -4,13 +4,14 @@ import {
 	StyledActivateButton, StyledBackground, StyledCloseIcon, StyledCopyright, StyledExtraContent,
 	StyledIcon,
 	StyledMenuContainer,
-	StyledMenuItem,
+	StyledMenuItem, StyledNextIcon,
 	StyledPlainMenuContainer, StyledPlainMenuItem
 } from './styled'
 import { Paths } from 'routes/Paths'
 import { menuConfig } from 'routes/menuConfig'
 import { Text } from '../Typography'
 import { ReactComponent as CloseSvg } from 'icons/close.svg'
+import { ReactComponent as CaretRightSvg } from 'icons/caretRight.svg'
 
 export interface MenuProps {
 	onClose: () => void
@@ -47,6 +48,7 @@ export const Menu: FC<MenuProps> = ({ onLogout, onClose }) => {
 							rel={item.target === '_blank' ? "noopener noreferrer" : undefined}>
 							<StyledIcon component={item.icon} />
 							{item.title}
+							<StyledNextIcon component={CaretRightSvg} />
 						</StyledPlainMenuItem>
 					))}
 					<StyledExtraContent>

src/components/Menu/styled.ts

@@ -105,3 +105,12 @@ export const StyledPlainMenuItem = styled(NavLink)`
     color: ${props => props.theme.brandPrimary};
   }
 `
+
+export const StyledNextIcon = styled(Icon)`
+  width: 9px;
+  height: 14px;
+  position: absolute;
+  right: 24px;
+  top: 50%;
+  transform: translate3d(0, -50%, 0);
+`

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<AntdStepsProps, 'labelPlacement' | 'size' | 'status' | 'type' | 'items'> & {
 	items: Omit<StepProps, 'icon' | 'description'>[]
+	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<StepsProps> = ({ items, current = 0, ...props }) => {
+export const Steps: FC<StepsProps> = ({ items, current = 0, barStyle, showBar, ...props }) => {
 	const formattedItems = items.map((item, index) => {
 		return {
 			...item,
 			icon: <StepIcon active={index <= current}>{index + 1}</StepIcon>
 		}
 	})
+	const isSmallScreen = useBreakpoint({ s: true, down: true })
 	return (
-		<StyledSteps responsive={false} labelPlacement="vertical" {...props} current={current} items={formattedItems} />
+		<>
+			<StyledSteps responsive={false} labelPlacement="vertical" {...props} current={current} items={formattedItems} />
+			{isSmallScreen || showBar ? <StyledBar style={barStyle} /> : null}
+		</>
 	)
 }

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;
   }

src/components/Typography/Paragraph.tsx

@@ -3,15 +3,23 @@ import { Typography, TypographyProps } from 'antd'
 import styled from 'styled-components'
 
 type AdditionalParagraphProps = ComponentProps<TypographyProps['Paragraph']> & {
-	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<AdditionalParagraphProps> = ({ level = 1, ...props }) => {
+
+const StyledParagraph2 = styled(Typography.Paragraph)<{
+	$primary?:boolean
+}>`
+  font-size: 12px;
+  ${({ $primary, theme }) => $primary ? `color: ${theme.brandPrimary}` : ''}
+`
+export const Paragraph: FC<AdditionalParagraphProps> = ({ level = 1, primary, ...props }) => {
 	if (level === 2) {
-		return <StyledParagraph2 {...props} />
+		return <StyledParagraph2 {...props} $primary={primary} />
 	}
-	return <Typography.Paragraph {...props} />
+	return <StyledParagraph {...props} $primary={primary} />
 }

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<ComponentProps<TypographyProps['Title']>, 'level'> & {
+	level?: 0 | 1 | 2 | 3 | 4 | 5
+}
+
+const StyledTitle0 = styled(Typography.Title)`
+  font-size: 36px!important;
+`
+export const Title: FC<AdditionalTitleProps> = ({ level = 1, ...props }) => {
+	if (level === 0) {
+		return <StyledTitle0 {...props} />
+	}
+	return <Typography.Title level={level} {...props} />
+}

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 }
 

src/icons/caretRight.svg

@@ -0,0 +1,3 @@
+<svg width="9" height="14" viewBox="0 0 9 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.05806 0.308058C1.30214 0.0639806 1.69786 0.0639806 1.94194 0.308058L8.19194 6.55806C8.43602 6.80214 8.43602 7.19786 8.19194 7.44194L1.94194 13.6919C1.69786 13.936 1.30214 13.936 1.05806 13.6919C0.813981 13.4479 0.813981 13.0521 1.05806 12.8081L6.86612 7L1.05806 1.19194C0.813981 0.947864 0.813981 0.552136 1.05806 0.308058Z" fill="currentColor"/>
+</svg>

src/icons/download.svg

@@ -1,5 +1,3 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0429 13.0429C10.4334 12.6524 11.0666 12.6524 11.4571 13.0429L16 17.5858L20.5429 13.0429C20.9334 12.6524 21.5666 12.6524 21.9571 13.0429C22.3476 13.4334 22.3476 14.0666 21.9571 14.4571L16.7071 19.7071C16.3166 20.0976 15.6834 20.0976 15.2929 19.7071L10.0429 14.4571C9.65237 14.0666 9.65237 13.4334 10.0429 13.0429Z" fill="#000022"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M16 4C16.5523 4 17 4.44772 17 5V19C17 19.5523 16.5523 20 16 20C15.4477 20 15 19.5523 15 19V5C15 4.44772 15.4477 4 16 4Z" fill="#000022"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M5 18C5.55228 18 6 18.4477 6 19V26H26V19C26 18.4477 26.4477 18 27 18C27.5523 18 28 18.4477 28 19V26C28 26.5304 27.7893 27.0391 27.4142 27.4142C27.0391 27.7893 26.5304 28 26 28H6C5.46957 28 4.96086 27.7893 4.58579 27.4142C4.21071 27.0391 4 26.5304 4 26V19C4 18.4477 4.44772 18 5 18Z" fill="#000022"/>
+<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.7813 7.99157V11.4717C12.7813 11.7354 12.6775 11.9883 12.4929 12.1748C12.3083 12.3612 12.0579 12.466 11.7969 12.466H1.95313C1.69205 12.466 1.44167 12.3612 1.25707 12.1748C1.07246 11.9883 0.96875 11.7354 0.96875 11.4717V7.99157C0.96875 7.85971 1.02061 7.73326 1.11291 7.64002C1.20521 7.54679 1.3304 7.49441 1.46094 7.49441C1.59147 7.49441 1.71666 7.54679 1.80897 7.64002C1.90127 7.73326 1.95313 7.85971 1.95313 7.99157V11.4717H11.7969V7.99157C11.7969 7.85971 11.8487 7.73326 11.941 7.64002C12.0333 7.54679 12.1585 7.49441 12.2891 7.49441C12.4196 7.49441 12.5448 7.54679 12.6371 7.64002C12.7294 7.73326 12.7813 7.85971 12.7813 7.99157ZM6.52678 8.34331C6.57249 8.38953 6.62677 8.4262 6.68652 8.45122C6.74627 8.47624 6.81032 8.48912 6.875 8.48912C6.93968 8.48912 7.00373 8.47624 7.06348 8.45122C7.12323 8.4262 7.17751 8.38953 7.22322 8.34331L9.68416 5.85751C9.72989 5.81132 9.76616 5.75648 9.79091 5.69613C9.81566 5.63578 9.8284 5.57109 9.8284 5.50577C9.8284 5.44045 9.81566 5.37576 9.79091 5.31541C9.76616 5.25506 9.72989 5.20022 9.68416 5.15403C9.63843 5.10784 9.58414 5.0712 9.52439 5.0462C9.46465 5.0212 9.40061 5.00834 9.33594 5.00834C9.27127 5.00834 9.20723 5.0212 9.14748 5.0462C9.08773 5.0712 9.03344 5.10784 8.98771 5.15403L7.36719 6.79155V1.03134C7.36719 0.899484 7.31533 0.77303 7.22303 0.679794C7.13073 0.586559 7.00554 0.53418 6.875 0.53418C6.74446 0.53418 6.61927 0.586559 6.52697 0.679794C6.43467 0.77303 6.38281 0.899484 6.38281 1.03134V6.79155L4.76229 5.15403C4.66993 5.06074 4.54467 5.00834 4.41406 5.00834C4.28345 5.00834 4.15819 5.06074 4.06584 5.15403C3.97349 5.24732 3.9216 5.37384 3.9216 5.50577C3.9216 5.6377 3.97349 5.76422 4.06584 5.85751L6.52678 8.34331Z" fill="white"/>
 </svg>

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(() => {
 			<StyledMainContent>
 				<StyledContent>
 					{logined ? (
-						<StyledHeadline level={1} $login={logined}>
-							Hello, <Text inherit primary>John</Text>
+						<StyledHeadline level={0} $login={logined}>
+							Hello, <Text inherit primary>{userName}</Text>
 							<br />
 							Welcome to your kit activation.
 						</StyledHeadline>
 					) : (
-						<StyledHeadline level={1} $login={logined}>
+						<StyledHeadline level={0} $login={logined}>
 							Welcome to your kit <Text inherit primary>activation</Text>.
 						</StyledHeadline>
 					)}

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;

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(() => {
 			<StyledMain>
 				<StyledSteps
 					current={step}
+					barStyle={{ marginBottom: 22 }}
 					items={stepItems} />
-				<Breakpoint s down>
-					<StyledBar />
-				</Breakpoint>
 				<StyledStepItemContainer>
 					{step !== 3 ?
 						<StyledParagraph>You are activating your iHealth CheckMeSafe Home Collection Kit Critical 2 (HIV &

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 (
 		<>
-			<StyledTitle>Your kit is <Text primary inherit>activated!</Text></StyledTitle>
+			<StyledTitle level={0}>Your kit is <Text primary inherit>activated!</Text></StyledTitle>
 			<Title level={2}>You have just activated your iHealth CheckmeSafe Home Collection Kit Critical 2 - HIV & Syphilis
 				ID {code}</Title>
 			<StyledImageWrapper>

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 (
 		<>
-			<StyledTitle>Hello, <Text primary inherit>{userName}</Text></StyledTitle>
+			<StyledTitle level={0}>Hello, <Text primary inherit>{userName}</Text></StyledTitle>
 			<StyledParagraph style={{ marginBottom: 30 }}>Please review the tester’s information below.</StyledParagraph>
 			<Row gutter={22}>
 				<Col flex="none">

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(() => {
 				</>
 			) : (
 				<>
-					<StyledFormTitle>Hello, <Text primary inherit>{userName}</Text></StyledFormTitle>
+					<StyledFormTitle level={0}>Hello, <Text primary inherit>{userName}</Text></StyledFormTitle>
 					<Paragraph>Please provide information of <b>the person being tested</b>.</Paragraph>
 					<StyledForm layout="vertical"
 						onFinish={handleFinish} form={form}
@@ -161,7 +160,7 @@ export const TesterInfo: FC = observer(() => {
 						</Row>
 						<Form.Item name="gender" label={<div>
 							<Paragraph>Sex assigned at birth?</Paragraph>
-							<Paragraph italic style={{ fontWeight: 400, fontFamily: 'Roboto' }}>
+							<Paragraph italic style={{ fontFamily: 'Roboto' }}>
 								We need to know your sex at birth as the lab requires this information to provide the correct reference
 								range for your results.</Paragraph>
 						</div>}

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%;
 
   }
 `

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',

src/pages/activation/login/Login.tsx

@@ -31,7 +31,7 @@ export const Login: FC = () => {
 		<StyledContainer>
 			<StyledImageWrapper />
 			<StyledMainContent>
-				<StyledHeadline level={1}>Welcome Back!</StyledHeadline>
+				<StyledHeadline level={0}>Welcome Back!</StyledHeadline>
 				<StyledTitle level={3}>Log in to continue</StyledTitle>
 				<StyledContent>
 					<Form

src/pages/activation/login/styled.tsx

@@ -44,7 +44,6 @@ export const StyledMainContent = styled.div`
 
 export const StyledHeadline = styled(Title)`
   margin-bottom: 10px !important;
-  font-size: 36px;
 
   ${props => props.theme.breakpoints.down('s')} {
 	margin-bottom: 4px !important;

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<PropsWithChildren> = ({children}) => {
+	return (
+		<StyledDiv>{children}</StyledDiv>
+	)
+}

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<{ className?: string; style?: React.CSSProperties }> = (props) => {
+	return (
+		<StyledCard {...props}>
+			<StyledImageWrapper><EmptySvg /></StyledImageWrapper>
+			<StyledInfo>
+				<StyledParagraph>Take the next step on your health and wellness journey!</StyledParagraph>
+				<Paragraph level={2}>Activate your iHealth CheckMeSafe kit, or shop our kits to get started.</Paragraph>
+			</StyledInfo>
+			<StyledButtonGroup>
+				<StyledButton href={Paths.Activate}>Activate Kit</StyledButton>
+				<StyledButton type="default" href={ExternalPaths.Shop} target="_blank" rel="noopener noreferrer">Shop
+					Products</StyledButton>
+			</StyledButtonGroup>
+		</StyledCard>
+	)
+}

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<InProgressResultItemProps> = ({ step, error }) => {
+	const isSmallScreen = useBreakpoint({ s: true, down: true })
+	return (
+		<StyledCard>
+			<StyledTitle>Critical 2 (Kit ID: xxxxxx)</StyledTitle>
+			<Steps
+				current={step}
+				showBar
+				barStyle={{ marginTop: 12 }}
+				items={[{
+					title: 'Activated'
+				}, {
+					title: 'Sample Received'
+				}, {
+					title: 'Results'
+				}]}
+			/>
+			{step === 0 ? (
+				<>
+					<StyledVideo controls src={ExternalPaths.GuideVideo} />
+					<StyledVideoInfo>Watch video on how to collect your sample</StyledVideoInfo>
+				</>
+			) : null}
+			{step === 1 ? (
+				<StyledStep2Content>
+					<StyledStep2SvgWrapper>
+						<BoxSvg />
+					</StyledStep2SvgWrapper>
+					{error ? (
+						<StyledStep2Info>
+							<Paragraph primary strong level={2}>ACTION REQUIRED</Paragraph>
+							<Paragraph level={isSmallScreen ? 2 : 1}>
+								There was a problem processing your sample. Please check your email for the details and instructions on
+								how to proceed with the next step.</Paragraph>
+						</StyledStep2Info>) : (
+						<StyledStep2Info>
+							<Paragraph>We are analyzing your sample, the result will be ready soon.</Paragraph>
+							<Paragraph italic>We will contact you if there are problems processing
+								your sample.</Paragraph>
+						</StyledStep2Info>
+					)}
+				</StyledStep2Content>
+			) : null}
+		</StyledCard>
+	)
+}

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<ResultItem> = () => {
+	return (
+		<StyledContent>
+			<StyledTitleContent>
+				<StyledTitleMain>
+					<StyledIcon component={HeartSvg} />
+					<StyledTitleInfo>
+						<StyledParagraph>Critical 2 (Kit ID: xxxxxx)</StyledParagraph>
+						<StyledParagraph level={2}>Report Date: 05/13/2023</StyledParagraph>
+					</StyledTitleInfo>
+				</StyledTitleMain>
+				<StyledDownloadContent>
+					<StyledDownloadButton>
+						Download
+						<Icon component={DownloadSvg} />
+					</StyledDownloadButton>
+				</StyledDownloadContent>
+			</StyledTitleContent>
+			<StyledItem>
+				<StyledName>Infection Name</StyledName>
+				<StyledTagContent><Tag>Not Detected</Tag></StyledTagContent>
+			</StyledItem>
+		</StyledContent>
+	)
+}

src/pages/customerPortal/dashboard/Dashboard.tsx

@@ -1,9 +1,82 @@
-import React from 'react'
+import React, { useState } from 'react'
+import { EmptyBlock } from '../components/EmptyBlock'
+import { Container } from '../components/Container'
+import { InProgressItem } from '../components/InProgressItem'
+import styled from 'styled-components'
+import { Breakpoint } from '../../../components/Breakpoint'
+import { Title } from '../../../components/Typography'
+import { observer } from 'mobx-react-lite'
+import { AuthStore } from '../../../stores/AuthStore'
+import { ResultItem } from '../components/ResultItem'
 
-export const Dashboard = () => {
+const StyledMain = styled.div`
+  padding-top: 50px;
+
+  ${props => props.theme.breakpoints.down('s')} {
+    padding-top: 32px;
+  }
+`
+
+const StyledItemWrap = styled.div`
+  display: flex;
+  flex-direction: row;
+
+  ${props => props.theme.breakpoints.down('s')} {
+    flex-direction: column;
+  }
+`
+const StyledProgress = styled.div`
+  ${props => props.theme.breakpoints.up('s')} {
+    width: 351px;
+    padding-right: 51px;
+  }
+`
+const StyledRecent = styled.div`
+  flex: auto;
+`
+const StyledSubTitle = styled(Title)`
+  margin-bottom: 14px;
+
+  ${props => props.theme.breakpoints.down('s')} {
+    padding-left: 15px;
+  }
+`
+const StyledEmptyBlock = styled(EmptyBlock)`
+  margin-bottom: 32px`
+export const Dashboard = observer(() => {
+	const [{ userInfo }] = useState(AuthStore.instance())
+	const [inProgress, setInProgress] = useState([])
+	const [history, setHistory] = useState(['1'])
 	return (
-		<div>
-			Hello World
-		</div>
+		<Container>
+			<Breakpoint s up>
+				<Title level={0}>Hello, {userInfo?.firstName}!</Title>
+			</Breakpoint>
+			<Breakpoint s down>
+				<Title level={2} style={{ marginBottom: 10 }}>Hello, {userInfo?.firstName}!</Title>
+			</Breakpoint>
+			<StyledMain>
+				{!inProgress.length && <StyledEmptyBlock />}
+				<StyledItemWrap>
+					{!!inProgress.length &&
+						(
+							<StyledProgress>
+								<StyledSubTitle level={3}>Tests in Progress</StyledSubTitle>
+								<InProgressItem step={0} />
+								<InProgressItem step={1} />
+								<InProgressItem step={1} error />
+							</StyledProgress>
+						)}
+					{!!history.length && (
+						<StyledRecent>
+							<StyledSubTitle level={3}>Recent Test Results</StyledSubTitle>
+							<ResultItem />
+							<ResultItem />
+							<ResultItem />
+						</StyledRecent>
+					)}
+				</StyledItemWrap>
+			</StyledMain>
+		</Container>
 	)
-}
+})

src/pages/customerPortal/history/History.tsx

@@ -0,0 +1,38 @@
+import React, { useState } from 'react'
+import styled from 'styled-components'
+import { Breakpoint } from 'components/Breakpoint'
+import { Paragraph, Title } from 'components/Typography'
+import { EmptyBlock } from '../components/EmptyBlock'
+import { Container } from '../components/Container'
+import { ResultItem } from '../components/ResultItem'
+
+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 (
+		<Container>
+			<Breakpoint s up>
+				<Title level={0}>Test History</Title>
+			</Breakpoint>
+			<Breakpoint s down>
+				<Title level={3} style={{ marginBottom: 10 }}>Test History</Title>
+			</Breakpoint>
+			<Paragraph>{testLength === 0 ? 'You do not have any past tests.' : `You have completed ${testLength} health tests, covering ${infectionNum} different infections.`} </Paragraph>
+			<StyledMain>
+				{testLength === 0 ? <EmptyBlock /> : (
+					<>
+						<ResultItem />
+						<ResultItem />
+					</>
+				)}
+			</StyledMain>
+		</Container>
+	)
+}

src/pages/customerPortal/history/index.ts

@@ -0,0 +1 @@
+export * from './History'

src/pages/customerPortal/images/box.svg

@@ -0,0 +1,3 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M52.425 15.504L31.8 4.21885C31.2489 3.91436 30.6296 3.75464 30 3.75464C29.3704 3.75464 28.7511 3.91436 28.2 4.21885L7.575 15.5087C6.98599 15.831 6.4943 16.3055 6.15129 16.8827C5.80828 17.4598 5.62652 18.1185 5.625 18.7899V41.2056C5.62652 41.877 5.80828 42.5357 6.15129 43.1129C6.4943 43.69 6.98599 44.1645 7.575 44.4868L28.2 55.7767C28.7511 56.0812 29.3704 56.2409 30 56.2409C30.6296 56.2409 31.2489 56.0812 31.8 55.7767L52.425 44.4868C53.014 44.1645 53.5057 43.69 53.8487 43.1129C54.1917 42.5357 54.3735 41.877 54.375 41.2056V18.7923C54.3747 18.1197 54.1936 17.4595 53.8505 16.881C53.5074 16.3025 53.0151 15.8269 52.425 15.504ZM30 7.5001L48.8297 17.8126L41.8523 21.6329L23.0203 11.3204L30 7.5001ZM30 28.1251L11.1703 17.8126L19.1156 13.4626L37.9453 23.7751L30 28.1251ZM9.375 21.0939L28.125 31.3548V51.4618L9.375 41.2079V21.0939ZM50.625 41.1985L31.875 51.4618V31.3642L39.375 27.2603V35.6251C39.375 36.1224 39.5725 36.5993 39.9242 36.9509C40.2758 37.3026 40.7527 37.5001 41.25 37.5001C41.7473 37.5001 42.2242 37.3026 42.5758 36.9509C42.9275 36.5993 43.125 36.1224 43.125 35.6251V25.2071L50.625 21.0939V41.1962V41.1985Z" fill="#FF5200"/>
+</svg>

src/pages/customerPortal/images/emptyBox.svg

@@ -0,0 +1,25 @@
+<svg width="113" height="145" viewBox="0 0 113 145" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M58.0656 112.717C87.9163 112.717 112.115 106.133 112.115 98.0118C112.115 89.8904 87.9163 83.3066 58.0656 83.3066C28.215 83.3066 4.01624 89.8904 4.01624 98.0118C4.01624 106.133 28.215 112.717 58.0656 112.717Z" fill="url(#paint0_radial_516_9305)"/>
+<path d="M18.788 51.4341C18.9241 50.8869 18.788 50.3397 18.4476 49.9293L10.6874 40.7643C9.80243 39.6699 8.03255 40.1487 7.69219 41.5166C7.55604 42.0638 7.69219 42.611 8.03255 43.0213L15.7928 52.118C16.6777 53.2124 18.4476 52.802 18.788 51.4341Z" fill="#D9D9D9"/>
+<path d="M71.3868 44.5183C72.1356 44.7235 72.8844 44.4499 73.3609 43.8344L86.2947 26.9405C87.1115 25.9145 86.5669 24.4098 85.3416 24.0679C84.5928 23.8627 83.844 24.1362 83.3675 24.7518L70.4338 41.6457C69.5489 42.74 70.0934 44.2447 71.3868 44.5183Z" fill="#D9D9D9"/>
+<path d="M44.4276 43.5603C44.7679 42.9448 44.7679 42.2608 44.3595 41.7136L32.2426 25.025C31.4939 23.999 29.9282 24.0674 29.2475 25.1618C28.9071 25.7773 28.9071 26.4613 29.3155 27.0084L41.4324 43.6287C42.1812 44.6547 43.7469 44.5863 44.4276 43.5603Z" fill="#D9D9D9"/>
+<path d="M92.7825 55.4011C93.3271 55.4695 93.8717 55.2643 94.212 54.7855L101.972 45.21C102.789 44.2525 102.177 42.7478 100.951 42.611C100.407 42.5426 99.862 42.7478 99.5217 43.2265L91.7614 52.802C90.9446 53.7596 91.4892 55.2643 92.7825 55.4011Z" fill="#D9D9D9"/>
+<path d="M32.3344 60.2571C42.6814 66.7547 43.4301 74.2099 30.6326 77.6297L10.6874 66.0708L32.3344 60.2571Z" fill="#54565A"/>
+<path d="M58.8826 94.0448L100.883 82.7594L97.2073 80.6391C81.5506 71.5425 52.8241 70.6533 26.9567 75.5778L58.8826 94.0448Z" fill="#54565A"/>
+<path d="M32.1982 60.3254C40.3669 65.3868 41.1838 72.842 28.6585 76.5353L10.6874 66.0707L32.1982 60.3254Z" fill="#FF4D00"/>
+<path d="M58.8825 94.0449L100.951 82.6911L99.3175 81.7336C83.6609 72.6369 52.5518 71.3373 28.6584 76.5354L58.8825 94.0449Z" fill="#FF4D00"/>
+<path d="M45.2001 63.198L38.0525 59.0942L40.6392 58.6155C41.0477 58.5471 41.5922 58.6155 41.8645 58.7523L49.0121 62.9244L46.4254 63.4032C45.9489 63.4032 45.4724 63.4032 45.2001 63.198Z" fill="#FF4D00"/>
+<path d="M59.5633 59.1627L53.0284 55.4009L50.3735 56.0848L56.9085 59.915L59.5633 59.1627Z" fill="#FF4D00"/>
+<path d="M60.4483 63.4715L48.5356 56.4951L46.1531 57.1791L58.1338 64.0871L60.4483 63.4715Z" fill="#54565A"/>
+<path d="M61.6735 67.3019L44.8596 57.5896L42.5452 58.2052L59.359 67.9858L61.6735 67.3019Z" fill="#54565A"/>
+<path d="M58.8826 94.0449L10.6874 66.0708V79.0661L58.8826 108.682V94.0449Z" fill="white"/>
+<path d="M32.879 84.3326L22.532 78.3821V81.8703L32.879 87.8208V84.3326Z" fill="#FF4D00"/>
+<path d="M47.5145 94.0449L33.4916 85.9058V88.2996L47.5145 96.4388V94.0449Z" fill="#54565A"/>
+<path d="M100.951 82.6909V95.6862L58.8826 108.681V94.0447L100.951 82.6909Z" fill="#939598"/>
+<defs>
+<radialGradient id="paint0_radial_516_9305" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(58.0634 98.0035) rotate(90) scale(14.6942 54.0316)">
+<stop stop-color="#8F9296"/>
+<stop offset="1" stop-color="#D9D9D9" stop-opacity="0"/>
+</radialGradient>
+</defs>
+</svg>

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 = () => {
 			<Route path={Paths.Account} element={<RequireAuth><HomeLayout alwaysShowIcon /></RequireAuth>}>
 				<Route index element={<Navigate replace to={Paths.Dashboard} />} />
 				<Route path={Paths.Dashboard} element={<Dashboard />} />
+				<Route path={Paths.History} element={<History />} />
 			</Route>
 		</Routes>
 	)

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;