chore: Upgrade Prettier 1.8 -> 2.0 (#1436)

app/components/Actions.js

@@ -12,7 +12,7 @@ export const Action = styled(Flex)`
   flex-shrink: 0;
 
   a {
-    color: ${props => props.theme.text};
+    color: ${(props) => props.theme.text};
     height: 24px;
   }
 
@@ -26,7 +26,7 @@ export const Separator = styled.div`
   margin-left: 12px;
   width: 1px;
   height: 28px;
-  background: ${props => props.theme.divider};
+  background: ${(props) => props.theme.divider};
 `;
 
 const Actions = styled(Flex)`
@@ -35,8 +35,8 @@ const Actions = styled(Flex)`
   right: 0;
   left: 0;
   border-radius: 3px;
-  background: ${props => props.theme.background};
-  transition: ${props => props.theme.backgroundTransition};
+  background: ${(props) => props.theme.background};
+  transition: ${(props) => props.theme.backgroundTransition};
   padding: 12px;
   -webkit-backdrop-filter: blur(20px);
 

app/components/Analytics.js

@@ -14,7 +14,7 @@ export default class Analytics extends React.Component<Props> {
     // standard Google Analytics script
     window.ga =
       window.ga ||
-      function() {
+      function () {
         // $FlowIssue
         (ga.q = ga.q || []).push(arguments);
       };

app/components/Avatar/Avatar.js

@@ -48,8 +48,8 @@ const IconWrapper = styled.div`
   position: absolute;
   bottom: -2px;
   right: -2px;
-  background: ${props => props.theme.primary};
-  border: 2px solid ${props => props.theme.background};
+  background: ${(props) => props.theme.primary};
+  border: 2px solid ${(props) => props.theme.background};
   border-radius: 100%;
   width: 20px;
   height: 20px;
@@ -57,10 +57,10 @@ const IconWrapper = styled.div`
 
 const CircleImg = styled.img`
   display: block;
-  width: ${props => props.size}px;
-  height: ${props => props.size}px;
+  width: ${(props) => props.size}px;
+  height: ${(props) => props.size}px;
   border-radius: 50%;
-  border: 2px solid ${props => props.theme.background};
+  border: 2px solid ${(props) => props.theme.background};
   flex-shrink: 0;
 `;
 

app/components/Avatar/AvatarWithPresence.js

@@ -47,7 +47,9 @@ class AvatarWithPresence extends React.Component<Props> {
               <strong>{user.name}</strong> {isCurrentUser && "(You)"}
               <br />
               {isPresent
-                ? isEditing ? "currently editing" : "currently viewing"
+                ? isEditing
+                  ? "currently editing"
+                  : "currently viewing"
                 : `viewed ${distanceInWordsToNow(new Date(lastViewedAt))} ago`}
             </Centered>
           }
@@ -77,7 +79,7 @@ const Centered = styled.div`
 `;
 
 const AvatarWrapper = styled.div`
-  opacity: ${props => (props.isPresent ? 1 : 0.5)};
+  opacity: ${(props) => (props.isPresent ? 1 : 0.5)};
   transition: opacity 250ms ease-in-out;
 `;
 

app/components/Branding.js

@@ -11,7 +11,8 @@ type Props = {
 function Branding({ href = env.URL }: Props) {
   return (
     <Link href={href}>
-      <OutlineLogo size={16} />&nbsp;Outline
+      <OutlineLogo size={16} />
+      &nbsp;Outline
     </Link>
   );
 }
@@ -25,17 +26,17 @@ const Link = styled.a`
   font-size: 14px;
   text-decoration: none;
   border-top-right-radius: 2px;
-  color: ${props => props.theme.text};
+  color: ${(props) => props.theme.text};
   display: flex;
   align-items: center;
   padding: 16px;
 
   svg {
-    fill: ${props => props.theme.text};
+    fill: ${(props) => props.theme.text};
   }
 
   &:hover {
-    background: ${props => props.theme.sidebarBackground};
+    background: ${(props) => props.theme.sidebarBackground};
   }
 `;
 

app/components/Breadcrumb.js

@@ -40,7 +40,7 @@ const Breadcrumb = observer(({ document, collections, onlyText }: Props) => {
           </React.Fragment>
         )}
         {collection.name}
-        {path.map(n => (
+        {path.map((n) => (
           <React.Fragment key={n.id}>
             <SmallSlash />
             {n.title}
@@ -61,7 +61,8 @@ const Breadcrumb = observer(({ document, collections, onlyText }: Props) => {
       {isTemplate && (
         <React.Fragment>
           <CollectionName to="/templates">
-            <ShapesIcon color="currentColor" />&nbsp;
+            <ShapesIcon color="currentColor" />
+            &nbsp;
             <span>Templates</span>
           </CollectionName>
           <Slash />
@@ -70,14 +71,16 @@ const Breadcrumb = observer(({ document, collections, onlyText }: Props) => {
       {isDraft && (
         <React.Fragment>
           <CollectionName to="/drafts">
-            <EditIcon color="currentColor" />&nbsp;
+            <EditIcon color="currentColor" />
+            &nbsp;
             <span>Drafts</span>
           </CollectionName>
           <Slash />
         </React.Fragment>
       )}
       <CollectionName to={collectionUrl(collection.id)}>
-        <CollectionIcon collection={collection} expanded />&nbsp;
+        <CollectionIcon collection={collection} expanded />
+        &nbsp;
         <span>{collection.name}</span>
       </CollectionName>
       {isNestedDocument && (
@@ -119,7 +122,7 @@ const SmallSlash = styled(GoToIcon)`
 
 export const Slash = styled(GoToIcon)`
   flex-shrink: 0;
-  fill: ${props => props.theme.divider};
+  fill: ${(props) => props.theme.divider};
 `;
 
 const Overflow = styled(MoreIcon)`
@@ -134,7 +137,7 @@ const Overflow = styled(MoreIcon)`
 `;
 
 const Crumb = styled(Link)`
-  color: ${props => props.theme.text};
+  color: ${(props) => props.theme.text};
   font-size: 15px;
   height: 24px;
   text-overflow: ellipsis;
@@ -149,7 +152,7 @@ const Crumb = styled(Link)`
 const CollectionName = styled(Link)`
   display: flex;
   flex-shrink: 0;
-  color: ${props => props.theme.text};
+  color: ${(props) => props.theme.text};
   font-size: 15px;
   font-weight: 500;
   white-space: nowrap;

app/components/BreadcrumbMenu.js

@@ -14,7 +14,7 @@ export default class BreadcrumbMenu extends React.Component<Props> {
 
     return (
       <DropdownMenu label={this.props.label} position="center">
-        {path.map(item => (
+        {path.map((item) => (
           <DropdownMenuItem as={Link} to={item.url} key={item.id}>
             {item.title}
           </DropdownMenuItem>

app/components/Button.js

@@ -5,13 +5,13 @@ import { darken, lighten } from "polished";
 import { ExpandedIcon } from "outline-icons";
 
 const RealButton = styled.button`
-  display: ${props => (props.fullwidth ? "block" : "inline-block")};
-  width: ${props => (props.fullwidth ? "100%" : "auto")};
+  display: ${(props) => (props.fullwidth ? "block" : "inline-block")};
+  width: ${(props) => (props.fullwidth ? "100%" : "auto")};
   margin: 0;
   padding: 0;
   border: 0;
-  background: ${props => props.theme.buttonBackground};
-  color: ${props => props.theme.buttonText};
+  background: ${(props) => props.theme.buttonBackground};
+  color: ${(props) => props.theme.buttonText};
   box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px;
   border-radius: 4px;
   font-size: 14px;
@@ -24,7 +24,7 @@ const RealButton = styled.button`
   user-select: none;
 
   svg {
-    fill: ${props => props.iconColor || props.theme.buttonText};
+    fill: ${(props) => props.iconColor || props.theme.buttonText};
   }
 
   &::-moz-focus-inner {
@@ -33,12 +33,12 @@ const RealButton = styled.button`
   }
 
   &:hover {
-    background: ${props => darken(0.05, props.theme.buttonBackground)};
+    background: ${(props) => darken(0.05, props.theme.buttonBackground)};
   }
 
   &:focus {
     transition-duration: 0.05s;
-    box-shadow: ${props => lighten(0.4, props.theme.buttonBackground)} 0px 0px
+    box-shadow: ${(props) => lighten(0.4, props.theme.buttonBackground)} 0px 0px
       0px 3px;
     outline: none;
   }
@@ -46,10 +46,10 @@ const RealButton = styled.button`
   &:disabled {
     cursor: default;
     pointer-events: none;
-    color: ${props => props.theme.white50};
+    color: ${(props) => props.theme.white50};
   }
 
-  ${props =>
+  ${(props) =>
     props.neutral &&
     `
     background: ${props.theme.buttonNeutralBackground};
@@ -80,9 +80,9 @@ const RealButton = styled.button`
     &:disabled {
       color: ${props.theme.textTertiary};
     }
-  `} ${props =>
-      props.danger &&
-      `
+  `} ${(props) =>
+    props.danger &&
+    `
       background: ${props.theme.danger};
       color: ${props.theme.white};
 
@@ -103,20 +103,20 @@ const Label = styled.span`
   white-space: nowrap;
   text-overflow: ellipsis;
 
-  ${props => props.hasIcon && "padding-left: 4px;"};
+  ${(props) => props.hasIcon && "padding-left: 4px;"};
 `;
 
 export const Inner = styled.span`
   display: flex;
   padding: 0 8px;
-  padding-right: ${props => (props.disclosure ? 2 : 8)}px;
-  line-height: ${props => (props.hasIcon ? 24 : 32)}px;
+  padding-right: ${(props) => (props.disclosure ? 2 : 8)}px;
+  line-height: ${(props) => (props.hasIcon ? 24 : 32)}px;
   justify-content: center;
   align-items: center;
   min-height: 30px;
 
-  ${props => props.hasIcon && props.hasText && "padding-left: 4px;"};
-  ${props => props.hasIcon && !props.hasText && "padding: 0 4px;"};
+  ${(props) => props.hasIcon && props.hasText && "padding-left: 4px;"};
+  ${(props) => props.hasIcon && !props.hasText && "padding: 0 4px;"};
 `;
 
 export type Props = {

app/components/Checkbox.js

@@ -15,13 +15,13 @@ export type Props = {
 
 const LabelText = styled.span`
   font-weight: 500;
-  margin-left: ${props => (props.small ? "6px" : "10px")};
-  ${props => (props.small ? `color: ${props.theme.textSecondary}` : "")};
+  margin-left: ${(props) => (props.small ? "6px" : "10px")};
+  ${(props) => (props.small ? `color: ${props.theme.textSecondary}` : "")};
 `;
 
 const Wrapper = styled.div`
   padding-bottom: 8px;
-  ${props => (props.small ? "font-size: 14px" : "")};
+  ${(props) => (props.small ? "font-size: 14px" : "")};
 `;
 
 const Label = styled.label`

app/components/Collaborators.js

@@ -32,27 +32,27 @@ class Collaborators extends React.Component<Props> {
 
     const documentViews = views.inDocument(document.id);
 
-    const presentIds = documentPresence.map(p => p.userId);
+    const presentIds = documentPresence.map((p) => p.userId);
     const editingIds = documentPresence
-      .filter(p => p.isEditing)
-      .map(p => p.userId);
+      .filter((p) => p.isEditing)
+      .map((p) => p.userId);
 
     // ensure currently present via websocket are always ordered first
     const mostRecentViewers = sortBy(
       documentViews.slice(0, MAX_AVATAR_DISPLAY),
-      view => {
+      (view) => {
         return presentIds.includes(view.user.id);
       }
     );
 
-    const viewersKeyedByUserId = keyBy(mostRecentViewers, v => v.user.id);
+    const viewersKeyedByUserId = keyBy(mostRecentViewers, (v) => v.user.id);
     const overflow = documentViews.length - mostRecentViewers.length;
 
     return (
       <Facepile
-        users={mostRecentViewers.map(v => v.user)}
+        users={mostRecentViewers.map((v) => v.user)}
         overflow={overflow}
-        renderAvatar={user => {
+        renderAvatar={(user) => {
           const isPresent = presentIds.includes(user.id);
           const isEditing = editingIds.includes(user.id);
           const { lastViewedAt } = viewersKeyedByUserId[user.id];

app/components/DocumentHistory/DocumentHistory.js

@@ -133,16 +133,16 @@ const Wrapper = styled(Flex)`
   top: 0;
   right: 0;
   z-index: 1;
-  min-width: ${props => props.theme.sidebarWidth};
+  min-width: ${(props) => props.theme.sidebarWidth};
   height: 100%;
   overflow-y: auto;
   overscroll-behavior: none;
 `;
 
 const Sidebar = styled(Flex)`
-  background: ${props => props.theme.background};
-  min-width: ${props => props.theme.sidebarWidth};
-  border-left: 1px solid ${props => props.theme.divider};
+  background: ${(props) => props.theme.background};
+  min-width: ${(props) => props.theme.sidebarWidth};
+  border-left: 1px solid ${(props) => props.theme.divider};
   z-index: 1;
 `;
 

app/components/DocumentHistory/components/Revision.js

@@ -66,7 +66,7 @@ const StyledRevisionMenu = styled(RevisionMenu)`
 `;
 
 const StyledNavLink = styled(NavLink)`
-  color: ${props => props.theme.text};
+  color: ${(props) => props.theme.text};
   display: block;
   padding: 8px 16px;
   font-size: 15px;

app/components/DocumentList.js

@@ -17,7 +17,7 @@ export default function DocumentList({ limit, documents, ...rest }: Props) {
       mode={ArrowKeyNavigation.mode.VERTICAL}
       defaultActiveChildIndex={0}
     >
-      {items.map(document => (
+      {items.map((document) => (
         <DocumentPreview key={document.id} document={document} {...rest} />
       ))}
     </ArrowKeyNavigation>

app/components/DocumentPreview/DocumentPreview.js

@@ -48,7 +48,7 @@ class DocumentPreview extends React.Component<Props> {
     return tag.replace(/<b\b[^>]*>(.*?)<\/b>/gi, "$1");
   };
 
-  handleNewFromTemplate = event => {
+  handleNewFromTemplate = (event) => {
     event.preventDefault();
     event.stopPropagation();
 
@@ -97,18 +97,14 @@ class DocumentPreview extends React.Component<Props> {
                 )}
               </Actions>
             )}
-          {document.isDraft &&
-            showDraft && (
-              <Tooltip
-                tooltip="Only visible to you"
-                delay={500}
-                placement="top"
-              >
-                <Badge>Draft</Badge>
-              </Tooltip>
-            )}
-          {document.isTemplate &&
-            showTemplate && <Badge primary>Template</Badge>}
+          {document.isDraft && showDraft && (
+            <Tooltip tooltip="Only visible to you" delay={500} placement="top">
+              <Badge>Draft</Badge>
+            </Tooltip>
+          )}
+          {document.isTemplate && showTemplate && (
+            <Badge primary>Template</Badge>
+          )}
           <SecondaryActions>
             {document.isTemplate &&
               !document.isArchived &&
@@ -120,7 +116,8 @@ class DocumentPreview extends React.Component<Props> {
                 >
                   New doc
                 </Button>
-              )}&nbsp;
+              )}
+            &nbsp;
             <DocumentMenu document={document} showPin={showPin} />
           </SecondaryActions>
         </Heading>
@@ -146,7 +143,7 @@ const StyledStar = withTheme(styled(({ solid, theme, ...props }) => (
   <StarredIcon color={theme.text} {...props} />
 ))`
   flex-shrink: 0;
-  opacity: ${props => (props.solid ? "1 !important" : 0)};
+  opacity: ${(props) => (props.solid ? "1 !important" : 0)};
   transition: all 100ms ease-in-out;
 
   &:hover {
@@ -182,7 +179,7 @@ const DocumentLink = styled(Link)`
   &:hover,
   &:active,
   &:focus {
-    background: ${props => props.theme.listItemHoverBackground};
+    background: ${(props) => props.theme.listItemHoverBackground};
     outline: none;
 
     ${SecondaryActions} {
@@ -207,7 +204,7 @@ const Heading = styled.h3`
   margin-bottom: 0.25em;
   overflow: hidden;
   white-space: nowrap;
-  color: ${props => props.theme.text};
+  color: ${(props) => props.theme.text};
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
     Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 `;
@@ -225,7 +222,7 @@ const Title = styled(Highlight)`
 
 const ResultContext = styled(Highlight)`
   display: block;
-  color: ${props => props.theme.textTertiary};
+  color: ${(props) => props.theme.textTertiary};
   font-size: 14px;
   margin-top: -0.25em;
   margin-bottom: 0.25em;

app/components/DropToImport.js

@@ -30,12 +30,12 @@ type Props = {
 export const GlobalStyles = createGlobalStyle`
   .activeDropZone {
     border-radius: 4px;
-    background: ${props => props.theme.slateDark};
-    svg { fill: ${props => props.theme.white}; }
+    background: ${(props) => props.theme.slateDark};
+    svg { fill: ${(props) => props.theme.white}; }
   }
 
   .activeDropZone a {
-    color: ${props => props.theme.white} !important;
+    color: ${(props) => props.theme.white} !important;
   }
 `;
 

app/components/DropdownMenu/DropdownMenu.js

@@ -204,7 +204,7 @@ class DropdownMenu extends React.Component<Props> {
                     onClick={
                       typeof children === "function"
                         ? undefined
-                        : ev => {
+                        : (ev) => {
                             ev.stopPropagation();
                             closePortal();
                           }
@@ -245,24 +245,24 @@ const Position = styled.div`
   ${({ bottom }) => (bottom !== undefined ? `bottom: ${bottom}px` : "")};
   max-height: 75%;
   z-index: 1000;
-  transform: ${props =>
+  transform: ${(props) =>
     props.position === "center" ? "translateX(-50%)" : "initial"};
   pointer-events: none;
 `;
 
 const Menu = styled.div`
   animation: ${fadeAndScaleIn} 200ms ease;
-  transform-origin: ${props => (props.left !== undefined ? "25%" : "75%")} 0;
+  transform-origin: ${(props) => (props.left !== undefined ? "25%" : "75%")} 0;
   backdrop-filter: blur(10px);
-  background: ${props => rgba(props.theme.menuBackground, 0.8)};
-  border: ${props =>
+  background: ${(props) => rgba(props.theme.menuBackground, 0.8)};
+  border: ${(props) =>
     props.theme.menuBorder ? `1px solid ${props.theme.menuBorder}` : "none"};
   border-radius: 2px;
   padding: 0.5em 0;
   min-width: 180px;
   overflow: hidden;
   overflow-y: auto;
-  box-shadow: ${props => props.theme.menuShadow};
+  box-shadow: ${(props) => props.theme.menuShadow};
   pointer-events: all;
 
   hr {
@@ -278,7 +278,7 @@ export const Header = styled.h3`
   font-size: 11px;
   font-weight: 600;
   text-transform: uppercase;
-  color: ${props => props.theme.sidebarText};
+  color: ${(props) => props.theme.sidebarText};
   letter-spacing: 0.04em;
   margin: 1em 12px 0.5em;
 `;

app/components/DropdownMenu/DropdownMenuItem.js

@@ -29,7 +29,8 @@ const DropdownMenuItem = ({
         <React.Fragment>
           <CheckmarkIcon
             color={selected === false ? "transparent" : undefined}
-          />&nbsp;
+          />
+          &nbsp;
         </React.Fragment>
       )}
       {children}
@@ -44,7 +45,7 @@ const MenuItem = styled.a`
   width: 100%;
   min-height: 32px;
 
-  color: ${props =>
+  color: ${(props) =>
     props.disabled ? props.theme.textTertiary : props.theme.textSecondary};
   justify-content: left;
   align-items: center;
@@ -57,10 +58,10 @@ const MenuItem = styled.a`
   }
 
   svg {
-    opacity: ${props => (props.disabled ? ".5" : 1)};
+    opacity: ${(props) => (props.disabled ? ".5" : 1)};
   }
 
-  ${props =>
+  ${(props) =>
     props.disabled
       ? "pointer-events: none;"
       : `

app/components/Editor.js

@@ -81,11 +81,11 @@ class Editor extends React.Component<Props> {
 }
 
 const StyledEditor = styled(RichMarkdownEditor)`
-  flex-grow: ${props => (props.grow ? 1 : 0)};
+  flex-grow: ${(props) => (props.grow ? 1 : 0)};
   justify-content: start;
 
   > div {
-    transition: ${props => props.theme.backgroundTransition};
+    transition: ${(props) => props.theme.backgroundTransition};
   }
 
   .notice-block.tip,
@@ -95,13 +95,13 @@ const StyledEditor = styled(RichMarkdownEditor)`
 
   p {
     a {
-      color: ${props => props.theme.text};
-      border-bottom: 1px solid ${props => lighten(0.5, props.theme.text)};
+      color: ${(props) => props.theme.text};
+      border-bottom: 1px solid ${(props) => lighten(0.5, props.theme.text)};
       text-decoration: none !important;
       font-weight: 500;
 
       &:hover {
-        border-bottom: 1px solid ${props => props.theme.text};
+        border-bottom: 1px solid ${(props) => props.theme.text};
         text-decoration: none;
       }
     }

app/components/Empty.js

@@ -2,7 +2,7 @@
 import styled from "styled-components";
 
 const Empty = styled.p`
-  color: ${props => props.theme.textTertiary};
+  color: ${(props) => props.theme.textTertiary};
 `;
 
 export default Empty;

app/components/ErrorBoundary.js

@@ -48,9 +48,9 @@ class ErrorBoundary extends React.Component<Props> {
           <PageTitle title="Something Unexpected Happened" />
           <h1>Something Unexpected Happened</h1>
           <HelpText>
-            Sorry, an unrecoverable error occurred{isReported &&
-              " – our engineers have been notified"}. Please try reloading the
-            page, it may have been a temporary glitch.
+            Sorry, an unrecoverable error occurred
+            {isReported && " – our engineers have been notified"}. Please try
+            reloading the page, it may have been a temporary glitch.
           </HelpText>
           {this.showDetails && <Pre>{this.error.toString()}</Pre>}
           <p>
@@ -73,7 +73,7 @@ class ErrorBoundary extends React.Component<Props> {
 }
 
 const Pre = styled.pre`
-  background: ${props => props.theme.smoke};
+  background: ${(props) => props.theme.smoke};
   padding: 16px;
   border-radius: 4px;
   font-size: 12px;

app/components/Facepile.js

@@ -31,7 +31,7 @@ class Facepile extends React.Component<Props> {
             <span>+{overflow}</span>
           </More>
         )}
-        {users.map(user => (
+        {users.map((user) => (
           <AvatarWrapper key={user.id}>{renderAvatar(user)}</AvatarWrapper>
         ))}
       </Avatars>
@@ -56,12 +56,12 @@ const More = styled.div`
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  min-width: ${props => props.size}px;
-  height: ${props => props.size}px;
+  min-width: ${(props) => props.size}px;
+  height: ${(props) => props.size}px;
   border-radius: 100%;
-  background: ${props => props.theme.slate};
-  color: ${props => props.theme.text};
-  border: 2px solid ${props => props.theme.background};
+  background: ${(props) => props.theme.slate};
+  color: ${(props) => props.theme.text};
+  border: 2px solid ${(props) => props.theme.background};
   text-align: center;
   font-size: 11px;
   font-weight: 600;

app/components/Fade.js

@@ -3,7 +3,7 @@ import styled from "styled-components";
 import { fadeIn } from "shared/styles/animations";
 
 const Fade = styled.span`
-  animation: ${fadeIn} ${props => props.timing || "250ms"} ease-in-out;
+  animation: ${fadeIn} ${(props) => props.timing || "250ms"} ease-in-out;
 `;
 
 export default Fade;

app/components/GroupListItem.js

@@ -41,7 +41,7 @@ class GroupListItem extends React.Component<Props> {
     const membershipsInGroup = groupMemberships.inGroup(group.id);
     const users = membershipsInGroup
       .slice(0, MAX_AVATAR_DISPLAY)
-      .map(gm => gm.user);
+      .map((gm) => gm.user);
 
     const overflow = memberCount - users.length;
 

app/components/HelpText.js

@@ -3,8 +3,8 @@ import styled from "styled-components";
 
 const HelpText = styled.p`
   margin-top: 0;
-  color: ${props => props.theme.textSecondary};
-  font-size: ${props => (props.small ? "13px" : "inherit")};
+  color: ${(props) => props.theme.textSecondary};
+  font-size: ${(props) => (props.small ? "13px" : "inherit")};
 `;
 
 export default HelpText;

app/components/Highlight.js

@@ -38,7 +38,7 @@ function Highlight({
 }
 
 const Mark = styled.mark`
-  background: ${props => props.theme.yellow};
+  background: ${(props) => props.theme.yellow};
   border-radius: 2px;
   padding: 0 4px;
 `;

app/components/HoverPreview.js

@@ -57,42 +57,39 @@ function HoverPreview({ node, documents, onClose, event }: Props) {
     }
   };
 
-  React.useEffect(
-    () => {
-      if (slug) {
-        documents.prefetchDocument(slug, {
-          prefetch: true,
-        });
-      }
+  React.useEffect(() => {
+    if (slug) {
+      documents.prefetchDocument(slug, {
+        prefetch: true,
+      });
+    }
 
-      startOpenTimer();
+    startOpenTimer();
+
+    if (cardRef.current) {
+      cardRef.current.addEventListener("mouseenter", stopCloseTimer);
+      cardRef.current.addEventListener("mouseleave", startCloseTimer);
+    }
+
+    node.addEventListener("mouseout", startCloseTimer);
+    node.addEventListener("mouseover", stopCloseTimer);
+    node.addEventListener("mouseover", startOpenTimer);
+
+    return () => {
+      node.removeEventListener("mouseout", startCloseTimer);
+      node.removeEventListener("mouseover", stopCloseTimer);
+      node.removeEventListener("mouseover", startOpenTimer);
 
       if (cardRef.current) {
-        cardRef.current.addEventListener("mouseenter", stopCloseTimer);
-        cardRef.current.addEventListener("mouseleave", startCloseTimer);
+        cardRef.current.removeEventListener("mouseenter", stopCloseTimer);
+        cardRef.current.removeEventListener("mouseleave", startCloseTimer);
       }
 
-      node.addEventListener("mouseout", startCloseTimer);
-      node.addEventListener("mouseover", stopCloseTimer);
-      node.addEventListener("mouseover", startOpenTimer);
-
-      return () => {
-        node.removeEventListener("mouseout", startCloseTimer);
-        node.removeEventListener("mouseover", stopCloseTimer);
-        node.removeEventListener("mouseover", startOpenTimer);
-
-        if (cardRef.current) {
-          cardRef.current.removeEventListener("mouseenter", stopCloseTimer);
-          cardRef.current.removeEventListener("mouseleave", startCloseTimer);
-        }
-
-        if (timerClose.current) {
-          clearTimeout(timerClose.current);
-        }
-      };
-    },
-    [node]
-  );
+      if (timerClose.current) {
+        clearTimeout(timerClose.current);
+      }
+    };
+  }, [node]);
 
   const anchorBounds = node.getBoundingClientRect();
   const cardBounds = cardRef.current
@@ -112,7 +109,7 @@ function HoverPreview({ node, documents, onClose, event }: Props) {
       >
         <div ref={cardRef}>
           <HoverPreviewDocument url={node.href}>
-            {content =>
+            {(content) =>
               isVisible ? (
                 <Animate>
                   <Card>
@@ -156,8 +153,8 @@ const CardContent = styled.div`
 // &:after — gradient mask for overflow text
 const Card = styled.div`
   backdrop-filter: blur(10px);
-  background: ${props => props.theme.background};
-  border: ${props =>
+  background: ${(props) => props.theme.background};
+  border: ${(props) =>
     props.theme.menuBorder ? `1px solid ${props.theme.menuBorder}` : "none"};
   border-radius: 4px;
   box-shadow: 0 30px 90px -20px rgba(0, 0, 0, 0.3),
@@ -179,15 +176,15 @@ const Card = styled.div`
     pointer-events: none;
     background: linear-gradient(
       90deg,
-      ${props => transparentize(1, props.theme.background)} 0%,
-      ${props => transparentize(1, props.theme.background)} 75%,
-      ${props => props.theme.background} 90%
+      ${(props) => transparentize(1, props.theme.background)} 0%,
+      ${(props) => transparentize(1, props.theme.background)} 75%,
+      ${(props) => props.theme.background} 90%
     );
     bottom: 0;
     left: 0;
     right: 0;
     height: 1.7em;
-    border-bottom: 16px solid ${props => props.theme.background};
+    border-bottom: 16px solid ${(props) => props.theme.background};
     border-bottom-left-radius: 4px;
     border-bottom-right-radius: 4px;
   }
@@ -205,7 +202,7 @@ const Position = styled.div`
 
 const Pointer = styled.div`
   top: -22px;
-  left: ${props => props.offset}px;
+  left: ${(props) => props.offset}px;
   width: 22px;
   height: 22px;
   position: absolute;
@@ -222,14 +219,14 @@ const Pointer = styled.div`
 
   &:before {
     border: 8px solid transparent;
-    border-bottom-color: ${props =>
+    border-bottom-color: ${(props) =>
       props.theme.menuBorder || "rgba(0, 0, 0, 0.1)"};
     right: -1px;
   }
 
   &:after {
     border: 7px solid transparent;
-    border-bottom-color: ${props => props.theme.background};
+    border-bottom-color: ${(props) => props.theme.background};
   }
 `;
 

app/components/HoverPreviewDocument.js

@@ -11,7 +11,7 @@ import DocumentMeta from "components/DocumentMeta";
 type Props = {
   url: string,
   documents: DocumentsStore,
-  children: React.Node => React.Node,
+  children: (React.Node) => React.Node,
 };
 
 function HoverPreviewDocument({ url, documents, children }: Props) {
@@ -45,7 +45,7 @@ const Content = styled(Link)`
 
 const Heading = styled.h2`
   margin: 0 0 0.75em;
-  color: ${props => props.theme.text};
+  color: ${(props) => props.theme.text};
 `;
 
 export default inject("documents")(observer(HoverPreviewDocument));

app/components/IconPicker.js

@@ -166,7 +166,7 @@ class IconPicker extends React.Component<Props> {
     const Component = icons[this.props.icon || "collection"].component;
 
     return (
-      <Wrapper ref={ref => (this.node = ref)}>
+      <Wrapper ref={(ref) => (this.node = ref)}>
         <label>
           <LabelText>Icon</LabelText>
         </label>
@@ -179,7 +179,7 @@ class IconPicker extends React.Component<Props> {
           }
         >
           <Icons onClick={preventEventBubble}>
-            {Object.keys(icons).map(name => {
+            {Object.keys(icons).map((name) => {
               const Component = icons[name].component;
               return (
                 <IconButton
@@ -195,7 +195,7 @@ class IconPicker extends React.Component<Props> {
           <Flex onClick={preventEventBubble}>
             <ColorPicker
               color={this.props.color}
-              onChange={color =>
+              onChange={(color) =>
                 this.props.onChange(color.hex, this.props.icon)
               }
               colors={colors}
@@ -214,7 +214,7 @@ const Icons = styled.div`
 `;
 
 const LabelButton = styled(NudeButton)`
-  border: 1px solid ${props => props.theme.inputBorder};
+  border: 1px solid ${(props) => props.theme.inputBorder};
   width: 32px;
   height: 32px;
 `;

app/components/Input.js

@@ -9,29 +9,29 @@ import Flex from "components/Flex";
 const RealTextarea = styled.textarea`
   border: 0;
   flex: 1;
-  padding: 8px 12px 8px ${props => (props.hasIcon ? "8px" : "12px")};
+  padding: 8px 12px 8px ${(props) => (props.hasIcon ? "8px" : "12px")};
   outline: none;
   background: none;
-  color: ${props => props.theme.text};
+  color: ${(props) => props.theme.text};
 
   &:disabled,
   &::placeholder {
-    color: ${props => props.theme.placeholder};
+    color: ${(props) => props.theme.placeholder};
   }
 `;
 
 const RealInput = styled.input`
   border: 0;
   flex: 1;
-  padding: 8px 12px 8px ${props => (props.hasIcon ? "8px" : "12px")};
+  padding: 8px 12px 8px ${(props) => (props.hasIcon ? "8px" : "12px")};
   outline: none;
   background: none;
-  color: ${props => props.theme.text};
+  color: ${(props) => props.theme.text};
   height: 30px;
 
   &:disabled,
   &::placeholder {
-    color: ${props => props.theme.placeholder};
+    color: ${(props) => props.theme.placeholder};
   }
 
   &::-webkit-search-cancel-button {
@@ -40,8 +40,8 @@ const RealInput = styled.input`
 `;
 
 const Wrapper = styled.div`
-  flex: ${props => (props.flex ? "1" : "0")};
-  max-width: ${props => (props.short ? "350px" : "100%")};
+  flex: ${(props) => (props.flex ? "1" : "0")};
+  max-width: ${(props) => (props.short ? "350px" : "100%")};
   min-height: ${({ minHeight }) => (minHeight ? `${minHeight}px` : "0")};
   max-height: ${({ maxHeight }) => (maxHeight ? `${maxHeight}px` : "initial")};
 `;
@@ -56,16 +56,17 @@ const IconWrapper = styled.span`
 export const Outline = styled(Flex)`
   display: flex;
   flex: 1;
-  margin: ${props => (props.margin !== undefined ? props.margin : "0 0 16px")};
+  margin: ${(props) =>
+    props.margin !== undefined ? props.margin : "0 0 16px"};
   color: inherit;
   border-width: 1px;
   border-style: solid;
-  border-color: ${props =>
+  border-color: ${(props) =>
     props.hasError
       ? "red"
       : props.focused
-        ? props.theme.inputBorderFocused
-        : props.theme.inputBorder};
+      ? props.theme.inputBorderFocused
+      : props.theme.inputBorder};
   border-radius: 4px;
   font-weight: normal;
   align-items: center;
@@ -147,7 +148,7 @@ class Input extends React.Component<Props> {
           <Outline focused={this.focused} margin={margin}>
             {icon && <IconWrapper>{icon}</IconWrapper>}
             <InputComponent
-              ref={ref => (this.input = ref)}
+              ref={(ref) => (this.input = ref)}
               onBlur={this.handleBlur}
               onFocus={this.handleFocus}
               type={type === "textarea" ? undefined : type}

app/components/InputSearch.js

@@ -30,7 +30,7 @@ class InputSearch extends React.Component<Props> {
     }
   }
 
-  handleSearchInput = ev => {
+  handleSearchInput = (ev) => {
     ev.preventDefault();
     this.props.history.push(
       searchUrl(ev.target.value, this.props.collectionId)
@@ -50,7 +50,7 @@ class InputSearch extends React.Component<Props> {
 
     return (
       <InputMaxWidth
-        ref={ref => (this.input = ref)}
+        ref={(ref) => (this.input = ref)}
         type="search"
         placeholder={placeholder}
         onInput={this.handleSearchInput}

app/components/InputSelect.js

@@ -12,11 +12,11 @@ const Select = styled.select`
   padding: 8px 12px;
   outline: none;
   background: none;
-  color: ${props => props.theme.text};
+  color: ${(props) => props.theme.text};
 
   &:disabled,
   &::placeholder {
-    color: ${props => props.theme.placeholder};
+    color: ${(props) => props.theme.placeholder};
   }
 `;
 
@@ -57,7 +57,7 @@ class InputSelect extends React.Component<Props> {
           ))}
         <Outline focused={this.focused} className={className}>
           <Select onBlur={this.handleBlur} onFocus={this.handleFocus} {...rest}>
-            {options.map(option => (
+            {options.map((option) => (
               <option value={option.value} key={option.value}>
                 {option.label}
               </option>

app/components/Key.js

@@ -7,13 +7,13 @@ const Key = styled.kbd`
   font: 11px "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier,
     monospace;
   line-height: 10px;
-  color: ${props => props.theme.almostBlack};
+  color: ${(props) => props.theme.almostBlack};
   vertical-align: middle;
-  background-color: ${props => props.theme.smokeLight};
-  border: solid 1px ${props => props.theme.slateLight};
-  border-bottom-color: ${props => props.theme.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 ${props => props.theme.slate};
+  box-shadow: inset 0 -1px 0 ${(props) => props.theme.slate};
 `;
 
 export default Key;

app/components/Labeled.js

@@ -21,7 +21,7 @@ export const Label = styled(Flex)`
   font-size: 13px;
   font-weight: 500;
   text-transform: uppercase;
-  color: ${props => props.theme.textTertiary};
+  color: ${(props) => props.theme.textTertiary};
   letter-spacing: 0.04em;
 `;
 

app/components/Layout.js

@@ -142,8 +142,8 @@ class Layout extends React.Component<Props> {
 }
 
 const Container = styled(Flex)`
-  background: ${props => props.theme.background};
-  transition: ${props => props.theme.backgroundTransition};
+  background: ${(props) => props.theme.background};
+  transition: ${(props) => props.theme.backgroundTransition};
   position: relative;
   width: 100%;
   min-height: 100%;
@@ -158,7 +158,7 @@ const Content = styled(Flex)`
   }
 
   ${breakpoint("tablet")`
-    margin-left: ${props => (props.editMode ? 0 : props.theme.sidebarWidth)};
+    margin-left: ${(props) => (props.editMode ? 0 : props.theme.sidebarWidth)};
   `};
 `;
 

app/components/List/Item.js

@@ -27,9 +27,9 @@ const ListItem = ({ image, title, subtitle, actions }: Props) => {
 
 const Wrapper = styled.li`
   display: flex;
-  padding: ${props => (props.compact ? "8px" : "12px")} 0;
+  padding: ${(props) => (props.compact ? "8px" : "12px")} 0;
   margin: 0;
-  border-bottom: 1px solid ${props => props.theme.divider};
+  border-bottom: 1px solid ${(props) => props.theme.divider};
 
   &:last-child {
     border-bottom: 0;
@@ -59,7 +59,7 @@ const Content = styled(Flex)`
 const Subtitle = styled.p`
   margin: 0;
   font-size: 14px;
-  color: ${props => props.theme.slate};
+  color: ${(props) => props.theme.slate};
 `;
 
 const Actions = styled.div`

app/components/List/Placeholder.js

@@ -13,7 +13,7 @@ type Props = {
 const Placeholder = ({ count }: Props) => {
   return (
     <Fade>
-      {times(count || 2, index => (
+      {times(count || 2, (index) => (
         <Item key={index} column auto>
           <Mask />
         </Item>

app/components/LoadingPlaceholder/ListPlaceholder.js

@@ -13,7 +13,7 @@ type Props = {
 const ListPlaceHolder = ({ count }: Props) => {
   return (
     <Fade>
-      {times(count || 2, index => (
+      {times(count || 2, (index) => (
         <Item key={index} column auto>
           <Mask header />
           <Mask />

app/components/Mask.js

@@ -27,10 +27,11 @@ class Mask extends React.Component<Props> {
 }
 
 const Redacted = styled(Flex)`
-  width: ${props => (props.header ? props.width / 2 : props.width)}%;
-  height: ${props => (props.height ? props.height : props.header ? 24 : 18)}px;
+  width: ${(props) => (props.header ? props.width / 2 : props.width)}%;
+  height: ${(props) =>
+    props.height ? props.height : props.header ? 24 : 18}px;
   margin-bottom: 6px;
-  background-color: ${props => props.theme.divider};
+  background-color: ${(props) => props.theme.divider};
   animation: ${pulsate} 1.3s infinite;
 
   &:last-child {

app/components/Modal.js

@@ -21,7 +21,7 @@ type Props = {
 
 const GlobalStyles = createGlobalStyle`
   .ReactModal__Overlay {
-    background-color: ${props =>
+    background-color: ${(props) =>
       transparentize(0.25, props.theme.background)} !important;
     z-index: 100;
   }
@@ -30,7 +30,7 @@ const GlobalStyles = createGlobalStyle`
     .ReactModalPortal + .ReactModalPortal {
       .ReactModal__Overlay {
         margin-left: 12px;
-        box-shadow: 0 -2px 10px ${props => props.theme.shadow};
+        box-shadow: 0 -2px 10px ${(props) => props.theme.shadow};
         border-radius: 8px 0 0 8px;
         overflow: hidden;
       }
@@ -72,7 +72,7 @@ const Modal = ({
         isOpen={isOpen}
         {...rest}
       >
-        <Content onClick={ev => ev.stopPropagation()} column>
+        <Content onClick={(ev) => ev.stopPropagation()} column>
           {title && <h1>{title}</h1>}
 
           {children}
@@ -109,8 +109,8 @@ const StyledModal = styled(ReactModal)`
   align-items: flex-start;
   overflow-x: hidden;
   overflow-y: auto;
-  background: ${props => props.theme.background};
-  transition: ${props => props.theme.backgroundTransition};
+  background: ${(props) => props.theme.background};
+  transition: ${(props) => props.theme.backgroundTransition};
   padding: 8vh 2rem 2rem;
   outline: none;
 
@@ -133,7 +133,7 @@ const Close = styled(NudeButton)`
   right: 0;
   margin: 12px;
   opacity: 0.75;
-  color: ${props => props.theme.text};
+  color: ${(props) => props.theme.text};
   width: auto;
   height: auto;
 
@@ -153,7 +153,7 @@ const Back = styled(NudeButton)`
   top: 2rem;
   left: 2rem;
   opacity: 0.75;
-  color: ${props => props.theme.text};
+  color: ${(props) => props.theme.text};
   width: auto;
   height: auto;
 

app/components/Notice.js

@@ -2,8 +2,8 @@
 import styled from "styled-components";
 
 const Notice = styled.p`
-  background: ${props => props.theme.sidebarBackground};
-  color: ${props => props.theme.sidebarText};
+  background: ${(props) => props.theme.sidebarBackground};
+  color: ${(props) => props.theme.sidebarText};
   padding: 10px 12px;
   border-radius: 4px;
   position: relative;

app/components/NudeButton.js

@@ -14,7 +14,7 @@ const Button = styled.button`
 
   &:focus {
     transition-duration: 0.05s;
-    box-shadow: ${props => lighten(0.4, props.theme.buttonBackground)} 0px 0px
+    box-shadow: ${(props) => lighten(0.4, props.theme.buttonBackground)} 0px 0px
       0px 3px;
     outline: none;
   }

app/components/PaginatedDocumentList.js

@@ -25,7 +25,7 @@ class PaginatedDocumentList extends React.Component<Props> {
         heading={heading}
         fetch={fetch}
         options={options}
-        renderItem={item => (
+        renderItem={(item) => (
           <DocumentPreview key={item.id} document={item} {...rest} />
         )}
       />

app/components/PaginatedList.js

@@ -14,7 +14,7 @@ type Props = {
   heading?: React.Node,
   empty?: React.Node,
   items: any[],
-  renderItem: any => React.Node,
+  renderItem: (any) => React.Node,
 };
 
 @observer

app/components/PathToDocument.js

@@ -44,7 +44,7 @@ class PathToDocument extends React.Component<Props> {
       <Component ref={ref} onClick={this.handleClick} href="" selectable>
         {collection && <CollectionIcon collection={collection} />}
         {result.path
-          .map(doc => <Title key={doc.id}>{doc.title}</Title>)
+          .map((doc) => <Title key={doc.id}>{doc.title}</Title>)
           .reduce((prev, curr) => [prev, <StyledGoToIcon />, curr])}
         {document && (
           <Flex>
@@ -73,7 +73,7 @@ const ResultWrapper = styled.div`
   margin-left: -4px;
   user-select: none;
 
-  color: ${props => props.theme.text};
+  color: ${(props) => props.theme.text};
   cursor: default;
 `;
 
@@ -85,7 +85,7 @@ const ResultWrapperLink = styled(ResultWrapper.withComponent("a"))`
   &:hover,
   &:active,
   &:focus {
-    background: ${props => props.theme.listItemHoverBackground};
+    background: ${(props) => props.theme.listItemHoverBackground};
     outline: none;
   }
 `;

app/components/PublishingInfo.js

@@ -10,16 +10,16 @@ import CollectionsStore from "stores/CollectionsStore";
 import AuthStore from "stores/AuthStore";
 
 const Container = styled(Flex)`
-  color: ${props => props.theme.textTertiary};
+  color: ${(props) => props.theme.textTertiary};
   font-size: 13px;
   white-space: nowrap;
   overflow: hidden;
 `;
 
 const Modified = styled.span`
-  color: ${props =>
+  color: ${(props) =>
     props.highlight ? props.theme.text : props.theme.textTertiary};
-  font-weight: ${props => (props.highlight ? "600" : "400")};
+  font-weight: ${(props) => (props.highlight ? "600" : "400")};
 `;
 
 type Props = {
@@ -104,15 +104,14 @@ function PublishingInfo({
     <Container align="center" {...rest}>
       {updatedByMe ? "You" : updatedBy.name}&nbsp;
       {content}
-      {showCollection &&
-        collection && (
-          <span>
-            &nbsp;in&nbsp;
-            <strong>
-              <Breadcrumb document={document} onlyText />
-            </strong>
-          </span>
-        )}
+      {showCollection && collection && (
+        <span>
+          &nbsp;in&nbsp;
+          <strong>
+            <Breadcrumb document={document} onlyText />
+          </strong>
+        </span>
+      )}
       {children}
     </Container>
   );

app/components/Scrollable.js

@@ -31,7 +31,7 @@ const Wrapper = styled.div`
   overflow-x: hidden;
   overscroll-behavior: none;
   -webkit-overflow-scrolling: touch;
-  box-shadow: ${props =>
+  box-shadow: ${(props) =>
     props.shadow ? "0 1px inset rgba(0,0,0,.1)" : "none"};
   transition: all 250ms ease-in-out;
 `;

app/components/Sidebar/Main.js

@@ -119,7 +119,8 @@ class MainSidebar extends React.Component<Props> {
                 icon={<EditIcon color="currentColor" />}
                 label={
                   <Drafts align="center">
-                    Drafts{draftDocumentsCount > 0 && (
+                    Drafts
+                    {draftDocumentsCount > 0 && (
                       <Bubble count={draftDocumentsCount} />
                     )}
                   </Drafts>

app/components/Sidebar/Settings.js

@@ -146,13 +146,12 @@ class SettingsSidebar extends React.Component<Props> {
                 />
               </Section>
             )}
-            {can.update &&
-              env.DEPLOYMENT !== "hosted" && (
-                <Section>
-                  <Header>Installation</Header>
-                  <Version />
-                </Section>
-              )}
+            {can.update && env.DEPLOYMENT !== "hosted" && (
+              <Section>
+                <Header>Installation</Header>
+                <Version />
+              </Section>
+            )}
           </Scrollable>
         </Flex>
       </Sidebar>

app/components/Sidebar/Sidebar.js

@@ -67,9 +67,10 @@ const Container = styled(Flex)`
   top: 0;
   bottom: 0;
   width: 100%;
-  background: ${props => props.theme.sidebarBackground};
-  transition: left 100ms ease-out, ${props => props.theme.backgroundTransition};
-  margin-left: ${props => (props.mobileSidebarVisible ? 0 : "-100%")};
+  background: ${(props) => props.theme.sidebarBackground};
+  transition: left 100ms ease-out,
+    ${(props) => props.theme.backgroundTransition};
+  margin-left: ${(props) => (props.mobileSidebarVisible ? 0 : "-100%")};
   z-index: 1000;
 
   @media print {
@@ -80,7 +81,7 @@ const Container = styled(Flex)`
   &:before,
   &:after {
     content: "";
-    background: ${props => props.theme.sidebarBackground};
+    background: ${(props) => props.theme.sidebarBackground};
     position: absolute;
     top: -50vh;
     left: 0;
@@ -94,8 +95,8 @@ const Container = styled(Flex)`
   }
 
   ${breakpoint("tablet")`
-    left: ${props => (props.editMode ? `-${props.theme.sidebarWidth}` : 0)};
-    width: ${props => props.theme.sidebarWidth};
+    left: ${(props) => (props.editMode ? `-${props.theme.sidebarWidth}` : 0)};
+    width: ${(props) => props.theme.sidebarWidth};
     margin: 0;
     z-index: 3;
   `};
@@ -106,8 +107,8 @@ const Toggle = styled.a`
   align-items: center;
   position: fixed;
   top: 0;
-  left: ${props => (props.mobileSidebarVisible ? "auto" : 0)};
-  right: ${props => (props.mobileSidebarVisible ? 0 : "auto")};
+  left: ${(props) => (props.mobileSidebarVisible ? "auto" : 0)};
+  right: ${(props) => (props.mobileSidebarVisible ? 0 : "auto")};
   z-index: 1;
   margin: 12px;
 

app/components/Sidebar/components/Bubble.js

@@ -14,8 +14,8 @@ const Bubble = ({ count }: Props) => {
 const Count = styled.div`
   animation: ${bounceIn} 600ms;
   transform-origin: center center;
-  color: ${props => props.theme.white};
-  background: ${props => props.theme.slateDark};
+  color: ${(props) => props.theme.white};
+  background: ${(props) => props.theme.slateDark};
   display: inline-block;
   font-feature-settings: "tnum";
   font-weight: 600;

app/components/Sidebar/components/CollectionLink.js

@@ -61,7 +61,7 @@ class CollectionLink extends React.Component<Props> {
           }
         >
           <Flex column>
-            {collection.documents.map(node => (
+            {collection.documents.map((node) => (
               <DocumentLink
                 key={node.id}
                 node={node}

app/components/Sidebar/components/Collections.js

@@ -57,7 +57,7 @@ class Collections extends React.Component<Props> {
 
     const content = (
       <React.Fragment>
-        {collections.orderedData.map(collection => (
+        {collections.orderedData.map((collection) => (
           <CollectionLink
             key={collection.id}
             documents={documents}
@@ -94,6 +94,9 @@ class Collections extends React.Component<Props> {
   }
 }
 
-export default inject("collections", "ui", "documents", "policies")(
-  withRouter(Collections)
-);
+export default inject(
+  "collections",
+  "ui",
+  "documents",
+  "policies"
+)(withRouter(Collections));

app/components/Sidebar/components/DocumentLink.js

@@ -76,7 +76,7 @@ class DocumentLink extends React.Component<Props> {
       collection &&
       (collection
         .pathToDocument(activeDocument)
-        .map(entry => entry.id)
+        .map((entry) => entry.id)
         .includes(node.id) ||
         this.isActiveDocument())
     );
@@ -110,14 +110,12 @@ class DocumentLink extends React.Component<Props> {
                     onClose={() => (this.menuOpen = false)}
                   />
                 </Fade>
-              ) : (
-                undefined
-              )
+              ) : undefined
             }
           >
             {this.hasChildDocuments() && (
               <DocumentChildren column>
-                {node.children.map(childNode => (
+                {node.children.map((childNode) => (
                   <DocumentLink
                     key={childNode.id}
                     collection={collection}

app/components/Sidebar/components/Header.js

@@ -6,7 +6,7 @@ const Header = styled(Flex)`
   font-size: 11px;
   font-weight: 600;
   text-transform: uppercase;
-  color: ${props => props.theme.sidebarText};
+  color: ${(props) => props.theme.sidebarText};
   letter-spacing: 0.04em;
   margin: 4px 16px;
 `;

app/components/Sidebar/components/HeaderBlock.js

@@ -46,7 +46,7 @@ const Subheading = styled.div`
   font-size: 11px;
   text-transform: uppercase;
   font-weight: 500;
-  color: ${props => props.theme.sidebarText};
+  color: ${(props) => props.theme.sidebarText};
 `;
 
 const TeamName = styled.div`
@@ -54,7 +54,7 @@ const TeamName = styled.div`
   padding-left: 10px;
   padding-right: 24px;
   font-weight: 600;
-  color: ${props => props.theme.text};
+  color: ${(props) => props.theme.text};
   text-decoration: none;
   font-size: 16px;
 `;

app/components/Sidebar/components/SidebarLink.js

@@ -108,11 +108,11 @@ const IconWrapper = styled.span`
 `;
 
 const Action = styled.span`
-  display: ${props => (props.menuOpen ? "inline" : "none")};
+  display: ${(props) => (props.menuOpen ? "inline" : "none")};
   position: absolute;
   top: 4px;
   right: 4px;
-  color: ${props => props.theme.textTertiary};
+  color: ${(props) => props.theme.textTertiary};
 
   svg {
     opacity: 0.75;
@@ -132,17 +132,17 @@ const StyledNavLink = styled(NavLink)`
   text-overflow: ellipsis;
   padding: 4px 16px;
   border-radius: 4px;
-  color: ${props => props.theme.sidebarText};
+  color: ${(props) => props.theme.sidebarText};
   font-size: 15px;
   cursor: pointer;
 
   &:hover {
-    color: ${props => props.theme.text};
+    color: ${(props) => props.theme.text};
   }
 
   &:focus {
-    color: ${props => props.theme.text};
-    background: ${props => props.theme.black05};
+    color: ${(props) => props.theme.text};
+    background: ${(props) => props.theme.black05};
     outline: none;
   }
 

app/components/SocketProvider.js

@@ -71,13 +71,13 @@ class SocketProvider extends React.Component<Props> {
       this.socket.authenticated = true;
     });
 
-    this.socket.on("unauthorized", err => {
+    this.socket.on("unauthorized", (err) => {
       this.socket.authenticated = false;
       ui.showToast(err.message);
       throw err;
     });
 
-    this.socket.on("entities", async event => {
+    this.socket.on("entities", async (event) => {
       if (event.documentIds) {
         for (const documentDescriptor of event.documentIds) {
           const documentId = documentDescriptor.id;
@@ -182,23 +182,23 @@ class SocketProvider extends React.Component<Props> {
       }
     });
 
-    this.socket.on("documents.star", event => {
+    this.socket.on("documents.star", (event) => {
       documents.starredIds.set(event.documentId, true);
     });
 
-    this.socket.on("documents.unstar", event => {
+    this.socket.on("documents.unstar", (event) => {
       documents.starredIds.set(event.documentId, false);
     });
 
     // received when a user is given access to a collection
     // if the user is us then we go ahead and load the collection from API.
-    this.socket.on("collections.add_user", event => {
+    this.socket.on("collections.add_user", (event) => {
       if (auth.user && event.userId === auth.user.id) {
         collections.fetch(event.collectionId, { force: true });
       }
 
       // Document policies might need updating as the permission changes
-      documents.inCollection(event.collectionId).forEach(document => {
+      documents.inCollection(event.collectionId).forEach((document) => {
         policies.remove(document.id);
       });
     });
@@ -206,7 +206,7 @@ class SocketProvider extends React.Component<Props> {
     // received when a user is removed from having access to a collection
     // to keep state in sync we must update our UI if the user is us,
     // or otherwise just remove any membership state we have for that user.
-    this.socket.on("collections.remove_user", event => {
+    this.socket.on("collections.remove_user", (event) => {
       if (auth.user && event.userId === auth.user.id) {
         collections.remove(event.collectionId);
         memberships.removeCollectionMemberships(event.collectionId);
@@ -218,32 +218,32 @@ class SocketProvider extends React.Component<Props> {
 
     // received a message from the API server that we should request
     // to join a specific room. Forward that to the ws server.
-    this.socket.on("join", event => {
+    this.socket.on("join", (event) => {
       this.socket.emit("join", event);
     });
 
     // received a message from the API server that we should request
     // to leave a specific room. Forward that to the ws server.
-    this.socket.on("leave", event => {
+    this.socket.on("leave", (event) => {
       this.socket.emit("leave", event);
     });
 
     // received whenever we join a document room, the payload includes
     // userIds that are present/viewing and those that are editing.
-    this.socket.on("document.presence", event => {
+    this.socket.on("document.presence", (event) => {
       presence.init(event.documentId, event.userIds, event.editingIds);
     });
 
     // received whenever a new user joins a document room, aka they
     // navigate to / start viewing a document
-    this.socket.on("user.join", event => {
+    this.socket.on("user.join", (event) => {
       presence.touch(event.documentId, event.userId, event.isEditing);
       views.touch(event.documentId, event.userId);
     });
 
     // received whenever a new user leaves a document room, aka they
     // navigate away / stop viewing a document
-    this.socket.on("user.leave", event => {
+    this.socket.on("user.leave", (event) => {
       presence.leave(event.documentId, event.userId);
       views.touch(event.documentId, event.userId);
     });
@@ -251,7 +251,7 @@ class SocketProvider extends React.Component<Props> {
     // received when another client in a document room wants to change
     // or update it's presence. Currently the only property is whether
     // the client is in editing state or not.
-    this.socket.on("user.presence", event => {
+    this.socket.on("user.presence", (event) => {
       presence.touch(event.documentId, event.userId, event.isEditing);
     });
   }

app/components/Subheading.js

@@ -7,7 +7,7 @@ type Props = {
 };
 
 const H3 = styled.h3`
-  border-bottom: 1px solid ${props => props.theme.divider};
+  border-bottom: 1px solid ${(props) => props.theme.divider};
   margin-top: 22px;
   margin-bottom: 12px;
   line-height: 1;
@@ -21,8 +21,8 @@ const Underline = styled("span")`
   font-weight: 500;
   font-size: 14px;
   line-height: 1.5;
-  color: ${props => props.theme.textSecondary};
-  border-bottom: 3px solid ${props => props.theme.textSecondary};
+  color: ${(props) => props.theme.textSecondary};
+  border-bottom: 3px solid ${(props) => props.theme.textSecondary};
   padding-bottom: 5px;
 `;
 

app/components/Switch.js

@@ -38,8 +38,8 @@ const Label = styled.label`
 const Wrapper = styled.label`
   position: relative;
   display: inline-block;
-  width: ${props => props.width}px;
-  height: ${props => props.height}px;
+  width: ${(props) => props.width}px;
+  height: ${(props) => props.height}px;
   margin-bottom: 4px;
   margin-right: 8px;
 `;
@@ -51,16 +51,16 @@ const Slider = styled.span`
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: ${props => props.theme.slate};
+  background-color: ${(props) => props.theme.slate};
   -webkit-transition: 0.4s;
   transition: 0.4s;
-  border-radius: ${props => props.height}px;
+  border-radius: ${(props) => props.height}px;
 
   &:before {
     position: absolute;
     content: "";
-    height: ${props => props.height - 8}px;
-    width: ${props => props.height - 8}px;
+    height: ${(props) => props.height - 8}px;
+    width: ${(props) => props.height - 8}px;
     left: 4px;
     bottom: 4px;
     background-color: white;
@@ -77,15 +77,15 @@ const HiddenInput = styled.input`
   visibility: hidden;
 
   &:checked + ${Slider} {
-    background-color: ${props => props.theme.primary};
+    background-color: ${(props) => props.theme.primary};
   }
 
   &:focus + ${Slider} {
-    box-shadow: 0 0 1px ${props => props.theme.primary};
+    box-shadow: 0 0 1px ${(props) => props.theme.primary};
   }
 
   &:checked + ${Slider}:before {
-    transform: translateX(${props => props.width - props.height}px);
+    transform: translateX(${(props) => props.width - props.height}px);
   }
 `;
 

app/components/Tab.js

@@ -15,20 +15,20 @@ const StyledNavLink = styled(NavLink)`
   display: inline-block;
   font-weight: 500;
   font-size: 14px;
-  color: ${props => props.theme.textTertiary};
+  color: ${(props) => props.theme.textTertiary};
   margin-right: 24px;
   padding-bottom: 8px;
 
   &:hover {
-    color: ${props => props.theme.textSecondary};
-    border-bottom: 3px solid ${props => props.theme.divider};
+    color: ${(props) => props.theme.textSecondary};
+    border-bottom: 3px solid ${(props) => props.theme.divider};
     padding-bottom: 5px;
   }
 
   &:focus {
     outline: none;
     border-bottom: 3px solid
-      ${props => lighten(0.4, props.theme.buttonBackground)};
+      ${(props) => lighten(0.4, props.theme.buttonBackground)};
     padding-bottom: 5px;
   }
 `;

app/components/Tabs.js

@@ -3,13 +3,13 @@ import styled from "styled-components";
 
 const Tabs = styled.nav`
   position: relative;
-  border-bottom: 1px solid ${props => props.theme.divider};
+  border-bottom: 1px solid ${(props) => props.theme.divider};
   margin-top: 22px;
   margin-bottom: 12px;
 `;
 
 export const Separator = styled.span`
-  border-left: 1px solid ${props => props.theme.divider};
+  border-left: 1px solid ${(props) => props.theme.divider};
   position: relative;
   top: 2px;
   margin-right: 24px;

app/components/TeamLogo.js

@@ -5,8 +5,8 @@ const TeamLogo = styled.img`
   width: auto;
   height: 38px;
   border-radius: 4px;
-  background: ${props => props.theme.background};
-  border: 1px solid ${props => props.theme.divider};
+  background: ${(props) => props.theme.background};
+  border: 1px solid ${(props) => props.theme.divider};
 `;
 
 export default TeamLogo;

app/components/Time.js

@@ -9,14 +9,14 @@ let callbacks = [];
 // This is a shared timer that fires every minute, used for
 // updating all Time components across the page all at once.
 setInterval(() => {
-  callbacks.forEach(cb => cb());
+  callbacks.forEach((cb) => cb());
 }, 1000 * 60);
 
 function eachMinute(fn) {
   callbacks.push(fn);
 
   return () => {
-    callbacks = callbacks.filter(cb => cb !== fn);
+    callbacks = callbacks.filter((cb) => cb !== fn);
   };
 }
 

app/components/Toasts/Toasts.js

@@ -15,7 +15,7 @@ class Toasts extends React.Component<Props> {
 
     return (
       <List>
-        {ui.orderedToasts.map(toast => (
+        {ui.orderedToasts.map((toast) => (
           <Toast
             key={toast.id}
             toast={toast}
@@ -29,8 +29,8 @@ class Toasts extends React.Component<Props> {
 
 const List = styled.ol`
   position: fixed;
-  left: ${props => props.theme.hpadding};
-  bottom: ${props => props.theme.vpadding};
+  left: ${(props) => props.theme.hpadding};
+  bottom: ${(props) => props.theme.vpadding};
   list-style: none;
   margin: 0;
   padding: 0;

app/components/Toasts/components/Toast.js

@@ -61,13 +61,13 @@ const Action = styled.span`
   height: 100%;
   text-transform: uppercase;
   font-size: 12px;
-  color: ${props => props.theme.toastText};
-  background: ${props => darken(0.05, props.theme.toastBackground)};
+  color: ${(props) => props.theme.toastText};
+  background: ${(props) => darken(0.05, props.theme.toastBackground)};
   border-top-right-radius: 5px;
   border-bottom-right-radius: 5px;
 
   &:hover {
-    background: ${props => darken(0.1, props.theme.toastBackground)};
+    background: ${(props) => darken(0.1, props.theme.toastBackground)};
   }
 `;
 
@@ -76,14 +76,14 @@ const Container = styled.div`
   align-items: center;
   animation: ${fadeAndScaleIn} 100ms ease;
   margin: 8px 0;
-  color: ${props => props.theme.toastText};
-  background: ${props => props.theme.toastBackground};
+  color: ${(props) => props.theme.toastText};
+  background: ${(props) => props.theme.toastBackground};
   font-size: 15px;
   border-radius: 5px;
   cursor: default;
 
   &:hover {
-    background: ${props => darken(0.05, props.theme.toastBackground)};
+    background: ${(props) => darken(0.05, props.theme.toastBackground)};
   }
 `;
 

app/components/Tooltip.js

@@ -54,19 +54,19 @@ const Shortcut = styled.kbd`
   font: 10px "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier,
     monospace;
   line-height: 10px;
-  color: ${props => props.theme.tooltipBackground};
+  color: ${(props) => props.theme.tooltipBackground};
   vertical-align: middle;
-  background-color: ${props => props.theme.tooltipText};
+  background-color: ${(props) => props.theme.tooltipText};
   border-radius: 3px;
 `;
 
 const StyledTippy = styled(Tippy)`
   font-size: 13px;
-  background-color: ${props => props.theme.tooltipBackground};
-  color: ${props => props.theme.tooltipText};
+  background-color: ${(props) => props.theme.tooltipBackground};
+  color: ${(props) => props.theme.tooltipText};
 
   svg {
-    fill: ${props => props.theme.tooltipBackground};
+    fill: ${(props) => props.theme.tooltipBackground};
   }
 `;