diff --git a/frontend/src/components/Pages/AssetSelectionPage/AssetSelectionPage.tsx b/frontend/src/components/Pages/AssetSelectionPage/AssetSelectionPage.tsx index f780bf110..8e785bd8d 100644 --- a/frontend/src/components/Pages/AssetSelectionPage/AssetSelectionPage.tsx +++ b/frontend/src/components/Pages/AssetSelectionPage/AssetSelectionPage.tsx @@ -14,12 +14,13 @@ import { config } from 'config' import { AlertType, useAlertContext } from 'components/Contexts/AlertContext' import { FailedRequestAlertContent, FailedRequestAlertListContent } from 'components/Alerts/FailedRequestAlert' import { AlertCategory } from 'components/Alerts/AlertsBanner' +import assetImage from 'mediaAssets/assetPage.jpg' const Centered = styled.div` display: flex; flex-direction: column; align-items: center; - margin-top: 5rem; + padding-top: 10px; ` const StyledAssetSelection = styled.div` display: flex; @@ -32,6 +33,22 @@ const StyledCheckbox = styled(Checkbox)` const StyledButton = styled(Button)` justify-content: center; ` +const StyledImage = styled.img` + width: 100vw; + object-fit: cover; + height: 500px; + + @media (max-width: 500px) { + height: 400px; + } +` +const StyledContent = styled.div` + display: flex; + flex-direction: column; + align-items: center; + padding-top: 80px; + gap: 80px; +` const handleLogin = (instance: IPublicClientApplication) => { instance.loginRedirect(loginRequest).catch((e) => { @@ -54,10 +71,10 @@ export const AssetSelectionPage = () => { {isAuthenticated ? ( <>
- + - {/* TODO! ADD image here*/} - + + ) : ( diff --git a/frontend/src/mediaAssets/assetPage.jpg b/frontend/src/mediaAssets/assetPage.jpg new file mode 100644 index 000000000..142211f6e Binary files /dev/null and b/frontend/src/mediaAssets/assetPage.jpg differ