diff --git a/public/assets/internal_evaluation.svg b/public/assets/internal_evaluation.svg
deleted file mode 100644
index cd707d6fe7..0000000000
--- a/public/assets/internal_evaluation.svg
+++ /dev/null
@@ -1,47 +0,0 @@
-
\ No newline at end of file
diff --git a/workspaces/website/src/components/Card/DisplayCard.tsx b/workspaces/website/src/components/Card/DisplayCard.tsx
index c10e6f041c..8a5e61ac9a 100644
--- a/workspaces/website/src/components/Card/DisplayCard.tsx
+++ b/workspaces/website/src/components/Card/DisplayCard.tsx
@@ -1,12 +1,9 @@
-import {
- Box,
- Stack,
- BoxProps,
- Text,
- Circle,
- Img,
- useColorMode,
-} from "@chakra-ui/react";
+import { Box, Stack, BoxProps, Text, Circle } from "@chakra-ui/react";
+import { Application } from "@ui/Icons/DisplayCardIcons/Application";
+import { GrantDeliverables } from "@ui/Icons/DisplayCardIcons/GrantDeliverables";
+import { InternalEvaluation } from "@ui/Icons/DisplayCardIcons/InternalEvaluation";
+import { Onboarding } from "@ui/Icons/DisplayCardIcons/Onboarding";
+import { Results } from "@ui/Icons/DisplayCardIcons/Results";
import { Heading } from "@ui/Typography/Heading";
type Props = {
@@ -21,16 +18,14 @@ type Props = {
} & BoxProps;
const images = {
- Application: "/assets/application.svg",
- "Internal Evaluation": "/assets/internal_evaluation.svg",
- Results: "/assets/results.svg",
- Onboarding: "/assets/onboarding.svg",
- "Grant Deliverables": "/assets/grant_deliverables.svg",
+ Application: ,
+ "Internal Evaluation": ,
+ Results: ,
+ Onboarding: ,
+ "Grant Deliverables": ,
};
export const DisplayCard = (props: Props) => {
- const { colorMode } = useColorMode();
-
return (
{
height="80px"
borderRadius="8px"
overflow="hidden"
+ color="#0C0C4F"
+ _dark={{ color: "white" }}
marginBottom={{ base: "16px", md: "0" }}
>
-
+ {images[props?.title]}
diff --git a/public/assets/application.svg b/workspaces/website/src/components/Icons/DisplayCardIcons/Application.tsx
similarity index 64%
rename from public/assets/application.svg
rename to workspaces/website/src/components/Icons/DisplayCardIcons/Application.tsx
index a0b7e27f4a..06ef3d2345 100644
--- a/public/assets/application.svg
+++ b/workspaces/website/src/components/Icons/DisplayCardIcons/Application.tsx
@@ -1,77 +1,175 @@
-
+ );
+};
diff --git a/workspaces/website/src/components/Icons/DisplayCardIcons/GrantDeliverables.tsx b/workspaces/website/src/components/Icons/DisplayCardIcons/GrantDeliverables.tsx
new file mode 100644
index 0000000000..b7aa776d24
--- /dev/null
+++ b/workspaces/website/src/components/Icons/DisplayCardIcons/GrantDeliverables.tsx
@@ -0,0 +1,134 @@
+import { HTMLChakraProps } from "@chakra-ui/react";
+
+type Props = HTMLChakraProps<"svg">;
+
+export const GrantDeliverables = ({}: Props) => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/workspaces/website/src/components/Icons/DisplayCardIcons/InternalEvaluation.tsx b/workspaces/website/src/components/Icons/DisplayCardIcons/InternalEvaluation.tsx
new file mode 100644
index 0000000000..ccfa9cfe22
--- /dev/null
+++ b/workspaces/website/src/components/Icons/DisplayCardIcons/InternalEvaluation.tsx
@@ -0,0 +1,96 @@
+import { HTMLChakraProps } from "@chakra-ui/react";
+
+type Props = HTMLChakraProps<"svg">;
+
+export const InternalEvaluation = ({}: Props) => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/public/assets/onboarding.svg b/workspaces/website/src/components/Icons/DisplayCardIcons/Onboarding.tsx
similarity index 94%
rename from public/assets/onboarding.svg
rename to workspaces/website/src/components/Icons/DisplayCardIcons/Onboarding.tsx
index 6df0b286ff..396f64bb6d 100644
--- a/public/assets/onboarding.svg
+++ b/workspaces/website/src/components/Icons/DisplayCardIcons/Onboarding.tsx
@@ -1,11 +1,32 @@
-
- ;
+
+export const Onboarding = ({}: Props) => {
+ return (
+
+
-
+
-
+
-
\ No newline at end of file
+ fill="currentColor"
+ />
+
+ );
+};
diff --git a/public/assets/results.svg b/workspaces/website/src/components/Icons/DisplayCardIcons/Results.tsx
similarity index 76%
rename from public/assets/results.svg
rename to workspaces/website/src/components/Icons/DisplayCardIcons/Results.tsx
index 0a5c113721..574d36273d 100644
--- a/public/assets/results.svg
+++ b/workspaces/website/src/components/Icons/DisplayCardIcons/Results.tsx
@@ -1,17 +1,40 @@
-
- ;
+
+export const Results = ({}: Props) => {
+ return (
+
+
-
+
-
+
-
+
-
+
-
\ No newline at end of file
+ fill="currentColor"
+ />
+
+ );
+};