From aacfd426405926966e214cf23cc25581bb820cce Mon Sep 17 00:00:00 2001
From: Tom Moor
Date: Sat, 9 Jun 2018 17:22:03 -0700
Subject: [PATCH 01/61] Fixes #676 - Newlines no longer added to nested lists
on save
---
package.json | 2 +-
yarn.lock | 14 +++++++-------
2 files changed, 8 insertions(+), 8 deletions(-)
diff --git a/package.json b/package.json
index 4280a5ca6..64d89a531 100644
--- a/package.json
+++ b/package.json
@@ -157,7 +157,7 @@
"react-waypoint": "^7.3.1",
"redis": "^2.6.2",
"redis-lock": "^0.1.0",
- "rich-markdown-editor": "1.2.0",
+ "rich-markdown-editor": "1.2.1",
"safestart": "1.1.0",
"sequelize": "4.28.6",
"sequelize-cli": "^2.7.0",
diff --git a/yarn.lock b/yarn.lock
index b3b80f468..a0caeb031 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8824,9 +8824,9 @@ retry-axios@0.3.2, retry-axios@^0.3.2:
version "0.3.2"
resolved "https://registry.yarnpkg.com/retry-axios/-/retry-axios-0.3.2.tgz#5757c80f585b4cc4c4986aa2ffd47a60c6d35e13"
-rich-markdown-editor@1.2.0:
- version "1.2.0"
- resolved "https://registry.yarnpkg.com/rich-markdown-editor/-/rich-markdown-editor-1.2.0.tgz#a04b7e8e9eb8d40b47cf7fa5bede27369779eab2"
+rich-markdown-editor@1.2.1:
+ version "1.2.1"
+ resolved "https://registry.yarnpkg.com/rich-markdown-editor/-/rich-markdown-editor-1.2.1.tgz#7f4555cc2e13b600dfd8a3f440d2ad067d0c5c05"
dependencies:
"@tommoor/slate-drop-or-paste-images" "^0.8.1"
boundless-arrow-key-navigation "^1.1.0"
@@ -8844,7 +8844,7 @@ rich-markdown-editor@1.2.0:
slate-collapse-on-escape "^0.6.0"
slate-edit-code "^0.14.0"
slate-edit-list "^0.11.2"
- slate-md-serializer "3.1.1"
+ slate-md-serializer "3.1.2"
slate-paste-linkify "^0.5.0"
slate-plain-serializer "0.5.4"
slate-prism "^0.5.0"
@@ -9205,9 +9205,9 @@ slate-edit-list@^0.11.2:
version "0.11.2"
resolved "https://registry.yarnpkg.com/slate-edit-list/-/slate-edit-list-0.11.2.tgz#c67b961d98435f9f7747d20b870cbc51d25af7a8"
-slate-md-serializer@3.1.1:
- version "3.1.1"
- resolved "https://registry.yarnpkg.com/slate-md-serializer/-/slate-md-serializer-3.1.1.tgz#65cc9659baeeeee060afe2b029a1b619627d758d"
+slate-md-serializer@3.1.2:
+ version "3.1.2"
+ resolved "https://registry.yarnpkg.com/slate-md-serializer/-/slate-md-serializer-3.1.2.tgz#32e934ec298b99fefe19f84f632ee9f7c8f60590"
slate-paste-linkify@^0.5.0:
version "0.5.0"
From 0942deec3831b1cc9e1b44625fee330b46ebadb7 Mon Sep 17 00:00:00 2001
From: Tom Moor
Date: Sat, 9 Jun 2018 18:59:49 -0700
Subject: [PATCH 02/61] [ci skip] Add styled components badge
---
README.md | 1 +
1 file changed, 1 insertion(+)
diff --git a/README.md b/README.md
index 3cdacf430..e187b0777 100644
--- a/README.md
+++ b/README.md
@@ -10,6 +10,7 @@
+
This is the source code that runs [**Outline**](https://www.getoutline.com) and all the associated services. If you want to use Outline then you don't need to run this code, we offer a hosted version of the app at [getoutline.com](https://www.getoutline.com).
From 434129a43401c6c84c7bd31a8d8e69a54d0606cd Mon Sep 17 00:00:00 2001
From: Tom Moor
Date: Sat, 9 Jun 2018 19:10:30 -0700
Subject: [PATCH 03/61] ThemeProvider (#677)
closes #655
---
app/components/Actions/Actions.js | 8 +-
app/components/Alert/Alert.js | 3 +-
app/components/Avatar/Avatar.js | 3 +-
app/components/Button/Button.js | 23 ++-
app/components/ColorPicker/ColorPicker.js | 13 +-
.../DocumentPreview/DocumentPreview.js | 17 +-
.../components/PublishingInfo.js | 6 +-
app/components/DropToImport/DropToImport.js | 7 +-
app/components/DropdownMenu/DropdownMenu.js | 5 +-
.../DropdownMenu/DropdownMenuItem.js | 9 +-
app/components/Empty/Empty.js | 3 +-
app/components/HelpText/HelpText.js | 3 +-
app/components/Highlight/Highlight.js | 3 +-
app/components/Input/Input.js | 11 +-
app/components/Key/key.js | 11 +-
app/components/Labeled/Labeled.js | 3 +-
app/components/Layout/Layout.js | 3 +-
app/components/List/Item.js | 9 +-
.../LoadingPlaceholder/components/Mask.js | 3 +-
app/components/Modal/Modal.js | 3 +-
app/components/Sidebar/Sidebar.js | 7 +-
app/components/Sidebar/components/Header.js | 5 +-
.../Sidebar/components/HeaderBlock.js | 13 +-
.../Sidebar/components/SidebarLink.js | 31 ++--
app/components/Sidebar/components/TeamLogo.js | 5 +-
app/components/Subheading.js | 5 +-
app/components/Toasts/Toasts.js | 5 +-
app/components/Toasts/components/Toast.js | 7 +-
app/index.js | 150 ++++++++++--------
app/scenes/Document/Document.js | 2 +-
app/scenes/Document/components/Actions.js | 4 +-
.../components/DocumentMove/DocumentMove.js | 3 +-
.../DocumentMove/components/PathToDocument.js | 10 +-
.../Document/components/LoadingPlaceholder.js | 3 +-
app/scenes/Search/components/SearchField.js | 17 +-
app/scenes/Settings/Details.js | 7 +-
app/scenes/Settings/Profile.js | 5 +-
.../Settings/components/UserListItem.js | 6 +-
server/emails/components/EmailLayout.js | 4 +-
server/emails/components/Footer.js | 10 +-
server/pages/Changelog.js | 7 +-
server/pages/Home.js | 5 +-
server/pages/components/Header.js | 3 +-
server/pages/components/Layout.js | 2 -
server/pages/components/Navigation.js | 9 +-
server/pages/components/SigninButtons.js | 7 +-
server/utils/renderpage.js | 11 +-
shared/styles/base.js | 8 +-
shared/styles/constants.js | 70 --------
shared/styles/theme.js | 34 ++++
50 files changed, 277 insertions(+), 324 deletions(-)
delete mode 100644 shared/styles/constants.js
create mode 100644 shared/styles/theme.js
diff --git a/app/components/Actions/Actions.js b/app/components/Actions/Actions.js
index 4ef55010d..b1b56ec1d 100644
--- a/app/components/Actions/Actions.js
+++ b/app/components/Actions/Actions.js
@@ -2,7 +2,6 @@
import styled from 'styled-components';
import breakpoint from 'styled-components-breakpoint';
import Flex from 'shared/components/Flex';
-import { layout, color } from 'shared/styles/constants';
export const Action = styled(Flex)`
justify-content: center;
@@ -10,7 +9,7 @@ export const Action = styled(Flex)`
padding: 0 0 0 12px;
a {
- color: ${color.text};
+ color: ${props => props.theme.text};
height: 24px;
}
`;
@@ -19,7 +18,7 @@ export const Separator = styled.div`
margin-left: 12px;
width: 1px;
height: 20px;
- background: ${color.slateLight};
+ background: ${props => props.theme.slateLight};
`;
const Actions = styled(Flex)`
@@ -38,7 +37,8 @@ const Actions = styled(Flex)`
${breakpoint('tablet')`
left: auto;
- padding: ${layout.vpadding} ${layout.hpadding} 8px 8px;
+ padding: ${props => props.theme.vpadding} ${props =>
+ props.theme.hpadding} 8px 8px;
`};
`;
diff --git a/app/components/Alert/Alert.js b/app/components/Alert/Alert.js
index b99104e7c..eb69a09e1 100644
--- a/app/components/Alert/Alert.js
+++ b/app/components/Alert/Alert.js
@@ -3,7 +3,6 @@ import * as React from 'react';
import { observer } from 'mobx-react';
import Flex from 'shared/components/Flex';
import styled from 'styled-components';
-import { color } from 'shared/styles/constants';
type Props = {
children: React.Node,
@@ -31,7 +30,7 @@ const Container = styled(Flex)`
font-size: 14px;
line-height: 1;
- background-color: ${({ type }) => color[type]};
+ background-color: ${({ theme, type }) => theme.color[type]};
`;
export default Alert;
diff --git a/app/components/Avatar/Avatar.js b/app/components/Avatar/Avatar.js
index c192e28d1..c0566bee1 100644
--- a/app/components/Avatar/Avatar.js
+++ b/app/components/Avatar/Avatar.js
@@ -3,7 +3,6 @@ import * as React from 'react';
import styled from 'styled-components';
import { observable } from 'mobx';
import { observer } from 'mobx-react';
-import { color } from 'shared/styles/constants';
import placeholder from './placeholder.png';
type Props = {
@@ -38,7 +37,7 @@ const CircleImg = styled.img`
width: ${props => props.size}px;
height: ${props => props.size}px;
border-radius: 50%;
- border: 2px solid ${color.white};
+ border: 2px solid ${props => props.theme.white};
flex-shrink: 0;
`;
diff --git a/app/components/Button/Button.js b/app/components/Button/Button.js
index 5c89e8f34..1e455e654 100644
--- a/app/components/Button/Button.js
+++ b/app/components/Button/Button.js
@@ -1,7 +1,6 @@
// @flow
import * as React from 'react';
import styled from 'styled-components';
-import { color } from 'shared/styles/constants';
import { darken } from 'polished';
const RealButton = styled.button`
@@ -9,8 +8,8 @@ const RealButton = styled.button`
margin: 0;
padding: 0;
border: 0;
- background: ${color.primary};
- color: ${color.white};
+ background: ${props => props.theme.primary};
+ color: ${props => props.theme.white};
border-radius: 4px;
font-size: 15px;
height: 36px;
@@ -24,7 +23,7 @@ const RealButton = styled.button`
border: 0;
}
&:hover {
- background: ${darken(0.05, color.primary)};
+ background: ${props => darken(0.05, props.theme.primary)};
}
svg {
@@ -40,30 +39,30 @@ const RealButton = styled.button`
${props =>
props.light &&
`
- color: ${color.slate};
+ color: ${props.theme.slate};
background: transparent;
- border: 1px solid ${color.slate};
+ border: 1px solid ${props.theme.slate};
&:hover {
background: transparent;
- color: ${color.slateDark};
- border: 1px solid ${color.slateDark};
+ color: ${props.theme.slateDark};
+ border: 1px solid ${props.theme.slateDark};
}
`} ${props =>
props.neutral &&
`
- background: ${color.slate};
+ background: ${props.theme.slate};
&:hover {
- background: ${darken(0.05, color.slate)};
+ background: ${darken(0.05, props.theme.slate)};
}
`} ${props =>
props.danger &&
`
- background: ${color.danger};
+ background: ${props.theme.danger};
&:hover {
- background: ${darken(0.05, color.danger)};
+ background: ${darken(0.05, props.theme.danger)};
}
`};
`;
diff --git a/app/components/ColorPicker/ColorPicker.js b/app/components/ColorPicker/ColorPicker.js
index eda7ed52b..6b4f080c9 100644
--- a/app/components/ColorPicker/ColorPicker.js
+++ b/app/components/ColorPicker/ColorPicker.js
@@ -5,7 +5,6 @@ import { observer } from 'mobx-react';
import styled from 'styled-components';
import Flex from 'shared/components/Flex';
import { LabelText, Outline } from 'components/Input';
-import { color, fonts, fontWeight } from 'shared/styles/constants';
import { validateColorHex } from 'shared/utils/color';
const colors = [
@@ -165,7 +164,7 @@ const StyledOutline = styled(Outline)`
const HexHash = styled.div`
margin-left: 12px;
padding-bottom: 0;
- font-weight: ${fontWeight.medium};
+ font-weight: 500;
user-select: none;
`;
@@ -177,13 +176,13 @@ const CustomColorInput = styled.input`
padding-bottom: 0;
outline: none;
background: none;
- font-family: ${fonts.monospace};
- font-weight: ${fontWeight.medium};
+ font-family: ${props => props.theme.monospaceFontFamily};
+ font-weight: 500;
&::placeholder {
- color: ${color.slate};
- font-family: ${fonts.monospace};
- font-weight: ${fontWeight.medium};
+ color: ${props => props.theme.slate};
+ font-family: ${props => props.theme.monospaceFontFamily};
+ font-weight: 500;
}
`;
diff --git a/app/components/DocumentPreview/DocumentPreview.js b/app/components/DocumentPreview/DocumentPreview.js
index e5c303e7d..6f3ca44c3 100644
--- a/app/components/DocumentPreview/DocumentPreview.js
+++ b/app/components/DocumentPreview/DocumentPreview.js
@@ -3,8 +3,7 @@ import * as React from 'react';
import { observer } from 'mobx-react';
import { Link } from 'react-router-dom';
import Document from 'models/Document';
-import styled from 'styled-components';
-import { color } from 'shared/styles/constants';
+import styled, { withTheme } from 'styled-components';
import Flex from 'shared/components/Flex';
import Highlight from 'components/Highlight';
import { StarredIcon } from 'outline-icons';
@@ -15,11 +14,11 @@ type Props = {
document: Document,
highlight?: ?string,
showCollection?: boolean,
- innerRef?: Function,
+ innerRef?: *,
};
-const StyledStar = styled(({ solid, ...props }) => (
-
+const StyledStar = withTheme(styled(({ solid, theme, ...props }) => (
+
))`
opacity: ${props => (props.solid ? '1 !important' : 0)};
transition: all 100ms ease-in-out;
@@ -30,7 +29,7 @@ const StyledStar = styled(({ solid, ...props }) => (
&:active {
transform: scale(0.95);
}
-`;
+`);
const StyledDocumentMenu = styled(DocumentMenu)`
position: absolute;
@@ -57,8 +56,8 @@ const DocumentLink = styled(Link)`
&:hover,
&:active,
&:focus {
- background: ${color.smokeLight};
- border: 2px solid ${color.smoke};
+ background: ${props => props.theme.smokeLight};
+ border: 2px solid ${props => props.theme.smoke};
outline: none;
${StyledStar}, ${StyledDocumentMenu} {
@@ -71,7 +70,7 @@ const DocumentLink = styled(Link)`
}
&:focus {
- border: 2px solid ${color.slateDark};
+ border: 2px solid ${props => props.theme.slateDark};
}
`;
diff --git a/app/components/DocumentPreview/components/PublishingInfo.js b/app/components/DocumentPreview/components/PublishingInfo.js
index d18140089..bdc6528c4 100644
--- a/app/components/DocumentPreview/components/PublishingInfo.js
+++ b/app/components/DocumentPreview/components/PublishingInfo.js
@@ -2,18 +2,18 @@
import * as React from 'react';
import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
import styled from 'styled-components';
-import { color } from 'shared/styles/constants';
import Collection from 'models/Collection';
import Document from 'models/Document';
import Flex from 'shared/components/Flex';
const Container = styled(Flex)`
- color: ${color.slate};
+ color: ${props => props.theme.slate};
font-size: 13px;
`;
const Modified = styled.span`
- color: ${props => (props.highlight ? color.slateDark : color.slate)};
+ color: ${props =>
+ props.highlight ? props.theme.slateDark : props.theme.slate};
font-weight: ${props => (props.highlight ? '600' : '400')};
`;
diff --git a/app/components/DropToImport/DropToImport.js b/app/components/DropToImport/DropToImport.js
index 77cb652d8..3c5fa8067 100644
--- a/app/components/DropToImport/DropToImport.js
+++ b/app/components/DropToImport/DropToImport.js
@@ -3,7 +3,6 @@ import * as React from 'react';
import { observable } from 'mobx';
import { observer, inject } from 'mobx-react';
import { injectGlobal } from 'styled-components';
-import { color } from 'shared/styles/constants';
import importFile from 'utils/importFile';
import invariant from 'invariant';
import _ from 'lodash';
@@ -25,12 +24,12 @@ type Props = {
// eslint-disable-next-line
injectGlobal`
.activeDropZone {
- background: ${color.slateDark};
- svg { fill: ${color.white}; }
+ background: ${props => props.theme.slateDark};
+ svg { fill: ${props => props.theme.white}; }
}
.activeDropZone a {
- color: ${color.white} !important;
+ color: ${props => props.theme.white} !important;
}
`;
diff --git a/app/components/DropdownMenu/DropdownMenu.js b/app/components/DropdownMenu/DropdownMenu.js
index e54938421..1989f76bb 100644
--- a/app/components/DropdownMenu/DropdownMenu.js
+++ b/app/components/DropdownMenu/DropdownMenu.js
@@ -6,7 +6,6 @@ import { observer } from 'mobx-react';
import styled from 'styled-components';
import { PortalWithState } from 'react-portal';
import Flex from 'shared/components/Flex';
-import { color } from 'shared/styles/constants';
import { fadeAndScaleIn } from 'shared/styles/animations';
type Props = {
@@ -90,8 +89,8 @@ const Menu = styled.div`
right: ${({ right }) => right}px;
top: ${({ top }) => top}px;
z-index: 1000;
- border: ${color.slateLight};
- background: ${color.white};
+ border: ${props => props.theme.slateLight};
+ background: ${props => props.theme.white};
border-radius: 2px;
padding: 0.5em 0;
min-width: 160px;
diff --git a/app/components/DropdownMenu/DropdownMenuItem.js b/app/components/DropdownMenu/DropdownMenuItem.js
index 8e430f322..6e2030e6b 100644
--- a/app/components/DropdownMenu/DropdownMenuItem.js
+++ b/app/components/DropdownMenu/DropdownMenuItem.js
@@ -1,7 +1,6 @@
// @flow
import * as React from 'react';
import styled from 'styled-components';
-import { color } from 'shared/styles/constants';
type Props = {
onClick?: (SyntheticEvent<*>) => *,
@@ -22,7 +21,7 @@ const MenuItem = styled.a`
padding: 6px 12px;
height: 32px;
- color: ${color.slateDark};
+ color: ${props => props.theme.slateDark};
justify-content: left;
align-items: center;
cursor: pointer;
@@ -33,11 +32,11 @@ const MenuItem = styled.a`
}
&:hover {
- color: ${color.white};
- background: ${color.primary};
+ color: ${props => props.theme.white};
+ background: ${props => props.theme.primary};
svg {
- fill: ${color.white};
+ fill: ${props => props.theme.white};
}
}
`;
diff --git a/app/components/Empty/Empty.js b/app/components/Empty/Empty.js
index 83c8d448a..c12ed2fb1 100644
--- a/app/components/Empty/Empty.js
+++ b/app/components/Empty/Empty.js
@@ -1,7 +1,6 @@
// @flow
import * as React from 'react';
import styled from 'styled-components';
-import { color } from 'shared/styles/constants';
type Props = {
children: string,
@@ -14,7 +13,7 @@ const Empty = (props: Props) => {
const Container = styled.div`
display: flex;
- color: ${color.slate};
+ color: ${props => props.theme.slate};
text-align: center;
`;
diff --git a/app/components/HelpText/HelpText.js b/app/components/HelpText/HelpText.js
index 4e728ed67..f096c9f20 100644
--- a/app/components/HelpText/HelpText.js
+++ b/app/components/HelpText/HelpText.js
@@ -1,10 +1,9 @@
// @flow
import styled from 'styled-components';
-import { color } from 'shared/styles/constants';
const HelpText = styled.p`
margin-top: 0;
- color: ${color.slateDark};
+ color: ${props => props.theme.slateDark};
`;
export default HelpText;
diff --git a/app/components/Highlight/Highlight.js b/app/components/Highlight/Highlight.js
index e6e8421a9..0a87e1078 100644
--- a/app/components/Highlight/Highlight.js
+++ b/app/components/Highlight/Highlight.js
@@ -2,7 +2,6 @@
import * as React from 'react';
import replace from 'string-replace-to-array';
import styled from 'styled-components';
-import { color } from 'shared/styles/constants';
type Props = {
highlight: ?string,
@@ -28,7 +27,7 @@ function Highlight({ highlight, caseSensitive, text, ...rest }: Props) {
}
const Mark = styled.mark`
- background: ${color.yellow};
+ background: ${props => props.theme.yellow};
`;
export default Highlight;
diff --git a/app/components/Input/Input.js b/app/components/Input/Input.js
index 0e2ed8688..d4d06fbc1 100644
--- a/app/components/Input/Input.js
+++ b/app/components/Input/Input.js
@@ -2,7 +2,6 @@
import * as React from 'react';
import styled from 'styled-components';
import Flex from 'shared/components/Flex';
-import { size, color } from 'shared/styles/constants';
const RealTextarea = styled.textarea`
border: 0;
@@ -13,7 +12,7 @@ const RealTextarea = styled.textarea`
&:disabled,
&::placeholder {
- color: ${color.slate};
+ color: ${props => props.theme.slate};
}
`;
@@ -26,7 +25,7 @@ const RealInput = styled.input`
&:disabled,
&::placeholder {
- color: ${color.slate};
+ color: ${props => props.theme.slate};
}
`;
@@ -37,16 +36,16 @@ const Wrapper = styled.div`
export const Outline = styled(Flex)`
display: flex;
flex: 1;
- margin: 0 0 ${size.large};
+ margin: 0 0 16px;
color: inherit;
border-width: 1px;
border-style: solid;
- border-color: ${props => (props.hasError ? 'red' : color.slateLight)};
+ border-color: ${props => (props.hasError ? 'red' : props.theme.slateLight)};
border-radius: 4px;
font-weight: normal;
&:focus {
- border-color: ${color.slate};
+ border-color: ${props => props.theme.slate};
}
`;
diff --git a/app/components/Key/key.js b/app/components/Key/key.js
index 8c53c8db7..e24c195d1 100644
--- a/app/components/Key/key.js
+++ b/app/components/Key/key.js
@@ -1,6 +1,5 @@
// @flow
import styled from 'styled-components';
-import { color } from 'shared/styles/constants';
const Key = styled.kbd`
display: inline-block;
@@ -8,13 +7,13 @@ const Key = styled.kbd`
font: 11px 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier,
monospace;
line-height: 10px;
- color: ${color.text};
+ color: ${props => props.theme.text};
vertical-align: middle;
- background-color: ${color.smokeLight};
- border: solid 1px ${color.slateLight};
- border-bottom-color: ${color.slate};
+ background-color: ${props => props.theme.smokeLight};
+ border: solid 1px ${props => props.theme.slateLight};
+ border-bottom-color: ${props => props.theme.slate};
border-radius: 3px;
- box-shadow: inset 0 -1px 0 ${color.slate};
+ box-shadow: inset 0 -1px 0 ${props => props.theme.slate};
`;
export default Key;
diff --git a/app/components/Labeled/Labeled.js b/app/components/Labeled/Labeled.js
index 5fde0cba1..167e7d80f 100644
--- a/app/components/Labeled/Labeled.js
+++ b/app/components/Labeled/Labeled.js
@@ -3,7 +3,6 @@ import * as React from 'react';
import { observer } from 'mobx-react';
import Flex from 'shared/components/Flex';
import styled from 'styled-components';
-import { size } from 'shared/styles/constants';
type Props = {
label: React.Node | string,
@@ -18,7 +17,7 @@ const Labeled = ({ label, children, ...props }: Props) => (
);
export const Label = styled(Flex)`
- margin-bottom: ${size.medium};
+ margin-bottom: 8px;
font-size: 13px;
font-weight: 500;
text-transform: uppercase;
diff --git a/app/components/Layout/Layout.js b/app/components/Layout/Layout.js
index 99b7a4ed5..e10d761d6 100644
--- a/app/components/Layout/Layout.js
+++ b/app/components/Layout/Layout.js
@@ -9,7 +9,6 @@ import { observer, inject } from 'mobx-react';
import keydown from 'react-keydown';
import Analytics from 'shared/components/Analytics';
import Flex from 'shared/components/Flex';
-import { layout } from 'shared/styles/constants';
import { documentEditUrl, homeUrl, searchUrl } from 'utils/routeHelpers';
import { LoadingIndicatorBar } from 'components/LoadingIndicator';
@@ -133,7 +132,7 @@ const Content = styled(Flex)`
}
${breakpoint('tablet')`
- margin-left: ${props => (props.editMode ? 0 : layout.sidebarWidth)};
+ margin-left: ${props => (props.editMode ? 0 : props.theme.sidebarWidth)};
`};
`;
diff --git a/app/components/List/Item.js b/app/components/List/Item.js
index 4f19f0e52..6b4036705 100644
--- a/app/components/List/Item.js
+++ b/app/components/List/Item.js
@@ -1,7 +1,6 @@
// @flow
import * as React from 'react';
import styled from 'styled-components';
-import { color, fontSize } from 'shared/styles/constants';
type Props = {
image?: React.Node,
@@ -27,7 +26,7 @@ const Wrapper = styled.li`
display: flex;
padding: 12px 0;
margin: 0;
- border-bottom: 1px solid ${color.smokeDark};
+ border-bottom: 1px solid ${props => props.theme.smokeDark};
`;
const Image = styled.div`
@@ -36,7 +35,7 @@ const Image = styled.div`
`;
const Heading = styled.h2`
- font-size: ${fontSize.medium};
+ font-size: 16px;
margin: 0;
`;
@@ -46,8 +45,8 @@ const Content = styled.div`
const Subtitle = styled.p`
margin: 0;
- font-size: ${fontSize.small};
- color: ${color.slate};
+ font-size: 14px;
+ color: ${props => props.theme.slate};
`;
const Actions = styled.div`
diff --git a/app/components/LoadingPlaceholder/components/Mask.js b/app/components/LoadingPlaceholder/components/Mask.js
index 3362e9979..d2978634a 100644
--- a/app/components/LoadingPlaceholder/components/Mask.js
+++ b/app/components/LoadingPlaceholder/components/Mask.js
@@ -2,7 +2,6 @@
import * as React from 'react';
import styled from 'styled-components';
import { pulsate } from 'shared/styles/animations';
-import { color } from 'shared/styles/constants';
import { randomInteger } from 'shared/random';
import Flex from 'shared/components/Flex';
@@ -26,7 +25,7 @@ const Redacted = styled(Flex)`
width: ${props => (props.header ? props.width / 2 : props.width)}%;
height: ${props => (props.header ? 28 : 18)}px;
margin-bottom: ${props => (props.header ? 18 : 12)}px;
- background-color: ${color.smokeDark};
+ background-color: ${props => props.theme.smokeDark};
animation: ${pulsate} 1.3s infinite;
&:last-child {
diff --git a/app/components/Modal/Modal.js b/app/components/Modal/Modal.js
index d19410b0b..52c9161ca 100644
--- a/app/components/Modal/Modal.js
+++ b/app/components/Modal/Modal.js
@@ -5,7 +5,6 @@ import styled, { injectGlobal } from 'styled-components';
import breakpoint from 'styled-components-breakpoint';
import ReactModal from 'react-modal';
import { CloseIcon } from 'outline-icons';
-import { color } from 'shared/styles/constants';
import { fadeAndScaleIn } from 'shared/styles/animations';
import Flex from 'shared/components/Flex';
@@ -84,7 +83,7 @@ const Close = styled.a`
top: 16px;
right: 16px;
opacity: 0.5;
- color: ${color.text};
+ color: ${props => props.theme.text};
&:hover {
opacity: 1;
diff --git a/app/components/Sidebar/Sidebar.js b/app/components/Sidebar/Sidebar.js
index 3f34e8214..156e6287e 100644
--- a/app/components/Sidebar/Sidebar.js
+++ b/app/components/Sidebar/Sidebar.js
@@ -7,7 +7,6 @@ import breakpoint from 'styled-components-breakpoint';
import { observer, inject } from 'mobx-react';
import { CloseIcon, MenuIcon } from 'outline-icons';
import Flex from 'shared/components/Flex';
-import { color, layout } from 'shared/styles/constants';
import AuthStore from 'stores/AuthStore';
import DocumentsStore from 'stores/DocumentsStore';
@@ -59,9 +58,9 @@ const Container = styled(Flex)`
position: fixed;
top: 0;
bottom: 0;
- left: ${props => (props.editMode ? `-${layout.sidebarWidth}` : 0)};
+ left: ${props => (props.editMode ? `-${props.theme.sidebarWidth}` : 0)};
width: 100%;
- background: ${color.smoke};
+ background: ${props => props.theme.smoke};
transition: left 200ms ease-in-out;
margin-left: ${props => (props.mobileSidebarVisible ? 0 : '-100%')};
z-index: 1;
@@ -72,7 +71,7 @@ const Container = styled(Flex)`
}
${breakpoint('tablet')`
- width: ${layout.sidebarWidth};
+ width: ${props => props.theme.sidebarWidth};
margin: 0;
`};
`;
diff --git a/app/components/Sidebar/components/Header.js b/app/components/Sidebar/components/Header.js
index 63cff780c..0e3e94815 100644
--- a/app/components/Sidebar/components/Header.js
+++ b/app/components/Sidebar/components/Header.js
@@ -1,13 +1,12 @@
// @flow
import Flex from 'shared/components/Flex';
import styled from 'styled-components';
-import { color, fontWeight } from 'shared/styles/constants';
const Header = styled(Flex)`
font-size: 11px;
- font-weight: ${fontWeight.semiBold};
+ font-weight: 600;
text-transform: uppercase;
- color: ${color.slateDark};
+ color: ${props => props.theme.slateDark};
letter-spacing: 0.04em;
margin-bottom: 4px;
`;
diff --git a/app/components/Sidebar/components/HeaderBlock.js b/app/components/Sidebar/components/HeaderBlock.js
index dfde64198..c59e4672d 100644
--- a/app/components/Sidebar/components/HeaderBlock.js
+++ b/app/components/Sidebar/components/HeaderBlock.js
@@ -1,7 +1,6 @@
// @flow
import * as React from 'react';
-import styled from 'styled-components';
-import { color } from 'shared/styles/constants';
+import styled, { withTheme } from 'styled-components';
import { ExpandedIcon } from 'outline-icons';
import Flex from 'shared/components/Flex';
import TeamLogo from './TeamLogo';
@@ -11,6 +10,7 @@ type Props = {
subheading: string,
showDisclosure?: boolean,
logoUrl: string,
+ theme: Object,
};
function HeaderBlock({
@@ -18,6 +18,7 @@ function HeaderBlock({
teamName,
subheading,
logoUrl,
+ theme,
...rest
}: Props) {
return (
@@ -26,7 +27,7 @@ function HeaderBlock({
{teamName}{' '}
- {showDisclosure && }
+ {showDisclosure && }
{subheading}
@@ -45,7 +46,7 @@ const Subheading = styled.div`
font-size: 11px;
text-transform: uppercase;
font-weight: 500;
- color: ${color.slateDark};
+ color: ${props => props.theme.slateDark};
`;
const TeamName = styled.div`
@@ -53,7 +54,7 @@ const TeamName = styled.div`
padding-left: 10px;
padding-right: 24px;
font-weight: 600;
- color: ${color.text};
+ color: ${props => props.theme.text};
text-decoration: none;
font-size: 16px;
`;
@@ -72,4 +73,4 @@ const Header = styled(Flex)`
}
`;
-export default HeaderBlock;
+export default withTheme(HeaderBlock);
diff --git a/app/components/Sidebar/components/SidebarLink.js b/app/components/Sidebar/components/SidebarLink.js
index 03d8c2a6f..55c882154 100644
--- a/app/components/Sidebar/components/SidebarLink.js
+++ b/app/components/Sidebar/components/SidebarLink.js
@@ -4,15 +4,9 @@ import { observable, action } from 'mobx';
import { observer } from 'mobx-react';
import { withRouter, NavLink } from 'react-router-dom';
import { CollapsedIcon } from 'outline-icons';
-import { color, fontWeight } from 'shared/styles/constants';
-import styled from 'styled-components';
+import styled, { withTheme } from 'styled-components';
import Flex from 'shared/components/Flex';
-const activeStyle = {
- color: color.black,
- fontWeight: fontWeight.medium,
-};
-
const StyledGoTo = styled(CollapsedIcon)`
margin-bottom: -4px;
margin-left: 1px;
@@ -34,12 +28,12 @@ const StyledNavLink = styled(NavLink)`
text-overflow: ellipsis;
padding: 4px 0;
margin-left: ${({ icon }) => (icon ? '-20px;' : '0')};
- color: ${color.slateDark};
+ color: ${props => props.theme.slateDark};
font-size: 15px;
cursor: pointer;
&:hover {
- color: ${color.text};
+ color: ${props => props.theme.text};
}
`;
@@ -57,11 +51,22 @@ type Props = {
hideExpandToggle?: boolean,
iconColor?: string,
active?: boolean,
+ theme: Object,
};
@observer
class SidebarLink extends React.Component {
@observable expanded: boolean = false;
+ activeStyle: Object;
+
+ constructor(props) {
+ super(props);
+
+ this.activeStyle = {
+ color: props.theme.black,
+ fontWeight: 500,
+ };
+ }
componentDidMount() {
if (this.props.expand) this.handleExpand();
@@ -104,8 +109,8 @@ class SidebarLink extends React.Component {
props.theme.slate};
svg {
opacity: 0.75;
}
@@ -158,4 +163,4 @@ const Content = styled.div`
width: 100%;
`;
-export default withRouter(SidebarLink);
+export default withRouter(withTheme(SidebarLink));
diff --git a/app/components/Sidebar/components/TeamLogo.js b/app/components/Sidebar/components/TeamLogo.js
index f699b32a8..6d9f2b09f 100644
--- a/app/components/Sidebar/components/TeamLogo.js
+++ b/app/components/Sidebar/components/TeamLogo.js
@@ -1,13 +1,12 @@
// @flow
import styled from 'styled-components';
-import { color } from 'shared/styles/constants';
const TeamLogo = styled.img`
width: 38px;
height: 38px;
border-radius: 4px;
- background: ${color.white};
- border: 1px solid ${color.slateLight};
+ background: ${props => props.theme.white};
+ border: 1px solid ${props => props.theme.slateLight};
`;
export default TeamLogo;
diff --git a/app/components/Subheading.js b/app/components/Subheading.js
index 32cbe5be1..afe2bcb66 100644
--- a/app/components/Subheading.js
+++ b/app/components/Subheading.js
@@ -1,14 +1,13 @@
// @flow
import styled from 'styled-components';
-import { color } from 'shared/styles/constants';
const Subheading = styled.h3`
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
- color: ${color.slate};
+ color: ${props => props.theme.slate};
letter-spacing: 0.04em;
- border-bottom: 1px solid ${color.slateLight};
+ border-bottom: 1px solid ${props => props.theme.slateLight};
padding-bottom: 8px;
margin-top: 30px;
margin-bottom: 10px;
diff --git a/app/components/Toasts/Toasts.js b/app/components/Toasts/Toasts.js
index efe25a437..cc5d4347d 100644
--- a/app/components/Toasts/Toasts.js
+++ b/app/components/Toasts/Toasts.js
@@ -2,7 +2,6 @@
import * as React from 'react';
import { observer } from 'mobx-react';
import styled from 'styled-components';
-import { layout } from 'shared/styles/constants';
import Toast from './components/Toast';
import UiStore from '../../stores/UiStore';
@@ -34,8 +33,8 @@ class Toasts extends React.Component {
const List = styled.ol`
position: fixed;
- left: ${layout.hpadding};
- bottom: ${layout.vpadding};
+ left: ${props => props.theme.hpadding};
+ bottom: ${props => props.theme.vpadding};
list-style: none;
margin: 0;
padding: 0;
diff --git a/app/components/Toasts/components/Toast.js b/app/components/Toasts/components/Toast.js
index 04bbc84f6..e2b603551 100644
--- a/app/components/Toasts/components/Toast.js
+++ b/app/components/Toasts/components/Toast.js
@@ -2,7 +2,6 @@
import * as React from 'react';
import styled from 'styled-components';
import { darken } from 'polished';
-import { color } from 'shared/styles/constants';
import { fadeAndScaleIn } from 'shared/styles/animations';
import type { Toast as TToast } from '../../../types';
@@ -51,14 +50,14 @@ const Container = styled.li`
animation: ${fadeAndScaleIn} 100ms ease;
margin: 8px 0;
padding: 8px;
- color: ${color.white};
- background: ${props => color[props.type]};
+ color: ${props => props.theme.white};
+ background: ${props => props.theme[props.type]};
font-size: 15px;
border-radius: 5px;
cursor: default;
&:hover {
- background: ${props => darken(0.05, color[props.type])};
+ background: ${props => darken(0.05, props.theme[props.type])};
}
`;
diff --git a/app/index.js b/app/index.js
index c4443c7ea..ac4689e4a 100644
--- a/app/index.js
+++ b/app/index.js
@@ -2,6 +2,7 @@
import * as React from 'react';
import { render } from 'react-dom';
import { Provider } from 'mobx-react';
+import { ThemeProvider } from 'styled-components';
import {
BrowserRouter as Router,
Switch,
@@ -10,6 +11,7 @@ import {
} from 'react-router-dom';
import stores from 'stores';
+import theme from 'shared/styles/theme';
import globalStyles from 'shared/styles/globals';
import 'shared/styles/prism.css';
@@ -55,73 +57,87 @@ if (element) {
render(
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{DevTools && }
,
diff --git a/app/scenes/Document/Document.js b/app/scenes/Document/Document.js
index 960c8d08c..f60f15bbb 100644
--- a/app/scenes/Document/Document.js
+++ b/app/scenes/Document/Document.js
@@ -330,7 +330,7 @@ const Container = styled(Flex)`
`;
const LoadingState = styled(LoadingPlaceholder)`
- margin: 90px 0;
+ margin: 40px 0;
`;
export default withRouter(inject('ui', 'auth', 'documents')(DocumentScene));
diff --git a/app/scenes/Document/components/Actions.js b/app/scenes/Document/components/Actions.js
index 96768a9af..dd90aa88a 100644
--- a/app/scenes/Document/components/Actions.js
+++ b/app/scenes/Document/components/Actions.js
@@ -2,8 +2,6 @@
import * as React from 'react';
import styled from 'styled-components';
import { NewDocumentIcon } from 'outline-icons';
-
-import { color } from 'shared/styles/constants';
import Document from 'models/Document';
import { documentEditUrl, documentNewUrl } from 'utils/routeHelpers';
@@ -123,7 +121,7 @@ const Link = styled.a`
align-items: center;
font-weight: ${props => (props.highlight ? 500 : 'inherit')};
color: ${props =>
- props.highlight ? `${color.primary} !important` : 'inherit'};
+ props.highlight ? `${props.theme.primary} !important` : 'inherit'};
opacity: ${props => (props.disabled ? 0.5 : 1)};
pointer-events: ${props => (props.disabled ? 'none' : 'auto')};
cursor: ${props => (props.disabled ? 'default' : 'pointer')};
diff --git a/app/scenes/Document/components/DocumentMove/DocumentMove.js b/app/scenes/Document/components/DocumentMove/DocumentMove.js
index 10e50bed9..8a61d5633 100644
--- a/app/scenes/Document/components/DocumentMove/DocumentMove.js
+++ b/app/scenes/Document/components/DocumentMove/DocumentMove.js
@@ -8,7 +8,6 @@ import { Search } from 'js-search';
import ArrowKeyNavigation from 'boundless-arrow-key-navigation';
import _ from 'lodash';
import styled from 'styled-components';
-import { size } from 'shared/styles/constants';
import Modal from 'components/Modal';
import Input from 'components/Input';
@@ -181,7 +180,7 @@ class DocumentMove extends React.Component {
}
const Section = styled(Flex)`
- margin-bottom: ${size.huge};
+ margin-bottom: 24px;
`;
const StyledArrowKeyNavigation = styled(ArrowKeyNavigation)`
diff --git a/app/scenes/Document/components/DocumentMove/components/PathToDocument.js b/app/scenes/Document/components/DocumentMove/components/PathToDocument.js
index 8b8b67470..d24c56e64 100644
--- a/app/scenes/Document/components/DocumentMove/components/PathToDocument.js
+++ b/app/scenes/Document/components/DocumentMove/components/PathToDocument.js
@@ -4,8 +4,6 @@ import { observer } from 'mobx-react';
import invariant from 'invariant';
import styled from 'styled-components';
import { GoToIcon } from 'outline-icons';
-
-import { color } from 'shared/styles/constants';
import Flex from 'shared/components/Flex';
import Document from 'models/Document';
@@ -14,7 +12,7 @@ const ResultWrapper = styled.div`
display: flex;
margin-bottom: 10px;
- color: ${color.text};
+ color: ${props => props.theme.text};
cursor: default;
`;
@@ -30,13 +28,13 @@ const ResultWrapperLink = ResultWrapper.withComponent('a').extend`
&:focus {
margin-left: 0px;
border-radius: 2px;
- background: ${color.black};
- color: ${color.smokeLight};
+ background: ${props => props.theme.black};
+ color: ${props => props.theme.smokeLight};
outline: none;
cursor: pointer;
${StyledGoToIcon} {
- fill: ${color.white};
+ fill: ${props => props.theme.white};
}
}
`;
diff --git a/app/scenes/Document/components/LoadingPlaceholder.js b/app/scenes/Document/components/LoadingPlaceholder.js
index 3cffaa92c..b7897e491 100644
--- a/app/scenes/Document/components/LoadingPlaceholder.js
+++ b/app/scenes/Document/components/LoadingPlaceholder.js
@@ -2,7 +2,6 @@
import * as React from 'react';
import styled from 'styled-components';
import { pulsate } from 'shared/styles/animations';
-import { color } from 'shared/styles/constants';
import Flex from 'shared/components/Flex';
import Fade from 'components/Fade';
@@ -29,7 +28,7 @@ const LoadingPlaceholder = (props: Object) => {
const Mask = styled(Flex)`
height: ${props => (props.header ? 28 : 18)}px;
margin-bottom: ${props => (props.header ? 32 : 14)}px;
- background-color: ${color.smoke};
+ background-color: ${props => props.theme.smoke};
animation: ${pulsate} 1.3s infinite;
`;
diff --git a/app/scenes/Search/components/SearchField.js b/app/scenes/Search/components/SearchField.js
index 2e4158be7..934db77e4 100644
--- a/app/scenes/Search/components/SearchField.js
+++ b/app/scenes/Search/components/SearchField.js
@@ -1,13 +1,12 @@
// @flow
import * as React from 'react';
-import styled from 'styled-components';
+import styled, { withTheme } from 'styled-components';
import { SearchIcon } from 'outline-icons';
-
import Flex from 'shared/components/Flex';
-import { color } from 'shared/styles/constants';
type Props = {
onChange: string => *,
+ theme: Object,
};
class SearchField extends React.Component {
@@ -31,7 +30,7 @@ class SearchField extends React.Component {
props.theme.slateLight};
}
:-moz-placeholder {
- color: ${color.slateLight};
+ color: ${props => props.theme.slateLight};
}
::-moz-placeholder {
- color: ${color.slateLight};
+ color: ${props => props.theme.slateLight};
}
:-ms-input-placeholder {
- color: ${color.slateLight};
+ color: ${props => props.theme.slateLight};
}
`;
@@ -74,4 +73,4 @@ const StyledIcon = styled(SearchIcon)`
top: 4px;
`;
-export default SearchField;
+export default withTheme(SearchField);
diff --git a/app/scenes/Settings/Details.js b/app/scenes/Settings/Details.js
index 4d5766e11..4854e4800 100644
--- a/app/scenes/Settings/Details.js
+++ b/app/scenes/Settings/Details.js
@@ -3,7 +3,6 @@ import * as React from 'react';
import { observable } from 'mobx';
import { observer, inject } from 'mobx-react';
import styled from 'styled-components';
-import { color, size } from 'shared/styles/constants';
import AuthStore from 'stores/AuthStore';
import UiStore from 'stores/UiStore';
@@ -120,7 +119,7 @@ class Details extends React.Component {
}
const ProfilePicture = styled(Flex)`
- margin-bottom: ${size.huge};
+ margin-bottom: 24px;
`;
const avatarStyles = `
@@ -133,7 +132,7 @@ const AvatarContainer = styled(Flex)`
${avatarStyles};
position: relative;
box-shadow: 0 0 0 1px #dae1e9;
- background: ${color.white};
+ background: ${props => props.theme.white};
div div {
${avatarStyles};
@@ -150,7 +149,7 @@ const AvatarContainer = styled(Flex)`
&:hover div {
opacity: 1;
background: rgba(0, 0, 0, 0.75);
- color: ${color.white};
+ color: ${props => props.theme.white};
}
`;
diff --git a/app/scenes/Settings/Profile.js b/app/scenes/Settings/Profile.js
index 11cbe2062..c71236bde 100644
--- a/app/scenes/Settings/Profile.js
+++ b/app/scenes/Settings/Profile.js
@@ -3,7 +3,6 @@ import * as React from 'react';
import { observable } from 'mobx';
import { observer, inject } from 'mobx-react';
import styled from 'styled-components';
-import { color, size } from 'shared/styles/constants';
import AuthStore from 'stores/AuthStore';
import UiStore from 'stores/UiStore';
@@ -104,7 +103,7 @@ class Profile extends React.Component {
}
const ProfilePicture = styled(Flex)`
- margin-bottom: ${size.huge};
+ margin-bottom: 24px;
`;
const avatarStyles = `
@@ -132,7 +131,7 @@ const AvatarContainer = styled(Flex)`
&:hover div {
opacity: 1;
background: rgba(0, 0, 0, 0.75);
- color: ${color.white};
+ color: ${props => props.theme.white};
}
`;
diff --git a/app/scenes/Settings/components/UserListItem.js b/app/scenes/Settings/components/UserListItem.js
index c7de8a56b..e62eb3210 100644
--- a/app/scenes/Settings/components/UserListItem.js
+++ b/app/scenes/Settings/components/UserListItem.js
@@ -1,7 +1,6 @@
// @flow
import * as React from 'react';
import styled from 'styled-components';
-import { color } from 'shared/styles/constants';
import UserMenu from 'menus/UserMenu';
import Avatar from 'components/Avatar';
@@ -34,8 +33,9 @@ const UserListItem = ({ user, isCurrentUser }: Props) => {
const Badge = styled.span`
margin-left: 10px;
padding: 2px 6px 3px;
- background-color: ${({ admin }) => (admin ? color.primary : color.smokeDark)};
- color: ${({ admin }) => (admin ? color.white : color.text)};
+ background-color: ${({ admin, theme }) =>
+ admin ? theme.primary : theme.smokeDark};
+ color: ${({ admin, theme }) => (admin ? theme.white : theme.text)};
border-radius: 2px;
font-size: 11px;
text-transform: uppercase;
diff --git a/server/emails/components/EmailLayout.js b/server/emails/components/EmailLayout.js
index 52c6178f1..17e8cf270 100644
--- a/server/emails/components/EmailLayout.js
+++ b/server/emails/components/EmailLayout.js
@@ -1,7 +1,7 @@
// @flow
import * as React from 'react';
import { Table, TBody, TR, TD } from 'oy-vey';
-import { fonts } from '../../../shared/styles/constants';
+import theme from '../../../shared/styles/theme';
type Props = {
children: React.Node,
@@ -19,7 +19,7 @@ export default (props: Props) => (
export const baseStyles = `
#__bodyTable__ {
- font-family: ${fonts.regular};
+ font-family: ${theme.fontFamily};
font-size: 16px;
line-height: 1.5;
}
diff --git a/server/emails/components/Footer.js b/server/emails/components/Footer.js
index 6a211d718..af03cfe87 100644
--- a/server/emails/components/Footer.js
+++ b/server/emails/components/Footer.js
@@ -1,26 +1,26 @@
// @flow
import * as React from 'react';
import { Table, TBody, TR, TD } from 'oy-vey';
-import { color } from '../../../shared/styles/constants';
import { twitterUrl, spectrumUrl } from '../../../shared/utils/routeHelpers';
+import theme from '../../../shared/styles/theme';
export default () => {
const style = {
padding: '20px 0',
- borderTop: `1px solid ${color.smokeDark}`,
- color: color.slate,
+ borderTop: `1px solid ${theme.smokeDark}`,
+ color: theme.slate,
fontSize: '14px',
};
const linkStyle = {
- color: color.slate,
+ color: theme.slate,
fontWeight: 500,
textDecoration: 'none',
marginRight: '10px',
};
const externalLinkStyle = {
- color: color.slate,
+ color: theme.slate,
textDecoration: 'none',
margin: '0 10px',
};
diff --git a/server/pages/Changelog.js b/server/pages/Changelog.js
index b866f7fa2..64b5600da 100644
--- a/server/pages/Changelog.js
+++ b/server/pages/Changelog.js
@@ -6,7 +6,6 @@ import Grid from 'styled-components-grid';
import ReactMarkdown from 'react-markdown';
import { Helmet } from 'react-helmet';
import Header from './components/Header';
-import { color } from '../../shared/styles/constants';
type Release = {
id: string,
@@ -46,7 +45,7 @@ function Changelog({ releases }: { releases: Release[] }) {
const Heading = styled.h1`
a {
- color: ${color.text};
+ color: ${props => props.theme.text};
}
a:hover {
text-decoration: underline;
@@ -54,7 +53,7 @@ const Heading = styled.h1`
`;
const Time = styled.time`
- color: ${color.slateDark};
+ color: ${props => props.theme.slateDark};
margin-top: -16px;
display: block;
`;
@@ -67,7 +66,7 @@ const Container = styled.div`
`;
const Article = styled.div`
- border-bottom: 1px solid ${color.slateLight};
+ border-bottom: 1px solid ${props => props.theme.slateLight};
padding-bottom: 2em;
&:last-child {
diff --git a/server/pages/Home.js b/server/pages/Home.js
index da4eb5e7b..81c0b90d4 100644
--- a/server/pages/Home.js
+++ b/server/pages/Home.js
@@ -8,7 +8,6 @@ import Notice from '../../shared/components/Notice';
import Hero from './components/Hero';
import SigninButtons from './components/SigninButtons';
import { developers, githubUrl } from '../../shared/utils/routeHelpers';
-import { color } from '../../shared/styles/constants';
type Props = {
notice?: 'google-hd' | 'auth-error',
@@ -133,7 +132,7 @@ const Screenshot = styled.img`
`;
const Highlights = styled(Grid)`
- background: ${color.yellow};
+ background: ${props => props.theme.yellow};
margin: 0 1em;
padding: 0 1em;
`;
@@ -151,7 +150,7 @@ const Feature = styled(Grid.Unit)`
}
a {
- color: ${color.black};
+ color: ${props => props.theme.black};
text-decoration: underline;
text-transform: uppercase;
font-weight: 500;
diff --git a/server/pages/components/Header.js b/server/pages/components/Header.js
index 73ebbf8af..16cc9492f 100644
--- a/server/pages/components/Header.js
+++ b/server/pages/components/Header.js
@@ -1,12 +1,11 @@
// @flow
import styled from 'styled-components';
-import { color } from '../../../shared/styles/constants';
const Header = styled.div`
width: 100%;
padding: 0 2em 2em;
text-align: center;
- background: ${color.slateLight};
+ background: ${props => props.theme.slateLight};
margin-bottom: 2em;
p {
diff --git a/server/pages/components/Layout.js b/server/pages/components/Layout.js
index c6e9a0d8a..970a43de3 100644
--- a/server/pages/components/Layout.js
+++ b/server/pages/components/Layout.js
@@ -4,7 +4,6 @@ import { Helmet } from 'react-helmet';
import { TopNavigation, BottomNavigation } from './Navigation';
import Analytics from '../../../shared/components/Analytics';
import globalStyles from '../../../shared/styles/globals';
-import { color } from '../../../shared/styles/constants';
import prefetchTags from '../../utils/prefetchTags';
export const title = 'Outline';
@@ -43,7 +42,6 @@ export default function Layout({ children }: Props) {
-
`
font-size: 15px;
font-weight: 500;
a {
- color: ${color.slate};
+ color: ${props.theme.slate};
}
a:hover {
- color: ${color.slateDark};
+ color: ${props.theme.slateDark};
text-decoration: underline;
}
`;
@@ -141,7 +140,7 @@ const Brand = styled.a`
font-weight: 600;
font-size: 20px;
text-decoration: none;
- color: ${color.black};
+ color: ${props => props.theme.black};
`;
export { TopNavigation, BottomNavigation };
diff --git a/server/pages/components/SigninButtons.js b/server/pages/components/SigninButtons.js
index acd84f0d3..cefa6d22e 100644
--- a/server/pages/components/SigninButtons.js
+++ b/server/pages/components/SigninButtons.js
@@ -5,7 +5,6 @@ import { signin } from '../../../shared/utils/routeHelpers';
import Flex from '../../../shared/components/Flex';
import GoogleLogo from '../../../shared/components/GoogleLogo';
import SlackLogo from '../../../shared/components/SlackLogo';
-import { color } from '../../../shared/styles/constants';
type Props = {
lastSignedIn: string,
@@ -56,8 +55,8 @@ const Button = styled.a`
display: inline-flex;
align-items: center;
padding: 10px 20px;
- color: ${color.white};
- background: ${color.black};
+ color: ${props => props.theme.white};
+ background: ${props => props.theme.black};
border-radius: 4px;
font-weight: 600;
height: 56px;
@@ -65,7 +64,7 @@ const Button = styled.a`
const LastLogin = styled.p`
font-size: 12px;
- color: ${color.slate};
+ color: ${props => props.theme.slate};
padding-top: 4px;
`;
diff --git a/server/utils/renderpage.js b/server/utils/renderpage.js
index a51572634..ed57c8ace 100644
--- a/server/utils/renderpage.js
+++ b/server/utils/renderpage.js
@@ -2,15 +2,22 @@
import * as React from 'react';
import ReactDOMServer from 'react-dom/server';
import { Helmet } from 'react-helmet';
-import { ServerStyleSheet, StyleSheetManager } from 'styled-components';
+import {
+ ServerStyleSheet,
+ StyleSheetManager,
+ ThemeProvider,
+} from 'styled-components';
import Layout from '../pages/components/Layout';
+import theme from '../../shared/styles/theme';
const sheet = new ServerStyleSheet();
export default function renderpage(ctx: Object, children: React.Node) {
const html = ReactDOMServer.renderToString(
- {children}
+
+ {children}
+
);
diff --git a/shared/styles/base.js b/shared/styles/base.js
index 83cc7268b..a69e38e01 100644
--- a/shared/styles/base.js
+++ b/shared/styles/base.js
@@ -1,5 +1,5 @@
// @flow
-import { color } from './constants';
+import theme from './theme';
export default `
* {
@@ -27,7 +27,7 @@ export default `
body {
font-size: 16px;
line-height: 1.5;
- color: ${color.text};
+ color: ${theme.text};
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
@@ -35,7 +35,7 @@ export default `
}
a {
- color: ${color.blue};
+ color: ${theme.blue};
text-decoration: none;
cursor: pointer;
}
@@ -50,7 +50,7 @@ export default `
line-height: 1.25;
margin-top: 1em;
margin-bottom: 0.5em;
- color: ${color.text};
+ color: ${theme.text};
}
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
diff --git a/shared/styles/constants.js b/shared/styles/constants.js
deleted file mode 100644
index 3615b0736..000000000
--- a/shared/styles/constants.js
+++ /dev/null
@@ -1,70 +0,0 @@
-// @flow
-export const layout = {
- padding: '1.5vw 1.875vw',
- vpadding: '1.5vw',
- hpadding: '1.875vw',
- sidebarWidth: '280px',
- sidebarMinWidth: '250px',
- sidebarMaxWidth: '350px',
-};
-
-export const size = {
- tiny: '2px',
- small: '4px',
- medium: '8px',
- large: '16px',
- huge: '24px',
- enormous: '32px',
-};
-
-export const fontSize = {
- small: '14px',
- medium: '16px',
- large: '18px',
- huge: '24px',
-};
-
-export const fontWeight = {
- ultraLight: 100,
- thin: 200,
- light: 300,
- regular: 400,
- medium: 500,
- semiBold: 600,
- bold: 700,
- heavy: 800,
-};
-
-export const fonts = {
- regular: `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
- Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;`,
- monospace: `Menlo, Consolas, 'Liberation Mono', monospace;`,
-};
-
-export const color = {
- text: '#171B35',
-
- /* Brand */
- primary: '#1AB6FF',
- danger: '#D0021B',
- warning: '#f08a24',
- success: '#1AB6FF',
- info: '#a0d3e8',
- offline: '#000000',
-
- /* Dark Grays */
- slate: '#9BA6B2',
- slateLight: '#DAE1E9',
- slateDark: '#4E5C6E',
-
- /* Light Grays */
- smoke: '#F4F7FA',
- smokeLight: '#F9FBFC',
- smokeDark: '#E8EBED',
-
- /* Misc */
- white: '#FFFFFF',
- black: '#000000',
- blue: '#16B3FF',
- yellow: '#FFD95C',
-};
diff --git a/shared/styles/theme.js b/shared/styles/theme.js
new file mode 100644
index 000000000..0ce09b36f
--- /dev/null
+++ b/shared/styles/theme.js
@@ -0,0 +1,34 @@
+// @flow
+const theme = {
+ fontFamily:
+ "-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen, Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif",
+ monospaceFontFamily: `Menlo, Consolas, 'Liberation Mono', monospace;`,
+ fontWeight: 400,
+
+ text: '#171B35',
+ link: '#1AB6FF',
+ primary: '#1AB6FF',
+ placeholder: '#b1becc',
+
+ slate: '#9BA6B2',
+ slateLight: '#DAE1E9',
+ slateDark: '#4E5C6E',
+
+ smoke: '#F4F7FA',
+ smokeLight: '#F9FBFC',
+ smokeDark: '#E8EBED',
+
+ white: '#FFFFFF',
+ blue: '#1AB6FF',
+ black: '#000000',
+ blackLight: '#2f3336',
+
+ padding: '1.5vw 1.875vw',
+ vpadding: '1.5vw',
+ hpadding: '1.875vw',
+ sidebarWidth: '280px',
+ sidebarMinWidth: '250px',
+ sidebarMaxWidth: '350px',
+};
+
+export default theme;
From 19c5cafa51b5328ea37fc0a8021d0f80f5b04791 Mon Sep 17 00:00:00 2001
From: Tom Moor
Date: Sun, 10 Jun 2018 09:56:08 -0700
Subject: [PATCH 04/61] Restore missing colors
---
shared/styles/theme.js | 4 ++++
1 file changed, 4 insertions(+)
diff --git a/shared/styles/theme.js b/shared/styles/theme.js
index 0ce09b36f..7c71623ff 100644
--- a/shared/styles/theme.js
+++ b/shared/styles/theme.js
@@ -9,6 +9,10 @@ const theme = {
link: '#1AB6FF',
primary: '#1AB6FF',
placeholder: '#b1becc',
+ danger: '#D0021B',
+ warning: '#f08a24',
+ success: '#1AB6FF',
+ info: '#a0d3e8',
slate: '#9BA6B2',
slateLight: '#DAE1E9',
From fad5976dd2a5ecd8ecccf2baab1d50b8a80e6b08 Mon Sep 17 00:00:00 2001
From: Satyadeep
Date: Sun, 17 Jun 2018 01:06:02 +0530
Subject: [PATCH 05/61] Allowed domains env variable for Google Auth (#682)
* Allowed domains env variable for Google Auth
* Fixing lint errors
* PR comments. Use includes instead of indexOf
---
.env.sample | 3 +++
server/auth/google.js | 8 ++++++++
server/pages/Home.js | 8 +++++++-
3 files changed, 18 insertions(+), 1 deletion(-)
diff --git a/.env.sample b/.env.sample
index 8a79a2171..50c099999 100644
--- a/.env.sample
+++ b/.env.sample
@@ -20,6 +20,9 @@ SLACK_SECRET=d2dc414f9953226bad0a356cXXXXYYYY
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=
+# Comma separated list of domains to be allowed (optional)
+# If not set, all Google apps domains are allowed by default
+GOOGLE_ALLOWED_DOMAINS=
# Third party credentials (optional)
SLACK_VERIFICATION_TOKEN=PLxk6OlXXXXXVj3YYYY
diff --git a/server/auth/google.js b/server/auth/google.js
index 7553fe52f..c8f28f51e 100644
--- a/server/auth/google.js
+++ b/server/auth/google.js
@@ -12,6 +12,7 @@ const client = new OAuth2Client(
process.env.GOOGLE_CLIENT_SECRET,
`${process.env.URL}/auth/google.callback`
);
+const allowedDomainsEnv = process.env.GOOGLE_ALLOWED_DOMAINS;
// start the oauth process and redirect user to Google
router.get('google', async ctx => {
@@ -43,6 +44,13 @@ router.get('google.callback', async ctx => {
return;
}
+ // allow all domains by default if the env is not set
+ const allowedDomains = allowedDomainsEnv && allowedDomainsEnv.split(',');
+ if (allowedDomains && !allowedDomains.includes(profile.data.hd)) {
+ ctx.redirect('/?notice=hd-not-allowed');
+ return;
+ }
+
const googleId = profile.data.hd;
const teamName = capitalize(profile.data.hd.split('.')[0]);
diff --git a/server/pages/Home.js b/server/pages/Home.js
index 81c0b90d4..f937cfa6b 100644
--- a/server/pages/Home.js
+++ b/server/pages/Home.js
@@ -10,7 +10,7 @@ import SigninButtons from './components/SigninButtons';
import { developers, githubUrl } from '../../shared/utils/routeHelpers';
type Props = {
- notice?: 'google-hd' | 'auth-error',
+ notice?: 'google-hd' | 'auth-error' | 'hd-not-allowed',
lastSignedIn: string,
googleSigninEnabled: boolean,
slackSigninEnabled: boolean,
@@ -38,6 +38,12 @@ function Home(props: Props) {
try signing in with your company Google account.
)}
+ {props.notice === 'hd-not-allowed' && (
+
+ Sorry, your Google apps domain is not allowed. Please try again
+ with an allowed company domain.
+
+ )}
{props.notice === 'auth-error' && (
Authentication failed - we were unable to sign you in at this
From ae502c10c9460dd7e3ce6d11d8fdb528041d3db7 Mon Sep 17 00:00:00 2001
From: Tom Moor
Date: Sat, 16 Jun 2018 12:36:25 -0700
Subject: [PATCH 06/61] Revoked share links (#664)
* Move to revokation API for share links
* Respect revoked share links
Add documentation for shares endpoints
* :green_heart:
---
app/stores/SharesStore.js | 2 +-
server/api/__snapshots__/shares.test.js.snap | 9 +++
server/api/documents.js | 7 +-
server/api/documents.test.js | 16 +++-
server/api/shares.js | 15 +++-
server/api/shares.test.js | 73 +++++++++++++++++++
.../20180604191743-revoke-share-links.js | 19 +++++
server/models/Share.js | 30 ++++++--
server/pages/Api.js | 37 ++++++++--
server/policies/share.js | 2 +-
10 files changed, 190 insertions(+), 20 deletions(-)
create mode 100644 server/migrations/20180604191743-revoke-share-links.js
diff --git a/app/stores/SharesStore.js b/app/stores/SharesStore.js
index dcabd8837..64f35caeb 100644
--- a/app/stores/SharesStore.js
+++ b/app/stores/SharesStore.js
@@ -38,7 +38,7 @@ class SharesStore {
@action
revoke = async (share: Share) => {
try {
- await client.post('/shares.delete', { id: share.id });
+ await client.post('/shares.revoke', { id: share.id });
runInAction('revoke', () => {
this.data.delete(share.id);
});
diff --git a/server/api/__snapshots__/shares.test.js.snap b/server/api/__snapshots__/shares.test.js.snap
index 77cc5d4df..439b96bb9 100644
--- a/server/api/__snapshots__/shares.test.js.snap
+++ b/server/api/__snapshots__/shares.test.js.snap
@@ -17,3 +17,12 @@ Object {
"status": 401,
}
`;
+
+exports[`#shares.revoke should require authentication 1`] = `
+Object {
+ "error": "authentication_required",
+ "message": "Authentication required",
+ "ok": false,
+ "status": 401,
+}
+`;
diff --git a/server/api/documents.js b/server/api/documents.js
index 0813df7e7..f06e655f8 100644
--- a/server/api/documents.js
+++ b/server/api/documents.js
@@ -165,7 +165,12 @@ router.post('documents.info', auth({ required: false }), async ctx => {
let document;
if (shareId) {
- const share = await Share.findById(shareId, {
+ const share = await Share.find({
+ where: {
+ // $FlowFixMe
+ revokedAt: { [Op.eq]: null },
+ id: shareId,
+ },
include: [
{
model: Document,
diff --git a/server/api/documents.test.js b/server/api/documents.test.js
index 770fc4555..7abd0547f 100644
--- a/server/api/documents.test.js
+++ b/server/api/documents.test.js
@@ -36,7 +36,7 @@ describe('#documents.info', async () => {
expect(body.data.id).toEqual(document.id);
});
- it('should return redacted documents from shareId without token', async () => {
+ it('should return redacted document from shareId without token', async () => {
const { document } = await seed();
const share = await buildShare({
documentId: document.id,
@@ -55,6 +55,20 @@ describe('#documents.info', async () => {
expect(body.data.updatedBy).toEqual(undefined);
});
+ it('should not return document from revoked shareId', async () => {
+ const { document, user } = await seed();
+ const share = await buildShare({
+ documentId: document.id,
+ teamId: document.teamId,
+ });
+ await share.revoke(user.id);
+
+ const res = await server.post('/api/documents.info', {
+ body: { shareId: share.id },
+ });
+ expect(res.status).toEqual(400);
+ });
+
it('should return documents from shareId with token', async () => {
const { user, document, collection } = await seed();
const share = await buildShare({
diff --git a/server/api/shares.js b/server/api/shares.js
index 677b0222f..15caf93ba 100644
--- a/server/api/shares.js
+++ b/server/api/shares.js
@@ -1,11 +1,13 @@
// @flow
import Router from 'koa-router';
+import Sequelize from 'sequelize';
import auth from '../middlewares/authentication';
import pagination from './middlewares/pagination';
import { presentShare } from '../presenters';
import { Document, User, Share } from '../models';
import policy from '../policies';
+const Op = Sequelize.Op;
const { authorize } = policy;
const router = new Router();
@@ -14,7 +16,12 @@ router.post('shares.list', auth(), pagination(), async ctx => {
if (direction !== 'ASC') direction = 'DESC';
const user = ctx.state.user;
- const where = { teamId: user.teamId, userId: user.id };
+ const where = {
+ teamId: user.teamId,
+ userId: user.id,
+ // $FlowFixMe
+ revokedAt: { [Op.eq]: null },
+ };
if (user.isAdmin) delete where.userId;
@@ -68,15 +75,15 @@ router.post('shares.create', auth(), async ctx => {
};
});
-router.post('shares.delete', auth(), async ctx => {
+router.post('shares.revoke', auth(), async ctx => {
const { id } = ctx.body;
ctx.assertPresent(id, 'id is required');
const user = ctx.state.user;
const share = await Share.findById(id);
- authorize(user, 'delete', share);
+ authorize(user, 'revoke', share);
- await share.destroy();
+ await share.revoke(user.id);
ctx.body = {
success: true,
diff --git a/server/api/shares.test.js b/server/api/shares.test.js
index 730007779..c768f42ae 100644
--- a/server/api/shares.test.js
+++ b/server/api/shares.test.js
@@ -32,6 +32,24 @@ describe('#shares.list', async () => {
expect(body.data[0].documentTitle).toBe(document.title);
});
+ it('should not return revoked shares', async () => {
+ const { user, document } = await seed();
+ const share = await buildShare({
+ documentId: document.id,
+ teamId: user.teamId,
+ userId: user.id,
+ });
+ await share.revoke(user.id);
+
+ const res = await server.post('/api/shares.list', {
+ body: { token: user.getJwtToken() },
+ });
+ const body = await res.json();
+
+ expect(res.status).toEqual(200);
+ expect(body.data.length).toEqual(0);
+ });
+
it('admins should only return shares created by all users', async () => {
const { admin, document } = await seed();
const share = await buildShare({
@@ -106,3 +124,58 @@ describe('#shares.create', async () => {
expect(res.status).toEqual(403);
});
});
+
+describe('#shares.revoke', async () => {
+ it('should allow author to revoke a share', async () => {
+ const { user, document } = await seed();
+ const share = await buildShare({
+ documentId: document.id,
+ teamId: user.teamId,
+ userId: user.id,
+ });
+
+ const res = await server.post('/api/shares.revoke', {
+ body: { token: user.getJwtToken(), id: share.id },
+ });
+ expect(res.status).toEqual(200);
+ });
+
+ it('should allow admin to revoke a share', async () => {
+ const { user, admin, document } = await seed();
+ const share = await buildShare({
+ documentId: document.id,
+ teamId: user.teamId,
+ userId: user.id,
+ });
+
+ const res = await server.post('/api/shares.revoke', {
+ body: { token: admin.getJwtToken(), id: share.id },
+ });
+ expect(res.status).toEqual(200);
+ });
+
+ it('should require authentication', async () => {
+ const { user, document } = await seed();
+ const share = await buildShare({
+ documentId: document.id,
+ teamId: user.teamId,
+ userId: user.id,
+ });
+ const res = await server.post('/api/shares.revoke', {
+ body: { id: share.id },
+ });
+ const body = await res.json();
+
+ expect(res.status).toEqual(401);
+ expect(body).toMatchSnapshot();
+ });
+
+ it('should require authorization', async () => {
+ const { document } = await seed();
+ const user = await buildUser();
+ const res = await server.post('/api/shares.create', {
+ body: { token: user.getJwtToken(), documentId: document.id },
+ });
+ expect(res.status).toEqual(403);
+ });
+});
diff --git a/server/migrations/20180604191743-revoke-share-links.js b/server/migrations/20180604191743-revoke-share-links.js
new file mode 100644
index 000000000..c6f759b78
--- /dev/null
+++ b/server/migrations/20180604191743-revoke-share-links.js
@@ -0,0 +1,19 @@
+module.exports = {
+ up: async (queryInterface, Sequelize) => {
+ await queryInterface.addColumn('shares', 'revokedAt', {
+ type: Sequelize.DATE,
+ allowNull: true
+ });
+ await queryInterface.addColumn('shares', 'revokedById', {
+ type: Sequelize.UUID,
+ allowNull: true,
+ references: {
+ model: 'users',
+ },
+ });
+ },
+ down: async (queryInterface, Sequelize) => {
+ await queryInterface.removeColumn('shares', 'revokedAt');
+ await queryInterface.removeColumn('shares', 'revokedById');
+ }
+}
\ No newline at end of file
diff --git a/server/models/Share.js b/server/models/Share.js
index 3965b8642..6d77b6313 100644
--- a/server/models/Share.js
+++ b/server/models/Share.js
@@ -1,13 +1,25 @@
// @flow
import { DataTypes, sequelize } from '../sequelize';
-const Share = sequelize.define('share', {
- id: {
- type: DataTypes.UUID,
- defaultValue: DataTypes.UUIDV4,
- primaryKey: true,
+const Share = sequelize.define(
+ 'share',
+ {
+ id: {
+ type: DataTypes.UUID,
+ defaultValue: DataTypes.UUIDV4,
+ primaryKey: true,
+ },
+ revokedAt: DataTypes.DATE,
+ revokedById: DataTypes.UUID,
},
-});
+ {
+ getterMethods: {
+ isRevoked() {
+ return !!this.revokedAt;
+ },
+ },
+ }
+);
Share.associate = models => {
Share.belongsTo(models.User, {
@@ -24,4 +36,10 @@ Share.associate = models => {
});
};
+Share.prototype.revoke = function(userId) {
+ this.revokedAt = new Date();
+ this.revokedById = userId;
+ return this.save();
+};
+
export default Share;
diff --git a/server/pages/Api.js b/server/pages/Api.js
index dee26dd06..0d168b001 100644
--- a/server/pages/Api.js
+++ b/server/pages/Api.js
@@ -327,7 +327,7 @@ export default function Pricing() {
This method returns information for a document with a specific
- ID. Following identifiers are allowed:
+ ID. The following identifiers are allowed:
-
@@ -340,11 +340,8 @@ export default function Pricing() {
-
+
+
@@ -597,6 +594,34 @@ export default function Pricing() {
+
+
+
+ List all your currently shared document links.
+
+
+
+
+
+
+ Creates a new share link that can be used by anyone to access a
+ document. If you request multiple shares for the same document
+ with the same user the same share will be returned.
+
+
+
+
+
+
+
+
+ Makes the share link inactive so that it can no longer be used to
+ access the document.
+
+
+
+
+
diff --git a/server/policies/share.js b/server/policies/share.js
index 3e2d1121b..62151ed07 100644
--- a/server/policies/share.js
+++ b/server/policies/share.js
@@ -7,7 +7,7 @@ const { allow } = policy;
allow(User, ['read'], Share, (user, share) => user.teamId === share.teamId);
allow(User, ['update'], Share, (user, share) => false);
-allow(User, ['delete'], Share, (user, share) => {
+allow(User, ['revoke'], Share, (user, share) => {
if (!share || user.teamId !== share.teamId) return false;
if (user.id === share.userId) return true;
if (user.isAdmin) return true;
From adc78fd4085106c4496011156beaa074a501ed13 Mon Sep 17 00:00:00 2001
From: Tom Moor
Date: Sat, 16 Jun 2018 13:10:14 -0700
Subject: [PATCH 07/61] Closes #679
---
package.json | 2 +-
yarn.lock | 6 +++---
2 files changed, 4 insertions(+), 4 deletions(-)
diff --git a/package.json b/package.json
index 64d89a531..8f802a824 100644
--- a/package.json
+++ b/package.json
@@ -157,7 +157,7 @@
"react-waypoint": "^7.3.1",
"redis": "^2.6.2",
"redis-lock": "^0.1.0",
- "rich-markdown-editor": "1.2.1",
+ "rich-markdown-editor": "1.3.1",
"safestart": "1.1.0",
"sequelize": "4.28.6",
"sequelize-cli": "^2.7.0",
diff --git a/yarn.lock b/yarn.lock
index a0caeb031..4e32e7e4b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8824,9 +8824,9 @@ retry-axios@0.3.2, retry-axios@^0.3.2:
version "0.3.2"
resolved "https://registry.yarnpkg.com/retry-axios/-/retry-axios-0.3.2.tgz#5757c80f585b4cc4c4986aa2ffd47a60c6d35e13"
-rich-markdown-editor@1.2.1:
- version "1.2.1"
- resolved "https://registry.yarnpkg.com/rich-markdown-editor/-/rich-markdown-editor-1.2.1.tgz#7f4555cc2e13b600dfd8a3f440d2ad067d0c5c05"
+rich-markdown-editor@1.3.1:
+ version "1.3.1"
+ resolved "https://registry.yarnpkg.com/rich-markdown-editor/-/rich-markdown-editor-1.3.1.tgz#c984184beda5ccd4bbb9813dd6d70a5383f388cf"
dependencies:
"@tommoor/slate-drop-or-paste-images" "^0.8.1"
boundless-arrow-key-navigation "^1.1.0"
From 87c1d610d186da40edfd109a8991326fd0b6f017 Mon Sep 17 00:00:00 2001
From: Tom Moor
Date: Sat, 16 Jun 2018 14:00:24 -0700
Subject: [PATCH 08/61] Add missing alt, add missing lang property
---
.../Sidebar/components/HeaderBlock.js | 2 +-
server/static/dev.html | 55 +++++++++----------
server/static/index.html | 53 +++++++++---------
3 files changed, 52 insertions(+), 58 deletions(-)
diff --git a/app/components/Sidebar/components/HeaderBlock.js b/app/components/Sidebar/components/HeaderBlock.js
index c59e4672d..3b97dc654 100644
--- a/app/components/Sidebar/components/HeaderBlock.js
+++ b/app/components/Sidebar/components/HeaderBlock.js
@@ -23,7 +23,7 @@ function HeaderBlock({
}: Props) {
return (
-
+
{teamName}{' '}
diff --git a/server/static/dev.html b/server/static/dev.html
index f389e7850..60544507a 100644
--- a/server/static/dev.html
+++ b/server/static/dev.html
@@ -1,33 +1,30 @@
-
+
+
+ Outline
+
+
+
-
-
-
-
-
-
+ body {
+ display: flex;
+ width: 100%;
+ height: 100%;
+ }
+ #root {
+ flex: 1;
+ min-height: 100vh;
+ }
+
+
+
+
+
+