Przeglądaj źródła

Add basic style to `NotFoundPage`

Use any invalid path to view it. Ex.: 'http://localhost:3000/blabla'.
Sergiu Miclea 8 lat temu
rodzic
commit
a465f12f54
1 zmienionych plików z 22 dodań i 2 usunięć
  1. 22 2
      src/components/pages/NotFoundPage/index.jsx

+ 22 - 2
src/components/pages/NotFoundPage/index.jsx

@@ -17,15 +17,35 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from 'react'
 import React from 'react'
 import styled from 'styled-components'
 import styled from 'styled-components'
 
 
+import Palette from '../../styleUtils/Palette'
 import EmptyTemplate from '../../templates/EmptyTemplate'
 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 = () => {
 const NotFoundPage = () => {
   return (
   return (
     <EmptyTemplate>
     <EmptyTemplate>
       <Wrapper>
       <Wrapper>
-        Not found
+        <Title>Page Not Found</Title>
+        <Message>Sorry, but the page you are trying to view does not exist.</Message>
       </Wrapper>
       </Wrapper>
     </EmptyTemplate>
     </EmptyTemplate>
   )
   )