coop-cloud-chaos-patchs/outline
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix: Improved mobile styling

Browse Source 
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
This commit is contained in:
Tom Moor
2021-04-17 10:40:39 -07:00
parent c46a032f0b
commit b2d703bee4
10 changed files with 62 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
app/components/Theme.js
View File

@ -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}>
<>
<GlobalStyles />
{children}
</>
<ThemeProvider theme={theme}>
<ThemeProvider theme={isMobile ? mobileTheme : empty}>
<>
<GlobalStyles />
{children}
</>
</ThemeProvider>
</ThemeProvider>
);
}