Lint using tsc; fix type errors

2024-12-22 04:17:44 +00:00 · 2024-04-11 18:10:39 -05:00 · 2024-04-11 18:10:39 -05:00 · 2274e8d145
commit 2274e8d145
parent f8d706233e
233 changed files with 613 additions and 3545 deletions
--- a/package.json
+++ b/package.json
@ -4,15 +4,15 @@
  "workspaces": [
    "packages/*"
  ],
-  "dependencies": {},
  "devDependencies": {
+    "depcheck": "^1.4.2",
    "husky": "^8.0.3",
    "lerna": "^8.0.0",
-    "depcheck": "^1.4.2"
+    "patch-package": "^8.0.0"
  },
  "scripts": {
    "prepare": "husky install",
    "build": "lerna run build --stream",
-    "lint": "lerna run lint --stream -- --max-warnings=0"
+    "lint": "lerna run lint --stream"
  }
-}
+}
--- a/packages/backend/package.json
+++ b/packages/backend/package.json
@ -10,6 +10,7 @@
    "@types/debug": "^4.1.5",
    "@types/express": "^4.17.21",
    "@types/node": "^20.11.0",
+    "@types/semver": "^7.5.8",
    "apollo-server-core": "^3.13.0",
    "apollo-server-express": "^3.13.0",
    "cors": "^2.8.5",
@ -37,6 +38,7 @@
    "build": "yarn clean && tsc && yarn copy-assets",
    "format": "prettier --write .",
    "format:check": "prettier --check .",
+    "lint": "tsc --noEmit",
    "test:registry:init": "DEBUG=snowball:* ts-node ./test/initialize-registry.ts",
    "test:registry:publish-deploy-records": "DEBUG=snowball:* ts-node ./test/publish-deploy-records.ts",
    "test:db:load:fixtures": "DEBUG=snowball:* ts-node ./test/initialize-db.ts",
@ -50,4 +52,4 @@
    "prettier": "^3.1.1",
    "workspace": "^0.0.1-preview.1"
  }
-}
+}
--- a/packages/frontend/.eslintrc.cjs
+++ b/packages/frontend/.eslintrc.cjs
@ -15,4 +15,4 @@ module.exports = {
      { allowConstantExport: true },
    ],
  },
-}
+};
--- a/packages/frontend/README.md
+++ b/packages/frontend/README.md
@ -22,7 +22,7 @@ export default {
    project: ['./tsconfig.json', './tsconfig.node.json'],
    tsconfigRootDir: __dirname,
  },
-}
+};
 ```

 - Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
--- a/packages/frontend/index.html
+++ b/packages/frontend/index.html
@ -6,23 +6,9 @@
    <meta name="description" content="snowball tools dashboard" />
    <link rel="icon" href="/favicon.ico" />
    <link rel="apple-touch-icon" href="/logo192.png" />
-    <link
-      rel="apple-touch-icon"
-      sizes="180x180"
-      href="/apple-touch-icon.png"
-    />
-    <link
-      rel="icon"
-      type="image/png"
-      sizes="32x32"
-      href="/favicon-32x32.png"
-    />
-    <link
-      rel="icon"
-      type="image/png"
-      sizes="16x16"
-      href="/favicon-16x16.png"
-    />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
    <link rel="manifest" href="/site.webmanifest" />
    <meta name="msapplication-TileColor" content="#2d89ef" />
    <meta name="theme-color" content="#ffffff" />
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@ -6,12 +6,12 @@
  "scripts": {
    "dev": "vite --port 3000",
    "build": "tsc && vite build",
+    "lint": "tsc --noEmit",
    "preview": "vite preview"
  },
  "dependencies": {
    "@fontsource-variable/jetbrains-mono": "^5.0.19",
    "@fontsource/inter": "^5.0.16",
-    "@material-tailwind/react": "^2.1.7",
    "@radix-ui/react-avatar": "^1.0.4",
    "@radix-ui/react-checkbox": "^1.0.4",
    "@radix-ui/react-dialog": "^1.0.5",
@ -25,6 +25,7 @@
    "@snowballtools/auth-lit": "/Users/rabbit-m2/p/snowball/snowball-ts-sdk/packages/auth-lit",
    "@snowballtools/js-sdk": "/Users/rabbit-m2/p/snowball/snowball-ts-sdk/packages/js-sdk",
    "@snowballtools/link-lit-alchemy-light": "/Users/rabbit-m2/p/snowball/snowball-ts-sdk/packages/link-lit-alchemy-light",
+    "@snowballtools/material-tailwind-react-fork": "^2.1.10",
    "@snowballtools/smartwallet-alchemy-light": "/Users/rabbit-m2/p/snowball/snowball-ts-sdk/packages/smartwallet-alchemy-light",
    "@snowballtools/types": "/Users/rabbit-m2/p/snowball/snowball-ts-sdk/packages/types",
    "@snowballtools/utils": "/Users/rabbit-m2/p/snowball/snowball-ts-sdk/packages/utils",
@ -34,7 +35,7 @@
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.68",
-    "@types/react": "^18.2.42",
+    "@types/react": "^18.2.77",
    "@types/react-dom": "^18.2.17",
    "@walletconnect/ethereum-provider": "^2.12.2",
    "@web3modal/siwe": "^4.0.5",
@ -79,4 +80,4 @@
    "typescript": "^5.3.3",
    "vite": "^5.2.0"
  }
-}
+}
--- a/packages/frontend/postcss.config.js
+++ b/packages/frontend/postcss.config.js
@ -3,4 +3,4 @@ export default {
    tailwindcss: {},
    autoprefixer: {},
  },
-}
+};
--- a/packages/frontend/src/App.test.tsx
+++ b/packages/frontend/src/App.test.tsx
@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import App from './App';

--- a/packages/frontend/src/App.tsx
+++ b/packages/frontend/src/App.tsx
@ -1,51 +1,50 @@
-import React from "react";
-import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';

-import Projects from "./pages/org-slug";
-import Settings from "./pages/org-slug/Settings";
+import Projects from './pages/org-slug';
+import Settings from './pages/org-slug/Settings';
 import {
  projectsRoutesWithSearch,
  projectsRoutesWithoutSearch,
-} from "./pages/org-slug/projects/routes";
-import ProjectSearchLayout from "./layouts/ProjectSearch";
-import Index from "./pages";
-import Login from "./pages/Login";
-import { DashboardLayout } from "./pages/org-slug/layout";
+} from './pages/org-slug/projects/routes';
+import ProjectSearchLayout from './layouts/ProjectSearch';
+import Index from './pages';
+import Login from './pages/Login';
+import { DashboardLayout } from './pages/org-slug/layout';

 const router = createBrowserRouter([
  {
-    path: ":orgSlug",
+    path: ':orgSlug',
    element: <DashboardLayout />,
    children: [
      {
        element: <ProjectSearchLayout />,
        children: [
          {
-            path: "",
+            path: '',
            element: <Projects />,
          },
          {
-            path: "projects",
+            path: 'projects',
            children: projectsRoutesWithSearch,
          },
        ],
      },
      {
-        path: "settings",
+        path: 'settings',
        element: <Settings />,
      },
      {
-        path: "projects",
+        path: 'projects',
        children: projectsRoutesWithoutSearch,
      },
    ],
  },
  {
-    path: "/",
+    path: '/',
    element: <Index />,
  },
  {
-    path: "/login",
+    path: '/login',
    element: <Login />,
  },
 ]);
--- a/packages/frontend/src/assets/templates.ts
+++ b/packages/frontend/src/assets/templates.ts
@ -1,37 +1,37 @@
 export default [
  {
-    id: "1",
-    name: "Progressive Web App (PWA)",
-    icon: "pwa",
+    id: '1',
+    name: 'Progressive Web App (PWA)',
+    icon: 'pwa',
    repoFullName: `${import.meta.env.VITE_GITHUB_PWA_TEMPLATE_REPO}`,
    isComingSoon: false,
  },
  {
-    id: "2",
-    name: "Image Upload PWA",
-    icon: "pwa",
+    id: '2',
+    name: 'Image Upload PWA',
+    icon: 'pwa',
    repoFullName: `${import.meta.env.VITE_GITHUB_IMAGE_UPLOAD_PWA_TEMPLATE_REPO}`,
    isComingSoon: false,
  },
  {
-    id: "3",
-    name: "Kotlin",
-    icon: "kotlin",
-    repoFullName: "",
+    id: '3',
+    name: 'Kotlin',
+    icon: 'kotlin',
+    repoFullName: '',
    isComingSoon: true,
  },
  {
-    id: "4",
-    name: "React Native",
-    icon: "react-native",
-    repoFullName: "",
+    id: '4',
+    name: 'React Native',
+    icon: 'react-native',
+    repoFullName: '',
    isComingSoon: true,
  },
  {
-    id: "5",
-    name: "Swift",
-    icon: "swift",
-    repoFullName: "",
+    id: '5',
+    name: 'Swift',
+    icon: 'swift',
+    repoFullName: '',
    isComingSoon: true,
  },
 ];
--- a/packages/frontend/src/components/DatePicker.tsx
+++ b/packages/frontend/src/components/DatePicker.tsx
@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { format } from 'date-fns';
 import {
  DayPicker,
@ -12,7 +12,7 @@ import {
  Popover,
  PopoverContent,
  PopoverHandler,
-} from '@material-tailwind/react';
+} from '@snowballtools/material-tailwind-react-fork';

 import HorizontalLine from './HorizontalLine';

@ -120,14 +120,11 @@ const DatePicker = ({
      handler={(value) => setIsOpen(value)}
    >
      <PopoverHandler>
-        <Input
-          onChange={() => null}
-          value={inputValue}
-          crossOrigin={undefined}
-        />
+        <Input onChange={() => null} value={inputValue} />
      </PopoverHandler>
      {/* TODO: Figure out what placeholder is for */}
-      <PopoverContent placeholder={''}>
+      {/* @ts-ignore */}
+      <PopoverContent>
        {mode === 'single' && (
          <DayPicker
            mode="single"
@ -152,7 +149,6 @@ const DatePicker = ({
                className="rounded-full mr-2"
                variant="outlined"
                onClick={() => setIsOpen(false)}
-                placeholder={''}
              >
                Cancel
              </Button>
@ -162,7 +158,6 @@ const DatePicker = ({
                className="rounded-full"
                color="gray"
                onClick={() => handleRangeSelect()}
-                placeholder={''}
              >
                Select
              </Button>
--- a/packages/frontend/src/components/Dropdown.tsx
+++ b/packages/frontend/src/components/Dropdown.tsx
@ -1,4 +1,3 @@
-import React from 'react';
 import {
  default as ReactDropdown,
  Option as ReactDropdownOption,
--- a/packages/frontend/src/components/FormatMilliSecond.tsx
+++ b/packages/frontend/src/components/FormatMilliSecond.tsx
@ -1,5 +1,5 @@
 import { Duration } from 'luxon';
-import React, { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithoutRef } from 'react';
 import { cn } from 'utils/classnames';

 export interface FormatMilliSecondProps
--- a/packages/frontend/src/components/HorizontalLine.tsx
+++ b/packages/frontend/src/components/HorizontalLine.tsx
@ -1,5 +1,3 @@
-import React from 'react';
-
 const HorizontalLine = () => {
  return <hr className="h-px bg-gray-100 border-0" />;
 };
--- a/packages/frontend/src/components/Logo.tsx
+++ b/packages/frontend/src/components/Logo.tsx
@ -1,4 +1,3 @@
-import React from 'react';
 import { Link } from 'react-router-dom';
 import { Heading } from './shared/Heading';

--- a/packages/frontend/src/components/Stepper.tsx
+++ b/packages/frontend/src/components/Stepper.tsx
@ -1,9 +1,8 @@
-import React from "react";
-import { StepperNav } from "./VerticalStepper";
+import { StepperNav } from './VerticalStepper';

-const COLOR_COMPLETED = "#059669";
-const COLOR_ACTIVE = "#CFE6FC";
-const COLOR_NOT_STARTED = "#F1F5F9";
+const COLOR_COMPLETED = '#059669';
+const COLOR_ACTIVE = '#CFE6FC';
+const COLOR_NOT_STARTED = '#F1F5F9';

 interface StepperValue {
  step: number;
@ -25,8 +24,8 @@ const Stepper = ({ activeStep, stepperValues }: StepperProps) => {
            <div
              className={`text-sm ${
                activeStep === stepperValue.step
-                  ? "text-black font-semibold"
-                  : "text-gray-600"
+                  ? 'text-black font-semibold'
+                  : 'text-gray-600'
              }`}
            >
              {stepperValue.label}
--- a/packages/frontend/src/components/StopWatch.tsx
+++ b/packages/frontend/src/components/StopWatch.tsx
@ -1,4 +1,3 @@
-import React from 'react';
 import { useStopwatch } from 'react-timer-hook';

 import FormatMillisecond, { FormatMilliSecondProps } from './FormatMilliSecond';
--- a/packages/frontend/src/components/VerticalStepper.tsx
+++ b/packages/frontend/src/components/VerticalStepper.tsx
@ -1,4 +1,3 @@
-import React from 'react';
 import * as CSS from 'csstype';

 //
--- a/packages/frontend/src/components/projects/Dialog/CancelDeploymentDialog.tsx
+++ b/packages/frontend/src/components/projects/Dialog/CancelDeploymentDialog.tsx
@ -1,7 +1,6 @@
 import ConfirmDialog, {
  ConfirmDialogProps,
 } from 'components/shared/ConfirmDialog';
-import React from 'react';

 interface CancelDeploymentDialogProps extends ConfirmDialogProps {}

--- a/packages/frontend/src/components/projects/Dialog/ChangeStateToProductionDialog.tsx
+++ b/packages/frontend/src/components/projects/Dialog/ChangeStateToProductionDialog.tsx
@ -2,7 +2,7 @@ import ConfirmDialog, {
  ConfirmDialogProps,
 } from 'components/shared/ConfirmDialog';
 import { Deployment, Domain } from 'gql-client';
-import React from 'react';
+
 import DeploymentDialogBodyCard from 'components/projects/project/deployments/DeploymentDialogBodyCard';
 import { Button } from 'components/shared/Button';
 import {
--- a/packages/frontend/src/components/projects/Dialog/DeleteDomainDialog.tsx
+++ b/packages/frontend/src/components/projects/Dialog/DeleteDomainDialog.tsx
@ -1,7 +1,6 @@
 import ConfirmDialog, {
  ConfirmDialogProps,
 } from 'components/shared/ConfirmDialog';
-import React from 'react';

 interface DeleteDomainDialogProps extends ConfirmDialogProps {
  projectName: string;
--- a/packages/frontend/src/components/projects/Dialog/DeleteVariableDialog.tsx
+++ b/packages/frontend/src/components/projects/Dialog/DeleteVariableDialog.tsx
@ -1,7 +1,6 @@
 import ConfirmDialog, {
  ConfirmDialogProps,
 } from 'components/shared/ConfirmDialog';
-import React from 'react';

 interface DeleteVariableDialogProps extends ConfirmDialogProps {
  variableKey: string;
--- a/packages/frontend/src/components/projects/Dialog/DeleteWebhookDialog.tsx
+++ b/packages/frontend/src/components/projects/Dialog/DeleteWebhookDialog.tsx
@ -1,7 +1,6 @@
 import ConfirmDialog, {
  ConfirmDialogProps,
 } from 'components/shared/ConfirmDialog';
-import React from 'react';

 interface DeleteWebhookDialogProps extends ConfirmDialogProps {
  webhookUrl: string;
--- a/packages/frontend/src/components/projects/Dialog/DisconnectRepositoryDialog.tsx
+++ b/packages/frontend/src/components/projects/Dialog/DisconnectRepositoryDialog.tsx
@ -1,7 +1,6 @@
 import ConfirmDialog, {
  ConfirmDialogProps,
 } from 'components/shared/ConfirmDialog';
-import React from 'react';

 interface DisconnectRepositoryDialogProps extends ConfirmDialogProps {}

--- a/packages/frontend/src/components/projects/Dialog/RemoveMemberDialog.tsx
+++ b/packages/frontend/src/components/projects/Dialog/RemoveMemberDialog.tsx
@ -1,7 +1,7 @@
 import ConfirmDialog, {
  ConfirmDialogProps,
 } from 'components/shared/ConfirmDialog';
-import React from 'react';
+
 import { formatAddress } from 'utils/format';

 interface RemoveMemberDialogProps extends ConfirmDialogProps {
--- a/packages/frontend/src/components/projects/Dialog/TransferProjectDialog.tsx
+++ b/packages/frontend/src/components/projects/Dialog/TransferProjectDialog.tsx
@ -1,7 +1,6 @@
 import ConfirmDialog, {
  ConfirmDialogProps,
 } from 'components/shared/ConfirmDialog';
-import React from 'react';

 interface TransferProjectDialogProps extends ConfirmDialogProps {
  projectName: string;
--- a/packages/frontend/src/components/projects/ProjectCard/ProjectCard.tsx
+++ b/packages/frontend/src/components/projects/ProjectCard/ProjectCard.tsx
@ -3,12 +3,8 @@ import {
  MenuHandler,
  MenuItem,
  MenuList,
-} from '@material-tailwind/react';
-import React, {
-  ComponentPropsWithoutRef,
-  MouseEvent,
-  useCallback,
-} from 'react';
+} from '@snowballtools/material-tailwind-react-fork';
+import { ComponentPropsWithoutRef, MouseEvent, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Project } from 'gql-client';
 import { Avatar } from 'components/shared/Avatar';
@ -95,11 +91,9 @@ export const ProjectCard = ({
                <HorizontalDotIcon />
              </Button>
            </MenuHandler>
-            <MenuList placeholder={''}>
-              <MenuItem placeholder={''}>Project settings</MenuItem>
-              <MenuItem className="text-red-500" placeholder={''}>
-                Delete project
-              </MenuItem>
+            <MenuList>
+              <MenuItem>Project settings</MenuItem>
+              <MenuItem className="text-red-500">Delete project</MenuItem>
            </MenuList>
          </Menu>
        </div>
--- a/packages/frontend/src/components/projects/ProjectSearchBar/ProjectSearchBar.tsx
+++ b/packages/frontend/src/components/projects/ProjectSearchBar/ProjectSearchBar.tsx
@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useCombobox } from 'downshift';
 import { Project } from 'gql-client';
 import { useDebounce } from 'usehooks-ts';
--- a/packages/frontend/src/components/projects/ProjectSearchBar/ProjectSearchBarDialog.tsx
+++ b/packages/frontend/src/components/projects/ProjectSearchBar/ProjectSearchBarDialog.tsx
@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import * as Dialog from '@radix-ui/react-dialog';
 import { Button } from 'components/shared/Button';
 import { CrossIcon, SearchIcon } from 'components/shared/CustomIcon';
--- a/packages/frontend/src/components/projects/ProjectSearchBar/ProjectSearchBarEmpty.tsx
+++ b/packages/frontend/src/components/projects/ProjectSearchBar/ProjectSearchBarEmpty.tsx
@ -1,5 +1,5 @@
 import { InfoRoundFilledIcon } from 'components/shared/CustomIcon';
-import React, { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithoutRef } from 'react';
 import { cn } from 'utils/classnames';

 interface ProjectSearchBarEmptyProps extends ComponentPropsWithoutRef<'div'> {}
--- a/packages/frontend/src/components/projects/ProjectSearchBar/ProjectSearchBarItem.tsx
+++ b/packages/frontend/src/components/projects/ProjectSearchBar/ProjectSearchBarItem.tsx
@ -1,7 +1,7 @@
 import { Avatar } from 'components/shared/Avatar';
 import { Overwrite, UseComboboxGetItemPropsReturnValue } from 'downshift';
 import { Project } from 'gql-client';
-import React, { ComponentPropsWithoutRef, forwardRef } from 'react';
+import { ComponentPropsWithoutRef, forwardRef } from 'react';
 import { OmitCommon } from 'types/common';
 import { cn } from 'utils/classnames';
 import { getInitials } from 'utils/geInitials';
--- a/packages/frontend/src/components/projects/create/ConnectAccount.tsx
+++ b/packages/frontend/src/components/projects/create/ConnectAccount.tsx
@ -1,21 +1,21 @@
-import React from "react";
-import OauthPopup from "react-oauth-popup";
+import React from 'react';
+import OauthPopup from 'react-oauth-popup';

-import { useGQLClient } from "../../../context/GQLClientContext";
-import { Button } from "../../shared/Button";
+import { useGQLClient } from '../../../context/GQLClientContext';
+import { Button } from '../../shared/Button';
 import {
  GitIcon,
  EllipsesIcon,
  SnowballIcon,
  GithubIcon,
  GitTeaIcon,
-} from "../../shared/CustomIcon";
-import { useToast } from "../../shared/Toast";
-import { IconWithFrame } from "../../shared/IconWithFrame";
-import { Heading } from "../../shared/Heading";
-import { MockConnectGitCard } from "./MockConnectGitCard";
+} from '../../shared/CustomIcon';
+import { useToast } from '../../shared/Toast';
+import { IconWithFrame } from '../../shared/IconWithFrame';
+import { Heading } from '../../shared/Heading';
+import { MockConnectGitCard } from './MockConnectGitCard';

-const SCOPES = "repo user";
+const SCOPES = 'repo user';
 const GITHUB_OAUTH_URL = `https://github.com/login/oauth/authorize?client_id=${
  import.meta.env.VITE_GITHUB_CLIENT_ID
 }&scope=${encodeURIComponent(SCOPES)}`;
@ -39,9 +39,9 @@ const ConnectAccount: React.FC<ConnectAccountInterface> = ({
    onToken(token);
    toast({
      onDismiss: dismiss,
-      id: "connected-to-github",
-      title: "The Git account is connected.",
-      variant: "success",
+      id: 'connected-to-github',
+      title: 'The Git account is connected.',
+      variant: 'success',
    });
  };

--- a/packages/frontend/src/components/projects/create/ConnectAccountTabPanel.tsx
+++ b/packages/frontend/src/components/projects/create/ConnectAccountTabPanel.tsx
@ -1,6 +1,6 @@
-import React from "react";
+import React from 'react';

-import { Tabs } from "components/shared/Tabs";
+import { Tabs } from 'components/shared/Tabs';

 const ConnectAccountTabPanel: React.FC = () => {
  return (
@ -11,8 +11,8 @@ const ConnectAccountTabPanel: React.FC = () => {
    >
      <Tabs.List>
        {[
-          { title: "Import a repository" },
-          { title: "Start with a template" },
+          { title: 'Import a repository' },
+          { title: 'Start with a template' },
        ].map(({ title }, index) => (
          <Tabs.Trigger value={title} key={index}>
            {title}
--- a/packages/frontend/src/components/projects/create/Deploy.tsx
+++ b/packages/frontend/src/components/projects/create/Deploy.tsx
@ -1,17 +1,17 @@
-import React, { useCallback, useEffect } from "react";
-import { useNavigate, useParams, useSearchParams } from "react-router-dom";
+import React, { useCallback, useEffect } from 'react';
+import { useNavigate, useParams, useSearchParams } from 'react-router-dom';

-import { DeployStep, DeployStatus } from "./DeployStep";
-import { Stopwatch, setStopWatchOffset } from "../../StopWatch";
-import { Heading } from "../../shared/Heading";
-import { Button } from "../../shared/Button";
-import { ClockOutlineIcon, WarningIcon } from "../../shared/CustomIcon";
-import { CancelDeploymentDialog } from "../../projects/Dialog/CancelDeploymentDialog";
+import { DeployStep, DeployStatus } from './DeployStep';
+import { Stopwatch, setStopWatchOffset } from '../../StopWatch';
+import { Heading } from '../../shared/Heading';
+import { Button } from '../../shared/Button';
+import { ClockOutlineIcon, WarningIcon } from '../../shared/CustomIcon';
+import { CancelDeploymentDialog } from '../../projects/Dialog/CancelDeploymentDialog';

 const TIMEOUT_DURATION = 5000;
 const Deploy = () => {
  const [searchParams] = useSearchParams();
-  const projectId = searchParams.get("projectId");
+  const projectId = searchParams.get('projectId');

  const [open, setOpen] = React.useState(false);
  const handleOpen = () => setOpen(!open);
--- a/packages/frontend/src/components/projects/create/DeployStep.tsx
+++ b/packages/frontend/src/components/projects/create/DeployStep.tsx
@ -1,11 +1,11 @@
-import React, { useState } from "react";
+import { useState } from 'react';

-import { Collapse } from "@material-tailwind/react";
+import { Collapse } from '@snowballtools/material-tailwind-react-fork';

-import { Stopwatch, setStopWatchOffset } from "../../StopWatch";
-import FormatMillisecond from "../../FormatMilliSecond";
-import processLogs from "../../../assets/process-logs.json";
-import { cn } from "utils/classnames";
+import { Stopwatch, setStopWatchOffset } from '../../StopWatch';
+import FormatMillisecond from '../../FormatMilliSecond';
+import processLogs from '../../../assets/process-logs.json';
+import { cn } from 'utils/classnames';
 import {
  CheckRoundFilledIcon,
  ClockOutlineIcon,
@ -13,15 +13,15 @@ import {
  LoaderIcon,
  MinusCircleIcon,
  PlusIcon,
-} from "components/shared/CustomIcon";
-import { Button } from "components/shared/Button";
-import { useToast } from "components/shared/Toast";
-import { useIntersectionObserver } from "usehooks-ts";
+} from 'components/shared/CustomIcon';
+import { Button } from 'components/shared/Button';
+import { useToast } from 'components/shared/Toast';
+import { useIntersectionObserver } from 'usehooks-ts';

 enum DeployStatus {
-  PROCESSING = "progress",
-  COMPLETE = "complete",
-  NOT_STARTED = "notStarted",
+  PROCESSING = 'progress',
+  COMPLETE = 'complete',
+  NOT_STARTED = 'notStarted',
 }

 interface DeployStepsProps {
@ -52,8 +52,8 @@ const DeployStep = ({
      {/* Collapisble trigger */}
      <button
        className={cn(
-          "flex justify-between w-full py-5 gap-2",
-          disableCollapse && "cursor-auto",
+          'flex justify-between w-full py-5 gap-2',
+          disableCollapse && 'cursor-auto',
        )}
        tabIndex={disableCollapse ? -1 : undefined}
        onClick={() => {
@ -62,7 +62,7 @@ const DeployStep = ({
          }
        }}
      >
-        <div className={cn("grow flex items-center gap-3")}>
+        <div className={cn('grow flex items-center gap-3')}>
          {/* Icon */}
          <div className="w-6 h-6 grid place-content-center">
            {status === DeployStatus.NOT_STARTED && (
@ -84,8 +84,8 @@ const DeployStep = ({
          {/* Title */}
          <span
            className={cn(
-              "text-left text-sm md:text-base",
-              status === DeployStatus.PROCESSING && "text-elements-link",
+              'text-left text-sm md:text-base',
+              status === DeployStatus.PROCESSING && 'text-elements-link',
            )}
          >
            {title}
@ -107,7 +107,7 @@ const DeployStep = ({
                size={15}
              />
            </div>
-            <FormatMillisecond time={Number(processTime)} />{" "}
+            <FormatMillisecond time={Number(processTime)} />{' '}
          </div>
        )}
      </button>
@ -133,15 +133,15 @@ const DeployStep = ({
          )}

          {/* Copy log button */}
-          <div className={cn("sticky bottom-4 left-1/2 flex justify-center")}>
+          <div className={cn('sticky bottom-4 left-1/2 flex justify-center')}>
            <Button
              size="xs"
              onClick={() => {
-                navigator.clipboard.writeText(processLogs.join("\n"));
+                navigator.clipboard.writeText(processLogs.join('\n'));
                toast({
-                  title: "Logs copied",
-                  variant: "success",
-                  id: "logs",
+                  title: 'Logs copied',
+                  variant: 'success',
+                  id: 'logs',
                  onDismiss: dismiss,
                });
              }}
--- a/packages/frontend/src/components/projects/create/ProjectRepoCard/ProjectRepoCard.tsx
+++ b/packages/frontend/src/components/projects/create/ProjectRepoCard/ProjectRepoCard.tsx
@ -1,10 +1,10 @@
 import React, { useCallback, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';

-import { Spinner } from '@material-tailwind/react';
+import { Spinner } from '@snowballtools/material-tailwind-react-fork';

 import { relativeTimeISO } from 'utils/time';
-import { GitRepositoryDetails } from 'types';
+import { GitRepositoryDetails } from '../../../../types/types';
 import { useGQLClient } from 'context/GQLClientContext';
 import {
  ArrowRightCircleIcon,
--- a/packages/frontend/src/components/projects/create/RepositoryList/RepositoryList.tsx
+++ b/packages/frontend/src/components/projects/create/RepositoryList/RepositoryList.tsx
@ -1,9 +1,9 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import assert from 'assert';
 import { useDebounce } from 'usehooks-ts';

 import { ProjectRepoCard } from 'components/projects/create/ProjectRepoCard';
-import { GitOrgDetails, GitRepositoryDetails } from 'types';
+import { GitOrgDetails, GitRepositoryDetails } from '../../../../types/types';
 import {
  ChevronGrabberHorizontal,
  GithubIcon,
--- a/packages/frontend/src/components/projects/project/deployments/AssignDomainDialog.tsx
+++ b/packages/frontend/src/components/projects/project/deployments/AssignDomainDialog.tsx
@ -1,4 +1,3 @@
-import React from 'react';
 import { CopyBlock, atomOneLight } from 'react-code-blocks';
 import { Link } from 'react-router-dom';

@ -8,7 +7,7 @@ import {
  DialogHeader,
  DialogBody,
  DialogFooter,
-} from '@material-tailwind/react';
+} from '@snowballtools/material-tailwind-react-fork';

 interface AssignDomainProps {
  open: boolean;
@ -17,9 +16,9 @@ interface AssignDomainProps {

 const AssignDomainDialog = ({ open, handleOpen }: AssignDomainProps) => {
  return (
-    <Dialog open={open} handler={handleOpen} placeholder={''}>
-      <DialogHeader placeholder={''}>Assign Domain</DialogHeader>
-      <DialogBody placeholder={''}>
+    <Dialog open={open} handler={handleOpen}>
+      <DialogHeader>Assign Domain</DialogHeader>
+      <DialogBody>
        In order to assign a domain to your production deployments, configure it
        in the{' '}
        {/* TODO: Fix selection of project settings tab on navigation to domains */}
@ -36,13 +35,12 @@ const AssignDomainDialog = ({ open, handleOpen }: AssignDomainProps) => {
          theme={atomOneLight}
        />
      </DialogBody>
-      <DialogFooter className="flex justify-start" placeholder={''}>
+      <DialogFooter className="flex justify-start">
        <Button
          className="rounded-3xl"
          variant="gradient"
          color="blue"
          onClick={handleOpen}
-          placeholder={''}
        >
          <span>Okay</span>
        </Button>
--- a/packages/frontend/src/components/projects/project/deployments/DeploymentDetailsCard.tsx
+++ b/packages/frontend/src/components/projects/project/deployments/DeploymentDetailsCard.tsx
@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 import {
  Deployment,
  DeploymentStatus,
--- a/packages/frontend/src/components/projects/project/deployments/DeploymentDialogBodyCard.tsx
+++ b/packages/frontend/src/components/projects/project/deployments/DeploymentDialogBodyCard.tsx
@ -1,4 +1,3 @@
-import React from 'react';
 import { Deployment } from 'gql-client';

 import { relativeTimeMs } from 'utils/time';
--- a/packages/frontend/src/components/projects/project/deployments/DeploymentMenu.tsx
+++ b/packages/frontend/src/components/projects/project/deployments/DeploymentMenu.tsx
@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import toast from 'react-hot-toast';
 import { Deployment, Domain, Environment, Project } from 'gql-client';
 import { Button } from 'components/shared/Button';
@ -15,7 +15,7 @@ import {
  MenuHandler,
  MenuItem,
  MenuList,
-} from '@material-tailwind/react';
+} from '@snowballtools/material-tailwind-react-fork';
 import { ComponentPropsWithRef } from 'react';
 import AssignDomainDialog from './AssignDomainDialog';
 import { useGQLClient } from 'context/GQLClientContext';
@ -96,11 +96,10 @@ export const DeploymentMenu = ({
              aria-label="Toggle Menu"
            />
          </MenuHandler>
-          <MenuList className="text-elements-high-em" placeholder={''}>
+          <MenuList className="text-elements-high-em">
            <MenuItem
              className="hover:bg-base-bg-emphasized"
              disabled={!Boolean(deployment.url)}
-              placeholder={''}
            >
              <a
                className="flex items-center gap-3"
@ -114,7 +113,6 @@ export const DeploymentMenu = ({
            <MenuItem
              className="hover:bg-base-bg-emphasized flex items-center gap-3"
              onClick={() => setAssignDomainDialog(!assignDomainDialog)}
-              placeholder={''}
            >
              <GlobeIcon /> Assign domain
            </MenuItem>
@ -122,7 +120,6 @@ export const DeploymentMenu = ({
              className="hover:bg-base-bg-emphasized flex items-center gap-3"
              onClick={() => setChangeToProduction(!changeToProduction)}
              disabled={!(deployment.environment !== Environment.Production)}
-              placeholder={''}
            >
              <RocketIcon /> Change to production
            </MenuItem>
@ -136,7 +133,6 @@ export const DeploymentMenu = ({
                  deployment.isCurrent
                )
              }
-              placeholder={''}
            >
              <RefreshIcon /> Redeploy to production
            </MenuItem>
@ -148,7 +144,6 @@ export const DeploymentMenu = ({
                deployment.environment !== Environment.Production ||
                !Boolean(currentDeployment)
              }
-              placeholder={''}
            >
              <UndoIcon /> Rollback to this version
            </MenuItem>
--- a/packages/frontend/src/components/projects/project/deployments/FilterForm.tsx
+++ b/packages/frontend/src/components/projects/project/deployments/FilterForm.tsx
@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';

 import { Input } from 'components/shared/Input';
 import {
@ -10,8 +10,8 @@ import {
  WarningTriangleIcon,
 } from 'components/shared/CustomIcon';
 import { DatePicker } from 'components/shared/DatePicker';
-import { Value } from 'react-calendar/dist/cjs/shared/types';
 import { Select, SelectOption } from 'components/shared/Select';
+import { Value } from 'types/vendor';

 export enum StatusOptions {
  ALL_STATUS = 'All status',
--- a/packages/frontend/src/components/projects/project/overview/Activity/Activity.tsx
+++ b/packages/frontend/src/components/projects/project/overview/Activity/Activity.tsx
@ -1,6 +1,4 @@
-import React from 'react';
-
-import { GitCommitWithBranch } from 'types';
+import { GitCommitWithBranch } from '../../../../../types/types';
 import { Heading } from 'components/shared/Heading';
 import ActivityCard from './ActivityCard';
 import { Button } from 'components/shared/Button';
--- a/packages/frontend/src/components/projects/project/overview/Activity/ActivityCard.tsx
+++ b/packages/frontend/src/components/projects/project/overview/Activity/ActivityCard.tsx
@ -1,6 +1,5 @@
-import React from 'react';
 import { Link } from 'react-router-dom';
-import { GitCommitWithBranch } from '../../../../../types';
+import { GitCommitWithBranch } from '../../../../../types/types';
 import { Avatar } from 'components/shared/Avatar';
 import { Button } from 'components/shared/Button';
 import {
--- a/packages/frontend/src/components/projects/project/overview/OverviewInfo.tsx
+++ b/packages/frontend/src/components/projects/project/overview/OverviewInfo.tsx
@ -1,4 +1,3 @@
-import React from 'react';
 import { PropsWithChildren } from 'react';
 import { cloneElement } from 'utils/cloneElement';

--- a/packages/frontend/src/components/projects/project/settings/AddEnvironmentVariableRow.tsx
+++ b/packages/frontend/src/components/projects/project/settings/AddEnvironmentVariableRow.tsx
@ -1,9 +1,12 @@
-import React from 'react';
 import { UseFormRegister } from 'react-hook-form';

-import { Typography, Input, IconButton } from '@material-tailwind/react';
+import {
+  Typography,
+  Input,
+  IconButton,
+} from '@snowballtools/material-tailwind-react-fork';

-import { EnvironmentVariablesFormValues } from '../../../../types';
+import { EnvironmentVariablesFormValues } from '../../../../types/types';

 interface AddEnvironmentVariableRowProps {
  onDelete: () => void;
@ -21,22 +24,16 @@ const AddEnvironmentVariableRow = ({
  return (
    <div className="flex gap-1 p-2">
      <div>
-        <Typography variant="small" placeholder={''}>
-          Key
-        </Typography>
+        <Typography variant="small">Key</Typography>
        <Input
-          crossOrigin={undefined}
          {...register(`variables.${index}.key`, {
            required: 'Key field cannot be empty',
          })}
        />
      </div>
      <div>
-        <Typography variant="small" placeholder={''}>
-          Value
-        </Typography>
+        <Typography variant="small">Value</Typography>
        <Input
-          crossOrigin={undefined}
          {...register(`variables.${index}.value`, {
            required: 'Value field cannot be empty',
          })}
@ -47,7 +44,6 @@ const AddEnvironmentVariableRow = ({
          size="sm"
          onClick={() => onDelete()}
          disabled={isDeleteDisabled}
-          placeholder={''}
        >
          {'>'}
        </IconButton>
--- a/packages/frontend/src/components/projects/project/settings/AddMemberDialog.tsx
+++ b/packages/frontend/src/components/projects/project/settings/AddMemberDialog.tsx
@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 import { useForm } from 'react-hook-form';
 import { AddProjectMemberInput, Permission } from 'gql-client';

@ -11,7 +11,7 @@ import {
  Input,
  Typography,
  Checkbox,
-} from '@material-tailwind/react';
+} from '@snowballtools/material-tailwind-react-fork';

 interface AddMemberDialogProp {
  open: boolean;
@ -61,59 +61,46 @@ const AddMemberDialog = ({
  }, []);

  return (
-    <Dialog open={open} handler={handleOpen} placeholder={''}>
-      <DialogHeader className="flex justify-between" placeholder={''}>
+    <Dialog open={open} handler={handleOpen}>
+      <DialogHeader className="flex justify-between">
        <div>Add member</div>
        <Button
          variant="outlined"
          onClick={handleOpen}
          className="mr-1 rounded-3xl"
-          placeholder={''}
        >
          X
        </Button>
      </DialogHeader>
      <form onSubmit={handleSubmit(submitHandler)}>
-        <DialogBody className="flex flex-col gap-2 p-4" placeholder={''}>
-          <Typography variant="small" placeholder={''}>
+        <DialogBody className="flex flex-col gap-2 p-4">
+          <Typography variant="small">
            We will send an invitation link to this email address.
          </Typography>
-          <Typography variant="small" placeholder={''}>
-            Email address
-          </Typography>
+          <Typography variant="small">Email address</Typography>
          <Input
            type="email"
-            crossOrigin={undefined}
            {...register('emailAddress', {
              required: 'email field cannot be empty',
            })}
          />
-          <Typography variant="small" placeholder={''}>
-            Permissions
-          </Typography>
-          <Typography variant="small" placeholder={''}>
+          <Typography variant="small">Permissions</Typography>
+          <Typography variant="small">
            You can change this later if required.
          </Typography>
          <Checkbox
-            crossOrigin={undefined}
            label={Permission.View}
            {...register(`permissions.view`)}
            color="blue"
          />
          <Checkbox
-            crossOrigin={undefined}
            label={Permission.Edit}
            {...register(`permissions.edit`)}
            color="blue"
          />
        </DialogBody>
-        <DialogFooter className="flex justify-start" placeholder={''}>
-          <Button
-            variant="outlined"
-            onClick={handleOpen}
-            className="mr-1"
-            placeholder={''}
-          >
+        <DialogFooter className="flex justify-start">
+          <Button variant="outlined" onClick={handleOpen} className="mr-1">
            Cancel
          </Button>
          <Button
@ -121,7 +108,6 @@ const AddMemberDialog = ({
            color="blue"
            type="submit"
            disabled={!isValid}
-            placeholder={''}
          >
            Send invite
          </Button>
--- a/packages/frontend/src/components/projects/project/settings/DeleteProjectDialog.tsx
+++ b/packages/frontend/src/components/projects/project/settings/DeleteProjectDialog.tsx
@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useForm } from 'react-hook-form';
 import toast from 'react-hot-toast';
@ -12,7 +12,7 @@ import {
  DialogFooter,
  Input,
  Typography,
-} from '@material-tailwind/react';
+} from '@snowballtools/material-tailwind-react-fork';
 import { useGQLClient } from '../../../../context/GQLClientContext';

 interface DeleteProjectDialogProp {
@ -53,21 +53,20 @@ const DeleteProjectDialog = ({
  }, [client, project, handleOpen]);

  return (
-    <Dialog open={open} handler={handleOpen} placeholder={''}>
-      <DialogHeader className="flex justify-between" placeholder={''}>
+    <Dialog open={open} handler={handleOpen}>
+      <DialogHeader className="flex justify-between">
        <div>Delete project?</div>
        <Button
          variant="outlined"
          onClick={handleOpen}
          className="mr-1 rounded-3xl"
-          placeholder={''}
        >
          X
        </Button>
      </DialogHeader>
      <form onSubmit={handleSubmit(deleteProjectHandler)}>
-        <DialogBody className="flex flex-col gap-2" placeholder={''}>
-          <Typography variant="paragraph" placeholder={''}>
+        <DialogBody className="flex flex-col gap-2">
+          <Typography variant="paragraph">
            Deleting your project is irreversible. Enter your project’s
            name&nbsp;
            <span className="bg-blue-100 text-blue-700">({project.name})</span>
@ -75,23 +74,17 @@ const DeleteProjectDialog = ({
          </Typography>
          <Input
            id="input"
-            crossOrigin={undefined}
            {...register('projectName', {
              required: 'Project name is required',
              validate: (value) => value === project.name,
            })}
          />
-          <Typography variant="small" color="red" placeholder={''}>
+          <Typography variant="small" color="red">
            ^ Deleting your project is irreversible.
          </Typography>
        </DialogBody>
-        <DialogFooter className="flex justify-start" placeholder={''}>
-          <Button
-            variant="outlined"
-            onClick={handleOpen}
-            className="mr-1"
-            placeholder={''}
-          >
+        <DialogFooter className="flex justify-start">
+          <Button variant="outlined" onClick={handleOpen} className="mr-1">
            Cancel
          </Button>
          <Button
@ -99,7 +92,6 @@ const DeleteProjectDialog = ({
            color="red"
            type="submit"
            disabled={!isValid}
-            placeholder={''}
          >
            Yes, Delete project
          </Button>
--- a/packages/frontend/src/components/projects/project/settings/DisplayEnvironmentVariables.tsx
+++ b/packages/frontend/src/components/projects/project/settings/DisplayEnvironmentVariables.tsx
@ -1,5 +1,9 @@
-import React, { useState } from 'react';
-import { Card, Collapse, Typography } from '@material-tailwind/react';
+import { useState } from 'react';
+import {
+  Card,
+  Collapse,
+  Typography,
+} from '@snowballtools/material-tailwind-react-fork';

 import EditEnvironmentVariableRow from './EditEnvironmentVariableRow';
 import { Environment, EnvironmentVariable } from 'gql-client';
@ -29,11 +33,11 @@ const DisplayEnvironmentVariables = ({
      </div>
      <Collapse open={openCollapse}>
        {variables.length === 0 ? (
-          <Card className="bg-gray-300 flex items-center p-4" placeholder={''}>
-            <Typography variant="small" className="text-black" placeholder={''}>
+          <Card className="bg-gray-300 flex items-center p-4">
+            <Typography variant="small" className="text-black">
              No environment variables added yet.
            </Typography>
-            <Typography variant="small" placeholder={''}>
+            <Typography variant="small">
              Once you add them, they’ll show up here.
            </Typography>
          </Card>
--- a/packages/frontend/src/components/projects/project/settings/DomainCard.tsx
+++ b/packages/frontend/src/components/projects/project/settings/DomainCard.tsx
@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import toast from 'react-hot-toast';
 import { Domain, DomainStatus, Project } from 'gql-client';

@ -10,7 +10,7 @@ import {
  MenuList,
  MenuItem,
  Card,
-} from '@material-tailwind/react';
+} from '@snowballtools/material-tailwind-react-fork';

 import EditDomainDialog from './EditDomainDialog';
 import { useGQLClient } from 'context/GQLClientContext';
@ -68,7 +68,7 @@ const DomainCard = ({
    <>
      <div className="flex justify-between py-3">
        <div className="flex justify-start gap-1">
-          <Typography variant="h6" placeholder={''}>
+          <Typography variant="h6">
            <i>^</i> {domain.name}
          </Typography>
          <Chip
@ -97,20 +97,18 @@ const DomainCard = ({
            <MenuHandler>
              <button className="border-2 rounded-full w-8 h-8">...</button>
            </MenuHandler>
-            <MenuList placeholder={''}>
+            <MenuList>
              <MenuItem
                className="text-black"
                onClick={() => {
                  setEditDialogOpen((preVal) => !preVal);
                }}
-                placeholder={''}
              >
                ^ Edit domain
              </MenuItem>
              <MenuItem
                className="text-red-500"
                onClick={() => setDeleteDialogOpen((preVal) => !preVal)}
-                placeholder={''}
              >
                ^ Delete domain
              </MenuItem>
@ -130,21 +128,15 @@ const DomainCard = ({
        />
      </div>

-      <Typography variant="small" placeholder={''}>
-        Production
-      </Typography>
+      <Typography variant="small">Production</Typography>
      {domain.status === DomainStatus.Pending && (
-        <Card className="bg-gray-200 p-4 text-sm" placeholder={''}>
+        <Card className="bg-gray-200 p-4 text-sm">
          {refreshStatus === RefreshStatus.IDLE ? (
-            <Typography variant="small" placeholder={''}>
+            <Typography variant="small">
              ^ Add these records to your domain and refresh to check
            </Typography>
          ) : refreshStatus === RefreshStatus.CHECKING ? (
-            <Typography
-              variant="small"
-              className="text-blue-500"
-              placeholder={''}
-            >
+            <Typography variant="small" className="text-blue-500">
              ^ Checking records for {domain.name}
            </Typography>
          ) : (
--- a/packages/frontend/src/components/projects/project/settings/EditDomainDialog.tsx
+++ b/packages/frontend/src/components/projects/project/settings/EditDomainDialog.tsx
@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 import { Controller, useForm, SubmitHandler } from 'react-hook-form';
 import toast from 'react-hot-toast';
 import { Domain } from 'gql-client';
@ -13,7 +13,7 @@ import {
  Typography,
  Select,
  Option,
-} from '@material-tailwind/react';
+} from '@snowballtools/material-tailwind-react-fork';

 import { useGQLClient } from '../../../../context/GQLClientContext';

@ -122,32 +122,27 @@ const EditDomainDialog = ({
  }, [domain]);

  return (
-    <Dialog open={open} handler={handleOpen} placeholder={''}>
-      <DialogHeader className="flex justify-between" placeholder={''}>
+    <Dialog open={open} handler={handleOpen}>
+      <DialogHeader className="flex justify-between">
        <div>Edit domain</div>
        <Button
          variant="outlined"
          onClick={handleOpen}
          className="mr-1 rounded-3xl"
-          placeholder={''}
        >
          X
        </Button>
      </DialogHeader>
      <form onSubmit={handleSubmit(updateDomainHandler)}>
-        <DialogBody className="flex flex-col gap-2 p-4" placeholder={''}>
-          <Typography variant="small" placeholder={''}>
-            Domain name
-          </Typography>
-          <Input crossOrigin={undefined} {...register('name')} />
-          <Typography variant="small" placeholder={''}>
-            Redirect to
-          </Typography>
+        <DialogBody className="flex flex-col gap-2 p-4">
+          <Typography variant="small">Domain name</Typography>
+          <Input {...register('name')} />
+          <Typography variant="small">Redirect to</Typography>
          <Controller
            name="redirectedTo"
            control={control}
            render={({ field }) => (
-              <Select {...field} disabled={isDisableDropdown} placeholder={''}>
+              <Select {...field} disabled={isDisableDropdown}>
                {redirectOptions.map((option, key) => (
                  <Option key={key} value={option}>
                    ^ {option}
@ -159,18 +154,15 @@ const EditDomainDialog = ({
          {isDisableDropdown && (
            <div className="flex p-2 gap-2 text-black bg-gray-300 rounded-lg">
              <div>^</div>
-              <Typography variant="small" placeholder={''}>
+              <Typography variant="small">
                Domain “{domainRedirectedFrom ? domainRedirectedFrom.name : ''}”
                redirects to this domain so you can not redirect this doman
                further.
              </Typography>
            </div>
          )}
-          <Typography variant="small" placeholder={''}>
-            Git branch
-          </Typography>
+          <Typography variant="small">Git branch</Typography>
          <Input
-            crossOrigin={undefined}
            {...register('branch', {
              validate: (value) =>
                Boolean(branches.length) ? branches.includes(value) : true,
@ -181,22 +173,13 @@ const EditDomainDialog = ({
            }
          />
          {!isValid && (
-            <Typography
-              variant="small"
-              className="text-red-500"
-              placeholder={''}
-            >
+            <Typography variant="small" className="text-red-500">
              We couldn&apos;t find this branch in the connected Git repository.
            </Typography>
          )}
        </DialogBody>
-        <DialogFooter className="flex justify-start" placeholder={''}>
-          <Button
-            variant="outlined"
-            onClick={handleOpen}
-            className="mr-1"
-            placeholder={''}
-          >
+        <DialogFooter className="flex justify-start">
+          <Button variant="outlined" onClick={handleOpen} className="mr-1">
            Cancel
          </Button>
          <Button
@ -204,7 +187,6 @@ const EditDomainDialog = ({
            color="blue"
            type="submit"
            disabled={!isDirty}
-            placeholder={''}
          >
            Save changes
          </Button>
--- a/packages/frontend/src/components/projects/project/settings/EditEnvironmentVariableRow.tsx
+++ b/packages/frontend/src/components/projects/project/settings/EditEnvironmentVariableRow.tsx
@ -1,9 +1,13 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import toast from 'react-hot-toast';
 import { EnvironmentVariable } from 'gql-client';

-import { IconButton, Input, Typography } from '@material-tailwind/react';
+import {
+  IconButton,
+  Input,
+  Typography,
+} from '@snowballtools/material-tailwind-react-fork';

 import { useGQLClient } from 'context/GQLClientContext';
 import { DeleteVariableDialog } from 'components/projects/Dialog/DeleteVariableDialog';
@ -84,21 +88,12 @@ const EditEnvironmentVariableRow = ({
    <>
      <div className="flex gap-1 p-2">
        <div>
-          <Typography variant="small" placeholder={''}>
-            Key
-          </Typography>
-          <Input
-            crossOrigin={undefined}
-            disabled={!edit}
-            {...register(`key`)}
-          />
+          <Typography variant="small">Key</Typography>
+          <Input disabled={!edit} {...register(`key`)} />
        </div>
        <div>
-          <Typography variant="small" placeholder={''}>
-            Value
-          </Typography>
+          <Typography variant="small">Value</Typography>
          <Input
-            crossOrigin={undefined}
            disabled={!edit}
            type={showPassword ? 'text' : 'password'}
            icon={
@ -118,7 +113,6 @@ const EditEnvironmentVariableRow = ({
              <IconButton
                onClick={handleSubmit(updateEnvironmentVariableHandler)}
                size="sm"
-                placeholder={''}
              >
                {'S'}
              </IconButton>
@ -130,7 +124,6 @@ const EditEnvironmentVariableRow = ({
                  reset();
                  setEdit((preVal) => !preVal);
                }}
-                placeholder={''}
              >
                {'C'}
              </IconButton>
@ -144,7 +137,6 @@ const EditEnvironmentVariableRow = ({
                onClick={() => {
                  setEdit((preVal) => !preVal);
                }}
-                placeholder={''}
              >
                {'E'}
              </IconButton>
@ -153,7 +145,6 @@ const EditEnvironmentVariableRow = ({
              <IconButton
                size="sm"
                onClick={() => setDeleteDialogOpen((preVal) => !preVal)}
-                placeholder={''}
              >
                {'D'}
              </IconButton>
--- a/packages/frontend/src/components/projects/project/settings/GitSelectionSection.tsx
+++ b/packages/frontend/src/components/projects/project/settings/GitSelectionSection.tsx
@ -1,6 +1,4 @@
-import React from 'react';
-
-import { GitSelect } from '../../../../types';
+import { GitSelect } from '../../../../types/types';

 const GitSelectionSection = ({
  gitSelectionHandler,
--- a/packages/frontend/src/components/projects/project/settings/MemberCard.tsx
+++ b/packages/frontend/src/components/projects/project/settings/MemberCard.tsx
@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { Permission, User } from 'gql-client';

 import {
@ -7,7 +7,7 @@ import {
  Chip,
  IconButton,
  Tooltip,
-} from '@material-tailwind/react';
+} from '@snowballtools/material-tailwind-react-fork';

 import { formatAddress } from 'utils/format';
 import { RemoveMemberDialog } from 'components/projects/Dialog/RemoveMemberDialog';
@ -103,7 +103,6 @@ const MemberCard = ({
            selected={(_, index) => (
              <span>{DROPDOWN_OPTIONS[index!]?.label}</span>
            )}
-            placeholder={''}
          >
            {DROPDOWN_OPTIONS.map((permission, key) => (
              <Option key={key} value={permission.value}>
@ -132,7 +131,6 @@ const MemberCard = ({
                onClick={() => {
                  setRemoveMemberDialogOpen((prevVal) => !prevVal);
                }}
-                placeholder={''}
              >
                D
              </IconButton>
--- a/packages/frontend/src/components/projects/project/settings/RepoConnectedSection.tsx
+++ b/packages/frontend/src/components/projects/project/settings/RepoConnectedSection.tsx
@ -1,8 +1,11 @@
-import React, { useState } from 'react';
+import { useState } from 'react';

-import { Button, Typography } from '@material-tailwind/react';
+import {
+  Button,
+  Typography,
+} from '@snowballtools/material-tailwind-react-fork';

-import { GitRepositoryDetails } from 'types';
+import { GitRepositoryDetails } from '../../../../types/types';
 import { DisconnectRepositoryDialog } from 'components/projects/Dialog/DisconnectRepositoryDialog';

 const RepoConnectedSection = ({
@ -17,19 +20,14 @@ const RepoConnectedSection = ({
    <div className="flex gap-4">
      <div>^</div>
      <div className="grow">
-        <Typography variant="small" placeholder={''}>
-          {linkedRepo.full_name}
-        </Typography>
-        <Typography variant="small" placeholder={''}>
-          Connected just now
-        </Typography>
+        <Typography variant="small">{linkedRepo.full_name}</Typography>
+        <Typography variant="small">Connected just now</Typography>
      </div>
      <div>
        <Button
          onClick={() => setDisconnectRepoDialogOpen(true)}
          variant="outlined"
          size="sm"
-          placeholder={''}
        >
          ^ Disconnect
        </Button>
--- a/packages/frontend/src/components/projects/project/settings/SetupDomain.tsx
+++ b/packages/frontend/src/components/projects/project/settings/SetupDomain.tsx
@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useForm } from 'react-hook-form';

@ -8,7 +8,7 @@ import {
  Button,
  Input,
  Alert,
-} from '@material-tailwind/react';
+} from '@snowballtools/material-tailwind-react-fork';

 const SetupDomain = () => {
  const {
@ -54,23 +54,18 @@ const SetupDomain = () => {
      className="flex flex-col gap-6 w-full"
    >
      <div>
-        <Typography variant="h5" placeholder={''}>
-          Setup domain name
-        </Typography>
-        <Typography variant="small" placeholder={''}>
+        <Typography variant="h5">Setup domain name</Typography>
+        <Typography variant="small">
          Add your domain and setup redirects
        </Typography>
      </div>

      <div className="w-auto">
-        <Typography variant="small" placeholder={''}>
-          Domain name
-        </Typography>
+        <Typography variant="small">Domain name</Typography>
        <Input
          type="text"
          variant="outlined"
          size="lg"
-          crossOrigin={undefined}
          className="w-full"
          {...register('domainName', {
            required: true,
@ -80,18 +75,16 @@ const SetupDomain = () => {

      {isValid && (
        <div>
-          <Typography placeholder={''}>Primary domain</Typography>
+          <Typography>Primary domain</Typography>
          <div className="flex flex-col gap-3">
            <Radio
              label={domainStr}
-              crossOrigin={undefined}
              {...register('isWWW')}
              value="false"
              type="radio"
            />
            <Radio
              label={`www.${domainStr}`}
-              crossOrigin={undefined}
              {...register('isWWW')}
              value="true"
              type="radio"
@ -112,7 +105,6 @@ const SetupDomain = () => {
        className="w-fit"
        color={isValid ? 'blue' : 'gray'}
        type="submit"
-        placeholder={''}
      >
        <i>^</i> Next
      </Button>
--- a/packages/frontend/src/components/projects/project/settings/WebhookCard.tsx
+++ b/packages/frontend/src/components/projects/project/settings/WebhookCard.tsx
@ -1,7 +1,7 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import toast from 'react-hot-toast';

-import { Button } from '@material-tailwind/react';
+import { Button } from '@snowballtools/material-tailwind-react-fork';

 import { DeleteWebhookDialog } from 'components/projects/Dialog/DeleteWebhookDialog';

@ -22,7 +22,6 @@ const WebhookCard = ({ webhookUrl, onDelete }: WebhookCardProps) => {
            navigator.clipboard.writeText(webhookUrl);
            toast.success('Copied to clipboard');
          }}
-          placeholder={''}
        >
          C
        </Button>
@ -32,7 +31,6 @@ const WebhookCard = ({ webhookUrl, onDelete }: WebhookCardProps) => {
          onClick={() => {
            setDeleteDialogOpen(true);
          }}
-          placeholder={''}
        >
          X
        </Button>
--- a/packages/frontend/src/components/shared/AsyncSelect.tsx
+++ b/packages/frontend/src/components/shared/AsyncSelect.tsx
@ -1,6 +1,9 @@
 // https://github.com/creativetimofficial/material-tailwind/issues/419#issuecomment-1760474312
 import React, { useEffect, useState } from 'react';
-import { Select, SelectProps } from '@material-tailwind/react';
+import {
+  Select,
+  SelectProps,
+} from '@snowballtools/material-tailwind-react-fork';

 // TODO: Use correct type for ref
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@ -9,7 +12,7 @@ const AsyncSelect = React.forwardRef((props: SelectProps, ref: any) => {

  useEffect(() => setKey((preVal) => preVal + 1), [props]);

-  return <Select key={key} ref={ref} {...props} placeholder={''} />;
+  return <Select key={key} ref={ref} {...props} />;
 });

 AsyncSelect.displayName = 'AsyncSelect';
--- a/packages/frontend/src/components/shared/Avatar/Avatar.tsx
+++ b/packages/frontend/src/components/shared/Avatar/Avatar.tsx
@ -1,4 +1,3 @@
-import React from 'react';
 import { type ComponentPropsWithoutRef, type ComponentProps } from 'react';
 import { avatarTheme, type AvatarVariants } from './Avatar.theme';
 import * as PrimitiveAvatar from '@radix-ui/react-avatar';
--- a/packages/frontend/src/components/shared/Badge/Badge.tsx
+++ b/packages/frontend/src/components/shared/Badge/Badge.tsx
@ -1,4 +1,3 @@
-import React from 'react';
 import { ComponentPropsWithoutRef } from 'react';
 import { BadgeTheme, badgeTheme } from './Badge.theme';

--- a/packages/frontend/src/components/shared/Button/Button.tsx
+++ b/packages/frontend/src/components/shared/Button/Button.tsx
@ -1,4 +1,4 @@
-import React, { forwardRef, useCallback } from 'react';
+import { forwardRef, useCallback } from 'react';
 import type { ComponentPropsWithoutRef, ReactNode } from 'react';

 import { buttonTheme } from './Button.theme';
--- a/packages/frontend/src/components/shared/Calendar/Calendar.tsx
+++ b/packages/frontend/src/components/shared/Calendar/Calendar.tsx
@ -1,4 +1,4 @@
-import React, {
+import {
  ComponentPropsWithRef,
  MouseEvent,
  ReactNode,
--- a/packages/frontend/src/components/shared/Checkbox/Checkbox.tsx
+++ b/packages/frontend/src/components/shared/Checkbox/Checkbox.tsx
@ -1,4 +1,3 @@
-import React from 'react';
 import * as CheckboxRadix from '@radix-ui/react-checkbox';
 import { type CheckboxProps as CheckboxRadixProps } from '@radix-ui/react-checkbox';

--- a/packages/frontend/src/components/shared/ConfirmDialog.tsx
+++ b/packages/frontend/src/components/shared/ConfirmDialog.tsx
@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { Modal, ModalProps } from './Modal';
 import { Button, ButtonOrLinkProps } from './Button';

--- a/packages/frontend/src/components/shared/CustomIcon/ArrowLeftCircleFilledIcon.tsx
+++ b/packages/frontend/src/components/shared/CustomIcon/ArrowLeftCircleFilledIcon.tsx
@ -1,4 +1,3 @@
-import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';

 export const ArrowLeftCircleFilledIcon = (props: CustomIconProps) => {
--- a/packages/frontend/src/components/shared/CustomIcon/ArrowRightCircleFilledIcon.tsx
+++ b/packages/frontend/src/components/shared/CustomIcon/ArrowRightCircleFilledIcon.tsx
@ -1,4 +1,3 @@
-import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';

 export const ArrowRightCircleFilledIcon = (props: CustomIconProps) => {
--- a/packages/frontend/src/components/shared/CustomIcon/ArrowRightCircleIcon.tsx
+++ b/packages/frontend/src/components/shared/CustomIcon/ArrowRightCircleIcon.tsx
@ -1,4 +1,3 @@
-import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';

 export const ArrowRightCircleIcon = (props: CustomIconProps) => {
--- a/packages/frontend/src/components/shared/CustomIcon/BranchIcon.tsx
+++ b/packages/frontend/src/components/shared/CustomIcon/BranchIcon.tsx
@ -1,4 +1,3 @@
-import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';

 export const BranchIcon = (props: CustomIconProps) => {
--- a/packages/frontend/src/components/shared/CustomIcon/BranchStrokeIcon.tsx
+++ b/packages/frontend/src/components/shared/CustomIcon/BranchStrokeIcon.tsx
@ -1,4 +1,3 @@
-import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';

 export const BranchStrokeIcon = (props: CustomIconProps) => {
--- a/packages/frontend/src/components/shared/CustomIcon/BuildingIcon.tsx
+++ b/packages/frontend/src/components/shared/CustomIcon/BuildingIcon.tsx
@ -1,4 +1,3 @@
-import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';

 export const BuildingIcon = (props: CustomIconProps) => {
--- a/packages/frontend/src/components/shared/CustomIcon/CalendarDaysIcon.tsx
+++ b/packages/frontend/src/components/shared/CustomIcon/CalendarDaysIcon.tsx
@ -1,4 +1,3 @@
-import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';

 export const CalendarDaysIcon = (props: CustomIconProps) => {
--- a/packages/frontend/src/components/shared/CustomIcon/CalendarIcon.tsx
+++ b/packages/frontend/src/components/shared/CustomIcon/CalendarIcon.tsx
@ -1,4 +1,3 @@
-import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';

 export const CalendarIcon = (props: CustomIconProps) => {
--- a/packages/frontend/src/components/shared/CustomIcon/CheckIcon.tsx
+++ b/packages/frontend/src/components/shared/CustomIcon/CheckIcon.tsx
@ -1,4 +1,3 @@
-import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';

 export const CheckIcon = (props: CustomIconProps) => {
--- a/packages/frontend/src/components/shared/CustomIcon/CheckRadioIcon.tsx
+++ b/packages/frontend/src/components/shared/CustomIcon/CheckRadioIcon.tsx
@ -1,4 +1,3 @@
-import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';

 export const CheckRadioIcon = (props: CustomIconProps) => {
--- a/packages/frontend/src/components/shared/CustomIcon/CheckRadioOutlineIcon.tsx
+++ b/packages/frontend/src/components/shared/CustomIcon/CheckRadioOutlineIcon.tsx
@ -1,4 +1,3 @@
-import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';

 export const CheckRadioOutlineIcon = (props: CustomIconProps) => {
--- a/packages/frontend/src/components/shared/CustomIcon/CheckRoundFilledIcon.tsx
+++ b/packages/frontend/src/components/shared/CustomIcon/CheckRoundFilledIcon.tsx
@ -1,4 +1,3 @@
-import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';

 export const CheckRoundFilledIcon = (props: CustomIconProps) => {
--- a/packages/frontend/src/components/shared/CustomIcon/ChevronDoubleDownIcon.tsx
+++ b/packages/frontend/src/components/shared/CustomIcon/ChevronDoubleDownIcon.tsx
@ -1,4 +1,3 @@
-import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';

 export const ChevronDoubleDownIcon = (props: CustomIconProps) => {
--- a/packages/frontend/src/components/shared/CustomIcon/ChevronDownIcon.tsx
+++ b/packages/frontend/src/components/shared/CustomIcon/ChevronDownIcon.tsx
@ -1,4 +1,3 @@
-import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';

 export const ChevronDownIcon = (props: CustomIconProps) => {
--- a/packages/frontend/src/components/shared/CustomIcon/ChevronGrabberHorizontal.tsx
+++ b/packages/frontend/src/components/shared/CustomIcon/ChevronGrabberHorizontal.tsx
@ -1,4 +1,3 @@
-import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';

 export const ChevronGrabberHorizontal = (props: CustomIconProps) => {
--- a/packages/frontend/src/components/shared/CustomIcon/ChevronLeft.tsx
+++ b/packages/frontend/src/components/shared/CustomIcon/ChevronLeft.tsx
@ -1,4 +1,3 @@
-import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';

 export const ChevronLeft = (props: CustomIconProps) => {
--- a/packages/frontend/src/components/shared/CustomIcon/ChevronRight.tsx
+++ b/packages/frontend/src/components/shared/CustomIcon/ChevronRight.tsx
@ -1,4 +1,3 @@
-import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';

 export const ChevronRight = (props: CustomIconProps) => {
--- a/packages/frontend/src/components/shared/CustomIcon/ChevronUpDown.tsx
+++ b/packages/frontend/src/components/shared/CustomIcon/ChevronUpDown.tsx
@ -1,4 +1,3 @@
-import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';

 export const ChevronUpDown = (props: CustomIconProps) => {
--- a/packages/frontend/src/components/shared/CustomIcon/CirclePlaceholderOnIcon.tsx
+++ b/packages/frontend/src/components/shared/CustomIcon/CirclePlaceholderOnIcon.tsx
@ -1,4 +1,3 @@
-import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';

 export const CirclePlaceholderOnIcon = (props: CustomIconProps) => {
--- a/packages/frontend/src/components/shared/CustomIcon/ClockIcon.tsx
+++ b/packages/frontend/src/components/shared/CustomIcon/ClockIcon.tsx
@ -1,4 +1,3 @@
-import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';

 export const ClockIcon = (props: CustomIconProps) => {
--- a/packages/frontend/src/components/shared/CustomIcon/ClockOutlineIcon.tsx
+++ b/packages/frontend/src/components/shared/CustomIcon/ClockOutlineIcon.tsx
@ -1,4 +1,3 @@
-import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';

 export const ClockOutlineIcon = (props: CustomIconProps) => {
--- a/packages/frontend/src/components/shared/CustomIcon/CommitIcon.tsx
+++ b/packages/frontend/src/components/shared/CustomIcon/CommitIcon.tsx
@ -1,4 +1,3 @@
-import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';

 export const CommitIcon = (props: CustomIconProps) => {
--- a/packages/frontend/src/components/shared/CustomIcon/CopyIcon.tsx
+++ b/packages/frontend/src/components/shared/CustomIcon/CopyIcon.tsx
@ -1,4 +1,3 @@
-import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';

 export const CopyIcon = (props: CustomIconProps) => {
--- a/packages/frontend/src/components/shared/CustomIcon/CrossCircleIcon.tsx
+++ b/packages/frontend/src/components/shared/CustomIcon/CrossCircleIcon.tsx
@ -1,4 +1,3 @@
-import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';

 export const CrossCircleIcon = (props: CustomIconProps) => {
--- a/packages/frontend/src/components/shared/CustomIcon/CrossIcon.tsx
+++ b/packages/frontend/src/components/shared/CustomIcon/CrossIcon.tsx
@ -1,4 +1,3 @@
-import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';

 export const CrossIcon = (props: CustomIconProps) => {
--- a/packages/frontend/src/components/shared/CustomIcon/CursorBoxIcon.tsx
+++ b/packages/frontend/src/components/shared/CustomIcon/CursorBoxIcon.tsx
@ -1,4 +1,3 @@
-import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';

 export const CursorBoxIcon = (props: CustomIconProps) => {
--- a/packages/frontend/src/components/shared/CustomIcon/CustomIcon.tsx
+++ b/packages/frontend/src/components/shared/CustomIcon/CustomIcon.tsx
@ -1,4 +1,4 @@
-import React, { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithoutRef } from 'react';

 export interface CustomIconProps extends ComponentPropsWithoutRef<'svg'> {
  size?: number | string; // width and height will both be set as the same value
--- a/packages/frontend/src/components/shared/CustomIcon/EllipseIcon.tsx
+++ b/packages/frontend/src/components/shared/CustomIcon/EllipseIcon.tsx
@ -1,4 +1,3 @@
-import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';

 export const EllipseIcon: React.FC<CustomIconProps> = (props) => {
--- a/packages/frontend/src/components/shared/CustomIcon/EllipsesIcon.tsx
+++ b/packages/frontend/src/components/shared/CustomIcon/EllipsesIcon.tsx
@ -1,4 +1,3 @@
-import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';
 import { EllipseIcon } from './EllipseIcon';

--- a/packages/frontend/src/components/shared/CustomIcon/FolderIcon.tsx
+++ b/packages/frontend/src/components/shared/CustomIcon/FolderIcon.tsx
@ -1,4 +1,3 @@
-import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';

 export const FolderIcon = (props: CustomIconProps) => {
--- a/packages/frontend/src/components/shared/CustomIcon/GitHubLogo.tsx
+++ b/packages/frontend/src/components/shared/CustomIcon/GitHubLogo.tsx
@ -1,4 +1,3 @@
-import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';

 export const GitHubLogo = (props: CustomIconProps) => {
--- a/packages/frontend/src/components/shared/CustomIcon/GitIcon.tsx
+++ b/packages/frontend/src/components/shared/CustomIcon/GitIcon.tsx
@ -1,4 +1,3 @@
-import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';

 export const GitIcon: React.FC<CustomIconProps> = (props) => {
--- a/packages/frontend/src/components/shared/CustomIcon/GitTeaIcon.tsx
+++ b/packages/frontend/src/components/shared/CustomIcon/GitTeaIcon.tsx
@ -1,4 +1,3 @@
-import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';

 export const GitTeaIcon: React.FC<CustomIconProps> = (props) => {
--- a/packages/frontend/src/components/shared/CustomIcon/GithubIcon.tsx
+++ b/packages/frontend/src/components/shared/CustomIcon/GithubIcon.tsx
@ -1,4 +1,3 @@
-import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';

 export const GithubIcon: React.FC<CustomIconProps> = (props) => {
--- a/packages/frontend/src/components/shared/CustomIcon/GithubStrokeIcon.tsx
+++ b/packages/frontend/src/components/shared/CustomIcon/GithubStrokeIcon.tsx
@ -1,4 +1,3 @@
-import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';

 export const GithubStrokeIcon = (props: CustomIconProps) => {
--- a/packages/frontend/src/components/shared/CustomIcon/GlobeIcon.tsx
+++ b/packages/frontend/src/components/shared/CustomIcon/GlobeIcon.tsx
@ -1,4 +1,3 @@
-import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';

 export const GlobeIcon = (props: CustomIconProps) => {
--- a/Show More
+++ b/Show More