refactor: update styles

Author: lokesh-coder

gatsby-browser.js

@@ -1,9 +1,7 @@
 import "prismjs/themes/prism-solarizedlight.css"
 import "@fontsource/roboto-mono/400.css"
-import "@fontsource/inter/400.css"
 import "@fontsource/inter/800.css"
-import "@fontsource/nunito/400.css"
-import "@fontsource/oxygen/400.css"
 import "@fontsource/rubik/400.css"
+import "@fontsource/rubik/500.css"
 import { wrapPageElement as wrap } from "./src/root-wapper"
 export const wrapPageElement = wrap

src/components/Common/Ding.js

@@ -3,18 +3,20 @@ import { Box, Center, Flex, Text } from "@chakra-ui/layout"
 import React from "react"
 import Footer from "../Footer"
 
-const Ding = ({ isSelected, activeComp, label, Icon }) => {
+const Ding = ({ isSelected, activeComp, label, Icon, ...props }) => {
   return (
     <Button
       variant="unstyled"
       p="2"
       h="auto"
       pos="relative"
-      opacity={isSelected ? 1 : 0.3}
+      opacity={isSelected ? 1 : 0.4}
       _hover={{ opacity: 1 }}
+      _focus={{ outline: "none" }}
+      {...props}
     >
       <Flex direction="column" align="center">
-        <Icon fontSize="2xl" color="gray.600" />
+        <Icon fontSize="2xl" color="gray.600" _dark={{ color: "gray.300" }} />
         <Text fontSize="sm" fontWeight="normal" variant="subtle" mt="2">
           {label}
         </Text>

src/components/Common/DownloadSVG.js

@@ -13,9 +13,9 @@ const DownloadSVG = ({ content, filename }) => {
   }
   return (
     <Button
-      variant="subtle"
+      variant="heavy"
       onClick={() => downloadFile()}
-      leftIcon={<DownloadIcon />}
+      leftIcon={<DownloadIcon fontSize="lg" />}
     >
       Download
     </Button>

src/components/Common/Highlight.js

@@ -24,6 +24,7 @@ export default function Highlight({ code, lang }) {
         marginBottom: 0,
         marginTop: 0,
         backgroundColor: "transparent",
+        padding: 0,
       }}
       wrapLines
     >

src/components/Common/Input.js

@@ -6,9 +6,12 @@ const Input = ({ value, onEnter }) => {
   return (
     <Box key={value}>
       <ChakInput
-        variant="filled"
+        variant="outline"
+        bg="white"
+        _dark={{ bg: "gray.600" }}
         placeholder="#000000"
         defaultValue={value}
+        _focus={{ borderColor: "primary", boxShadow: "0 0 0 1px #d7819b" }}
         onKeyDown={e => {
           if (e.code != "Enter") return
           if (!validateHex(e.target.value)) return

src/components/Common/Modal.js

@@ -18,22 +18,19 @@ import {
 } from "@chakra-ui/react"
 import React from "react"
 
-const Modal = ({ title, src, children, actions }) => {
+const Modal = ({ title, src, children, actions, size = "2xl" }) => {
   const { isOpen, onOpen, onClose } = useDisclosure()
   return (
     <>
-      <Tooltip label={title} aria-label={title} hasArrow rounded="md">
-        <Button onClick={onOpen} variant="ghost">
-          {src}
-        </Button>
-      </Tooltip>
+      <Box onClick={onOpen}>{src}</Box>
       <ChakModal
         isOpen={isOpen}
         onClose={onClose}
         isCentered
         motionPreset="scale"
-        size="2xl"
+        size={size}
         autoFocus={false}
+        returnFocusOnClose={false}
       >
         <ModalOverlay background="rgba(78,86,107,0.71)" />
         <ModalContent>
@@ -44,14 +41,19 @@ const Modal = ({ title, src, children, actions }) => {
               </Heading>
               <Flex>
                 <Box>{actions}</Box>
-                <Button onClick={onClose} variant="subtle">
+                <Button
+                  onClick={onClose}
+                  variant="subtle"
+                  pos="relative"
+                  right="-20px"
+                >
                   <CloseIcon />
                 </Button>
               </Flex>
             </Flex>
           </ModalHeader>
           <Divider />
-          <ModalBody pt="0" px="10" pb="10">
+          <ModalBody py="5" px="10">
             {typeof children === "function" ? children() : children}
           </ModalBody>
         </ModalContent>

src/components/Common/Pallette.js

@@ -18,7 +18,7 @@ const Pallette = ({ onClick, colors }) => {
             <Box
               as="button"
               p="15px"
-              rounded="2xl"
+              rounded="md"
               _focus={{ outline: 0 }}
               key={i}
               onClick={() => onClick(color)}

src/components/Common/Popover.js

@@ -1,36 +1,59 @@
 import {
   Box,
+  Button,
+  Heading,
   Popover as ChakPopover,
   PopoverArrow,
   PopoverBody,
   PopoverCloseButton,
   PopoverContent,
+  PopoverHeader,
   PopoverTrigger,
   Tooltip,
 } from "@chakra-ui/react"
 import React from "react"
 
-const Popover = ({ props, children, label }) => {
+const Popover = ({ props, children, label, trigger }) => {
   return (
-    <ChakPopover autoFocus={false} isLazy>
+    <ChakPopover autoFocus={false} isLazy placement="top">
       <PopoverTrigger>
         <Box>
-          <Tooltip label={label} aria-label={label} hasArrow rounded="md">
-            <Box
-              as="button"
-              p="15px"
-              _focus={{ outline: 0 }}
-              _hover={{ boxShadow: "xl" }}
-              rounded="2xl"
-              {...props}
-            ></Box>
-          </Tooltip>
+          {!!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}
+                ></Box>
+              </Tooltip>
+            </Box>
+          )}
         </Box>
       </PopoverTrigger>
-      <PopoverContent>
+      <PopoverContent
+        bg="gray.50"
+        shadow="2xl"
+        _dark={{ bg: "gray.700" }}
+        _focus={{ boxShadow: "none", outline: "none" }}
+      >
         <PopoverArrow />
-        <PopoverCloseButton />
-        <PopoverBody>{children}</PopoverBody>
+        <PopoverCloseButton mt="6px" />
+        <PopoverHeader py="3">
+          <Heading fontSize="md" letterSpacing="-0.9px" textAlign="center">
+            {label}
+          </Heading>
+        </PopoverHeader>
+        <PopoverBody p="0">{children}</PopoverBody>
       </PopoverContent>
     </ChakPopover>
   )

src/components/Common/Slider.js

@@ -29,11 +29,11 @@ const Slider = ({ name, value, min, max, onChange, info }) => {
           onChange={onChange}
           focusThumbOnChange={false}
         >
-          <SliderTrack bg="gray.200" _dark={{ bg: "gray.900" }}>
+          <SliderTrack bg="gray.200" _dark={{ bg: "gray.900", opacity: 0.5 }}>
             <Box position="relative" right={10} />
             <SliderFilledTrack bg="gray.400" _dark={{ bg: "gray.400" }} />
           </SliderTrack>
-          <Tooltip label={value} aria-label={value} hasArrow rounded="md">
+          <Tooltip label={value} aria-label={value} hasArrow variant="default">
             <SliderThumb
               boxSize={5}
               borderWidth="3px"

src/components/Common/UrlInput.js

@@ -1,21 +1,38 @@
-import { Box, Input as ChakInput } from "@chakra-ui/react"
-import React from "react"
+import { Box, Center, Input as ChakInput, Text } from "@chakra-ui/react"
+import React, { useState } from "react"
 import { validateHex } from "../../utilities"
 
 const UrlInput = ({ value, onEnter }) => {
+  const [error, setError] = useState(null)
+  const urlRegex = /([\w+]+\:\/\/)?([\w\d-]+\.)*[\w-]+[\.\:]\w+([\/\?\=\&\#\.]?[\w-]+)*\/?/gm
+
   return (
     <Box key={value}>
       <ChakInput
-        variant="filled"
+        variant="outline"
         placeholder="https://someurl.png"
+        bg="white"
+        _dark={{ bg: "gray.600" }}
         defaultValue={value}
+        _focus={{ borderColor: "primary", boxShadow: "0 0 0 1px #d7819b" }}
         onKeyDown={e => {
           if (e.code != "Enter") return
-          console.log("")
-          //   if (!validateHex(e.target.value)) return
-          onEnter(e.target.value)
+          const url = e.target.value
+          if (!urlRegex.test(url)) {
+            setError("Invalid URL")
+            return
+          }
+          setError(null)
+          onEnter(url)
         }}
       />
+      {error && (
+        <Center>
+          <Text mt="2" fontSize="sm" color="red.600" fontWeight="600">
+            {error}
+          </Text>
+        </Center>
+      )}
     </Box>
   )
 }