ui: scale down font size for mobile

This commit is contained in:
thecodrr
2020-04-21 15:26:08 +05:00
parent 21507e1a46
commit 4e8be190c6
2 changed files with 9 additions and 4 deletions

View File

@@ -3,13 +3,18 @@ import { ThemeProvider as EmotionThemeProvider } from "emotion-theming";
import { useStore } from "../../stores/theme-store";
import ThemeFactory from "../../theme";
import { injectCss } from "../../utils/css";
import { isMobile } from "../../utils/dimensions";
const factory = new ThemeFactory();
function ThemeProvider(props) {
const themeType = useStore(store => store.theme);
const accent = useStore(store => store.accent);
const theme = factory.construct({ theme: themeType, accent, scale: 1 });
const themeType = useStore((store) => store.theme);
const accent = useStore((store) => store.accent);
const theme = factory.construct({
theme: themeType,
accent,
scale: isMobile() ? 0.8 : 1,
});
injectCss(factory.transform("css", theme));
return (

View File

@@ -44,7 +44,7 @@ function Header(props) {
mr: 4,
display: ["block", "none", "none"],
}}
size={38}
size={28}
/>
<Heading fontSize="heading" color={titleColor || "text"}>
{title || params.title}