From 7d5707058dd0f9cc16ae47027f17f8a4819ff9b7 Mon Sep 17 00:00:00 2001
From: Jeeiii <giacomo.corrias7@gmail.com>
Date: Wed, 13 Dec 2023 19:56:06 +0100
Subject: [PATCH 1/3] refactor: update colors

---
 apps/website/src/components/ActionCard.tsx   |  2 +-
 apps/website/src/components/CodeBlock.tsx    |  5 +--
 apps/website/src/components/ProjectsList.tsx |  3 --
 apps/website/src/components/ToolsCard.tsx    |  4 +-
 apps/website/src/styles/colors.ts            |  5 +--
 apps/website/src/styles/components/Button.ts | 45 +++++++++-----------
 6 files changed, 26 insertions(+), 38 deletions(-)

diff --git a/apps/website/src/components/ActionCard.tsx b/apps/website/src/components/ActionCard.tsx
index 43c07d324..dbcde8981 100644
--- a/apps/website/src/components/ActionCard.tsx
+++ b/apps/website/src/components/ActionCard.tsx
@@ -48,7 +48,7 @@ export default function ActionCard({ title, description, buttonText, buttonUrl }
                             href={buttonUrl}
                             isExternal
                             variant="buttonlink"
-                            bg="semaphore"
+                            bgGradient="semaphore"
                             w="fit-content"
                             lineHeight="24px"
                             fontSize={{ base: "14px", md: "18px", lg: "20px" }}
diff --git a/apps/website/src/components/CodeBlock.tsx b/apps/website/src/components/CodeBlock.tsx
index 0673e49c6..e76b28cc2 100644
--- a/apps/website/src/components/CodeBlock.tsx
+++ b/apps/website/src/components/CodeBlock.tsx
@@ -26,11 +26,8 @@ export default function CodekBlock({ text }: CodekBlockProps) {
         <Flex flex="1" overflow="auto" position="relative" borderRadius="8px" backgroundColor="darkBlue">
             <CodeBlock {...copyBlockProps} />
             <Button
-                textColor="alabaster.300"
+                variant="outline"
                 fontSize={{ base: "16px", md: "18px" }}
-                fontWeight="400"
-                borderColor="alabaster.800"
-                backgroundColor="darkBlue"
                 padding="5px 8px"
                 border="1px"
                 borderRadius="4px"
diff --git a/apps/website/src/components/ProjectsList.tsx b/apps/website/src/components/ProjectsList.tsx
index 32fd1f7b9..cd82e2b74 100644
--- a/apps/website/src/components/ProjectsList.tsx
+++ b/apps/website/src/components/ProjectsList.tsx
@@ -58,7 +58,6 @@ export default function ProjectsList(props: any) {
                         size="lg"
                         leftIcon={<IconPSE />}
                         variant={onlyPSE === true ? "solid" : "outline"}
-                        colorScheme={onlyPSE === true ? "primary" : "inherit"}
                         onClick={() => setOnlyPSE(onlyPSE === true ? null : true)}
                     >
                         PSE
@@ -67,7 +66,6 @@ export default function ProjectsList(props: any) {
                         size="lg"
                         leftIcon={<IconCommunity />}
                         variant={onlyPSE === false ? "solid" : "outline"}
-                        colorScheme={onlyPSE === false ? "primary" : "inherit"}
                         onClick={() => setOnlyPSE(onlyPSE === false ? null : false)}
                     >
                         Community
@@ -83,7 +81,6 @@ export default function ProjectsList(props: any) {
                             key={category}
                             size="sm"
                             variant={selectedCategories.includes(category) ? "solid" : "outline"}
-                            colorScheme={selectedCategories.includes(category) ? "primary" : "inherit"}
                             onClick={() => {
                                 const newCategories = selectedCategories.includes(category)
                                     ? selectedCategories.filter((c) => c !== category)
diff --git a/apps/website/src/components/ToolsCard.tsx b/apps/website/src/components/ToolsCard.tsx
index f2d9d06bc..63528e6d3 100644
--- 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"
-                            bg="semaphore"
+                            bgGradient="semaphore"
                             color="white"
                             fontSize="18px"
-                            _hover={{ bg: "semaphore", opacity: "85%" }}
+                            _hover={{ bgGradient: "semaphore", opacity: "85%" }}
                         >
                             Select tool
                         </Link>
diff --git a/apps/website/src/styles/colors.ts b/apps/website/src/styles/colors.ts
index d38c3f70a..6a3b7c5ef 100644
--- a/apps/website/src/styles/colors.ts
+++ b/apps/website/src/styles/colors.ts
@@ -2,10 +2,7 @@ const colors = {
     darkBlue: "#0E101B",
     darkBlueBg: "#00020D",
     ceruleanBlue: "#3555DF",
-    // TODO: This can be replaced by using the 'bgGradient' Chakra property.
-    // and the existing primary color scheme.
-    // The value is: "linear(to-r, primary.500, primary.800)"
-    semaphore: "linear-gradient(92.32deg, #4771EA -33.31%, #2735A6 112.52%)",
+    semaphore: "linear(to-r, primary.500, primary.800)",
     alabaster: {
         300: "#B8B9C1",
         400: "#92939E",
diff --git a/apps/website/src/styles/components/Button.ts b/apps/website/src/styles/components/Button.ts
index 04bcecc68..c05375d3d 100644
--- a/apps/website/src/styles/components/Button.ts
+++ b/apps/website/src/styles/components/Button.ts
@@ -1,5 +1,6 @@
 import { StyleFunctionProps, SystemStyleObject } from "@chakra-ui/theme-tools"
 import { font } from "../styles"
+import colors from "../colors"
 
 const Button = {
     baseStyle: {
@@ -13,42 +14,38 @@ const Button = {
         paddingRight: "18px !important"
     },
     defaultProps: {
-        colorScheme: "white"
+        colorScheme: "#FFFFFF"
     },
     variants: {
         solid: (props: StyleFunctionProps): SystemStyleObject => {
             const { colorScheme: c } = props
 
-            if (c === "primary") {
-                // const bgGradient = "linear(to-r, primary.500, primary.800)"
-                const bg = `${c}.500`
-                const color = "white"
-
-                return {
-                    bg,
-                    color,
-                    _hover: {
-                        bg: `${c}.800`,
-                        _disabled: {
-                            bg
-                        }
-                    },
-                    _active: { bg: `${c}.800` }
+            return {
+                bg: c,
+                color: colors.darkBlueBg,
+                _hover: {
+                    color: c,
+                    bgGradient: colors.semaphore,
+                    _disabled: {
+                        bg: c
+                    }
                 }
             }
-
-            const bg = c
+        },
+        outline: (props: StyleFunctionProps): SystemStyleObject => {
+            const { colorScheme: c } = props
 
             return {
-                bg,
-                color: `darkBlue`,
+                color: c,
+                border: `1.2px solid ${c}`,
                 _hover: {
-                    bg: `${c}.300`,
+                    bg: colors.darkBlueBg,
+                    color: c,
+                    border: `1.2px solid ${colors.primary["600"]}`,
                     _disabled: {
-                        bg
+                        bg: c
                     }
-                },
-                _active: { bg: `${c}.400` }
+                }
             }
         }
     }

From 712d6e169698b75e179e62551a46bda7f43afdbc Mon Sep 17 00:00:00 2001
From: Jeeiii <giacomo.corrias7@gmail.com>
Date: Thu, 14 Dec 2023 14:04:41 +0100
Subject: [PATCH 2/3] refactor: add missing X button

---
 apps/website/src/app/page.tsx          |  6 ++++++
 apps/website/src/icons/IconDiscord.tsx |  4 ++--
 apps/website/src/icons/IconX.tsx       | 13 +++++++++++++
 3 files changed, 21 insertions(+), 2 deletions(-)
 create mode 100644 apps/website/src/icons/IconX.tsx

diff --git a/apps/website/src/app/page.tsx b/apps/website/src/app/page.tsx
index a6eebe560..d8a6aa0d2 100644
--- a/apps/website/src/app/page.tsx
+++ b/apps/website/src/app/page.tsx
@@ -5,6 +5,7 @@ import ProjectCard from "../components/ProjectCard"
 import events from "../data/events.json"
 import projects from "../data/projects.json"
 import IconDiscord from "../icons/IconDiscord"
+import IconX from "../icons/IconX"
 
 const sora = Sora({
     subsets: ["latin"]
@@ -219,6 +220,11 @@ export default function Home() {
                                 Discord
                             </Button>
                         </Link>
+                        <Link href="https://x.com/SemaphoreDevs" isExternal>
+                            <Button leftIcon={<IconX />} size="lg">
+                                X
+                            </Button>
+                        </Link>
                     </VStack>
 
                     <Card
diff --git a/apps/website/src/icons/IconDiscord.tsx b/apps/website/src/icons/IconDiscord.tsx
index 81fc92ad2..e518dc5ad 100644
--- a/apps/website/src/icons/IconDiscord.tsx
+++ b/apps/website/src/icons/IconDiscord.tsx
@@ -3,9 +3,9 @@ import React from "react"
 
 export default function IconDiscord(props: IconProps): JSX.Element {
     return (
-        <Icon viewBox="0 0 287 219" {...props}>
+        <Icon viewBox="0 0 24 19" {...props}>
             <path
-                d="M242.512 18.6526C224.277 10.2853 204.722 4.12073 184.276 0.590006C183.904 0.521864 183.532 0.692155 183.34 1.03274C180.825 5.50573 178.039 11.3411 176.088 15.9277C154.098 12.6354 132.22 12.6354 110.68 15.9277C108.729 11.2392 105.842 5.50573 103.316 1.03274C103.124 0.703518 102.752 0.533228 102.379 0.590006C81.9449 4.10945 62.3901 10.2741 44.1433 18.6526C43.9854 18.7207 43.85 18.8343 43.7601 18.9818C6.6687 74.3955 -3.49219 128.447 1.4924 181.829C1.51495 182.09 1.66156 182.34 1.86455 182.499C26.3364 200.47 50.0416 211.381 73.3065 218.612C73.6789 218.726 74.0734 218.59 74.3103 218.283C79.8137 210.768 84.7194 202.843 88.9256 194.51C89.1738 194.022 88.9369 193.443 88.4295 193.25C80.6482 190.298 73.2388 186.699 66.1115 182.612C65.5478 182.283 65.5026 181.477 66.0213 181.091C67.5211 179.967 69.0214 178.797 70.4535 177.617C70.7126 177.401 71.0737 177.356 71.3783 177.492C118.202 198.87 168.893 198.87 215.164 177.492C215.469 177.344 215.83 177.39 216.1 177.605C217.533 178.786 219.033 179.967 220.544 181.091C221.062 181.477 221.029 182.283 220.465 182.612C213.338 186.779 205.928 190.298 198.136 193.238C197.628 193.432 197.403 194.022 197.651 194.51C201.947 202.832 206.853 210.756 212.255 218.272C212.48 218.59 212.886 218.726 213.259 218.612C236.636 211.381 260.341 200.47 284.813 182.499C285.028 182.34 285.163 182.101 285.186 181.84C291.151 120.125 275.194 66.5167 242.884 18.9931C242.805 18.8343 242.67 18.7207 242.512 18.6526ZM95.9179 149.325C81.8208 149.325 70.2053 136.383 70.2053 120.489C70.2053 104.594 81.5956 91.6522 95.9179 91.6522C110.353 91.6522 121.856 104.708 121.63 120.489C121.63 136.383 110.24 149.325 95.9179 149.325ZM190.986 149.325C176.889 149.325 165.274 136.383 165.274 120.489C165.274 104.594 176.663 91.6522 190.986 91.6522C205.421 91.6522 216.924 104.708 216.698 120.489C216.698 136.383 205.421 149.325 190.986 149.325Z"
+                d="M20.242 1.68563C18.7262 0.990122 17.1007 0.4777 15.4012 0.184215C15.3703 0.17855 15.3393 0.192705 15.3234 0.221016C15.1144 0.592826 14.8828 1.07788 14.7206 1.45913C12.8927 1.18547 11.0741 1.18547 9.28367 1.45913C9.12148 1.06941 8.88152 0.592826 8.67153 0.221016C8.65559 0.19365 8.62467 0.179495 8.59372 0.184215C6.89513 0.476762 5.26967 0.989184 3.75294 1.68563C3.73981 1.69129 3.72855 1.70074 3.72108 1.713C0.637926 6.31917 -0.206681 10.8121 0.207655 15.2494C0.20953 15.2711 0.221716 15.2919 0.23859 15.3051C2.27277 16.7989 4.24322 17.7058 6.17708 18.3069C6.20803 18.3164 6.24082 18.3051 6.26052 18.2796C6.71797 17.6549 7.12576 16.9962 7.47539 16.3035C7.49602 16.2629 7.47632 16.2148 7.43415 16.1987C6.78734 15.9534 6.17145 15.6542 5.57901 15.3145C5.53215 15.2871 5.5284 15.2201 5.57151 15.188C5.69618 15.0946 5.82088 14.9974 5.93993 14.8992C5.96147 14.8813 5.99148 14.8775 6.0168 14.8889C9.90891 16.6659 14.1226 16.6659 17.9688 14.8889C17.9941 14.8766 18.0241 14.8804 18.0466 14.8983C18.1656 14.9965 18.2903 15.0946 18.4159 15.188C18.459 15.2201 18.4562 15.2871 18.4094 15.3145C17.8169 15.6608 17.201 15.9534 16.5533 16.1978C16.5111 16.2138 16.4924 16.2629 16.513 16.3035C16.8701 16.9952 17.2779 17.6539 17.7269 18.2786C17.7457 18.3051 17.7794 18.3164 17.8104 18.3069C19.7536 17.7058 21.724 16.7989 23.7582 15.3051C23.776 15.2919 23.7873 15.272 23.7892 15.2503C24.285 10.1204 22.9586 5.66426 20.2729 1.71394C20.2663 1.70074 20.2551 1.69129 20.242 1.68563ZM8.05661 12.5476C6.88482 12.5476 5.9193 11.4718 5.9193 10.1506C5.9193 8.8294 6.86609 7.75361 8.05661 7.75361C9.25647 7.75361 10.2126 8.83884 10.1939 10.1506C10.1939 11.4718 9.24709 12.5476 8.05661 12.5476ZM15.959 12.5476C14.7872 12.5476 13.8217 11.4718 13.8217 10.1506C13.8217 8.8294 14.7684 7.75361 15.959 7.75361C17.1589 7.75361 18.115 8.83884 18.0963 10.1506C18.0963 11.4718 17.1589 12.5476 15.959 12.5476Z"
                 fill="currentColor"
             />
         </Icon>
diff --git a/apps/website/src/icons/IconX.tsx b/apps/website/src/icons/IconX.tsx
new file mode 100644
index 000000000..c09289bc5
--- /dev/null
+++ b/apps/website/src/icons/IconX.tsx
@@ -0,0 +1,13 @@
+import { Icon, IconProps } from "@chakra-ui/react"
+import React from "react"
+
+export default function IconX(props: IconProps): JSX.Element {
+    return (
+        <Icon viewBox="0 0 18 25" {...props}>
+            <path
+                d="M6.74309 13.629L0 5.25H5.34101L9.50347 10.4288L13.9504 5.27332H16.8919L10.9257 12.1984L18 21H12.6749L8.16784 15.3994L3.35607 20.9845H0.398583L6.74309 13.629ZM13.4511 19.4475L3.27493 6.80249H4.56424L14.7276 19.4475H13.4511Z"
+                fill="currentColor"
+            />
+        </Icon>
+    )
+}

From 831a660ce9fa9cd9b0bfbb8f4d35b4e25f3d0f27 Mon Sep 17 00:00:00 2001
From: Jeeiii <giacomo.corrias7@gmail.com>
Date: Tue, 19 Dec 2023 14:46:32 +0100
Subject: [PATCH 3/3] refactor: add X link to footer and navbar

---
 apps/website/src/app/page.tsx          |  6 ---
 apps/website/src/components/Footer.tsx | 58 ++++++++++++++++----------
 apps/website/src/components/Navbar.tsx | 57 +++++++++++++++----------
 3 files changed, 70 insertions(+), 51 deletions(-)

diff --git a/apps/website/src/app/page.tsx b/apps/website/src/app/page.tsx
index d8a6aa0d2..a6eebe560 100644
--- a/apps/website/src/app/page.tsx
+++ b/apps/website/src/app/page.tsx
@@ -5,7 +5,6 @@ import ProjectCard from "../components/ProjectCard"
 import events from "../data/events.json"
 import projects from "../data/projects.json"
 import IconDiscord from "../icons/IconDiscord"
-import IconX from "../icons/IconX"
 
 const sora = Sora({
     subsets: ["latin"]
@@ -220,11 +219,6 @@ export default function Home() {
                                 Discord
                             </Button>
                         </Link>
-                        <Link href="https://x.com/SemaphoreDevs" isExternal>
-                            <Button leftIcon={<IconX />} size="lg">
-                                X
-                            </Button>
-                        </Link>
                     </VStack>
 
                     <Card
diff --git a/apps/website/src/components/Footer.tsx b/apps/website/src/components/Footer.tsx
index a8b5e24b8..3b1f4751a 100644
--- a/apps/website/src/components/Footer.tsx
+++ b/apps/website/src/components/Footer.tsx
@@ -4,6 +4,7 @@ import NextLink from "next/link"
 import IconArrowUpRight from "../icons/IconArrowUpRight"
 import IconDiscord from "../icons/IconDiscord"
 import IconThumbsUp from "../icons/IconThumbsUp"
+import IconX from "@/icons/IconX"
 
 export default function Footer() {
     return (
@@ -56,32 +57,43 @@ export default function Footer() {
             </Stack>
 
             <Divider />
-
             <VStack spacing="5">
-                <Link href="https://semaphore.pse.dev/discord" isExternal>
-                    <HStack>
-                        <IconDiscord boxSize={{ base: "16px", md: "24px" }} />
-                        <Heading fontSize={{ base: "14px", md: "18px" }} fontWeight="normal">
-                            Discord
-                        </Heading>
-                    </HStack>
-                </Link>
+                <HStack spacing="5">
+                    <Link href="https://semaphore.pse.dev/discord" isExternal>
+                        <HStack>
+                            <IconDiscord boxSize={{ base: "16px", md: "24px" }} />
+                            <Heading fontSize={{ base: "14px", md: "18px" }} fontWeight="normal">
+                                Discord
+                            </Heading>
+                        </HStack>
+                    </Link>
+                    <Link href="https://x.com/SemaphoreDevs" isExternal>
+                        <HStack>
+                            <IconX boxSize={{ base: "16px", md: "24px" }} />
+                            <Heading fontSize={{ base: "14px", md: "18px" }} fontWeight="normal">
+                                Twitter
+                            </Heading>
+                        </HStack>
+                    </Link>
+                </HStack>
 
-                <Link
-                    href="https://github.com/semaphore-protocol/semaphore/discussions/new?category=website"
-                    isExternal
-                >
-                    <HStack>
-                        <IconThumbsUp boxSize={{ base: "16px", md: "24px" }} />
-                        <Heading fontSize={{ base: "14px", md: "18px" }} fontWeight="normal">
-                            Give feedback about the website
-                        </Heading>
-                    </HStack>
-                </Link>
+                <VStack spacing="8">
+                    <Link
+                        href="https://github.com/semaphore-protocol/semaphore/discussions/new?category=website"
+                        isExternal
+                    >
+                        <HStack>
+                            <IconThumbsUp boxSize={{ base: "16px", md: "24px" }} />
+                            <Heading fontSize={{ base: "14px", md: "18px" }} fontWeight="normal">
+                                Give feedback about the website
+                            </Heading>
+                        </HStack>
+                    </Link>
 
-                <Text fontSize={{ base: "12px", md: "14px" }} color="text.500" pt="2">
-                    Copyright © 2023 Ethereum Foundation
-                </Text>
+                    <Text fontSize={{ base: "12px", md: "14px" }} color="text.500" pt="2">
+                        Copyright © 2023 Ethereum Foundation
+                    </Text>
+                </VStack>
             </VStack>
         </VStack>
     )
diff --git a/apps/website/src/components/Navbar.tsx b/apps/website/src/components/Navbar.tsx
index 4a08be62c..d1bcb3b8a 100644
--- a/apps/website/src/components/Navbar.tsx
+++ b/apps/website/src/components/Navbar.tsx
@@ -24,6 +24,7 @@ import IconDiscord from "../icons/IconDiscord"
 import IconMenu from "../icons/IconMenu"
 import IconThumbsUp from "../icons/IconThumbsUp"
 import NavbarLinks from "./NavbarLinks"
+import IconX from "@/icons/IconX"
 
 export default function Navbar() {
     const { isOpen, onOpen, onClose } = useDisclosure()
@@ -69,30 +70,42 @@ export default function Navbar() {
                                 <Divider mb="20" />
 
                                 <VStack w="full" justify="center" spacing="5">
-                                    <Link href="https://semaphore.pse.dev/discord" isExternal>
-                                        <HStack>
-                                            <IconDiscord boxSize="16px" />
-                                            <Heading fontSize="14px" fontWeight="normal">
-                                                Discord
-                                            </Heading>
-                                        </HStack>
-                                    </Link>
+                                    <HStack spacing="5">
+                                        <Link href="https://semaphore.pse.dev/discord" isExternal>
+                                            <HStack>
+                                                <IconDiscord boxSize={{ base: "16px", md: "24px" }} />
+                                                <Heading fontSize={{ base: "14px", md: "18px" }} fontWeight="normal">
+                                                    Discord
+                                                </Heading>
+                                            </HStack>
+                                        </Link>
+                                        <Link href="https://x.com/SemaphoreDevs" isExternal>
+                                            <HStack>
+                                                <IconX boxSize={{ base: "16px", md: "24px" }} />
+                                                <Heading fontSize={{ base: "14px", md: "18px" }} fontWeight="normal">
+                                                    Twitter
+                                                </Heading>
+                                            </HStack>
+                                        </Link>
+                                    </HStack>
 
-                                    <Link
-                                        href="https://github.com/semaphore-protocol/semaphore/discussions/categories/website"
-                                        isExternal
-                                    >
-                                        <HStack>
-                                            <IconThumbsUp boxSize="16px" />
-                                            <Heading fontSize="14px" fontWeight="normal">
-                                                Give feedback about the website
-                                            </Heading>
-                                        </HStack>
-                                    </Link>
+                                    <VStack spacing="8">
+                                        <Link
+                                            href="https://github.com/semaphore-protocol/semaphore/discussions/new?category=website"
+                                            isExternal
+                                        >
+                                            <HStack>
+                                                <IconThumbsUp boxSize={{ base: "16px", md: "24px" }} />
+                                                <Heading fontSize={{ base: "14px", md: "18px" }} fontWeight="normal">
+                                                    Give feedback about the website
+                                                </Heading>
+                                            </HStack>
+                                        </Link>
 
-                                    <Text fontSize="12px" color="text.500" pt="2">
-                                        Copyright © 2023 Ethereum Foundation
-                                    </Text>
+                                        <Text fontSize={{ base: "12px", md: "14px" }} color="text.500" pt="2">
+                                            Copyright © 2023 Ethereum Foundation
+                                        </Text>
+                                    </VStack>
                                 </VStack>
                             </DrawerFooter>
                         </DrawerContent>