fix(mainui): make toggle responsive and add unsupported device alert

jaenjs · Sep 16, 2021 · 78c46f7 · 78c46f7
1 parent 0535ee5
commit 78c46f7
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 5 deletions.
diff --git a/packages/jaen-shared-ui/src/components/molecules/buttons/JaenToggleButton/index.tsx b/packages/jaen-shared-ui/src/components/molecules/buttons/JaenToggleButton/index.tsx
@@ -20,9 +20,8 @@ const JaenToggleButton: React.FC<JaenToggleButtonProps> = props => {
       fontSize="md">
       <IconButton
         aria-label="Toggle snek jaen"
-        w={[50, 60, 70]}
-        h={[50, 60, 70]}
-        icon={<SnekIcon h={[30, 40, 50]} />}
+        boxSize="20"
+        icon={<SnekIcon boxSize="14" />}
         onClick={props.onClick}
         ref={props.ref}
       />

diff --git a/packages/jaen-shared-ui/src/components/organisms/main/LoginMain/index.tsx b/packages/jaen-shared-ui/src/components/organisms/main/LoginMain/index.tsx
@@ -19,7 +19,12 @@ import {
   PopoverBody,
   PopoverHeader,
   PopoverCloseButton,
-  useToast
+  useToast,
+  useMediaQuery,
+  Alert,
+  AlertIcon,
+  AlertTitle,
+  AlertDescription
 } from '@chakra-ui/react'
 import * as React from 'react'
 
@@ -72,6 +77,7 @@ const LoginMain: React.FC<LoginMainProps> = props => {
   const [password, setPassword] = React.useState('')
 
   const toast = useToast()
+  const [isLargerThan992] = useMediaQuery('(min-width: 992px)')
 
   React.useEffect(() => {
     if (toastMessage) {
@@ -141,6 +147,16 @@ const LoginMain: React.FC<LoginMainProps> = props => {
 
   return (
     <Box position={'relative'}>
+      {!isLargerThan992 && (
+        <Alert status="error">
+          <AlertIcon />
+          <AlertTitle mr={2}>Unsupported device!</AlertTitle>
+          <AlertDescription>
+            Your Jaen experience may be degraded, please use a desktop or laptop
+            computer {<code>(above 992px)</code>}.
+          </AlertDescription>
+        </Alert>
+      )}
       <Container
         as={SimpleGrid}
         maxW={'7xl'}
@@ -170,6 +186,7 @@ const LoginMain: React.FC<LoginMainProps> = props => {
           {/* <Heading as="h6" size="xs">
             powered by Snek.
           </Heading> */}
+
           <Stack direction={'row'} spacing={4} align={'center'}>
             <AvatarGroup>
               {avatars.map(avatar => (

diff --git a/packages/jaen/src/@chakra-ui/jaenTheme.ts b/packages/jaen/src/@chakra-ui/jaenTheme.ts
@@ -6,7 +6,7 @@ const jaenTheme = extendTheme({
     Drawer: {
       sizes: {
         ...baseTheme.components.Drawer.sizes,
-        '6xl': {dialog: {minW: '4xl', maxW: '8xl'}}
+        '6xl': {dialog: {maxW: '8xl'}}
       }
     }
   }