From 7b40f2e8e40d7e4808a4d689f394f375b844ba0f Mon Sep 17 00:00:00 2001 From: kien-ngo Date: Fri, 27 Sep 2024 01:24:00 +0000 Subject: [PATCH] [Dashboard] Replace JS and TS icons (#4812) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Problem solved Short description of the bug fixed or feature added --- ## PR-Codex overview This PR focuses on replacing existing icon imports for `JavaScript` and `TypeScript` with custom icon components, enhancing the visual representation in the application. ### Detailed summary - Replaced `SiJavascript` with `JavaScriptIcon` in `ConnectPlaygroundButton.tsx`, `CodeOptionButton.tsx`, `CodeSegment.tsx`. - Replaced `SiTypescript` with `TypeScriptIcon` in `SupportedPlatformLink.tsx`, `ConnectSDKCard.tsx`, `CodeSegment.tsx`. - Added new components: `JavaScriptIcon.tsx` and `TypeScriptIcon.tsx` for custom icons. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` --- .../connect/ConnectPlaygroundButton.tsx | 4 ++-- .../contract-tabs/code/CodeSegment.tsx | 8 ++++---- .../icons/brand-icons/JavaScriptIcon.tsx | 18 ++++++++++++++++++ .../icons/brand-icons/TypeScriptIcon.tsx | 18 ++++++++++++++++++ .../product-pages/common/CodeOptionButton.tsx | 4 ++-- .../src/components/shared/ConnectSDKCard.tsx | 4 ++-- .../wallets/SupportedPlatformLink.tsx | 4 ++-- 7 files changed, 48 insertions(+), 12 deletions(-) create mode 100644 apps/dashboard/src/components/icons/brand-icons/JavaScriptIcon.tsx create mode 100644 apps/dashboard/src/components/icons/brand-icons/TypeScriptIcon.tsx diff --git a/apps/dashboard/src/components/connect/ConnectPlaygroundButton.tsx b/apps/dashboard/src/components/connect/ConnectPlaygroundButton.tsx index 1a78db5b44b..42ec77c7f36 100644 --- a/apps/dashboard/src/components/connect/ConnectPlaygroundButton.tsx +++ b/apps/dashboard/src/components/connect/ConnectPlaygroundButton.tsx @@ -1,14 +1,14 @@ import { Icon } from "@chakra-ui/react"; -import { SiJavascript } from "@react-icons/all-files/si/SiJavascript"; import { SiReact } from "@react-icons/all-files/si/SiReact"; import { SiUnity } from "@react-icons/all-files/si/SiUnity"; +import { JavaScriptIcon } from "components/icons/brand-icons/JavaScriptIcon"; import { useTrack } from "hooks/analytics/useTrack"; import type { Dispatch, ReactNode, SetStateAction } from "react"; import { Button } from "tw-components"; const LOGO_OPTIONS = { javascript: { - icon: SiJavascript, + icon: JavaScriptIcon, fill: "yellow", }, react: { diff --git a/apps/dashboard/src/components/contract-tabs/code/CodeSegment.tsx b/apps/dashboard/src/components/contract-tabs/code/CodeSegment.tsx index dd4eb43181c..ddd4e6170b7 100644 --- a/apps/dashboard/src/components/contract-tabs/code/CodeSegment.tsx +++ b/apps/dashboard/src/components/contract-tabs/code/CodeSegment.tsx @@ -1,8 +1,8 @@ import { ButtonGroup, Flex, Icon, Stack } from "@chakra-ui/react"; -import { SiJavascript } from "@react-icons/all-files/si/SiJavascript"; import { SiReact } from "@react-icons/all-files/si/SiReact"; -import { SiTypescript } from "@react-icons/all-files/si/SiTypescript"; import { SiUnity } from "@react-icons/all-files/si/SiUnity"; +import { JavaScriptIcon } from "components/icons/brand-icons/JavaScriptIcon"; +import { TypeScriptIcon } from "components/icons/brand-icons/TypeScriptIcon"; import { type Dispatch, type SetStateAction, useMemo } from "react"; import { Button, CodeBlock } from "tw-components"; import type { ComponentWithChildren } from "types/component-with-children"; @@ -16,13 +16,13 @@ const Environments: SupportedEnvironment[] = [ { environment: "javascript", title: "JavaScript", - icon: SiJavascript, + icon: JavaScriptIcon, colorScheme: "yellow", }, { environment: "typescript", title: "TypeScript", - icon: SiTypescript, + icon: TypeScriptIcon, colorScheme: "blue", }, { diff --git a/apps/dashboard/src/components/icons/brand-icons/JavaScriptIcon.tsx b/apps/dashboard/src/components/icons/brand-icons/JavaScriptIcon.tsx new file mode 100644 index 00000000000..f251c947435 --- /dev/null +++ b/apps/dashboard/src/components/icons/brand-icons/JavaScriptIcon.tsx @@ -0,0 +1,18 @@ +import type { SVGProps } from "react"; + +export const JavaScriptIcon = (props: SVGProps) => { + return ( + + JavaScript + + + ); +}; diff --git a/apps/dashboard/src/components/icons/brand-icons/TypeScriptIcon.tsx b/apps/dashboard/src/components/icons/brand-icons/TypeScriptIcon.tsx new file mode 100644 index 00000000000..ec6d9168173 --- /dev/null +++ b/apps/dashboard/src/components/icons/brand-icons/TypeScriptIcon.tsx @@ -0,0 +1,18 @@ +import type { SVGProps } from "react"; + +export const TypeScriptIcon = (props: SVGProps) => { + return ( + + TypeScript + + + ); +}; diff --git a/apps/dashboard/src/components/product-pages/common/CodeOptionButton.tsx b/apps/dashboard/src/components/product-pages/common/CodeOptionButton.tsx index 486a26a9d5f..d62dbb212b9 100644 --- a/apps/dashboard/src/components/product-pages/common/CodeOptionButton.tsx +++ b/apps/dashboard/src/components/product-pages/common/CodeOptionButton.tsx @@ -1,7 +1,7 @@ import { Icon } from "@chakra-ui/react"; -import { SiJavascript } from "@react-icons/all-files/si/SiJavascript"; import { SiReact } from "@react-icons/all-files/si/SiReact"; import { SiUnity } from "@react-icons/all-files/si/SiUnity"; +import { JavaScriptIcon } from "components/icons/brand-icons/JavaScriptIcon"; import { useTrack } from "hooks/analytics/useTrack"; import type { Dispatch, SetStateAction } from "react"; import { flushSync } from "react-dom"; @@ -9,7 +9,7 @@ import { Button, type ButtonProps } from "tw-components"; export const LOGO_OPTIONS = { javascript: { - icon: SiJavascript, + icon: JavaScriptIcon, fill: "yellow", }, react: { diff --git a/apps/dashboard/src/components/shared/ConnectSDKCard.tsx b/apps/dashboard/src/components/shared/ConnectSDKCard.tsx index 581780c7b56..0945ae05d43 100644 --- a/apps/dashboard/src/components/shared/ConnectSDKCard.tsx +++ b/apps/dashboard/src/components/shared/ConnectSDKCard.tsx @@ -1,6 +1,6 @@ import { SiReact } from "@react-icons/all-files/si/SiReact"; -import { SiTypescript } from "@react-icons/all-files/si/SiTypescript"; import { SiUnity } from "@react-icons/all-files/si/SiUnity"; +import { TypeScriptIcon } from "components/icons/brand-icons/TypeScriptIcon"; import Link from "next/link"; import { SiUnrealengine } from "react-icons/si"; import { SiDotnet } from "react-icons/si"; @@ -21,7 +21,7 @@ export function ConnectSDKCard({