coop-cloud-chaos-patchs/outline
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Styling document actions more inline with medium

Browse Source
This commit is contained in:
Tom Moor
2017-09-08 22:06:47 -07:00
parent 73ff473b49
commit dcbad23cb1
6 changed files with 43 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/components/Layout/components/SidebarCollection/SidebarCollection.js
View File

@ -18,8 +18,8 @@ type Props = {
};
const activeStyle = {
color: '#000',
background: '#E1E1E1',
color: color.black,
background: color.slateDark,
};
@observer class SidebarCollection extends React.Component {

8
frontend/components/Layout/components/SidebarCollectionList/SidebarCollectionList.js
View File

@ -3,7 +3,7 @@ import React from 'react';
import { observer, inject } from 'mobx-react';
import Flex from 'components/Flex';
import styled from 'styled-components';
import { color, layout } from 'styles/constants';
import { color, layout, fontWeight } from 'styles/constants';
import SidebarLink from '../SidebarLink';
import DropToImport from 'components/DropToImport';
@ -16,8 +16,8 @@ type Props = {
};
const activeStyle = {
color: '#000',
background: '#E1E1E1',
color: color.black,
background: color.slateDark,
};
const SidebarCollectionList = observer(({ history, collections }: Props) => {
@ -42,7 +42,7 @@ const SidebarCollectionList = observer(({ history, collections }: Props) => {
const Header = styled(Flex)`
font-size: 11px;
font-weight: 500;
font-weight: ${fontWeight.semiBold};
text-transform: uppercase;
color: ${color.slate};
letter-spacing: 0.04em;

14
frontend/components/Layout/components/SidebarLink/SidebarLink.js
View File

@ -1,26 +1,28 @@
// @flow
import React from 'react';
import { NavLink } from 'react-router-dom';
import { layout, color } from 'styles/constants';
import { darken } from 'polished';
import { layout, color, fontWeight } from 'styles/constants';
import styled from 'styled-components';
const activeStyle = {
color: '#000000',
color: color.black,
fontWeight: fontWeight.semiBold,
};
function SidebarLink(props: Object) {
return <StyledNavLink exact {...props} activeStyle={activeStyle} />;
return <StyledNavLink exact activeStyle={activeStyle} {...props} />;
}
const StyledNavLink = styled(NavLink)`
display: block;
padding: 5px ${layout.hpadding};
overflow: hidden;
text-overflow: ellipsis;
margin: 5px ${layout.hpadding};
color: ${color.slateDark};
font-size: 15px;
&:hover {
color: ${darken(0.1, color.slateDark)};
color: ${color.text};
}
`;