Skip to content
Snippets Groups Projects
Commit 3a1be273 authored by Sivert Kronen Hatteberg's avatar Sivert Kronen Hatteberg
Browse files

Make the header look more like figma

parent a58d255c
No related branches found
No related tags found
1 merge request!174Updated header and footer
import { Link as RLink } from 'react-router-dom'
import { useTranslation } from 'react-i18next'
import { styled } from '@mui/material/styles'
import { Box, Link } from '@mui/material'
import LogoutIcon from '@mui/icons-material/Logout'
import { useUserContext } from 'contexts'
import LanguageSelector from 'components/languageselector'
import UserInfo from 'routes/components/userInfo'
import { getHeaderLogo } from './logos'
......@@ -16,7 +13,6 @@ const StyledHeader = styled('header')(({ theme }) => ({
a: {
textDecoration: 'none',
'&:hover, &:focus': {
textDecoration: 'underline',
},
......@@ -28,7 +24,7 @@ const MainContainer = styled('div')(({ theme }) => ({
justifyContent: 'space-between',
margin: '0 auto',
maxWidth: theme.greg.appMaxWidth,
padding: '1rem 6.5rem 1rem 6.5rem',
padding: '1rem 2rem 1rem 2rem',
alignItems: 'flex-end',
}))
......@@ -36,7 +32,10 @@ const LogoContainer = styled('div')({
display: 'flex',
flexDirection: 'row',
alignItems: 'flex-end',
// paddingRight: '2rem',
minWidth: '5rem',
maxWidth: '10rem',
paddingTop: '0.5rem',
paddingBottom: '0.5rem',
})
const Menu = styled('div')({
......@@ -48,35 +47,12 @@ const Menu = styled('div')({
})
const Header = () => {
const { t } = useTranslation('common')
const { user } = useUserContext()
return (
<StyledHeader>
<MainContainer>
<LogoContainer>
<Box
sx={{
paddingRight: '1.5rem',
width: '7rem',
}}
>
{getHeaderLogo()}
</Box>
<RLink to="/">
<Box
sx={{
color: 'white',
whiteSpace: 'nowrap',
textDecoration: 'none',
fontSize: '2rem',
fontWeight: 'bold',
}}
>
{t('header.applicationTitle')}
</Box>
</RLink>
</LogoContainer>
<LogoContainer>{getHeaderLogo()}</LogoContainer>
<Menu>
<LanguageSelector noPadding />
<UserInfo />
......
import { useTranslation } from 'react-i18next'
import { appInst } from 'appConfig'
import { ReactComponent as UiOLogoNo } from './uio/uio-segl-full-neg-no.svg'
import { ReactComponent as UiOLogoEn } from './uio/uio-segl-full-neg-en.svg'
import { ReactComponent as UiOAcronym } from './uio/uio-logo-acronym-white.svg'
import { ReactComponent as UiOLogoNo } from './uio/uio-logo-neg-no.svg'
import { ReactComponent as UiOLogoEn } from './uio/uio-logo-neg-en.svg'
import { ReactComponent as UiOLogoSealNo } from './uio/uio-segl-full-neg-no.svg'
import { ReactComponent as UiOLogoSealEn } from './uio/uio-segl-full-neg-en.svg'
import { ReactComponent as UiBLogoNo } from './uib/UiBlogo_hvit_v.svg'
import { ReactComponent as UiBLogoEn } from './uib/UiBlogo_Eng_white_left.svg'
function getHeaderLogo() {
const { i18n } = useTranslation()
switch (appInst) {
case 'uio':
return <UiOAcronym />
if (i18n.language === 'en') {
return <UiOLogoEn />
}
return <UiOLogoNo />
case 'uib':
return <></>
default:
......@@ -24,9 +29,9 @@ function getFooterLogo() {
switch (appInst) {
case 'uio':
if (i18n.language === 'en') {
return <UiOLogoEn />
return <UiOLogoSealEn />
}
return <UiOLogoNo />
return <UiOLogoSealNo />
case 'uib':
if (i18n.language === 'en') {
return <UiBLogoEn />
......
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="240 0 932.92 586.88" style="enable-background:new 0 0 932.92 586.88;" xml:space="preserve">
<g id="Segl">
</g>
<g id="Outline" fill="#ffffff">
<g>
<path d="M232.71,234.86v-1.22h22.78v1.22c-6.59,0.82-6.73,1.63-6.73,8.77v19.65c0,10.67,3.6,16.66,12.85,16.66
c10,0,13.4-7,13.6-17.2v-19.17c0-7-0.14-7.89-6.73-8.7v-1.22h16.66v1.22c-6.6,0.82-6.73,1.7-6.73,8.7v19.04
c0,14.75-6.87,21.21-19.04,21.21c-13.53,0-19.92-7-19.92-19.58v-20.6C239.45,236.63,239.31,235.67,232.71,234.86z"/>
<path d="M323.08,234.86v-1.22h16.66v1.22c-6.6,0.82-6.73,1.7-6.73,8.7v39.37h-5.71l-28.96-37.46V273c0,7,0.14,7.89,6.73,8.7v1.22
h-16.66v-1.22c6.6-0.82,6.73-1.7,6.73-8.7v-31.69l-1.16-1.5c-2.38-3.13-3.67-4.42-5.58-5.17v-1.02h12.65l28.76,36.99v-27.06
C329.81,236.56,329.68,235.67,323.08,234.86z"/>
<path d="M359.94,273c0,7,0.14,7.89,6.73,8.7v1.22h-22.78v-1.22c6.6-0.82,6.73-1.7,6.73-8.7v-29.44c0-7-0.14-7.89-6.73-8.7v-1.22
h22.78v1.22c-6.6,0.82-6.73,1.7-6.73,8.7V273z"/>
<path d="M377.15,241.52c-1.9-4.96-2.72-6.12-6.94-6.66v-1.22h21.01v1.22c-4.28,0.54-5.58,1.77-4.35,5.17l11.97,32.7l8.29-24
c4.42-12.78,2.52-13.33-2.72-13.87v-1.22h15.71v1.22c-4.55,0.54-5.23,1.43-8.77,11.56l-12.85,36.51h-5.51L377.15,241.52z"/>
<path d="M448.88,282.93h-25.22v-1.22c6.59-0.82,6.73-1.7,6.73-8.7v-29.44c0-7-0.14-7.89-6.73-8.7v-1.22h24.54
c4.69,0,10.74,0,16.05-0.2l1.63,16.25h-1.36c-3.4-11.49-8.02-13.6-21.21-13.6h-3.6V256h7.96c3.88,0,6.32-1.9,7-7.62h1.22v18.22
h-1.22c-0.68-5.71-3.13-7.62-7-7.62h-7.96v18.63c0,2.38,0.48,2.92,3.47,2.92h2.58c12.38,0,16.73-2.79,20.4-13.8h1.29L464.73,283
C459.29,282.93,453.71,282.93,448.88,282.93z"/>
<path d="M473.77,281.7c6.59-0.82,6.73-1.7,6.73-8.7v-29.44c0-7-0.14-7.89-6.73-8.7v-1.22h8.7c3.33,0,10.2-0.07,12.31-0.07
c12.58,0,22.3,3.4,22.3,12.99c0,6.6-4.96,10.47-12.31,12.24l10.54,16.32c3.13,4.83,4.15,6.05,8.91,6.6v1.22h-15.23
c-1.29-2.52-3.4-6.26-5.64-9.93l-2.92-4.56c-2.86-4.49-4.35-6.8-5.71-8.64h-4.9V273c0,7,0.14,7.89,7.41,8.7v1.22h-23.46V281.7z
M494.37,236.01h-4.56v21.35h4.56c7.82,0,12.38-2.72,12.38-10.67S502.19,236.01,494.37,236.01z"/>
<path d="M529.53,280.14v-16.59h1.36c1.9,12.65,6.93,17.75,15.03,17.75c5.98,0,10.95-2.92,10.95-9.04c0-4.62-3.67-7-9.11-9.59
l-6.05-2.86c-7.21-3.4-11.76-7.89-11.76-14.48c0-7.82,7.41-13.26,16.93-13.26c4.9,0,11.29,1.36,14.62,3.4v13.94h-1.36
c-1.9-9.72-6.6-14.82-13.33-14.82c-5.51,0-9.38,2.58-9.38,7.34c0,4.69,3.2,6.87,6.8,8.57l7.21,3.4
c7.55,3.54,13.19,7.28,13.19,14.69c0,8.91-8.5,15.23-18.7,15.23C539.25,283.81,533.48,282.25,529.53,280.14z"/>
<path d="M587.13,273c0,7,0.14,7.89,6.73,8.7v1.22h-22.78v-1.22c6.59-0.82,6.73-1.7,6.73-8.7v-29.44c0-7-0.14-7.89-6.73-8.7v-1.22
h22.78v1.22c-6.6,0.82-6.73,1.7-6.73,8.7V273z"/>
<path d="M611.54,281.7c7.21-0.82,7.48-1.9,7.48-8.7v-37.12h-1.7c-9.52,0-13.53,4.83-16.93,15.71h-1.36l2.04-18.15
c5.24,0.2,11.56,0.2,16.25,0.2h12.65c4.69,0,11.01,0,16.32-0.2l2.04,18.15h-1.43c-3.33-10.88-7.34-15.71-16.86-15.71h-1.7V273
c0,6.8,0.27,7.89,7.48,8.7v1.22h-24.27V281.7z"/>
<path d="M687.02,281.7v1.22h-24.27v-1.22c7.21-0.82,7.48-1.9,7.48-8.7v-9.45l-12.44-22.37c-2.65-4.9-3.6-5.78-6.73-6.32v-1.22
h21.01v1.22c-4.28,0.54-5.85,1.7-4.21,4.9l10.47,19.72l8.36-14.82c4.42-7.68,3.26-9.31-1.63-9.79v-1.22h15.16v1.22
c-3.67,0.61-5.3,1.77-9.32,8.5l-11.35,19.72V273C679.54,279.8,679.81,280.89,687.02,281.7z"/>
<path d="M260.86,303.27c13.33,0,25.9,8.98,25.9,25.77s-12.58,25.77-25.9,25.77c-13.33,0-25.91-8.98-25.91-25.77
S247.54,303.27,260.86,303.27z M260.86,305.79c-9.38,0-15.5,8.91-15.5,23.25s6.12,23.25,15.5,23.25c9.38,0,15.5-8.91,15.5-23.25
S270.25,305.79,260.86,305.79z"/>
<path d="M293.3,352.7c6.6-0.82,6.73-1.7,6.73-8.7v-29.44c0-7-0.14-7.89-6.73-8.7v-1.22h25.91c4.69,0,10.74,0,16.05-0.2l1.63,16.25
h-1.36c-3.4-11.49-8.02-13.6-21.21-13.6h-4.96V327h7.96c3.88,0,6.32-1.9,7-7.62h1.22v18.22h-1.22c-0.68-5.71-3.13-7.62-7-7.62
h-7.96v14.07c0,6.8,0.27,7.82,7.48,8.64v1.22H293.3V352.7z"/>
<path d="M385.58,303.27c13.33,0,25.9,8.98,25.9,25.77s-12.58,25.77-25.9,25.77c-13.33,0-25.91-8.98-25.91-25.77
S372.25,303.27,385.58,303.27z M385.58,305.79c-9.38,0-15.5,8.91-15.5,23.25s6.12,23.25,15.5,23.25c9.38,0,15.5-8.91,15.5-23.25
S394.96,305.79,385.58,305.79z"/>
<path d="M420.53,351.14v-16.59h1.36c1.9,12.65,6.93,17.75,15.03,17.75c5.98,0,10.95-2.92,10.95-9.04c0-4.62-3.67-7-9.11-9.59
l-6.05-2.86c-7.21-3.4-11.76-7.89-11.76-14.48c0-7.82,7.41-13.26,16.93-13.26c4.9,0,11.29,1.36,14.62,3.4v13.94h-1.36
c-1.9-9.72-6.6-14.82-13.33-14.82c-5.51,0-9.38,2.58-9.38,7.34c0,4.69,3.2,6.87,6.8,8.57l7.21,3.4
c7.55,3.54,13.19,7.28,13.19,14.69c0,8.91-8.5,15.23-18.7,15.23C430.25,354.81,424.47,353.25,420.53,351.14z"/>
<path d="M462.08,352.7c6.59-0.82,6.73-1.7,6.73-8.7v-29.44c0-7-0.14-7.89-6.73-8.7v-1.22h22.78v1.22c-6.6,0.82-6.73,1.7-6.73,8.7
v34.2c0,2.24,0.68,2.79,2.79,2.79h2.11c12.31,0,15.57-2.99,19.24-14.62h1.36L501.44,354c-3.26-0.07-11.22-0.07-13.94-0.07h-25.43
V352.7z"/>
<path d="M534.56,303.27c13.33,0,25.91,8.98,25.91,25.77s-12.58,25.77-25.91,25.77s-25.91-8.98-25.91-25.77
S521.23,303.27,534.56,303.27z M534.56,305.79c-9.38,0-15.5,8.91-15.5,23.25s6.12,23.25,15.5,23.25c9.38,0,15.5-8.91,15.5-23.25
S543.94,305.79,534.56,305.79z"/>
</g>
</g>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="230 230 630 125" style="enable-background:new 0 0 1086.96 585.19;" xml:space="preserve">
<g id="Segl">
</g>
<g id="Outline" fill="#ffffff">
<g>
<path d="M231.39,233.05v-1.22h22.78v1.22c-6.6,0.82-6.73,1.63-6.73,8.77v19.65c0,10.67,3.6,16.66,12.85,16.66
c10,0,13.4-7,13.6-17.2v-19.17c0-7-0.14-7.89-6.73-8.7v-1.22h16.66v1.22c-6.6,0.82-6.73,1.7-6.73,8.7v19.04
c0,14.75-6.87,21.21-19.04,21.21c-13.53,0-19.92-7-19.92-19.58v-20.6C238.12,234.82,237.98,233.87,231.39,233.05z"/>
<path d="M321.76,233.05v-1.22h16.66v1.22c-6.6,0.82-6.73,1.7-6.73,8.7v39.37h-5.71l-28.96-37.46v27.54c0,7,0.14,7.89,6.73,8.7
v1.22h-16.66v-1.22c6.6-0.82,6.73-1.7,6.73-8.7v-31.69l-1.16-1.5c-2.38-3.13-3.67-4.42-5.58-5.17v-1.02h12.65l28.76,36.99v-27.06
C328.49,234.75,328.35,233.87,321.76,233.05z"/>
<path d="M358.61,271.2c0,7,0.14,7.89,6.73,8.7v1.22h-22.78v-1.22c6.6-0.82,6.73-1.7,6.73-8.7v-29.44c0-7-0.14-7.89-6.73-8.7v-1.22
h22.78v1.22c-6.6,0.82-6.73,1.7-6.73,8.7V271.2z"/>
<path d="M375.82,239.71c-1.9-4.96-2.72-6.12-6.94-6.66v-1.22h21.01v1.22c-4.28,0.54-5.58,1.77-4.35,5.17l11.97,32.7l8.29-24
c4.42-12.78,2.52-13.33-2.72-13.87v-1.22h15.71v1.22c-4.56,0.54-5.24,1.43-8.77,11.56l-12.85,36.51h-5.51L375.82,239.71z"/>
<path d="M447.56,281.12h-25.23v-1.22c6.6-0.82,6.73-1.7,6.73-8.7v-29.44c0-7-0.14-7.89-6.73-8.7v-1.22h24.54
c4.69,0,10.74,0,16.05-0.2l1.63,16.25h-1.36c-3.4-11.49-8.02-13.6-21.21-13.6h-3.6v19.92h7.96c3.88,0,6.32-1.9,7-7.62h1.22v18.22
h-1.22c-0.68-5.71-3.13-7.62-7-7.62h-7.96v18.63c0,2.38,0.48,2.92,3.47,2.92h2.58c12.38,0,16.73-2.79,20.4-13.8h1.29l-2.72,16.25
C457.96,281.12,452.38,281.12,447.56,281.12z"/>
<path d="M472.45,279.9c6.6-0.82,6.73-1.7,6.73-8.7v-29.44c0-7-0.14-7.89-6.73-8.7v-1.22h8.7c3.33,0,10.2-0.07,12.31-0.07
c12.58,0,22.3,3.4,22.3,12.99c0,6.6-4.96,10.47-12.31,12.24l10.54,16.32c3.13,4.83,4.15,6.05,8.91,6.6v1.22h-15.23
c-1.29-2.52-3.4-6.26-5.64-9.93l-2.92-4.56c-2.86-4.49-4.35-6.8-5.71-8.64h-4.89v13.19c0,7,0.13,7.89,7.41,8.7v1.22h-23.46V279.9z
M493.05,234.21h-4.55v21.35h4.55c7.82,0,12.38-2.72,12.38-10.67S500.87,234.21,493.05,234.21z"/>
<path d="M528.21,278.33v-16.59h1.36c1.9,12.65,6.94,17.75,15.03,17.75c5.98,0,10.95-2.92,10.95-9.04c0-4.62-3.67-7-9.11-9.59
l-6.05-2.86c-7.21-3.4-11.76-7.89-11.76-14.48c0-7.82,7.41-13.26,16.93-13.26c4.89,0,11.29,1.36,14.62,3.4v13.94h-1.36
c-1.9-9.72-6.59-14.82-13.33-14.82c-5.51,0-9.38,2.58-9.38,7.34c0,4.69,3.2,6.87,6.8,8.57l7.21,3.4
c7.55,3.54,13.19,7.28,13.19,14.69c0,8.91-8.5,15.23-18.7,15.23C537.93,282.01,532.15,280.44,528.21,278.33z"/>
<path d="M585.8,271.2c0,7,0.13,7.89,6.73,8.7v1.22h-22.78v-1.22c6.6-0.82,6.73-1.7,6.73-8.7v-29.44c0-7-0.14-7.89-6.73-8.7v-1.22
h22.78v1.22c-6.6,0.82-6.73,1.7-6.73,8.7V271.2z"/>
<path d="M610.21,279.9c7.21-0.82,7.48-1.9,7.48-8.7v-37.12h-1.7c-9.52,0-13.53,4.83-16.93,15.71h-1.36l2.04-18.15
c5.23,0.2,11.56,0.2,16.25,0.2h12.65c4.69,0,11.02,0,16.32-0.2l2.04,18.15h-1.43c-3.33-10.88-7.34-15.71-16.86-15.71h-1.7v37.12
c0,6.8,0.27,7.89,7.48,8.7v1.22h-24.27V279.9z"/>
<path d="M677.39,281.12h-25.23v-1.22c6.59-0.82,6.73-1.7,6.73-8.7v-29.44c0-7-0.14-7.89-6.73-8.7v-1.22h24.55
c4.69,0,10.74,0,16.05-0.2l1.63,16.25h-1.36c-3.4-11.49-8.02-13.6-21.21-13.6h-3.6v19.92h7.96c3.88,0,6.32-1.9,7-7.62h1.22v18.22
h-1.22c-0.68-5.71-3.13-7.62-7-7.62h-7.96v18.63c0,2.38,0.48,2.92,3.47,2.92h2.58c12.38,0,16.73-2.79,20.4-13.8h1.29l-2.72,16.25
C687.8,281.12,682.22,281.12,677.39,281.12z"/>
<path d="M714.39,279.9c7.21-0.82,7.48-1.9,7.48-8.7v-37.12h-1.7c-9.52,0-13.53,4.83-16.93,15.71h-1.36l2.04-18.15
c5.24,0.2,11.56,0.2,16.25,0.2h12.65c4.69,0,11.02,0,16.32-0.2l2.04,18.15h-1.43c-3.33-10.88-7.34-15.71-16.86-15.71h-1.7v37.12
c0,6.8,0.27,7.89,7.48,8.7v1.22h-24.27V279.9z"/>
<path d="M781.57,281.12h-25.23v-1.22c6.6-0.82,6.73-1.7,6.73-8.7v-29.44c0-7-0.14-7.89-6.73-8.7v-1.22h24.54
c4.69,0,10.74,0,16.05-0.2l1.63,16.25h-1.36c-3.4-11.49-8.02-13.6-21.21-13.6h-3.6v19.92h7.96c3.88,0,6.32-1.9,7-7.62h1.22v18.22
h-1.22c-0.68-5.71-3.13-7.62-7-7.62h-7.96v18.63c0,2.38,0.48,2.92,3.47,2.92h2.58c12.38,0,16.73-2.79,20.4-13.8h1.29l-2.72,16.25
C791.97,281.12,786.4,281.12,781.57,281.12z"/>
<path d="M818.56,279.9c7.21-0.82,7.48-1.9,7.48-8.7v-37.12h-1.7c-9.52,0-13.53,4.83-16.93,15.71h-1.36l2.04-18.15
c5.24,0.2,11.56,0.2,16.25,0.2h12.65c4.69,0,11.01,0,16.32-0.2l2.04,18.15h-1.43c-3.33-10.88-7.34-15.71-16.86-15.71h-1.7v37.12
c0,6.8,0.27,7.89,7.48,8.7v1.22h-24.27V279.9z"/>
<path d="M248.73,342.19c0,7,0.14,7.89,6.73,8.7v1.22h-22.78v-1.22c6.6-0.82,6.73-1.7,6.73-8.7v-29.44c0-7-0.14-7.89-6.73-8.7
v-1.22h22.78v1.22c-6.6,0.82-6.73,1.7-6.73,8.7V342.19z"/>
<path d="M305.57,301.47c13.33,0,25.91,8.97,25.91,25.77c0,16.79-12.58,25.77-25.91,25.77s-25.91-8.97-25.91-25.77
C279.67,310.44,292.25,301.47,305.57,301.47z M305.57,303.98c-9.38,0-15.5,8.91-15.5,23.25c0,14.35,6.12,23.25,15.5,23.25
c9.38,0,15.5-8.91,15.5-23.25C321.08,312.89,314.96,303.98,305.57,303.98z"/>
<path d="M340.53,349.33v-16.59h1.36c1.9,12.65,6.94,17.75,15.03,17.75c5.98,0,10.95-2.92,10.95-9.04c0-4.62-3.67-7-9.11-9.59
L352.7,329c-7.21-3.4-11.76-7.89-11.76-14.48c0-7.82,7.41-13.26,16.93-13.26c4.9,0,11.29,1.36,14.62,3.4v13.94h-1.36
c-1.9-9.72-6.6-14.82-13.33-14.82c-5.51,0-9.38,2.58-9.38,7.34c0,4.69,3.2,6.87,6.8,8.57l7.21,3.4
c7.55,3.54,13.19,7.28,13.19,14.69c0,8.91-8.5,15.23-18.7,15.23C350.25,353.01,344.47,351.44,340.53,349.33z"/>
<path d="M382.08,350.9c6.6-0.82,6.73-1.7,6.73-8.7v-29.44c0-7-0.14-7.89-6.73-8.7v-1.22h22.78v1.22c-6.59,0.82-6.73,1.7-6.73,8.7
v34.2c0,2.24,0.68,2.79,2.79,2.79h2.11c12.31,0,15.57-2.99,19.24-14.62h1.36l-2.18,17.07c-3.26-0.07-11.22-0.07-13.94-0.07h-25.43
V350.9z"/>
<path d="M454.56,301.47c13.33,0,25.91,8.97,25.91,25.77c0,16.79-12.58,25.77-25.91,25.77s-25.91-8.97-25.91-25.77
C428.65,310.44,441.23,301.47,454.56,301.47z M454.56,303.98c-9.38,0-15.5,8.91-15.5,23.25c0,14.35,6.12,23.25,15.5,23.25
s15.5-8.91,15.5-23.25C470.06,312.89,463.94,303.98,454.56,303.98z"/>
</g>
</g>
</svg>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment