New design & bug fixes

PossiblePanda · Mar 3, 2022 · c3cebc9 · c3cebc9
1 parent 168b654
commit c3cebc9
Show file tree

Hide file tree

Showing 27 changed files with 1,282 additions and 1,113 deletions.
diff --git a/README.md b/README.md
@@ -16,4 +16,4 @@ Open [http:https://localhost:3000](http:https://localhost:3000) with your browser to see the
 
 ## 📦 Deployed on Vercel:
 
-[https://svgparty.vercel.app/](https://svgparty.vercel.app/)
+[https://svgl.vercel.app/](https://svgl.vercel.app/)
diff --git a/animations/transitions.js b/animations/transitions.js
@@ -0,0 +1,24 @@
+import React from "react";
+import { motion } from "framer-motion";
+
+const Transitions = ({ key, children }) => {
+ return (
+ <motion.div
+ key={key}
+ initial="initial"
+ animate="animate"
+ variants={{
+ initial: {
+ opacity: 0,
+ },
+ animate: {
+ opacity: 1,
+ },
+ }}
+ >
+ {children}
+ </motion.div>
+ );
+};
+
+export default Transitions;
diff --git a/components/error/index.js b/components/error/index.js
@@ -8,36 +8,29 @@ const Error = () => {
  return (
  <>
  <Show delay="0">
- <Container
- maxW={{ base: "100%", md: "75%" }}
- borderWidth="1px"
- borderRadius="30px"
- >
- <Box px={{ base: 4, lg: 20 }} py={{ base: "3", md: "24" }}>
- <Flex align="center" justify="center" direction="column" w="full">
- <Icon name="error" boxSize="80px" mb="3" as={IoShapesOutline} />
- <Text fontSize="40px" mb="2">
- Oh no!
- </Text>
- <Text fontSize="20px" mb="3">
- This page does not exist.
- </Text>
- </Flex>
- </Box>
- <Link href="/" passHref>
- <Button
- leftIcon={<IoHome />}
- colorScheme="twitter"
- variant="outline"
- fontWeight="bold"
- w="100%"
- border="0"
- mb="4"
- >
- Go home
- </Button>
- </Link>
- </Container>
+ <Box px={{ base: 4, lg: 20 }} py={{ base: "3", md: "24" }}>
+ <Flex align="center" justify="center" direction="column" w="full">
+ <Icon name="error" boxSize="80px" mb="3" as={IoShapesOutline} />
+ <Text fontSize="40px" mb="2">
+ Oh no!
+ </Text>
+ <Text fontSize="20px" mb="3">
+ This page does not exist.
+ </Text>
+ <Link href="/" passHref>
+ <Button
+ leftIcon={<IoHome />}
+ colorScheme="twitter"
+ variant="outline"
+ fontWeight="bold"
+ border="0"
+ mb="4"
+ >
+ Go home
+ </Button>
+ </Link>
+ </Flex>
+ </Box>
  </Show>
  </>
  );

diff --git a/components/header/index.js b/components/header/index.js
@@ -1,18 +1,14 @@
 import React from "react";
 import {
- chakra,
  Box,
  Flex,
- VisuallyHidden,
  HStack,
  Button,
  useDisclosure,
  VStack,
  IconButton,
- CloseButton,
- Container,
- Image,
  useColorModeValue,
+ Icon,
 } from "@chakra-ui/react";
 import Dark from "components/header/dark";
 import {
@@ -22,160 +18,142 @@ import {
  IoLogoGithub,
  IoLogoTwitter,
 } from "react-icons/io5";
+import { BiLinkExternal } from "react-icons/bi";
 import Link from "next/link";
 import Hover from "animations/hover";
 import Show from "animations/show";
-import { BiLinkExternal } from "react-icons/bi";
+import { svgl } from "components/svg";
+import HEADER_LINKS from "./links";
 
 const Header = () => {
  const mobileNav = useDisclosure();
- const bg = useColorModeValue("#fffffe", "#16161a");
- const border = useColorModeValue("0", "1px");
- const borderRadius = useColorModeValue("10px", "0");
-
+ const bg = useColorModeValue("light.100", "lightDark.900");
  return (
  <>
  <Box
  w="full"
  bg={bg}
- mt="5"
- mb="5"
- px={{ base: 3, md: 5 }}
- py="3"
- pb="3"
- borderRadius={borderRadius}
- borderBottomWidth={border}
- shadow="sm"
+ px={{ base: 3, md: 16 }}
+ pl={{ base: 3, md: 16 }}
+ py="5"
  pos="sticky"
- top="2"
+ top="0"
  zIndex="1000"
  >
- <Show>
- <Flex alignItems="center" justifyContent="space-between" mx="auto">
+ <Flex alignItems="center" justifyContent="space-between" mx="auto">
+ <HStack spacing="1" alignItems="center">
  <Hover>
  <Link href="/" passHref>
- <Flex cursor="pointer">
- <chakra.a title="SVGParty" display="flex" alignItems="center">
- <Image
- src="/images/logo.png"
- boxSize="25px"
- alt="SVGParty logo"
- />
- <VisuallyHidden>SVGParty</VisuallyHidden>
- </chakra.a>
- <chakra.h1
- fontSize="1xl"
- fontWeight="bold"
- ml="3"
- >
- SVGParty
- </chakra.h1>
- </Flex>
+ <IconButton
+ as={svgl}
+ cursor="pointer"
+ name="logo"
+ boxSize="40px"
+ mr="2"
+ borderRadius="full"
+ bg="transparent"
+ />
  </Link>
  </Hover>
- <HStack display="flex" alignItems="center">
- <HStack
- spacing={2}
- color="brand.500"
- display={{ base: "none", md: "inline-flex" }}
+ {HEADER_LINKS.map((link) => (
+ <Link key={link.id} href={link.href} passHref>
+ <Button
+ as="a"
+ variant="ghost"
+ variantColor="teal"
+ fontWeight="light"
+ borderRadius="0"
+ _hover={{
+ transform: "translateY(-1px)",
+ transition: "all .1s",
+ borderBottomWidth: "1px",
+ }}
+ >
+ {link.title}
+ {link.external && (
+ <Icon as={BiLinkExternal} ml="2" w="4" h="4" />
+ )}
+ </Button>
+ </Link>
+ ))}
+ </HStack>
+ <HStack display="flex" alignItems="center">
+ <HStack spacing={3} display={{ base: "none", md: "inline-flex" }}>
+ <Link href="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/pheralb/svgl" passHref>
+ <IconButton
+ aria-label="Github Repository"
+ bg="transparent"
+ border="0"
+ variant="outline"
+ icon={<IoLogoGithub size="30" />}
+ />
+ </Link>
+ <Dark />
+ </HStack>
+ <Box display={{ base: "inline-flex", md: "none" }}>
+ <IconButton
+ display={{ base: "flex", md: "none" }}
+ aria-label="Open menu"
+ fontSize="20px"
+ variant="ghost"
+ icon={<IoApps />}
+ onClick={mobileNav.onOpen}
+ />
+ <VStack
+ pos="absolute"
+ borderWidth="2px"
+ bg={bg}
+ top={0}
+ left={0}
+ right={0}
+ display={mobileNav.isOpen ? "flex" : "none"}
+ flexDirection="column"
+ pt="4"
+ pb={4}
+ spacing={3}
+ rounded="sm"
+ shadow="sm"
  >
+ <Button
+ bg="transparent"
+ border="0"
+ variant="outline"
+ leftIcon={<IoCloseSharp size="25" />}
+ fontWeight="light"
+ onClick={mobileNav.onClose}
+ >
+ Close
+ </Button>
  <Link
- href="https://github.com/pheralb/SVGParty/tree/main/public/library"
+ href="https://github.com/pheralb/svgl/tree/main/public/library"
  passHref
  >
  <Button
- variant="ghost"
- rightIcon={<BiLinkExternal />}
+ bg="transparent"
+ border="0"
+ variant="outline"
+ leftIcon={<IoBookOutline size="25" />}
  fontWeight="light"
  >
  Library
  </Button>
  </Link>
- <Link href="https://twitter.com/SVGPartyhq" passHref>
- <IconButton
- aria-label="Twitter profile"
- bg="transparent"
- border="0"
- variant="outline"
- icon={<IoLogoTwitter size="25" />}
- />
- </Link>
- <Link href="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/pheralb/SVGParty" passHref>
- <IconButton
- aria-label="Github Repository"
- bg="transparent"
- border="0"
- variant="outline"
- icon={<IoLogoGithub size="25" />}
- />
- </Link>
- <Dark />
- </HStack>
- <Box display={{ base: "inline-flex", md: "none" }}>
- <IconButton
- display={{ base: "flex", md: "none" }}
- aria-label="Open menu"
- fontSize="20px"
- variant="ghost"
- icon={<IoApps />}
- onClick={mobileNav.onOpen}
- />
- <VStack
- pos="absolute"
- borderWidth="2px"
- bg={bg}
- top={0}
- left={0}
- right={0}
- display={mobileNav.isOpen ? "flex" : "none"}
- flexDirection="column"
- pt="4"
- pb={4}
- spacing={3}
- rounded="sm"
- shadow="sm"
- >
+ <Link href="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/pheralb/svgl" passHref>
  <Button
  bg="transparent"
  border="0"
  variant="outline"
- leftIcon={<IoCloseSharp size="25" />}
+ leftIcon={<IoLogoGithub size="25" />}
  fontWeight="light"
- onClick={mobileNav.onClose}
  >
- Close
+ Github
  </Button>
- <Link
- href="https://github.com/pheralb/SVGParty/tree/main/public/library"
- passHref
- >
- <Button
- bg="transparent"
- border="0"
- variant="outline"
- leftIcon={<IoBookOutline size="25" />}
- fontWeight="light"
- >
- Library
- </Button>
- </Link>
- <Link href="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/pheralb/SVGParty" passHref>
- <Button
- bg="transparent"
- border="0"
- variant="outline"
- leftIcon={<IoLogoGithub size="25" />}
- fontWeight="light"
- >
- Github
- </Button>
- </Link>
- <Dark />
- </VStack>
- </Box>
- </HStack>
- </Flex>
- </Show>
+ </Link>
+ <Dark />
+ </VStack>
+ </Box>
+ </HStack>
+ </Flex>
  </Box>
  </>
  );

diff --git a/components/header/links.js b/components/header/links.js
@@ -0,0 +1,16 @@
+const HEADER_LINKS = [
+ {
+ id: 1,
+ href: "/",
+ external: false,
+ title: "Browse",
+ },
+ {
+ id: 2,
+ href: "https://github.com/pheralb/svgl/tree/main/public/library",
+ external: true,
+ title: "Library",
+ }
+];
+
+export default HEADER_LINKS;