Add logo to header
This commit is contained in:
parent
7953ca5f1e
commit
109dc134ae
|
@ -12,7 +12,7 @@ import {
|
||||||
} from 'semantic-ui-react'
|
} from 'semantic-ui-react'
|
||||||
import { checkInitialSetupQuery, login } from './loginUtilFunctions'
|
import { checkInitialSetupQuery, login } from './loginUtilFunctions'
|
||||||
|
|
||||||
import logoPath from './photoview-logo.svg'
|
import logoPath from '../../assets/photoview-logo.svg'
|
||||||
|
|
||||||
const authorizeMutation = gql`
|
const authorizeMutation = gql`
|
||||||
mutation Authorize($username: String!, $password: String!) {
|
mutation Authorize($username: String!, $password: String!) {
|
||||||
|
|
Before Width: | Height: | Size: 77 KiB After Width: | Height: | Size: 77 KiB |
|
@ -2,6 +2,8 @@ import React from 'react'
|
||||||
import styled from 'styled-components'
|
import styled from 'styled-components'
|
||||||
import SearchBar from './Searchbar'
|
import SearchBar from './Searchbar'
|
||||||
|
|
||||||
|
import logoPath from '../../assets/photoview-logo.svg'
|
||||||
|
|
||||||
const Container = styled.div`
|
const Container = styled.div`
|
||||||
height: 60px;
|
height: 60px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -15,13 +17,29 @@ const Container = styled.div`
|
||||||
|
|
||||||
const Title = styled.h1`
|
const Title = styled.h1`
|
||||||
font-size: 36px;
|
font-size: 36px;
|
||||||
padding: 5px 12px;
|
font-weight: 400;
|
||||||
|
padding: 2px 12px;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
`
|
`
|
||||||
|
|
||||||
|
const Logo = styled.img`
|
||||||
|
width: 42px;
|
||||||
|
height: 42px;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
margin-right: 8px;
|
||||||
|
`
|
||||||
|
|
||||||
|
const LogoText = styled.span`
|
||||||
|
vertical-align: middle;
|
||||||
|
`
|
||||||
|
|
||||||
const Header = () => (
|
const Header = () => (
|
||||||
<Container>
|
<Container>
|
||||||
<Title>Photoview</Title>
|
<Title>
|
||||||
|
<Logo src={logoPath} alt="logo" />
|
||||||
|
<LogoText>Photoview</LogoText>
|
||||||
|
</Title>
|
||||||
{localStorage.getItem('token') ? <SearchBar /> : null}
|
{localStorage.getItem('token') ? <SearchBar /> : null}
|
||||||
</Container>
|
</Container>
|
||||||
)
|
)
|
||||||
|
|
Loading…
Reference in New Issue