|
|
@@ -17,15 +17,35 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
|
import React from 'react'
|
|
|
import styled from 'styled-components'
|
|
|
|
|
|
+import Palette from '../../styleUtils/Palette'
|
|
|
import EmptyTemplate from '../../templates/EmptyTemplate'
|
|
|
|
|
|
-const Wrapper = styled.div``
|
|
|
+const Wrapper = styled.div`
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
+ left: 0;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+`
|
|
|
+const Title = styled.div`
|
|
|
+ font-size: 21px;
|
|
|
+ color: ${Palette.grayscale[4]};
|
|
|
+`
|
|
|
+const Message = styled.div`
|
|
|
+ margin-top: 16px;
|
|
|
+ color: ${Palette.grayscale[8]};
|
|
|
+`
|
|
|
|
|
|
const NotFoundPage = () => {
|
|
|
return (
|
|
|
<EmptyTemplate>
|
|
|
<Wrapper>
|
|
|
- Not found
|
|
|
+ <Title>Page Not Found</Title>
|
|
|
+ <Message>Sorry, but the page you are trying to view does not exist.</Message>
|
|
|
</Wrapper>
|
|
|
</EmptyTemplate>
|
|
|
)
|