diff --git a/frontend/src/Views/Export/ExportPage.styles.ts b/frontend/src/Views/Export/ExportPage.styles.ts index 5933b047..f576ed1e 100644 --- a/frontend/src/Views/Export/ExportPage.styles.ts +++ b/frontend/src/Views/Export/ExportPage.styles.ts @@ -2,6 +2,16 @@ import styled from '@emotion/styled'; import * as tokens from '@bcgov/design-tokens/js'; import screenSizes from '@Constants/ScreenSize'; +const StyledLandingContainer = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 100vh; + margin-top: auto; + gap: 40px; +`; + const StyledContent = styled.div` display: flex; flex-direction: column; @@ -13,6 +23,7 @@ const StyledContent = styled.div` gap: 10px; padding: 0 0 20px 0; border: 1px solid ${tokens.themeGray40}; + #dataFileHeader { display: flex; text-align: center; @@ -54,65 +65,4 @@ const StyledContent = styled.div` } `; -const StyledButtonGroup = styled.div` - display: flex; - max-width: 375px; - max-height: 149px; - width: 100%; - flex-direction: column; - align-items: center; - - label { - display: flex; - justify-content: center; - width: 100%; - } - @media (min-width: ${screenSizes.tablet}) { - top: 15vh; - } - - @media (min-width: ${screenSizes.desktop}) { - max-width: 531px; - max-height: 197px; - top: 15vh; - } -`; - -const StyledDivider = styled.div` - font-size: 18px; - font-weight: 400; - line-height: 30.61px; - display: flex; - align-items: center; - text-align: center; - color: ${tokens.typographyColorPlaceholder}; - - &::before, - &::after { - flex: 1; - content: ''; - padding: 1px; - background-color: ${tokens.typographyColorPlaceholder}; - width: 130px; - margin: 5px; - } - - @media (min-width: ${screenSizes.desktop}) { - &::before, - &::after { - width: 200px; - } - } -`; - -const StyledLandingContainer = styled.div` - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - height: 100vh; - margin-top: auto; - gap: 40px; -`; - -export { StyledContent, StyledButtonGroup, StyledDivider, StyledLandingContainer }; +export { StyledContent, StyledLandingContainer }; diff --git a/frontend/src/Views/Export/ExportPage.tsx b/frontend/src/Views/Export/ExportPage.tsx index 7f537a47..b10bfa70 100644 --- a/frontend/src/Views/Export/ExportPage.tsx +++ b/frontend/src/Views/Export/ExportPage.tsx @@ -7,7 +7,7 @@ import Button from '@Commons/Button/Button.tsx'; import MainPageHeader from '@Commons/MainPageHeader/MainPageHeader.tsx'; import MainPageFooter from '@Commons/MainPageFooter/MainPageFooter.tsx'; import { FC } from 'react'; -import { StyledContent, StyledButtonGroup, StyledLandingContainer } from './ExportPage.styles.ts'; +import { StyledContent, StyledLandingContainer } from './ExportPage.styles.ts'; const ExportPage: FC = () => { const downloadFile = () => { @@ -33,13 +33,11 @@ const ExportPage: FC = () => { handleClick={downloadFile} /> - -