diff --git a/src/components/pwa/Landing.tsx b/src/components/pwa/Landing.tsx index bc2b681..90eab6a 100644 --- a/src/components/pwa/Landing.tsx +++ b/src/components/pwa/Landing.tsx @@ -6,6 +6,8 @@ import useWidth from '../layout/ViewPort/hooks/useWidth'; const headerFontSize = 48; const textFontSize = 24; +const buttonWidth = 124; +const buttonMinHeight = 60; const Header = ({ xs = undefined }) => ( @@ -24,7 +26,16 @@ const StartButton = () => { onClick={next} variant='contained' size='medium' - sx={{ backgroundColor: 'primary.dark', '&:hover': { backgroundColor: 'primary.main' }, fontSize: 16, minHeight: 64, fontWeight: 700, width: 148 }} + sx={{ + p: 0, + m: 0, + backgroundColor: 'primary.dark', + '&:hover': { backgroundColor: 'primary.main' }, + fontSize: 15, + minHeight: buttonMinHeight, + fontWeight: 700, + width: buttonWidth + }} > START QUIZ @@ -38,7 +49,16 @@ const SearchButton = () => { onClick={search} variant='contained' size='medium' - sx={{ backgroundColor: 'primary.dark', '&:hover': { backgroundColor: 'primary.main' }, fontSize: 16, minHeight: 64, fontWeight: 700, width: 148 }} + sx={{ + p: 0, + m: 0, + backgroundColor: 'primary.dark', + '&:hover': { backgroundColor: 'primary.main' }, + fontSize: 15, + minHeight: buttonMinHeight, + fontWeight: 700, + width: buttonWidth + }} > SEARCH APPS @@ -47,12 +67,13 @@ const SearchButton = () => { const HorizontalButtons = () => { const xs = useMediaQuery('(max-width:800px)'); + const xs2 = useMediaQuery('(max-width:600px)'); return ( - {!xs && ( + {!xs2 && ( OR @@ -65,7 +86,7 @@ const HorizontalButtons = () => { }; const VerticalButtons = () => { - const xs = useMediaQuery('(max-width:400px)'); + const xs = useMediaQuery('(max-width:300px)'); return ( @@ -89,7 +110,7 @@ const HorizontalLayout = () => { const xs = useMediaQuery('(max-width:800px)'); return ( - +
mindapp @@ -109,9 +130,11 @@ const HorizontalLayout = () => { const VerticalLayout = () => { return ( -
- - Answer a few questions, and we will recommend mental health apps that meet your needs and preferences. + +
+ + Answer a few questions, and we will recommend mental health apps that meet your needs and preferences. + mindapp @@ -125,5 +148,9 @@ export default function Landing() { const height = useHeight(); const width = useWidth(); const isLandscape = width > height && height < 500; - return {isLandscape ? : }; + return ( + + {isLandscape ? : } + + ); } diff --git a/src/components/pwa/Pwa.tsx b/src/components/pwa/Pwa.tsx index a343971..9c84201 100644 --- a/src/components/pwa/Pwa.tsx +++ b/src/components/pwa/Pwa.tsx @@ -99,7 +99,7 @@ export default function Pwa() { }, [filters, showResults, tableFilterUpdate]); return ( - + {showLanding ? ( ) : (