Change title and description, make app title link to the front page

frontend/public/locales/en/common.json

@@ -8,8 +8,8 @@
   },
   "fnr": "National identity number",
   "header": {
-    "applicationTitleShort": "GREG",
-    "applicationTitleLong": "Guest Registration",
+    "applicationTitle": "Guest Registration",
+    "applicationDescription": "Registration service for guests",
     "selectLanguage": "Select language"
   },
   "loading": "Loading...",

frontend/public/locales/nb/common.json

@@ -8,8 +8,8 @@
   },
   "fnr": "Fødselsnummer",
   "header":{
-    "applicationTitleShort": "GREG",
-    "applicationTitleLong": "Gjesteregistrering",
+    "applicationTitle": "Gjesteregistrering",
+    "applicationDescription": "Registreringstjeneste for gjester",
     "selectLanguage": "Velg språk"
   },
   "loading": "Laster...",

frontend/public/locales/nn/common.json

@@ -9,8 +9,8 @@
   },
   "fnr": "National identity number",
   "header":{
-    "applicationTitleShort": "GREG",
-    "applicationTitleLong": "Gjesteregistrering",
+    "applicationTitle": "Gjesteregistrering",
+    "applicationDescription": "Registreringsteneste for gjester",
     "selectLanguage": "Velg språk"
   },
   "loading": "Lastar...",

frontend/src/routes/components/header.tsx

 import React from 'react'
+import { Link } from 'react-router-dom'
 import styled from 'styled-components/macro'
 import { useTranslation } from 'react-i18next'
 import LogoBar from '../../components/logobars/LogoBar'
 import LanguageSelector from '../../components/languageselector'
 
-
 const MainWrapper = styled.div`
   color: ${({ theme }) => theme.page.headerColor};
   background-color: ${({ theme }) => theme.page.headerBackgroundColor};
@@ -14,8 +14,9 @@ const Main = styled.div`
   display: flex;
   justify-content: space-between;
   margin: 0 auto;
-  max-width: ${props => props.theme.appMaxWidth};
-  padding: ${props => `0.5rem ${props.theme.horizontalPadding} 1rem ${props.theme.horizontalPadding}`};
+  max-width: ${(props) => props.theme.appMaxWidth};
+  padding: ${(props) =>
+    `0.5rem ${props.theme.horizontalPadding} 1rem ${props.theme.horizontalPadding}`};
 `
 
 const Menu = styled.ul`
@@ -33,15 +34,15 @@ const TitleBox = styled.div`
   padding-left: 3rem;
 `
 
-const ShortTitle = styled.div`
+const Title = styled.div`
   font-size: 2rem;
 `
 
-const LongTitle = styled.div`
+const Description = styled.div`
   font-size: 1rem;
 `
 
-function Header() {
+const Header = () => {
   const { t } = useTranslation('common')
 
   return (
@@ -50,12 +51,14 @@ function Header() {
       <MainWrapper>
         <Main>
           <TitleBox>
-            <ShortTitle>{t('header.applicationTitleShort')}</ShortTitle>
-            <LongTitle>{t('header.applicationTitleLong')}</LongTitle>
+            <Link to="/">
+              <Title>{t('header.applicationTitle')}</Title>
+            </Link>
+            <Description>{t('header.applicationDescription')}</Description>
           </TitleBox>
           <Menu>
             <MenuItem>
-              <LanguageSelector/>
+              <LanguageSelector />
             </MenuItem>
           </Menu>
         </Main>