[Dashboard] Remove some chakra icons, adjust IpfsUploadButton

Author: kien-ngo

apps/dashboard/src/components/connect/ConnectPlaygroundButton.tsx

@@ -1,4 +1,3 @@
-import { Icon } from "@chakra-ui/react";
 import { JavaScriptIcon } from "components/icons/brand-icons/JavaScriptIcon";
 import { ReactIcon } from "components/icons/brand-icons/ReactIcon";
 import { UnityIcon } from "components/icons/brand-icons/UnityIcon";
@@ -48,7 +47,7 @@ const ConnectPlaygroundButton = ({
 
   return (
     <Button
-      leftIcon={<Icon as={logo.icon} fill={logo.fill} />}
+      leftIcon={<logo.icon className="size-4" fill={logo.fill} />}
       border="1px solid transparent"
       variant="solid"
       fontWeight="normal"

apps/dashboard/src/components/ipfs-upload/button.tsx

@@ -1,8 +1,7 @@
-import { Icon } from "@chakra-ui/react";
 import type { UseMutationResult } from "@tanstack/react-query";
 import { FileInput } from "components/shared/FileInput";
 import { useErrorHandler } from "contexts/error-handler";
-import { FiUpload } from "react-icons/fi";
+import { UploadIcon } from "lucide-react";
 import { Button, type ButtonProps } from "tw-components";
 import type { ComponentWithChildren } from "types/component-with-children";
 
@@ -32,7 +31,7 @@ export const IpfsUploadButton: ComponentWithChildren<IpfsUploadButtonProps> = ({
         size="sm"
         variant="solid"
         aria-label="Upload to IPFS"
-        rightIcon={<Icon as={FiUpload} />}
+        rightIcon={<UploadIcon className="size-4" />}
         isLoading={storageUpload.isPending}
         {...buttonProps}
       >

apps/dashboard/src/components/product-pages/common/CodeOptionButton.tsx

@@ -1,4 +1,3 @@
-import { Icon } from "@chakra-ui/react";
 import { JavaScriptIcon } from "components/icons/brand-icons/JavaScriptIcon";
 import { ReactIcon } from "components/icons/brand-icons/ReactIcon";
 import { UnityIcon } from "components/icons/brand-icons/UnityIcon";
@@ -48,7 +47,7 @@ export const CodeOptionButton: React.FC<CodeOptionButtonProps> = ({
 
   return (
     <Button
-      leftIcon={<Icon as={logo.icon} fill={logo.fill} />}
+      leftIcon={<logo.icon className="size-4" fill={logo.fill} />}
       border="1px solid transparent"
       variant="solid"
       fontWeight="normal"

apps/dashboard/src/components/product-pages/common/ProductButton.tsx

@@ -1,6 +1,5 @@
-import { Icon } from "@chakra-ui/react";
 import { useTrack } from "hooks/analytics/useTrack";
-import { BsFillLightningChargeFill } from "react-icons/bs";
+import { ZapIcon } from "lucide-react";
 import {
   type ButtonProps,
   LinkButton,
@@ -24,9 +23,7 @@ export const ProductButton: React.FC<GeneralCtaProps> = ({
 
   return (
     <LinkButton
-      leftIcon={
-        <Icon as={BsFillLightningChargeFill} color={iconColor} boxSize={4} />
-      }
+      leftIcon={<ZapIcon className="size-4 fill-black" />}
       w="full"
       py="24px"
       onClick={() =>

apps/dashboard/src/contract-ui/components/solidity-inputs/string-input.tsx

@@ -40,7 +40,7 @@ export const SolidityStringInput: React.FC<SolidityInputWithTypeProps> = ({
         onChange={handleChange}
       />
       {showButton && (
-        <InputRightElement mx={1} width={{ base: "75px", md: "145px" }}>
+        <InputRightElement mx={1} width={{ base: "75px", md: "160px" }}>
           <IpfsUploadButton
             onUpload={(uri) => {
               if (functionName) {