Merge pull request #1239 from starknet-io/restore-lost-changes

Restore the lost changes in rebase
starknet-io · Aug 17, 2023 · 4c140fa · 4c140fa
2 parents 6ae583e + 09d76ce
commit 4c140fa
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 4 deletions.
diff --git a/workspaces/website/src/components/Card/GridCard.tsx b/workspaces/website/src/components/Card/GridCard.tsx
@@ -74,7 +74,7 @@ type ImageProps = {
 const Image = ({ url, imageAlt, type }: ImageProps) => {
   const size = useBreakpointValue({ base: '581', md: '430px', xl: '320px' });
   const cloudflareImage = `https://starknet.io/cdn-cgi/image/width=${size},height=auto,format=auto${url}`;
-  const isProd  = import.meta.env.VITE_ALGOLIA_INDEX === "production";
+  const isProd = import.meta.env.VITE_ALGOLIA_INDEX === "production";
   const renderImage = () => {
     switch (type) {
       case "github":

diff --git a/workspaces/website/src/components/Card/ListCard.tsx b/workspaces/website/src/components/Card/ListCard.tsx
@@ -49,6 +49,9 @@ type Props = {
 } & BoxProps;
 
 export const ListCard = (props: Props) => {
+  const cloudflareImage = `https://starknet.io/cdn-cgi/image/width=80px,height=auto,format=auto${props.image}`;
+  const isProd  = import.meta.env.VITE_ALGOLIA_INDEX === "production";
+
   return (
     <Box maxW="5xl">
       <LinkBox
@@ -83,7 +86,7 @@ export const ListCard = (props: Props) => {
                   <Img
                     width="full"
                     height="full"
-                    src={props.image}
+                    src={isProd ? cloudflareImage : props.image}
                     title={props.title}
                     objectFit="contain"
                   />

diff --git a/workspaces/website/src/components/Card/components/ImageIconBox.tsx b/workspaces/website/src/components/Card/components/ImageIconBox.tsx
@@ -1,5 +1,5 @@
 import {
-  Box
+  Box, useBreakpointValue
 } from "@chakra-ui/react";
 import "../style.css";
 import {
@@ -105,14 +105,17 @@ export const ImageIconBox = ({
   title
 }: Props) => {
   let ComponentToRender;
+  const featuredImageSize = useBreakpointValue({ base: '430px', sm: '464px' });
+  const cloudflareImage = `https://starknet.io/cdn-cgi/image/width=${featuredImageSize},height=auto,format=auto${icon}`;
+  const isProd  = import.meta.env.VITE_ALGOLIA_INDEX === "production";
   const iconProps: CardIconProps = {
     gradientColor1: colors[color]?.iconGradientColor1,
     gradientColor2: colors[color]?.iconGradientColor2,
     filter: variant === "dapp" ? "drop-shadow(28.0494px 28.0494px 52.5926px rgba(0, 0, 0, 0.25)) drop-shadow(7.01235px 10.5185px 24.5432px rgba(0, 0, 0, 0.25))" : "none",
     borderRadius: variant === "dapp" ? "28.0494px" : "0px",
     imagePadding: variant === "large_card" ? "0px" : "40px 0 0 32px",
     communityCardPadding: {base: "0", md: "24px 0px 24px 36px"},
-    icon: icon ?? '',
+    icon: icon ? (isProd ? cloudflareImage : icon) : '',
     alt: title ?? ''
   }
   switch (icon) {