From 029fd00e9ce9000c7d0a0ab24343f0c624ba7749 Mon Sep 17 00:00:00 2001
From: evandrosaturnino <evandro.saturnino@gmail.com>
Date: Tue, 19 Mar 2024 23:27:09 -0300
Subject: [PATCH] fix taco images paths and buttons texts

---
 src/content/pages/build/taco.md               |  4 ++--
 .../build-page/taco/TacoDiagrams.tsx          | 12 +++++------
 src/templates/build-page/taco/TacoTable.tsx   | 21 +++++++++++++------
 3 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/src/content/pages/build/taco.md b/src/content/pages/build/taco.md
index 507a196..c870702 100644
--- 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
index e8b74ce..0e68d51 100644
--- 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
index c39c25d..bd20898 100644
--- 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>