Merge pull request #497 from semaphore-protocol/fix/website-ui

Minor enhancements to the website
semaphore-protocol · Dec 21, 2023 · efebc5d · efebc5d
2 parents fbb1b06 + 08b1f47
commit efebc5d
Show file tree

Hide file tree

Showing 10 changed files with 110 additions and 101 deletions.
diff --git a/apps/website/src/app/learn/page.tsx b/apps/website/src/app/learn/page.tsx
@@ -333,7 +333,7 @@ await verifyProof(verificationKey, fullProof)`,
                     pos="absolute"
                 />
 
-                <VStack display={{ base: "none", xl: "block" }} p="100px 40px" w="full" spacing="20">
+                <VStack display={{ base: "none", xl: "flex" }} p="100px 40px" w="full" spacing="20">
                     <Carousel
                         title="Videos"
                         sizes={{
@@ -352,42 +352,46 @@ await verifyProof(verificationKey, fullProof)`,
                         type="articles"
                     />
                 </VStack>
-                <Text
-                    display={{ base: "flex", xl: "none" }}
-                    flex="1"
-                    alignSelf="start"
-                    fontSize={{ base: "40px", md: "44px" }}
-                    fontWeight="500"
-                    mt="100px"
-                >
-                    Videos
-                </Text>
-                <Flex display={{ base: "flex", xl: "none" }} w="100%" overflowX="auto">
-                    {sortByDate(videos).map((video) => (
-                        <VStack key={video.url}>
-                            <Box px="3">
+
+                <VStack spacing="16" w="full">
+                    <Text
+                        display={{ base: "flex", xl: "none" }}
+                        flex="1"
+                        alignSelf="start"
+                        fontSize={{ base: "40px", md: "44px" }}
+                        fontWeight="500"
+                        mt="100px"
+                    >
+                        Videos
+                    </Text>
+                    <Flex display={{ base: "flex", xl: "none" }} w="100%" overflowX="auto" align="stretch">
+                        {sortByDate(videos).map((video) => (
+                            <Box px="3" key={video.url}>
                                 <VideoCard title={video.title} thumbnail={video.thumbnail} url={video.url} />
                             </Box>
-                        </VStack>
-                    ))}
-                </Flex>
-                <Text
-                    display={{ base: "flex", xl: "none" }}
-                    flex="1"
-                    alignSelf="start"
-                    fontSize="44px"
-                    fontWeight="500"
-                    mt="96px"
-                >
-                    Articles
-                </Text>
-                <Flex display={{ base: "flex", xl: "none" }} w="100%" overflowX="auto" mb="66px">
-                    {sortByDate(articles).map((article) => (
-                        <VStack key={article.url}>
-                            <ArticleCard title={article.title} minRead={article.minRead} url={article.url} />
-                        </VStack>
-                    ))}
-                </Flex>
+                        ))}
+                    </Flex>
+                </VStack>
+
+                <VStack spacing="16" w="full">
+                    <Text
+                        display={{ base: "flex", xl: "none" }}
+                        flex="1"
+                        alignSelf="start"
+                        fontSize="44px"
+                        fontWeight="500"
+                        mt="96px"
+                    >
+                        Articles
+                    </Text>
+                    <Flex display={{ base: "flex", xl: "none" }} w="100%" overflowX="auto" mb="66px" align="stretch">
+                        {sortByDate(articles).map((article) => (
+                            <Box px="3" key={article.url}>
+                                <ArticleCard title={article.title} minRead={article.minRead} url={article.url} />
+                            </Box>
+                        ))}
+                    </Flex>
+                </VStack>
             </VStack>
         </VStack>
     )

diff --git a/apps/website/src/app/page.tsx b/apps/website/src/app/page.tsx
@@ -1,9 +1,9 @@
-import { Box, Button, Card, CardBody, Heading, HStack, Link, Stack, Text, VStack, Image } from "@chakra-ui/react"
+import { Box, Button, Card, CardBody, HStack, Heading, Image, Link, Stack, Text, VStack } from "@chakra-ui/react"
 import { Sora } from "next/font/google"
 import Carousel from "../components/Carousel"
 import ProjectCard from "../components/ProjectCard"
 import events from "../data/events.json"
-import projects from "../data/projects.json"
+import allProjects from "../data/projects.json"
 import IconDiscord from "../icons/IconDiscord"
 
 const sora = Sora({
@@ -68,7 +68,7 @@ export default function Home() {
                     </Heading>
 
                     <VStack spacing="3">
-                        {projects.slice(0, 3).map((project) => (
+                        {allProjects.slice(0, 3).map((project) => (
                             <ProjectCard
                                 key={project.name}
                                 title={project.name}

diff --git a/apps/website/src/components/ArticleCard.tsx b/apps/website/src/components/ArticleCard.tsx
@@ -15,15 +15,16 @@ export default function ArticleCard({ title, minRead, url }: ArticleCardProps) {
                 color="white"
                 padding="24px 20px"
                 width={{ base: "full", sm: "297.5px" }}
-                height="210px"
                 _hover={{ bgColor: "darkBlueBg" }}
+                h="full"
+                variant="unstyled"
             >
-                <CardBody padding={0}>
+                <CardBody padding="0">
                     <Heading fontSize="20px" lineHeight="28px">
                         {title}
                     </Heading>
                 </CardBody>
-                <CardFooter padding={0}>
+                <CardFooter paddingTop="8">
                     <Text fontSize="14px" lineHeight="22.4px">
                         {`${minRead} min read`}
                     </Text>

diff --git a/apps/website/src/components/Carousel.tsx b/apps/website/src/components/Carousel.tsx
@@ -3,8 +3,8 @@
 import { Box, HStack, Heading, IconButton, Link, StackProps, VStack, useBreakpointValue } from "@chakra-ui/react"
 import NextLink from "next/link"
 import { useCallback, useState } from "react"
-import articles from "../data/articles.json"
-import projects from "../data/projects.json"
+import allArticles from "../data/articles.json"
+import allProjects from "../data/projects.json"
 import videos from "../data/videos.json"
 import IconArrowLeft from "../icons/IconArrowLeft"
 import IconArrowRight from "../icons/IconArrowRight"
@@ -46,7 +46,7 @@ export default function Carousel({ title, sizes, type, ...props }: CarouselProps
     }, [index, size])
 
     return (
-        <VStack align="left" w="full" {...props} spacing="12">
+        <VStack align="left" w="full" spacing="16" {...props}>
             <HStack justify="space-between">
                 <Heading fontSize={{ base: "30px", md: "44px" }} textAlign={type === "projects" ? "center" : "left"}>
                     {title}
@@ -80,7 +80,7 @@ export default function Carousel({ title, sizes, type, ...props }: CarouselProps
                     align="stretch"
                 >
                     {type === "projects" &&
-                        projects.map((project) => (
+                        allProjects.map((project) => (
                             <Box
                                 visibility={!size ? "hidden" : "visible"}
                                 px="3"
@@ -97,7 +97,7 @@ export default function Carousel({ title, sizes, type, ...props }: CarouselProps
                         ))}
 
                     {type === "articles" &&
-                        sortByDate(articles).map((article) => (
+                        sortByDate(allArticles).map((article) => (
                             <Box
                                 visibility={!size ? "hidden" : "visible"}
                                 px="3"

diff --git a/apps/website/src/components/Footer.tsx b/apps/website/src/components/Footer.tsx
@@ -44,7 +44,7 @@ export default function Footer() {
                     </HStack>
                 </Link>
                 <Link
-                    href="https://www.notion.so/pse-team/Semaphore-Identity-Kit-ebbfe6ac0a824fb0a65e8783caf9b330"
+                    href="https://pse-team.notion.site/Semaphore-Identity-Kit-ebbfe6ac0a824fb0a65e8783caf9b330"
                     isExternal
                 >
                     <HStack spacing="3">
@@ -71,17 +71,14 @@ export default function Footer() {
                         <HStack>
                             <IconX boxSize={{ base: "16px", md: "24px" }} />
                             <Heading fontSize={{ base: "14px", md: "18px" }} fontWeight="normal">
-                                Twitter
+                                X (Twitter)
                             </Heading>
                         </HStack>
                     </Link>
                 </HStack>
 
                 <VStack spacing="8">
-                    <Link
-                        href="https://github.com/semaphore-protocol/semaphore/discussions/new?category=website"
-                        isExternal
-                    >
+                    <Link href="https://github.com/orgs/semaphore-protocol/discussions/new?category=website" isExternal>
                         <HStack>
                             <IconThumbsUp boxSize={{ base: "16px", md: "24px" }} />
                             <Heading fontSize={{ base: "14px", md: "18px" }} fontWeight="normal">

diff --git a/apps/website/src/components/Navbar.tsx b/apps/website/src/components/Navbar.tsx
@@ -83,15 +83,15 @@ export default function Navbar() {
                                             <HStack>
                                                 <IconX boxSize={{ base: "16px", md: "24px" }} />
                                                 <Heading fontSize={{ base: "14px", md: "18px" }} fontWeight="normal">
-                                                    Twitter
+                                                    X (Twitter)
                                                 </Heading>
                                             </HStack>
                                         </Link>
                                     </HStack>
 
                                     <VStack spacing="8">
                                         <Link
-                                            href="https://github.com/semaphore-protocol/semaphore/discussions/new?category=website"
+                                            href="https://github.com/orgs/semaphore-protocol/discussions/new?category=website"
                                             isExternal
                                         >
                                             <HStack>

diff --git a/apps/website/src/components/ProjectsList.tsx b/apps/website/src/components/ProjectsList.tsx
@@ -11,15 +11,17 @@ import IconPSE from "../icons/IconPSE"
 import { chunkArray } from "../utils/chunkArray"
 import { getProjectCategories } from "../utils/getProjectCategories"
 
+const sortedProjects = allProjects.sort((a, b) => a.name.localeCompare(b.name))
+
 export default function ProjectsList(props: any) {
-    const [projects, setProjects] = useState<(typeof allProjects)[]>(chunkArray(allProjects))
+    const [projects, setProjects] = useState<(typeof allProjects)[]>(chunkArray(sortedProjects))
     const [index, setIndex] = useState<number>(0)
     const [selectedCategories, setSelectedCategories] = useState<string[]>([])
     const [onlyPSE, setOnlyPSE] = useState<boolean | null>(null)
     const viewToScrollRef = useRef<HTMLDivElement>(null)
 
     const filterProjects = useCallback(() => {
-        let filteredProjects = allProjects
+        let filteredProjects = sortedProjects
 
         if (selectedCategories.length > 0) {
             filteredProjects = filteredProjects.filter((project) =>
@@ -33,26 +35,20 @@ export default function ProjectsList(props: any) {
             filteredProjects = filteredProjects.filter((project) => !project.pse)
         }
 
-        filteredProjects = filteredProjects.sort((a, b) => a.name.localeCompare(b.name))
-
         setProjects(chunkArray(filteredProjects))
     }, [selectedCategories, onlyPSE])
 
-    useEffect(() => {
-        filterProjects()
-    }, [selectedCategories, onlyPSE])
+    const changePageIndex = useCallback((newIndex: number) => {
+        setIndex(newIndex)
 
-    useEffect(() => {
         if (viewToScrollRef.current) {
             viewToScrollRef.current.scrollIntoView({ behavior: "smooth" })
         }
-    }, [index])
+    }, [])
 
     useEffect(() => {
-        if (viewToScrollRef.current) {
-            viewToScrollRef.current.scrollIntoView({ behavior: "smooth" })
-        }
-    }, [index])
+        filterProjects()
+    }, [selectedCategories, onlyPSE])
 
     return (
         <VStack {...props}>
@@ -82,7 +78,7 @@ export default function ProjectsList(props: any) {
             <VStack align="left" spacing="6" ref={viewToScrollRef}>
                 <Text fontSize="20">Category</Text>
                 <HStack spacing="3" flexWrap="wrap">
-                    {getProjectCategories(allProjects).map((category) => (
+                    {getProjectCategories(sortedProjects).map((category) => (
                         <Button
                             key={category}
                             size="sm"
@@ -130,7 +126,7 @@ export default function ProjectsList(props: any) {
                     <HStack flex="1" justify="center">
                         <IconButton
                             visibility={index > 0 ? "visible" : "hidden"}
-                            onClick={() => setIndex((i) => i - 1)}
+                            onClick={() => changePageIndex(index - 1)}
                             variant="link"
                             aria-label="Arrow left"
                             icon={<IconChevronLeft />}
@@ -141,7 +137,7 @@ export default function ProjectsList(props: any) {
                                 <Text
                                     // eslint-disable-next-line react/no-array-index-key
                                     key={i}
-                                    onClick={() => setIndex(i)}
+                                    onClick={() => changePageIndex(i)}
                                     cursor="pointer"
                                     color={i === index ? "primary.600" : "text.400"}
                                 >
@@ -152,7 +148,7 @@ export default function ProjectsList(props: any) {
 
                         <IconButton
                             visibility={index < projects.length - 1 ? "visible" : "hidden"}
-                            onClick={() => setIndex((i) => i + 1)}
+                            onClick={() => changePageIndex(index + 1)}
                             variant="link"
                             aria-label="Arrow right"
                             icon={<IconChevronRight />}

diff --git a/apps/website/src/components/ToolsCard.tsx b/apps/website/src/components/ToolsCard.tsx
@@ -51,10 +51,10 @@ export default function ToolsCard({ icon, title, subtitle, details, url }: Tools
                             py="10px"
                             mt="24px"
                             w="full"
-                            bgGradient="semaphore"
+                            bgGradient="linear(to-r, primary.500, primary.800)"
                             color="white"
                             fontSize="18px"
-                            _hover={{ bgGradient: "semaphore", opacity: "85%" }}
+                            _hover={{ bgGradient: "linear(to-r, primary.500, primary.800)", opacity: "85%" }}
                         >
                             Select tool
                         </Link>

diff --git a/apps/website/src/components/VideoCard.tsx b/apps/website/src/components/VideoCard.tsx
@@ -13,16 +13,16 @@ export default function VideoCard({ thumbnail, url, title }: VideoCardProps) {
                 bg="transparent"
                 borderRadius="10px"
                 color="white"
-                width="297px"
-                height="320px"
+                h="full"
                 _hover={{ bgColor: "darkBlueBg" }}
+                variant="unstyled"
             >
-                <HStack borderRadius="10px 10px 0px 0px">
-                    <AspectRatio width="297px" height="215px" borderRadius="10px" overflow="hidden">
+                <HStack>
+                    <AspectRatio borderRadius="10px 10px 0px 0px" width="297px" height="215px" overflow="hidden">
                         <Image alt="Youtube thumbnail" src={thumbnail} />
                     </AspectRatio>
                 </HStack>
-                <CardBody padding="0px 20px 20px 20px">
+                <CardBody padding="20px">
                     <Heading fontSize={{ base: "18px", md: "20px" }} lineHeight="28px" fontWeight="normal">
                         {title}
                     </Heading>