import React from 'react'
import { Alert } from 'react-bootstrap'
import { FormattedMessage } from 'react-intl'
import styled from 'styled-components'

import Icon from '../util/icon'

const StyledAlert = styled(Alert)`
  margin-top: 25px;
`

/**
 * Displays a not-found alert if some content is not found.
 */
const NotFound = () => (
  <StyledAlert bsStyle='warning'>
    <h1>
      <Icon type='exclamation-triangle' withSpace />
      <FormattedMessage id='components.NotFound.header' />
    </h1>
    <p>
      <FormattedMessage id='components.NotFound.description' />
    </p>
  </StyledAlert>
)

export default NotFound

@@ -1,30 +1,4 @@
-import React from 'react'%0A
 impo
@@ -33,16 +33,97 @@
 tstrap'%0A
+import %7B ExclamationTriangle %7D from '@styled-icons/fa-solid/ExclamationTriangle'%0A
 import %7B
@@ -160,16 +160,42 @@
 t-intl'%0A
+import React from 'react'%0A
 import s
@@ -233,20 +233,33 @@
 %0Aimport 
-Icon
+StyledIconWrapper
  from '.
@@ -265,17 +265,23 @@
 ../util/
-i
+styledI
 con'%0A%0Aco
@@ -456,17 +456,17 @@
 yle=
-'
+%22
 warning
-'
+%22
 %3E%0A  
@@ -483,20 +483,48 @@
    %3C
-Icon type='e
+StyledIconWrapper spaceRight%3E%0A        %3CE
 xcla
@@ -533,30 +533,45 @@
 tion
--t
+T
 riangle
-' withSpace /
+ /%3E%0A      %3C/StyledIconWrapper
 %3E%0A  
@@ -587,33 +587,33 @@
 attedMessage id=
-'
+%22
 components.NotFo
@@ -622,17 +622,17 @@
 d.header
-'
+%22
  /%3E%0A    
@@ -672,17 +672,17 @@
 sage id=
-'
+%22
 componen
@@ -704,17 +704,17 @@
 cription
-'
+%22
  /%3E%0A    

remove fa icons