diff --git a/app/components/Subheading.js b/app/components/Subheading.js
index eecb044ab..a55d128a4 100644
--- a/app/components/Subheading.js
+++ b/app/components/Subheading.js
@@ -4,6 +4,7 @@ import styled from "styled-components";
type Props = {|
children: React.Node,
+ sticky?: boolean,
|};
const H3 = styled.h3`
@@ -26,9 +27,9 @@ const Underline = styled.div`
// When sticky we need extra background coverage around the sides otherwise
// items that scroll past can "stick out" the sides of the heading
-const Sticky = styled.div`
- position: sticky;
- top: 54px;
+const Background = styled.div`
+ position: ${(props) => (props.sticky ? "sticky" : "relative")};
+ ${(props) => (props.sticky ? "top: 54px;" : "")}
margin: 0 -8px;
padding: 0 8px;
background: ${(props) => props.theme.background};
@@ -36,13 +37,13 @@ const Sticky = styled.div`
z-index: 1;
`;
-const Subheading = ({ children, ...rest }: Props) => {
+const Subheading = ({ children, sticky, ...rest }: Props) => {
return (
-
+
{children}
-
+
);
};
diff --git a/app/scenes/Archive.js b/app/scenes/Archive.js
index 3290ff71e..be6294da4 100644
--- a/app/scenes/Archive.js
+++ b/app/scenes/Archive.js
@@ -26,7 +26,7 @@ function Archive(props: Props) {
{t("Documents")}}
+ heading={{t("Documents")}}
empty={
{t("The document archive is empty at the moment.")}
}
diff --git a/app/scenes/Collection.js b/app/scenes/Collection.js
index e1a1b45a9..bf406231c 100644
--- a/app/scenes/Collection.js
+++ b/app/scenes/Collection.js
@@ -258,7 +258,7 @@ class CollectionScene extends React.Component {
{hasPinnedDocuments && (
<>
-
+
{t("Pinned")}
diff --git a/app/scenes/Drafts.js b/app/scenes/Drafts.js
index 569f5df67..f5e6acbfe 100644
--- a/app/scenes/Drafts.js
+++ b/app/scenes/Drafts.js
@@ -96,7 +96,7 @@ class Drafts extends React.Component {
}
>
{t("Drafts")}
-
+
{t("Documents")}
{t("Documents")}}
+ heading={{t("Documents")}}
empty={{t("Trash is empty at the moment.")}}
showCollection
showTemplate