fix: mobile device responsive styles

lokesh-coder · lokesh-coder · Mar 14, 2021 · Mar 10, 2021 · Mar 11, 2021 · Mar 12, 2021
commit 9a6eeefceaa51a6b177c4fa25bc68f0256888cdf
diff --git a/package.json b/package.json
@@ -60,7 +60,7 @@
   "license": "MIT",
   "scripts": {
     "build": "gatsby build",
-    "develop": "gatsby develop",
+    "develop": "gatsby develop -H 0.0.0.0",
     "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
     "start": "npm run develop",
     "serve": "gatsby serve",

diff --git a/src/@chakra-ui/gatsby-plugin/theme.js b/src/@chakra-ui/gatsby-plugin/theme.js
@@ -16,6 +16,9 @@ const theme = extendTheme({
       body: {
         bg: colorMode === 'dark' ? 'blue.800' : 'white',
       },
+      '.chakra-modal__content-container': {
+        p: { base: '2', lg: '0' },
+      },
       '#blobSvg': {
         overflow: 'visible',
       },

diff --git a/src/components/Common/Input.js b/src/components/Common/Input.js
@@ -12,7 +12,7 @@ const Input = ({ value, onEnter }) => (
       defaultValue={value}
       _focus={{ borderColor: 'primary', boxShadow: '0 0 0 1px #d7819b' }}
       onKeyDown={(e) => {
-        if (e.code !== 'Enter') return;
+        if (e.key !== 'Enter') return;
         if (!validateHex(e.target.value)) return;
         onEnter(e.target.value);
       }}

diff --git a/src/components/Common/Modal.js b/src/components/Common/Modal.js
@@ -31,21 +31,26 @@ const Modal = ({ title, src, children, actions, size = '2xl' }) => {
         <ModalOverlay background="rgba(78,86,107,0.71)" />
         <ModalContent>
           <ModalHeader px="10">
-            <Flex justify="space-between" align="center">
-              <Heading fontSize="xl" variant="main">
-                {title}
-              </Heading>
-              <Flex>
+            <Flex align="center">
+              <Flex
+                direction={{ base: 'column', lg: 'row' }}
+                align="center"
+                justify={{ base: 'center', lg: 'space-between' }}
+                flex="1"
+              >
+                <Heading fontSize="xl" variant="main">
+                  {title}
+                </Heading>
                 <Box>{actions}</Box>
-                <Button
-                  onClick={onClose}
-                  variant="subtle"
-                  pos="relative"
-                  right="-20px"
-                >
-                  <CloseIcon />
-                </Button>
               </Flex>
+              <Button
+                onClick={onClose}
+                variant="subtle"
+                pos="relative"
+                right="-20px"
+              >
+                <CloseIcon />
+              </Button>
             </Flex>
           </ModalHeader>
           <Divider />

diff --git a/src/components/Common/Popover.js b/src/components/Common/Popover.js
@@ -10,56 +10,71 @@ import {
   PopoverTrigger,
   Tooltip,
 } from '@chakra-ui/react';
-import React from 'react';
+import React, { useState } from 'react';
 
-const Popover = ({ props, children, label, trigger }) => (
-  <ChakPopover autoFocus={false} isLazy placement="top" arrowSize="0">
-    <PopoverTrigger>
-      <Box>
-        {!!trigger && <Box>{trigger}</Box>}
-        {!trigger && (
-          <Box>
-            <Tooltip
-              label={label}
-              aria-label={label}
-              hasArrow
-              variant="default"
-            >
-              <Box
-                as="button"
-                p="15px"
-                _focus={{ outline: 0 }}
-                _hover={{ boxShadow: 'xl' }}
-                rounded="2xl"
-                {...props}
-              />
-            </Tooltip>
-          </Box>
-        )}
-      </Box>
-    </PopoverTrigger>
-    <PopoverContent
-      bg="gray.50"
-      shadow="2xl"
-      _dark={{ bg: 'gray.700' }}
-      _focus={{ boxShadow: 'none', outline: 'none' }}
+const Popover = ({ props, children, label, trigger }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const open = () => setIsOpen(!isOpen);
+  const close = () => setIsOpen(false);
+
+  return (
+    <ChakPopover
+      autoFocus={false}
+      isLazy
+      placement="top"
+      arrowSize="0"
+      isOpen={isOpen}
+      onClose={close}
     >
-      <PopoverArrow />
-      <PopoverCloseButton mt="6px" />
-      <PopoverHeader py="3">
-        <Heading
-          fontSize="md"
-          letterSpacing="-0.9px"
-          textAlign="center"
-          fontWeight="700"
-          variant="main"
-        >
-          {label}
-        </Heading>
-      </PopoverHeader>
-      <PopoverBody p="0">{children}</PopoverBody>
-    </PopoverContent>
-  </ChakPopover>
-);
+      <PopoverTrigger>
+        <Box onClick={open}>
+          {!!trigger && <Box>{trigger}</Box>}
+          {!trigger && (
+            <Box>
+              <Tooltip
+                label={label}
+                aria-label={label}
+                hasArrow
+                variant="default"
+              >
+                <Box
+                  as="button"
+                  p="15px"
+                  _focus={{ outline: 0 }}
+                  _hover={{ boxShadow: 'xl' }}
+                  rounded="2xl"
+                  {...props}
+                />
+              </Tooltip>
+            </Box>
+          )}
+        </Box>
+      </PopoverTrigger>
+      <PopoverContent
+        bg="gray.50"
+        shadow="2xl"
+        _dark={{ bg: 'gray.700' }}
+        _focus={{ boxShadow: 'none', outline: 'none' }}
+      >
+        <PopoverArrow />
+        <PopoverCloseButton mt="6px" />
+        <PopoverHeader py="3">
+          <Heading
+            fontSize="md"
+            letterSpacing="-0.9px"
+            textAlign="center"
+            fontWeight="700"
+            variant="main"
+          >
+            {label}
+          </Heading>
+        </PopoverHeader>
+        <PopoverBody p="0">
+          {typeof children === 'function' ? children(close) : children}
+        </PopoverBody>
+      </PopoverContent>
+    </ChakPopover>
+  );
+};
 
 export default Popover;
diff --git a/src/components/Common/UrlInput.js b/src/components/Common/UrlInput.js
@@ -15,7 +15,7 @@ const UrlInput = ({ value, onEnter }) => {
         defaultValue={value}
         _focus={{ borderColor: 'primary', boxShadow: '0 0 0 1px #d7819b' }}
         onKeyDown={(e) => {
-          if (e.code !== 'Enter') return;
+          if (e.key !== 'Enter') return;
           const url = e.target.value;
           if (!urlRegex.test(url)) {
             setError('Invalid URL');

diff --git a/src/components/Settings/GradientColorsPicker.js b/src/components/Settings/GradientColorsPicker.js
@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-wrap-multilines */
 import React from 'react';
 import { Box, Divider, Flex } from '@chakra-ui/react';
 import { dynamic } from '../../state';
@@ -38,23 +39,44 @@ const GradientColorsPicker = ({
       }
     />
   );
+  const Content = ({ close }) => (
+    <Box>
+      <Pallette
+        onClick={(value) => {
+          switchToGradientColors(value);
+          close();
+        }}
+        colors={defaultColors}
+      />
+      <Divider mb="4" />
+      <Box p="3" pt="0">
+        <Flex>
+          <Input
+            value={start}
+            onEnter={(value) => {
+              updateGradientStartColor(value);
+              close();
+            }}
+          />
+          <Divider mx="2" orientation="vertical" />
+          <Input
+            value={end}
+            onEnter={(value) => {
+              updateGradientEndColor(value);
+              close();
+            }}
+          />
+        </Flex>
+      </Box>
+    </Box>
+  );
   return (
     <Popover
       props={{ bgGradient: `linear(to-b, ${start}, ${end})` }}
       label="Gradient colors"
       trigger={<Picker />}
     >
-      <Box>
-        <Pallette onClick={switchToGradientColors} colors={defaultColors} />
-        <Divider mb="4" />
-        <Box p="3" pt="0">
-          <Flex>
-            <Input value={start} onEnter={updateGradientStartColor} />
-            <Divider mx="2" orientation="vertical" />
-            <Input value={end} onEnter={updateGradientEndColor} />
-          </Flex>
-        </Box>
-      </Box>
+      {(close) => <Content close={close} />}
     </Popover>
   );
 };

diff --git a/src/components/Settings/ImageSetter.js b/src/components/Settings/ImageSetter.js
@@ -1,10 +1,10 @@
 import React from 'react';
-import { Box } from '@chakra-ui/react';
+import { Box, Button } from '@chakra-ui/react';
 import { dynamic } from '../../state';
 import Popover from '../Common/Popover';
 import UrlInput from '../Common/UrlInput';
 import Ding from '../Common/Ding';
-import { ImageIcon, LandscapeIcon } from '../icons';
+import { ImageIcon, LandscapeIcon, RightArrowIcon } from '../icons';
 
 const ImageSetter = ({ type, image, switchToImage }) => {
   const Picker = () => (
@@ -15,16 +15,20 @@ const ImageSetter = ({ type, image, switchToImage }) => {
       activeComp={<LandscapeIcon color="primary" />}
     />
   );
+  const Content = ({ close }) => (
+    <Box p="3" textAlign="center">
+      <UrlInput
+        value={image}
+        onEnter={(value) => {
+          switchToImage(value);
+          close();
+        }}
+      />
+    </Box>
+  );
   return (
     <Popover props={{ bg: 'red' }} label="Set image" trigger={<Picker />}>
-      <Box p="3">
-        <UrlInput
-          value={image}
-          onEnter={(url) => {
-            switchToImage(url);
-          }}
-        />
-      </Box>
+      {(close) => <Content close={close} />}
     </Popover>
   );
 };

diff --git a/src/components/Settings/PatternSetter.js b/src/components/Settings/PatternSetter.js
@@ -1,6 +1,6 @@
 /* eslint-disable react/jsx-wrap-multilines */
-import React, { useState } from 'react';
-import { Box, Text, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+import { Box, useColorModeValue } from '@chakra-ui/react';
 import { dynamic } from '../../state';
 import Popover from '../Common/Popover';
 import * as Patterns from '../../patterns';
@@ -63,18 +63,25 @@ const PatternSetter = ({ type, pattern, switchToPattern }) => {
     );
   };
 
+  const Content = ({ close }) => (
+    <Box p="3">
+      {Object.keys(Patterns).map((name) => (
+        <PatternBox
+          key={name}
+          meta={Patterns[name]}
+          clickHandler={(value) => {
+            switchToPattern(value);
+            close();
+          }}
+          isSelected={pattern === name}
+        />
+      ))}
+    </Box>
+  );
+
   return (
     <Popover props={{ bg: 'red' }} label="Set pattern" trigger={<Picker />}>
-      <Box p="3">
-        {Object.keys(Patterns).map((name) => (
-          <PatternBox
-            key={name}
-            meta={Patterns[name]}
-            clickHandler={switchToPattern}
-            isSelected={pattern === name}
-          />
-        ))}
-      </Box>
+      {(close) => <Content close={close} />}
     </Popover>
   );
 };

diff --git a/src/components/Settings/SolidColorPicker.js b/src/components/Settings/SolidColorPicker.js
@@ -21,20 +21,30 @@ const SolidColorPicker = ({ type, color, switchToSolidColor }) => {
     <Ding
       label="Color"
       Icon={PaintIcon}
-      isSelected={type == 'solid'}
+      isSelected={type === 'solid'}
       activeComp={<Box p="4px" rounded="2xl" bg={color} w="1px" />}
     />
   );
 
-  return (
-    <Popover props={{ bg: color }} label="Choose a color" trigger={<Picker />}>
+  const Content = ({ close }) => {
+    const selectAndClose = (value) => {
+      switchToSolidColor(value);
+      close();
+    };
+    return (
       <Box>
-        <Pallette onClick={switchToSolidColor} colors={defaultColors} />
+        <Pallette onClick={selectAndClose} colors={defaultColors} />
         <Divider mb="4" />
         <Box p="3" pt="0">
-          <Input value={color} onEnter={switchToSolidColor} />
+          <Input value={color} onEnter={selectAndClose} />
         </Box>
       </Box>
+    );
+  };
+
+  return (
+    <Popover props={{ bg: color }} label="Choose a color" trigger={<Picker />}>
+      {(close) => <Content close={close} />}
     </Popover>
   );
 };

diff --git a/src/components/seo.js b/src/components/seo.js
@@ -59,7 +59,7 @@ function SEO({ description, lang, meta, title }) {
         },
         {
           property: 'og:image',
-          content: '/blobs_app_poster.png',
+          content: 'https://blobs.app/blobs_app_poster.png',
         },
         {
           name: 'twitter:card',
@@ -83,7 +83,7 @@ function SEO({ description, lang, meta, title }) {
         },
         {
           name: 'twitter:image',
-          content: '/blobs_app_poster.png',
+          content: 'https://blobs.app/blobs_app_poster.png',
         },
       ].concat(meta)}
     />