Add subtle branding to shared documents
This commit is contained in:
parent
76924e70f5
commit
085c452d77
|
@ -23,6 +23,7 @@ import type { Revision } from 'types';
|
|||
import Document from 'models/Document';
|
||||
import Header from './components/Header';
|
||||
import DocumentMove from './components/DocumentMove';
|
||||
import Branding from './components/Branding';
|
||||
import ErrorBoundary from 'components/ErrorBoundary';
|
||||
import DocumentHistory from 'components/DocumentHistory';
|
||||
import LoadingPlaceholder from 'components/LoadingPlaceholder';
|
||||
|
@ -367,6 +368,7 @@ class DocumentScene extends React.Component<Props> {
|
|||
{isHistory && (
|
||||
<DocumentHistory revision={revision} document={document} />
|
||||
)}
|
||||
{isShare && <Branding />}
|
||||
</ErrorBoundary>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -0,0 +1,35 @@
|
|||
// @flow
|
||||
import * as React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import OutlineLogo from 'shared/components/OutlineLogo';
|
||||
|
||||
function Branding() {
|
||||
return (
|
||||
<Link href={process.env.URL}>
|
||||
<OutlineLogo /> Outline
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
const Link = styled.a`
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
border-top-right-radius: 2px;
|
||||
color: ${props => props.theme.black};
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
opacity: 0.8;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
background: ${props => props.theme.smoke};
|
||||
}
|
||||
`;
|
||||
|
||||
export default Branding;
|
|
@ -0,0 +1,9 @@
|
|||
// @flow
|
||||
import * as React from 'react';
|
||||
import logo from './logo.png';
|
||||
|
||||
function OutlineLogo() {
|
||||
return <img src={logo} width={16} height={16} alt="Outline Logo" />;
|
||||
}
|
||||
|
||||
export default OutlineLogo;
|
Binary file not shown.
After Width: | Height: | Size: 569 B |
Reference in New Issue