chore: Show 'private' badge on private collections (#1952)

* chore: Show 'private' badge on private collections

* lint

* fix: Missing translation mapping

app/components/Badge.js

@@ -3,15 +3,17 @@ import styled from "styled-components";
 
 const Badge = styled.span`
   margin-left: 10px;
-  padding: 2px 6px 3px;
+  padding: 1px 5px 2px;
   background-color: ${({ yellow, primary, theme }) =>
-    yellow ? theme.yellow : primary ? theme.primary : theme.textTertiary};
+    yellow ? theme.yellow : primary ? theme.primary : "transparent"};
   color: ${({ primary, yellow, theme }) =>
-    primary ? theme.white : yellow ? theme.almostBlack : theme.background};
-  border-radius: 4px;
-  font-size: 11px;
+    primary ? theme.white : yellow ? theme.almostBlack : theme.textTertiary};
+  border: 1px solid
+    ${({ primary, yellow, theme }) =>
+      primary || yellow ? "transparent" : theme.textTertiary};
+  border-radius: 8px;
+  font-size: 12px;
   font-weight: 500;
-  text-transform: uppercase;
   user-select: none;
 `;
 

app/components/CollectionDescription.js

@@ -150,7 +150,7 @@ const MaxHeight = styled.div`
   position: relative;
   max-height: 25vh;
   overflow: hidden;
-  margin: -8px;
+  margin: -12px -8px -8px;
   padding: 8px;
 
   &[data-editing="true"],

app/components/CollectionIcon.js

@@ -1,20 +1,21 @@
 // @flow
-import { inject, observer } from "mobx-react";
-import { PrivateCollectionIcon, CollectionIcon } from "outline-icons";
+import { observer } from "mobx-react";
+import { CollectionIcon } from "outline-icons";
 import { getLuminance } from "polished";
 import * as React from "react";
-import UiStore from "stores/UiStore";
 import Collection from "models/Collection";
 import { icons } from "components/IconPicker";
+import useStores from "hooks/useStores";
 
 type Props = {
   collection: Collection,
   expanded?: boolean,
   size?: number,
-  ui: UiStore,
 };
 
-function ResolvedCollectionIcon({ collection, expanded, size, ui }: Props) {
+function ResolvedCollectionIcon({ collection, expanded, size }: Props) {
+  const { ui } = useStores();
+
   // If the chosen icon color is very dark then we invert it in dark mode
   // otherwise it will be impossible to see against the dark background.
   const color =
@@ -33,13 +34,7 @@ function ResolvedCollectionIcon({ collection, expanded, size, ui }: Props) {
     }
   }
 
-  if (collection.private) {
-    return (
-      <PrivateCollectionIcon color={color} expanded={expanded} size={size} />
-    );
-  }
-
   return <CollectionIcon color={color} expanded={expanded} size={size} />;
 }
 
-export default inject("ui")(observer(ResolvedCollectionIcon));
+export default observer(ResolvedCollectionIcon);

app/scenes/Collection.js

@@ -16,6 +16,7 @@ import CollectionEdit from "scenes/CollectionEdit";
 import CollectionMembers from "scenes/CollectionMembers";
 import Search from "scenes/Search";
 import { Action, Separator } from "components/Actions";
+import Badge from "components/Badge";
 import Button from "components/Button";
 import CenteredContent from "components/CenteredContent";
 import CollectionDescription from "components/CollectionDescription";
@@ -252,7 +253,17 @@ class CollectionScene extends React.Component<Props> {
           <>
             <Heading>
               <CollectionIcon collection={collection} size={40} expanded />{" "}
-              {collection.name}
+              {collection.name}{" "}
+              {collection.private && (
+                <Tooltip
+                  tooltip={t(
+                    "This collection is only visible to people given access"
+                  )}
+                  placement="bottom"
+                >
+                  <Badge>{t("Private")}</Badge>
+                </Tooltip>
+              )}
             </Heading>
             <CollectionDescription collection={collection} />