fix taco images paths and buttons texts

threshold-network · Mar 20, 2024 · 029fd00 · 029fd00
1 parent 0a3a1ed
commit 029fd00
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 14 deletions.
diff --git a/src/content/pages/build/taco.md b/src/content/pages/build/taco.md
@@ -68,7 +68,7 @@ tacoDiagrams:
       - label: "taco-web"
         url: https://github.com/nucypher/taco-web
         variant: EXTERNAL_OUTLINE
-      - label: "nucypher/nucypher"
+      - label: "nucypher/main"
         url: https://github.com/nucypher/nucypher/tree/main
         variant: EXTERNAL_OUTLINE
   - title: "Accessing Decrypted Data"
@@ -79,7 +79,7 @@ tacoDiagrams:
       - label: "taco-web"
         url: https://github.com/nucypher/taco-web
         variant: EXTERNAL_OUTLINE
-      - label: "nucypher/nucypher"
+      - label: "nucypher/main"
         url: https://github.com/nucypher/nucypher/tree/main
         variant: EXTERNAL_OUTLINE
 tacoExamplesInfo:

diff --git a/src/templates/build-page/taco/TacoDiagrams.tsx b/src/templates/build-page/taco/TacoDiagrams.tsx
@@ -1,5 +1,5 @@
 import React, { FC, useState } from "react"
-import { Box, Stack } from "@chakra-ui/react"
+import { Box, Stack, Image as ChakraImage } from "@chakra-ui/react"
 import { BodyLg, H3, LabelMd } from "../../../components/Typography"
 import {
   PageSection,
@@ -35,7 +35,7 @@ const TacoDiagrams: FC<TacoDiagramsProps> = ({
   return (
     <PageSection withMediumPadding position="relative">
       <ResponsiveStack rowGap={12} alignItems="center">
-        <Box maxW={{ base: "100%", md: "350px" }}>
+        <Box maxW={{ base: "100%", md: "370px" }}>
           <LabelMd textTransform="uppercase" color="gray.500">
             {currentDiagram.preTitle}
           </LabelMd>
@@ -56,9 +56,9 @@ const TacoDiagrams: FC<TacoDiagramsProps> = ({
                   variant="outline"
                   size="md"
                   fontSize="14px"
-                  maxW="10rem"
+                  maxW="12rem"
                   width="100%"
-                  py="20px"
+                  py="24px"
                 >
                   {button.label}
                 </ExternalButtonLink>
@@ -83,14 +83,14 @@ const TacoDiagrams: FC<TacoDiagramsProps> = ({
               cursor="pointer"
               opacity={current === 0 ? 0.5 : 1}
             >
-              <Image relativePath="/left-arrow.svg" />
+              <ChakraImage src="/images/left-arrow.svg" />
             </Box>
             <Box
               onClick={() => handleNext()}
               cursor="pointer"
               opacity={current === 2 ? 0.5 : 1}
             >
-              <Image relativePath="/right-arrow.svg" />
+              <ChakraImage src="/images/right-arrow.svg" />
             </Box>
           </Stack>
         </Box>

diff --git a/src/templates/build-page/taco/TacoTable.tsx b/src/templates/build-page/taco/TacoTable.tsx
@@ -1,6 +1,15 @@
 import React, { FC } from "react"
-import { Box, Table, Tbody, Td, Th, Thead, Tr, Center } from "@chakra-ui/react"
-import { Image } from "../../../components/Image"
+import {
+  Box,
+  Table,
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Tr,
+  Center,
+  Image,
+} from "@chakra-ui/react"
 import { BodySm } from "../../../components"
 
 export interface TableOptions {
@@ -34,11 +43,11 @@ const TacoTable: FC<TacoTableProps> = ({ headers, features }) => {
 
     switch (mark) {
       case "POSITIVE":
-        return `/check-${colorSuffix}.svg`
+        return `/images/check-${colorSuffix}.svg`
       case "NEGATIVE":
-        return `/x-${colorSuffix}.svg`
+        return `/images/x-${colorSuffix}.svg`
       case "NEUTRAL":
-        return `/dash-${colorSuffix}.svg`
+        return `/images/dash-${colorSuffix}.svg`
       default:
         return ""
     }
@@ -77,7 +86,7 @@ const TacoTable: FC<TacoTableProps> = ({ headers, features }) => {
                 <Td textAlign="center" key={optIndex}>
                   <Center>
                     <Image
-                      relativePath={getMarkImage(option.mark, option.highlight)}
+                      src={getMarkImage(option.mark, option.highlight)}
                       alt={option.mark}
                     />
                   </Center>