Share Permissions (#761)

* Share restrictions

* Tweak language, add spec

app/components/Checkbox.js

@@ -0,0 +1,45 @@
+// @flow
+import * as React from 'react';
+import styled from 'styled-components';
+import HelpText from 'components/HelpText';
+
+export type Props = {
+  checked?: boolean,
+  label?: string,
+  className?: string,
+  note?: string,
+};
+
+const LabelText = styled.span`
+  font-weight: 500;
+  margin-left: 10px;
+`;
+
+const Wrapper = styled.div`
+  padding-bottom: 8px;
+`;
+
+const Label = styled.label`
+  display: flex;
+  align-items: center;
+`;
+
+export default function Checkbox({
+  label,
+  note,
+  className,
+  short,
+  ...rest
+}: Props) {
+  return (
+    <React.Fragment>
+      <Wrapper>
+        <Label>
+          <input type="checkbox" {...rest} />
+          {label && <LabelText>{label}</LabelText>}
+        </Label>
+        {note && <HelpText small>{note}</HelpText>}
+      </Wrapper>
+    </React.Fragment>
+  );
+}

app/components/HelpText/HelpText.js

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 const HelpText = styled.p`
   margin-top: 0;
   color: ${props => props.theme.slateDark};
+  font-size: ${props => (props.small ? '13px' : 'auto')};
 `;
 
 export default HelpText;

app/components/Sidebar/Settings.js

@@ -5,6 +5,7 @@ import {
   DocumentIcon,
   ProfileIcon,
   SettingsIcon,
+  PadlockIcon,
   CodeIcon,
   UserIcon,
   LinkIcon,
@@ -61,6 +62,11 @@ class SettingsSidebar extends React.Component<Props> {
                   Details
                 </SidebarLink>
               )}
+              {user.isAdmin && (
+                <SidebarLink to="/settings/security" icon={<PadlockIcon />}>
+                  Security
+                </SidebarLink>
+              )}
               <SidebarLink to="/settings/people" icon={<UserIcon />}>
                 People
               </SidebarLink>

app/components/Toasts/components/Toast.js

@@ -49,7 +49,7 @@ const Container = styled.li`
   align-items: center;
   animation: ${fadeAndScaleIn} 100ms ease;
   margin: 8px 0;
-  padding: 8px;
+  padding: 10px 12px;
   color: ${props => props.theme.white};
   background: ${props => props.theme[props.type]};
   font-size: 15px;