fix: mobile layout

lokesh-coder · lokesh-coder · commit 8964f4992b54 · 2021-03-12T23:00:33.000+05:30
diff --git a/src/components/NavLinks.js b/src/components/NavLinks.js
@@ -53,6 +53,7 @@ const NavLinks = ({ saveBlob }) => {
             <Button
               href="/page-2/"
               as={GatbsyLink}
+              to="/page-2"
               variant="heavy"
               leftIcon={<SavedIcon fontSize="18px" />}
               aria-label="Saved blobs"
diff --git a/src/components/Settings/PatternSetter.js b/src/components/Settings/PatternSetter.js
@@ -68,6 +68,7 @@ const PatternSetter = ({ type, pattern, switchToPattern }) => {
       <Box p="3">
         {Object.keys(Patterns).map((name) => (
           <PatternBox
+            key={name}
             meta={Patterns[name]}
             clickHandler={switchToPattern}
             isSelected={pattern === name}
diff --git a/src/components/footer.js b/src/components/footer.js
@@ -18,7 +18,11 @@ import ThemeSwitch from './theme-switch';
 
 const Footer = ({ toggleSound, playSound }) => (
   <Center my="6">
-    <HStack spacing="10px" fontSize="sm">
+    <HStack
+      spacing="10px"
+      fontSize="sm"
+      flexDirection={{ base: 'column-reverse', lg: 'row' }}
+    >
       <Button
         variant="silent"
         leftIcon={<CopyrightIcon fontSize="lg" />}
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -15,14 +15,27 @@ const IndexPage = () => (
       description="Customizable blobs as SVG and Flutter Widget. Create random or fixed blobs, loop, animate, clip them with ease"
     />
     <Flex wrap="wrap" flex="1">
+      <Flex
+        align="center"
+        justify="center"
+        direction="column"
+        my="4"
+        w="full"
+        display={{ base: 'flex', lg: 'none' }}
+      >
+        <Logo />
+        <Heading fontSize="3xl" variant="main">
+          Generate blobs
+        </Heading>
+      </Flex>
       <Box
-        w={{ sm: '100%', lg: 8 / 12 }}
+        w={{ base: '100%', lg: 8 / 12 }}
         justifyContent="center"
         alignItems="center"
         display="flex"
         flexDirection="column"
       >
-        <Box w={{ sm: '100%', lg: 500 }} h={{ lg: 500 }}>
+        <Box w={{ base: '100%', lg: 500 }} h={{ lg: 500 }}>
           <BlobContainer />
         </Box>
         <Actions />
@@ -35,7 +48,13 @@ const IndexPage = () => (
         w={{ sm: '100%', lg: 4 / 12 }}
       >
         <Box w="full">
-          <Flex align="center" justify="center" direction="column" mb="8">
+          <Flex
+            align="center"
+            justify="center"
+            direction="column"
+            mb="8"
+            display={{ base: 'none', lg: 'flex' }}
+          >
             <Logo />
             <Heading fontSize="3xl" variant="main">
               Generate blobs
