From 7409e7b9be78e1bf6294a05448ecd0df0a774d48 Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Sat, 5 Mar 2022 17:03:33 +0000
Subject: [PATCH] Design improvements and bug fixes

---
 animations/tap.js          |  2 +-
 components/header/index.js |  7 ++++++-
 components/search/modal.js | 42 ++++++++++++++++++++++++++++++++++++++
 components/svg/index.js    | 22 ++++----------------
 data/icons.js              |  7 +++++++
 pages/_app.js              |  3 +--
 pages/svg/[id].js          | 13 ++++++++++--
 public/library/framer.svg  |  7 +++++++
 styles/globals.css         |  4 ++--
 9 files changed, 81 insertions(+), 26 deletions(-)
 create mode 100644 components/search/modal.js
 create mode 100644 public/library/framer.svg

diff --git a/animations/tap.js b/animations/tap.js
index f7e0410..153215b 100644
--- a/animations/tap.js
+++ b/animations/tap.js
@@ -3,7 +3,7 @@ import { motion } from "framer-motion";
 
 const Tap = ({ children }) => {
   return (
-    <motion.div whileTap={{ scale: 0.99 }}>
+    <motion.div whileTap={{ scale: 0.98 }}>
       {children}
     </motion.div>
   );
diff --git a/components/header/index.js b/components/header/index.js
index 038ccad..018e089 100644
--- a/components/header/index.js
+++ b/components/header/index.js
@@ -24,6 +24,8 @@ import Hover from "animations/tap";
 import Show from "animations/show";
 import { svgl } from "components/svg";
 import HEADER_LINKS from "./links";
+import Search from "components/search";
+import ModalSearch from "components/search/modal";
 
 const Header = () => {
   const mobileNav = useDisclosure();
@@ -78,7 +80,8 @@ const Header = () => {
             ))}
           </HStack>
           <HStack display="flex" alignItems="center">
-            <HStack spacing={3} display={{ base: "none", md: "inline-flex" }}>
+            <HStack spacing={4} display={{ base: "none", md: "inline-flex" }}>
+              <ModalSearch />
               <Link href="https://github.com/pheralb/svgl" passHref>
                 <IconButton
                   aria-label="Github Repository"
@@ -129,6 +132,7 @@ const Header = () => {
                   passHref
                 >
                   <Button
+                    as="a"
                     bg="transparent"
                     border="0"
                     variant="outline"
@@ -140,6 +144,7 @@ const Header = () => {
                 </Link>
                 <Link href="https://github.com/pheralb/svgl" passHref>
                   <Button
+                    as="a"
                     bg="transparent"
                     border="0"
                     variant="outline"
diff --git a/components/search/modal.js b/components/search/modal.js
new file mode 100644
index 0000000..195f383
--- /dev/null
+++ b/components/search/modal.js
@@ -0,0 +1,42 @@
+import React from "react";
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalFooter,
+  ModalBody,
+  ModalCloseButton,
+  useDisclosure,
+  IconButton,
+  Button,
+} from "@chakra-ui/react";
+import Search from "components/search";
+import { IoSearch } from "react-icons/io5";
+
+const ModalSearch = (props) => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  return (
+    <>
+      <IconButton
+        aria-label="Search Icon"
+        bg="transparent"
+        icon={<IoSearch size="25"/>}
+        onClick={onOpen}
+        {...props}
+      />
+      <Modal isOpen={isOpen} onClose={onClose} motionPreset='slideInBottom'>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader fontWeight="light">Search</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody pb="5">
+            <Search />
+          </ModalBody>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+};
+
+export default ModalSearch;
diff --git a/components/svg/index.js b/components/svg/index.js
index fa6a013..6152d84 100644
--- a/components/svg/index.js
+++ b/components/svg/index.js
@@ -1258,29 +1258,15 @@ export const svgl = (props) => {
   );
 };
 
-export const rocket = (props) => {
+export const framer = (props) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 512 512"
+      preserveAspectRatio="xMidYMid"
+      viewBox="0 0 256 384"
       {...props}
     >
-      <path
-        fill="none"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="32"
-        d="M461.81 53.81a4.4 4.4 0 00-3.3-3.39c-54.38-13.3-180 34.09-248.13 102.17a294.9 294.9 0 00-33.09 39.08c-21-1.9-42-.3-59.88 7.5-50.49 22.2-65.18 80.18-69.28 105.07a9 9 0 009.8 10.4l81.07-8.9a180.29 180.29 0 001.1 18.3 18.15 18.15 0 005.3 11.09l31.39 31.39a18.15 18.15 0 0011.1 5.3 179.91 179.91 0 0018.19 1.1l-8.89 81a9 9 0 0010.39 9.79c24.9-4 83-18.69 105.07-69.17 7.8-17.9 9.4-38.79 7.6-59.69a293.91 293.91 0 0039.19-33.09c68.38-68 115.47-190.86 102.37-247.95zM298.66 213.67a42.7 42.7 0 1160.38 0 42.65 42.65 0 01-60.38 0z"
-      ></path>
-      <path
-        fill="none"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="32"
-        d="M109.64 352a45.06 45.06 0 00-26.35 12.84C65.67 382.52 64 448 64 448s65.52-1.67 83.15-19.31A44.73 44.73 0 00160 402.32"
-      ></path>
+      <path d="M0 0h256v128H128L0 0zm0 128h128l128 128H128v128L0 256V128z"></path>
     </svg>
   );
 };
diff --git a/data/icons.js b/data/icons.js
index 902b26e..918c809 100644
--- a/data/icons.js
+++ b/data/icons.js
@@ -272,6 +272,13 @@ const Icons = [
     category: "Search",
     url: "https://www.google.com/",
   },
+  {
+    id: 40,
+    href: "/library/framer.svg",
+    title: "Framer",
+    category: "Design",
+    url: "https://framer.com/",
+  }
 ];
 
 export default Icons;
diff --git a/pages/_app.js b/pages/_app.js
index a4e5044..b115d60 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -30,10 +30,9 @@ function MyApp({ Component, pageProps, router }) {
         <meta property="og:image" content="/images/banner.png" />
         <meta property="twitter:title" content="SVGL - Beautiful SVG logos" />
         <meta property="twitter:url" content="https://svgl.vercel.app/" />
-        <meta property="twitter:card" content="summary_large_image" />
+        <meta property="twitter:card" content="summary" />
         <meta property="twitter:creator" content="@pheralb" />
         <meta property="twitter:description" content="Beautiful SVG logos. Free and open source." />
-        <meta property="twitter:image:src" content="/images/banner.png" />
         <meta name="keywords" content="svg,vector,logo,logos,download" />
         <meta content="#16161a" name="theme-color" />
         <link rel="icon" href="/icons/icon.ico" />
diff --git a/pages/svg/[id].js b/pages/svg/[id].js
index 6518b75..67f6193 100644
--- a/pages/svg/[id].js
+++ b/pages/svg/[id].js
@@ -40,7 +40,13 @@ export default function Icon() {
   if (!data) return <Loader />;
 
   const downloadSvg = (name, url) => {
-    confetti();
+    confetti({
+      particleCount: 200,
+      startVelocity: 30,
+      spread: 300,
+      gravity: 1.2,
+      origin: { y: 0 },
+    });
     download(url);
   };
 
@@ -78,8 +84,10 @@ export default function Icon() {
               >
                 {data.title}
               </chakra.h1>
-              <Flex direction={{ base: "column", md: "row" }} mt="2">
+              <Flex direction={{ base: "column", md: "row" }} w="100%" mt="2">
                 <Button
+                  w={{ base: "100%", md: "auto" }}
+                  mb={{ base: "2", md: "0" }}
                   leftIcon={<IoCloudDownloadOutline />}
                   variant="primary"
                   fontWeight="light"
@@ -90,6 +98,7 @@ export default function Icon() {
                 </Button>
                 <Link href={data.url} passHref>
                   <Button
+                    w={{ base: "100%", md: "auto" }}
                     fontWeight="light"
                     borderWidth="1px"
                     rightIcon={<BiLinkExternal />}
diff --git a/public/library/framer.svg b/public/library/framer.svg
new file mode 100644
index 0000000..b7699f2
--- /dev/null
+++ b/public/library/framer.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="256px" height="384px" viewBox="0 0 256 384" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+    <title>Framer</title>
+    <g>
+        <path d="M0,0 L256,0 L256,128 L128,128 L0,0 Z M0,128 L128,128 L256,256 L128,256 L128,384 L0,256 L0,128 Z" fill="#000000"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/styles/globals.css b/styles/globals.css
index 0c14932..e947e4f 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -13,12 +13,12 @@
 
 /* Track */
 ::-webkit-scrollbar-track {
-  background: #16161a; 
+  background: #696969; 
 }
  
 /* Handle */
 ::-webkit-scrollbar-thumb {
-  background: rgb(133, 133, 133); 
+  background: rgb(0, 0, 0); 
 }
 
 /* Handle on hover */