New design, new icons and license added

pheralb · Feb 18, 2022 · 6d2bb21 · 6d2bb21 · vercel · Feb 18, 2022
1 parent 2aa52b1
commit 6d2bb21
Show file tree

Hide file tree

Showing 24 changed files with 1,803 additions and 2,640 deletions.
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Pablo Hernández
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -1,4 +1,10 @@
-# 🎉 iconr - Beautiful SVG vector icons
+<p align="center" style="margin-top:5px">
+  <a href="https://strapi.io/#gh-light-mode-only">
+    <img src="https://iconr.vercel.app/images/logo.png" width="85px" alt="iconr logo" />
+  </a>
+</p>
+<h2 align="center">Iconr - Beautiful SVG vector icons</h2>
+<br />
 
 ## 🚀 Getting started:
 
@@ -11,10 +17,11 @@ and run:
 
 ```bash
 npm install
+npm run dev
 ```
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-## 📦 Deployed in Vercel:
+## 📦 Deployed on Vercel:
 
-[🪄 Go to iconr](https://iconr.vercel.app/)
+[https://iconr.vercel.app/](https://iconr.vercel.app/)
diff --git a/components/card/index.js b/components/card/index.js
@@ -5,24 +5,26 @@ import Hover from "animations/hover";
 
 const Index = ({ title, url, href }) => {
   return (
-    <Hover>
-      <Link href={url} passHref>
-        <Box
-          shadow="sm"
-          _hover={{ shadow: "md", border: "1px", borderColor: "#4bbfb7" }}
-          borderWidth="1px"
-          p={4}
-          cursor="pointer"
-        >
-          <Center>
-            <Image src={href} alt={title} boxSize="60px" />
-          </Center>
-          <Text mt="2" fontWeight="light" textAlign={"center"}>
-            {title}
-          </Text>
-        </Box>
-      </Link>
-    </Hover>
+    <Link href={url} passHref>
+      <Box
+        _hover={{
+          shadow: "md",
+          transform: "translateY(-4px)",
+          transition: "all .3s",
+        }}
+        p={4}
+        cursor="pointer"
+        borderRadius="10px"
+        mb="3"
+      >
+        <Center>
+          <Image src={href} alt={title} boxSize="60px" />
+        </Center>
+        <Text mt="2" fontWeight="light" textAlign={"center"}>
+          {title}
+        </Text>
+      </Box>
+    </Link>
   );
 };
 

diff --git a/components/error/index.js b/components/error/index.js
@@ -1,20 +1,6 @@
 import React from "react";
-import {
-  Box,
-  Flex,
-  SimpleGrid,
-  Button,
-  Container,
-  Center,
-  Text,
-  Icon,
-} from "@chakra-ui/react";
-import {
-  IoAlertOutline,
-  IoArrowBackOutline,
-  IoHome,
-  IoShapesOutline,
-} from "react-icons/io5";
+import { Box, Flex, Button, Container, Text, Icon } from "@chakra-ui/react";
+import { IoHome, IoShapesOutline } from "react-icons/io5";
 import Link from "next/link";
 import Show from "animations/show";
 

diff --git a/components/header/index.js b/components/header/index.js
@@ -15,26 +15,42 @@ import {
   useColorModeValue,
 } from "@chakra-ui/react";
 import Dark from "components/header/dark";
-import { IoApps, IoLogoGithub, IoLogoTwitter } from "react-icons/io5";
+import {
+  IoApps,
+  IoBookOutline,
+  IoCloseSharp,
+  IoLogoGithub,
+  IoLogoTwitter,
+} from "react-icons/io5";
 import Link from "next/link";
 import Hover from "animations/hover";
+import Show from "animations/show";
+import { BiLinkExternal } from "react-icons/bi";
 
 const Header = () => {
   const mobileNav = useDisclosure();
   const bg = useColorModeValue("#fffffe", "#16161a");
+  const border = useColorModeValue("0", "1px");
+  const borderRadius = useColorModeValue("10px", "0");
+
   return (
     <>
-      <chakra.header
+      <Box
         w="full"
-        px={{ base: 2, md: 6 }}
         bg={bg}
-        py={6}
-        pb="0"
+        mt="5"
+        mb="5"
+        px={{ base: 3, md: 5 }}
+        py="3"
+        pb="3"
+        borderRadius={borderRadius}
+        borderBottomWidth={border}
+        shadow="sm"
         pos="sticky"
-        top="0"
+        top="2"
         zIndex="1000"
       >
-        <Container maxW="container.xxl" pb="4">
+        <Show>
           <Flex alignItems="center" justifyContent="space-between" mx="auto">
             <Hover>
               <Link href="/" passHref>
@@ -48,7 +64,7 @@ const Header = () => {
                     <VisuallyHidden>iconr</VisuallyHidden>
                   </chakra.a>
                   <chakra.h1
-                    fontSize="3xl"
+                    fontSize="2xl"
                     fontWeight="bold"
                     fontFamily="Eina-Bold"
                     ml="3"
@@ -68,7 +84,13 @@ const Header = () => {
                   href="https://github.com/pheralb/iconr/tree/main/public/library"
                   passHref
                 >
-                  <Button variant="ghost">Library</Button>
+                  <Button
+                    variant="ghost"
+                    rightIcon={<BiLinkExternal />}
+                    fontWeight="light"
+                  >
+                    Library
+                  </Button>
                 </Link>
                 <Link href="https://twitter.com/iconrhq" passHref>
                   <IconButton
@@ -101,45 +123,61 @@ const Header = () => {
                 />
                 <VStack
                   pos="absolute"
-                  borderBottomWidth="1px"
+                  borderWidth="2px"
                   bg={bg}
                   top={0}
                   left={0}
                   right={0}
                   display={mobileNav.isOpen ? "flex" : "none"}
                   flexDirection="column"
+                  pt="4"
                   pb={4}
-                  m={2}
                   spacing={3}
                   rounded="sm"
                   shadow="sm"
                 >
-                  <CloseButton
-                    aria-label="Close menu"
+                  <Button
+                    bg="transparent"
+                    border="0"
+                    variant="outline"
+                    leftIcon={<IoCloseSharp size="25" />}
+                    fontWeight="light"
                     onClick={mobileNav.onClose}
-                  />
+                  >
+                    Close
+                  </Button>
                   <Link
                     href="https://github.com/pheralb/iconr/tree/main/public/library"
                     passHref
                   >
-                    <Button variant="ghost">Library</Button>
+                    <Button
+                      bg="transparent"
+                      border="0"
+                      variant="outline"
+                      leftIcon={<IoBookOutline size="25" />}
+                      fontWeight="light"
+                    >
+                      Library
+                    </Button>
                   </Link>
                   <Link href="https://github.com/pheralb/iconr" passHref>
-                    <IconButton
-                      aria-label="Github Repository"
+                    <Button
                       bg="transparent"
                       border="0"
                       variant="outline"
-                      icon={<IoLogoGithub size="25" />}
-                    />
+                      leftIcon={<IoLogoGithub size="25" />}
+                      fontWeight="light"
+                    >
+                      Github
+                    </Button>
                   </Link>
                   <Dark />
                 </VStack>
               </Box>
             </HStack>
           </Flex>
-        </Container>
-      </chakra.header>
+        </Show>
+      </Box>
     </>
   );
 };

diff --git a/components/items/categories.js b/components/items/categories.js
diff --git a/components/search/index.js b/components/search/index.js
@@ -18,7 +18,14 @@ import { Algolia } from "components/svg";
 const AutocompleteItem = ({ id, title, href, url }) => {
   return (
     <>
-      <Box w="100%" id={id} borderWidth="1px" roundedTop={3} mt="3">
+      <Box
+        w="100%"
+        id={id}
+        borderWidth="1px"
+        borderRadius="10px"
+        roundedTop={3}
+        mt="3"
+      >
         <Box py={12} px={6}>
           <Center>
             <Image src={href} alt={title} boxSize="60px" mb="3" />

diff --git a/components/search/withModal.js b/components/search/withModal.js