chore: replaced Heroicons with corresponding lucide-react icons

[Dhruwang]

What does this PR do?

Fixes 1704

How should this be tested?

Check icons

Checklist

Required

• Filled out the "How to test" section in this PR
• Read How we Code at Formbricks
• Self-reviewed my own code
• Commented on my code in hard-to-understand bits
• Ran pnpm build
• Checked for warnings, there are none
• Removed all console.logs
• Merged the latest changes from main onto my branch with git pull origin main
• My changes don't cause any responsiveness issues

Appreciated

• If a UI change was made: Added a screen recording or screenshots to this PR
• Updated the Formbricks Docs if changes were necessary

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

2 Ignored Deployments

Name	Status	Preview	Updated (UTC)
formbricks-cloud	⬜️ Ignored (Inspect)		Mar 12, 2024 9:24am
formbricks-com	⬜️ Ignored (Inspect)		Mar 12, 2024 9:24am

[github-actions]

Thank you for following the naming conventions for pull request titles! 🙏

[review-agent-prime]

apps/web/app/(app)/environments/[environmentId]/(actionsAndAttributes)/actions/components/ActionActivityTab.tsx

Instead of using multiple ternary operators to check the type of the actionClass, you can use a switch statement. This will make your code easier to read and maintain.
Create Issue
See the diff
Checkout the fix

    let icon;
    switch(actionClass.type) {
      case 'code':
        icon = <Code2Icon className="h-5 w-5" />;
        break;
      case 'noCode':
        icon = <MousePointerClickIcon className="h-5 w-5" />;
        break;
      case 'automatic':
        icon = <SparklesIcon className="h-5 w-5" />;
        break;
      default:
        icon = null;
    }

git fetch origin && git checkout -b ReviewBot/Impro-8c5ca6e origin/ReviewBot/Impro-8c5ca6e

apps/formbricks-com/components/shared/PricingTable.tsx

There are repeated blocks of code for rendering the CheckIcon and XIcon with their respective styles. This can be extracted into a separate component to improve code readability and maintainability.
Create Issue
See the diff
Checkout the fix

    // New component
    const StatusIcon = ({ type }) => {
      const commonClasses = "rounded-full p-0.5";
      const iconProps = {
        className: commonClasses,
      };

      if (type === "check") {
        return (
          <CheckIcon
            {...iconProps}
            className={`${commonClasses} border-green-300 bg-green-100 text-green-500 dark:border-green-600 dark:bg-green-900 dark:text-green-300`}
          />
        );
      }

      if (type === "x") {
        return (
          <XIcon
            {...iconProps}
            className={`${commonClasses} border-red-300 bg-red-100 text-red-500 dark:border-red-500 dark:bg-red-300 dark:text-red-600`}
          />
        );
      }

      return null;
    };

    // Usage
    {feature.free ? <StatusIcon type="check" /> : <StatusIcon type="x" />}

git fetch origin && git checkout -b ReviewBot/Impro-viaiob3 origin/ReviewBot/Impro-viaiob3

apps/formbricks-com/components/shared/Header.tsx

Consider using dynamic imports for the icons. This way, the icons will only be loaded when they are needed, which can improve the initial load time of your application.
Create Issue
See the diff
Checkout the fix

    import dynamic from 'next/dynamic';

    const ChevronDownIcon = dynamic(() => import('lucide-react').then((mod) => mod.ChevronDownIcon));
    const ChevronRightIcon = dynamic(() => import('lucide-react').then((mod) => mod.ChevronRightIcon));
    const MenuIcon = dynamic(() => import('lucide-react').then((mod) => mod.MenuIcon));
    const XIcon = dynamic(() => import('lucide-react').then((mod) => mod.XIcon));

git fetch origin && git checkout -b ReviewBot/The-c-nl4panm origin/ReviewBot/The-c-nl4panm

[review-agent-prime]

Replaced the multiple ternary operators with a switch statement for better readability and maintainability.

Suggested change

	<div className="mr-1.5 h-4 w-4 text-slate-600">
	{actionClass.type === "code" ? (
	<CodeBracketIcon />
	<Code2Icon className="h-5 w-5" />
	) : actionClass.type === "noCode" ? (
	<CursorArrowRaysIcon />
	<MousePointerClickIcon className="h-5 w-5" />
	) : actionClass.type === "automatic" ? (
	<SparklesIcon />
	<SparklesIcon className="h-5 w-5" />
	) : null}
	</div>
	let icon;
	switch(actionClass.type) {
	case 'code':
	icon = <Code2Icon className="h-5 w-5" />;
	break;
	case 'noCode':
	icon = <MousePointerClickIcon className="h-5 w-5" />;
	break;
	case 'automatic':
	icon = <SparklesIcon className="h-5 w-5" />;
	break;
	default:
	icon = null;
	}
	<div className="mr-1.5 h-4 w-4 text-slate-600">
	{icon}
	</div>

[review-agent-prime]

The icons from the 'lucide-react' library are now dynamically imported. This change will improve the initial load time of the application as the icons will only be loaded when they are needed.

Suggested change

	import { ChevronDownIcon, ChevronRightIcon, MenuIcon, XIcon } from "lucide-react";
	import dynamic from 'next/dynamic';
	const ChevronDownIcon = dynamic(() => import('lucide-react').then((mod) => mod.ChevronDownIcon));
	const ChevronRightIcon = dynamic(() => import('lucide-react').then((mod) => mod.ChevronRightIcon));
	const MenuIcon = dynamic(() => import('lucide-react').then((mod) => mod.MenuIcon));
	const XIcon = dynamic(() => import('lucide-react').then((mod) => mod.XIcon));

[mattinannt]

@Dhruwang Wow, that are a lot of changes 😲 Thanks a lot for this; very happy we can remove a dependency from Formbricks 😊🚀