55 lines
1.3 KiB
TypeScript
55 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
import { __ } from '@wordpress/i18n';
|
|
import { styled } from '@linaria/react';
|
|
|
|
const IframeErrorContainer = styled.div`
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-top: 120px;
|
|
font-family: 'Lexend Deca', Helvetica, Arial, sans-serif;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
font-size: 0.875rem;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
font-smoothing: antialiased;
|
|
line-height: 1.5rem;
|
|
`;
|
|
|
|
const ErrorHeader = styled.h1`
|
|
text-shadow: 0 0 1px transparent;
|
|
margin-bottom: 1.25rem;
|
|
color: #33475b;
|
|
font-size: 1.25rem;
|
|
`;
|
|
|
|
export const IframeErrorPage = () => (
|
|
<IframeErrorContainer>
|
|
<img
|
|
alt="Cannot find page"
|
|
width="175"
|
|
src="//static.hsappstatic.net/ui-images/static-1.14/optimized/errors/map.svg"
|
|
/>
|
|
<ErrorHeader>
|
|
{__(
|
|
'The HubSpot for WordPress plugin is not able to load pages',
|
|
'leadin'
|
|
)}
|
|
</ErrorHeader>
|
|
<p>
|
|
{__(
|
|
'Try disabling your browser extensions and ad blockers, then refresh the page',
|
|
'leadin'
|
|
)}
|
|
</p>
|
|
<p>
|
|
{__(
|
|
'Or open the HubSpot for WordPress plugin in a different browser',
|
|
'leadin'
|
|
)}
|
|
</p>
|
|
</IframeErrorContainer>
|
|
);
|