feat: Add read-only collections (#1991)

closes #1017

app/components/Breadcrumb.js

@@ -4,7 +4,6 @@ import {
   ArchiveIcon,
   EditIcon,
   GoToIcon,
-  PadlockIcon,
   ShapesIcon,
   TrashIcon,
 } from "outline-icons";
@@ -103,11 +102,6 @@ const Breadcrumb = ({ document, children, onlyText }: Props) => {
   if (onlyText === true) {
     return (
       <>
-        {collection.private && (
-          <>
-            <SmallPadlockIcon color="currentColor" size={16} />{" "}
-          </>
-        )}
         {collection.name}
         {path.map((n) => (
           <React.Fragment key={n.id}>
@@ -154,11 +148,6 @@ export const Slash = styled(GoToIcon)`
   fill: ${(props) => props.theme.divider};
 `;
 
-const SmallPadlockIcon = styled(PadlockIcon)`
-  display: inline-block;
-  vertical-align: sub;
-`;
-
 const SmallSlash = styled(GoToIcon)`
   width: 12px;
   height: 12px;

app/components/Divider.js

@@ -0,0 +1,11 @@
+// @flow
+import styled from "styled-components";
+
+const Divider = styled.hr`
+  border: 0;
+  border-bottom: 1px solid ${(props) => props.theme.divider};
+  margin: 0;
+  padding: 0;
+`;
+
+export default Divider;

app/components/GroupListItem.js

@@ -1,6 +1,7 @@
 // @flow
 import { observable } from "mobx";
 import { observer, inject } from "mobx-react";
+import { GroupIcon } from "outline-icons";
 import * as React from "react";
 import styled from "styled-components";
 import { MAX_AVATAR_DISPLAY } from "shared/constants";
@@ -17,7 +18,8 @@ type Props = {
   group: Group,
   groupMemberships: GroupMembershipsStore,
   membership?: CollectionGroupMembership,
-  showFacepile: boolean,
+  showFacepile?: boolean,
+  showAvatar?: boolean,
   renderActions: ({ openMembersModal: () => void }) => React.Node,
 };
 
@@ -48,6 +50,11 @@ class GroupListItem extends React.Component<Props> {
     return (
       <>
         <ListItem
+          image={
+            <Image>
+              <GroupIcon size={28} />
+            </Image>
+          }
           title={
             <Title onClick={this.handleMembersModalOpen}>{group.name}</Title>
           }
@@ -84,6 +91,15 @@ class GroupListItem extends React.Component<Props> {
   }
 }
 
+const Image = styled(Flex)`
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  background: ${(props) => props.theme.secondaryBackground};
+  border-radius: 20px;
+`;
+
 const Title = styled.span`
   &:hover {
     text-decoration: underline;

app/components/InputSelect.js

@@ -27,7 +27,7 @@ const Wrapper = styled.label`
   max-width: ${(props) => (props.short ? "350px" : "100%")};
 `;
 
-type Option = { label: string, value: string };
+export type Option = { label: string, value: string };
 
 export type Props = {
   value?: string,

app/components/InputSelectPermission.js

@@ -0,0 +1,22 @@
+// @flow
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import InputSelect, { type Props, type Option } from "./InputSelect";
+
+export default function InputSelectPermission(
+  props: $Rest<Props, { options: Array<Option> }>
+) {
+  const { t } = useTranslation();
+
+  return (
+    <InputSelect
+      label={t("Default access")}
+      options={[
+        { label: t("View and edit"), value: "read_write" },
+        { label: t("View only"), value: "read" },
+        { label: t("No access"), value: "" },
+      ]}
+      {...props}
+    />
+  );
+}

app/components/Labeled.js

@@ -17,12 +17,10 @@ const Labeled = ({ label, children, ...props }: Props) => (
 );
 
 export const Label = styled(Flex)`
-  margin-bottom: 8px;
-  font-size: 13px;
   font-weight: 500;
-  text-transform: uppercase;
-  color: ${(props) => props.theme.textTertiary};
-  letter-spacing: 0.04em;
+  padding-bottom: 4px;
+  display: inline-block;
+  color: ${(props) => props.theme.text};
 `;
 
 export default observer(Labeled);

app/components/List/Item.js

@@ -27,7 +27,7 @@ const ListItem = ({ image, title, subtitle, actions }: Props) => {
 
 const Wrapper = styled.li`
   display: flex;
-  padding: ${(props) => (props.compact ? "8px" : "12px")} 0;
+  padding: 8px 0;
   margin: 0;
   border-bottom: 1px solid ${(props) => props.theme.divider};