Share links list WIP

app/components/Avatar/Avatar.js

@@ -6,10 +6,19 @@ import { observer } from 'mobx-react';
 import { color } from 'shared/styles/constants';
 import placeholder from './placeholder.png';
 
+type Props = {
+  src: string,
+  size: number,
+};
+
 @observer
-class Avatar extends React.Component<*> {
+class Avatar extends React.Component<Props> {
   @observable error: boolean;
 
+  static defaultProps = {
+    size: 24,
+  };
+
   handleError = () => {
     this.error = true;
   };
@@ -17,7 +26,7 @@ class Avatar extends React.Component<*> {
   render() {
     return (
       <CircleImg
-        {...this.props}
+        size={this.props.size}
         onError={this.handleError}
         src={this.error ? placeholder : this.props.src}
       />
@@ -26,8 +35,8 @@ class Avatar extends React.Component<*> {
 }
 
 const CircleImg = styled.img`
-  width: 24px;
-  height: 24px;
+  width: ${props => props.size}px;
+  height: ${props => props.size}px;
   border-radius: 50%;
   border: 2px solid ${color.white};
   flex-shrink: 0;

app/components/Button/Button.js

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import styled from 'styled-components';
 import { color } from 'shared/styles/constants';
-import { darken, lighten } from 'polished';
+import { darken } from 'polished';
 
 const RealButton = styled.button`
   display: inline-block;
@@ -40,11 +40,14 @@ const RealButton = styled.button`
   ${props =>
     props.light &&
     `
-    color: ${color.text};
-    background: ${lighten(0.08, color.slateLight)};
+    color: ${color.slate};
+    background: transparent;
+    border: 1px solid ${color.slate};
 
     &:hover {
-      background: ${color.slateLight};
+      background: transparent;
+      color: ${color.slateDark};
+      border: 1px solid ${color.slateDark};
     }
   `} ${props =>
       props.neutral &&

app/components/List/Item.js

@@ -0,0 +1,56 @@
+// @flow
+import * as React from 'react';
+import styled from 'styled-components';
+import { color, fontSize } from 'shared/styles/constants';
+
+type Props = {
+  image?: React.Node,
+  title: string,
+  subtitle: React.Node,
+  actions?: React.Node,
+};
+
+const ListItem = ({ image, title, subtitle, actions }: Props) => {
+  return (
+    <Wrapper>
+      {image && <Image>{image}</Image>}
+      <Content>
+        <Heading>{title}</Heading>
+        <Subtitle>{subtitle}</Subtitle>
+      </Content>
+      {actions && <Actions>{actions}</Actions>}
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.li`
+  display: flex;
+  padding: 12px 0;
+  margin: 0;
+  border-bottom: 1px solid ${color.smokeDark};
+`;
+
+const Image = styled.div`
+  padding: 0 8px 0 0;
+`;
+
+const Heading = styled.h2`
+  font-size: ${fontSize.medium};
+  margin: 0;
+`;
+
+const Content = styled.div`
+  flex-grow: 1;
+`;
+
+const Subtitle = styled.p`
+  margin: 0;
+  font-size: ${fontSize.small};
+  color: ${color.slate};
+`;
+
+const Actions = styled.div`
+  align-self: flex-end;
+`;
+
+export default ListItem;

app/components/List/List.js

@@ -0,0 +1,10 @@
+// @flow
+import styled from 'styled-components';
+
+const List = styled.ol`
+  margin: 0;
+  padding: 0;
+  list-style: none;
+`;
+
+export default List;

app/components/List/index.js

@@ -0,0 +1,3 @@
+// @flow
+import List from './List';
+export default List;

app/components/Sidebar/Settings.js

@@ -1,7 +1,13 @@
 // @flow
 import * as React from 'react';
 import { observer, inject } from 'mobx-react';
-import { ProfileIcon, SettingsIcon, CodeIcon, UserIcon } from 'outline-icons';
+import {
+  ProfileIcon,
+  SettingsIcon,
+  CodeIcon,
+  UserIcon,
+  LinkIcon,
+} from 'outline-icons';
 
 import Flex from 'shared/components/Flex';
 import Sidebar, { Section } from './Sidebar';
@@ -51,6 +57,9 @@ class SettingsSidebar extends React.Component<Props> {
               <SidebarLink to="/settings/users" icon={<UserIcon />}>
                 Users
               </SidebarLink>
+              <SidebarLink to="/settings/shares" icon={<LinkIcon />}>
+                Share Links
+              </SidebarLink>
               <SidebarLink
                 to="/settings/integrations/slack"
                 icon={<SettingsIcon />}