fix: Improved mobile styling

fix: Severla context menus miss-positioned
fix: Search filters not large enough on mobile
fix: Deep black background on mobile to match native apps
fix: Sticky document header allowing horizontal scrolling on mobile

app/components/Button.js

@@ -134,7 +134,7 @@ export type Props = {|
   "data-event-action"?: string,
 |};
 
-const Button = React.forwardRef<Props>(
+const Button = React.forwardRef<Props, HTMLButtonElement>(
   (
     {
       type = "text",

app/components/Header.js

@@ -97,6 +97,7 @@ const Wrapper = styled(Flex)`
 `;
 
 const Title = styled("div")`
+  display: none;
   font-size: 16px;
   font-weight: 600;
   text-overflow: ellipsis;
@@ -105,12 +106,9 @@ const Title = styled("div")`
   cursor: pointer;
   min-width: 0;
 
-  /* on mobile, there's always a floating menu button in the top left 
-    add some padding here to offset
-  */
-  padding-left: 40px;
   ${breakpoint("tablet")`	
     padding-left: 0;
+    display: block;
   `};
 
   svg {

app/components/Theme.js

@@ -3,22 +3,30 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { ThemeProvider } from "styled-components";
 import GlobalStyles from "shared/styles/globals";
-import { dark, light } from "shared/styles/theme";
+import { dark, light, lightMobile, darkMobile } from "shared/styles/theme";
+import useMediaQuery from "hooks/useMediaQuery";
 import useStores from "hooks/useStores";
 
+const empty = {};
+
 type Props = {|
   children: React.Node,
 |};
 
 function Theme({ children }: Props) {
   const { ui } = useStores();
+  const theme = ui.resolvedTheme === "dark" ? dark : light;
+  const mobileTheme = ui.resolvedTheme === "dark" ? darkMobile : lightMobile;
+  const isMobile = useMediaQuery(`(max-width: ${theme.breakpoints.tablet}px)`);
 
   return (
-    <ThemeProvider theme={ui.resolvedTheme === "dark" ? dark : light}>
+    <ThemeProvider theme={theme}>
-      <>
+      <ThemeProvider theme={isMobile ? mobileTheme : empty}>
-        <GlobalStyles />
+        <>
-        {children}
+          <GlobalStyles />
-      </>
+          {children}
+        </>
+      </ThemeProvider>
     </ThemeProvider>
   );
 }

app/hooks/useMediaQuery.js

@@ -0,0 +1,20 @@
+// @flow
+import { useState, useEffect } from "react";
+
+export default function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState<boolean>(false);
+
+  useEffect(() => {
+    const media = window.matchMedia(query);
+    if (media.matches !== matches) {
+      setMatches(media.matches);
+    }
+    const listener = () => {
+      setMatches(media.matches);
+    };
+    media.addListener(listener);
+    return () => media.removeListener(listener);
+  }, [matches, query]);
+
+  return matches;
+}

app/menus/NewDocumentMenu.js

@@ -17,7 +17,7 @@ import useStores from "hooks/useStores";
 import { newDocumentUrl } from "utils/routeHelpers";
 
 function NewDocumentMenu() {
-  const menu = useMenuState();
+  const menu = useMenuState({ modal: true });
   const { t } = useTranslation();
   const team = useCurrentTeam();
   const { collections, policies } = useStores();

app/menus/NewTemplateMenu.js

@@ -16,7 +16,7 @@ import useStores from "hooks/useStores";
 import { newDocumentUrl } from "utils/routeHelpers";
 
 function NewTemplateMenu() {
-  const menu = useMenuState();
+  const menu = useMenuState({ modal: true });
   const { t } = useTranslation();
   const team = useCurrentTeam();
   const { collections, policies } = useStores();

app/scenes/Search/Search.js

@@ -406,8 +406,11 @@ const ResultsWrapper = styled(Flex)`
   position: absolute;
   transition: all 300ms cubic-bezier(0.65, 0.05, 0.36, 1);
   top: ${(props) => (props.pinToTop ? "0%" : "50%")};
-  margin-top: ${(props) => (props.pinToTop ? "40px" : "-75px")};
   width: 100%;
+
+  ${breakpoint("tablet")`	
+    margin-top: ${(props) => (props.pinToTop ? "40px" : "-75px")};
+  `};
 `;
 
 const ResultList = styled(Flex)`

app/scenes/Search/components/FilterOption.js

@@ -3,6 +3,7 @@ import { CheckmarkIcon } from "outline-icons";
 import * as React from "react";
 import { MenuItem } from "reakit/Menu";
 import styled from "styled-components";
+import breakpoint from "styled-components-breakpoint";
 import Flex from "components/Flex";
 import HelpText from "components/HelpText";
 
@@ -48,8 +49,8 @@ const Checkmark = styled(CheckmarkIcon)`
 const Button = styled.button`
   display: flex;
   flex-direction: column;
-  font-size: 15px;
+  font-size: 16px;
-  padding: 4px 8px;
+  padding: 8px;
   margin: 0;
   border: 0;
   background: none;
@@ -58,7 +59,7 @@ const Button = styled.button`
   font-weight: ${(props) => (props.active ? "600" : "normal")};
   justify-content: center;
   width: 100%;
-  min-height: 32px;
+  min-height: 42px;
 
   ${HelpText} {
     font-weight: normal;
@@ -68,6 +69,12 @@ const Button = styled.button`
   &:hover {
     background: ${(props) => props.theme.listItemHoverBackground};
   }
+
+  ${breakpoint("tablet")`
+    padding: 4px 8px;
+    font-size: 15px;
+    min-height: 32px;
+  `};
 `;
 
 const ListItem = styled("li")`

app/scenes/Search/components/FilterOptions.js

@@ -30,7 +30,7 @@ const FilterOptions = ({
   className,
   onSelect,
 }: Props) => {
-  const menu = useMenuState();
+  const menu = useMenuState({ modal: true });
   const selected = find(options, { key: activeKey }) || options[0];
   const selectedLabel = selected ? `${selectedPrefix} ${selected.label}` : "";
 

shared/styles/theme.js

@@ -241,4 +241,12 @@ export const dark = {
   scrollbarThumb: colors.lightBlack,
 };
 
+export const lightMobile = {
+  background: colors.white,
+};
+
+export const darkMobile = {
+  background: colors.black,
+};
+
 export default light;