import React from 'react'
import PropTypes from 'prop-types'
import {FormattedMessage} from 'react-intl'
import {Typography, StyledH1, StyledH3, theme} from 'tocco-ui'
import styled from 'styled-components'

import ToccoLogo from '../../../../assets/tocco_red.svg'

const StyledDashBoardWrapper = styled.div`
  width: 100%;
  height: 100%;
  background-color: ${theme.color('backgroundBody')};
`

const InnerWrapper = styled.div`
  width: 600px;
  height: 50px;
  position: relative;
  left: -320px;
`

const StyledDashBoard = styled.div`
  display: flex;
  height: 75%;
  justify-content: flex-end;
  align-items: flex-end;
  margin-right: -180px;

  ${StyledH1} {
    font-size: 10rem;
    letter-spacing: .5rem;
    color: ${theme.color('primary')};
  }

  ${InnerWrapper} {
    position: relative;
    top: 2rem;

    ${/* sc-selector */StyledH3} {
      font-size: 3rem;
      color: ${theme.color('primary')};
    }
    text-align: right;
  }
`

const Dashboard = () => {
  const packageJson = require('../../../../../package')
  return <StyledDashBoardWrapper>
    <StyledDashBoard>
      <Typography.H1>
        <FormattedMessage id="client.admin.welcomeTitle"/>
      </Typography.H1>
      <InnerWrapper>
        <img src={ToccoLogo} alt="tocco-logo"/>
        <Typography.H3>beta v{packageJson.version}</Typography.H3>
      </InnerWrapper>
    </StyledDashBoard>
  </StyledDashBoardWrapper>
}

Dashboard.propTypes = {
  match: PropTypes.object
}

export default React.memo(Dashboard, () => true)

@@ -66,72 +66,18 @@
 rt %7B
-FormattedMessage%7D from 'react-intl'%0Aimport %7BTypography, StyledH1
+Typography
 , St
@@ -337,153 +337,8 @@
 )%7D;%0A
-%60%0A%0Aconst InnerWrapper = styled.div%60%0A  width: 600px;%0A  height: 50px;%0A  position: relative;%0A  left: -320px;%0A%60%0A%0Aconst StyledDashBoard = styled.div%60%0A
   di
@@ -354,23 +354,8 @@
 ex;%0A
-  height: 75%25;%0A
   ju
@@ -408,203 +408,380 @@
 nd;%0A
+%0A
   
-margin-right: -180px;%0A%0A  $%7BStyledH1%7D %7B%0A    font-size: 10rem;%0A    letter-spacing: .5rem;%0A    color: $%7Btheme.color('primary')%7D;%0A  %7D%0A%0A  $%7BInnerWrapper%7D %7B%0A    position: relative;%0A    top: 2rem
+@media (max-width: 568px) %7B%0A    justify-content: center;%0A    align-items: center;%0A  %7D%0A%60%0A%0Aconst StyledSlogan = styled.div%60%0A  max-width: 900px;%0A  width: 100%25;%0A  height: 100px;%0A  text-align: right;%0A  margin-bottom: 150px;%0A  margin-right: 100px;%0A  margin-left: 100px;%0A%0A  @media (max-width: 568px) %7B%0A    margin-right: 25px;%0A    margin-left: 25px;%0A    margin-bottom: 0
 ;%0A
-%0A
   
+%7D%0A%0A
   $%7B
@@ -813,18 +813,16 @@
 %7D %7B%0A    
-  
 font-siz
@@ -834,18 +834,16 @@
 em;%0A    
-  
 color: $
@@ -872,37 +872,8 @@
 )%7D;%0A
-    %7D%0A    text-align: right;%0A
   %7D%0A
@@ -1006,146 +1006,16 @@
 yled
-DashBoard%3E%0A      %3CTypography.H1%3E%0A        %3CFormattedMessage id=%22client.admin.welcomeTitle%22/%3E%0A      %3C/Typography.H1%3E%0A      %3CInnerWrapper%3E%0A  
+Slogan%3E%0A
     
@@ -1062,18 +1062,16 @@
 %3E%0A      
-  
 %3CTypogra
@@ -1129,47 +1129,22 @@
     
-  %3C/InnerWrapper%3E%0A    %3C/StyledDashBoard
+%3C/StyledSlogan
 %3E%0A  

make welcome screen responsive