Lint using tsc; fix type errors

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"
   }
 }

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",

packages/frontend/.eslintrc.cjs

@@ -15,4 +15,4 @@ module.exports = {
       { allowConstantExport: true },
     ],
   },
-}
+};

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`

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
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
-      rel="apple-touch-icon"
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
-      sizes="180x180"
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
-      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" />

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",

packages/frontend/postcss.config.js

@@ -3,4 +3,4 @@ export default {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

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';
 

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 Projects from './pages/org-slug';
-import Settings from "./pages/org-slug/Settings";
+import Settings from './pages/org-slug/Settings';
 import {
   projectsRoutesWithSearch,
   projectsRoutesWithoutSearch,
-} from "./pages/org-slug/projects/routes";
+} from './pages/org-slug/projects/routes';
-import ProjectSearchLayout from "./layouts/ProjectSearch";
+import ProjectSearchLayout from './layouts/ProjectSearch';
-import Index from "./pages";
+import Index from './pages';
-import Login from "./pages/Login";
+import Login from './pages/Login';
-import { DashboardLayout } from "./pages/org-slug/layout";
+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 />,
   },
 ]);

packages/frontend/src/assets/templates.ts

@@ -1,37 +1,37 @@
 export default [
   {
-    id: "1",
+    id: '1',
-    name: "Progressive Web App (PWA)",
+    name: 'Progressive Web App (PWA)',
-    icon: "pwa",
+    icon: 'pwa',
     repoFullName: `${import.meta.env.VITE_GITHUB_PWA_TEMPLATE_REPO}`,
     isComingSoon: false,
   },
   {
-    id: "2",
+    id: '2',
-    name: "Image Upload PWA",
+    name: 'Image Upload PWA',
-    icon: "pwa",
+    icon: 'pwa',
     repoFullName: `${import.meta.env.VITE_GITHUB_IMAGE_UPLOAD_PWA_TEMPLATE_REPO}`,
     isComingSoon: false,
   },
   {
-    id: "3",
+    id: '3',
-    name: "Kotlin",
+    name: 'Kotlin',
-    icon: "kotlin",
+    icon: 'kotlin',
-    repoFullName: "",
+    repoFullName: '',
     isComingSoon: true,
   },
   {
-    id: "4",
+    id: '4',
-    name: "React Native",
+    name: 'React Native',
-    icon: "react-native",
+    icon: 'react-native',
-    repoFullName: "",
+    repoFullName: '',
     isComingSoon: true,
   },
   {
-    id: "5",
+    id: '5',
-    name: "Swift",
+    name: 'Swift',
-    icon: "swift",
+    icon: 'swift',
-    repoFullName: "",
+    repoFullName: '',
     isComingSoon: true,
   },
 ];

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
+        <Input onChange={() => null} value={inputValue} />
-          onChange={() => null}
-          value={inputValue}
-          crossOrigin={undefined}
-        />
       </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>

packages/frontend/src/components/Dropdown.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {
   default as ReactDropdown,
   Option as ReactDropdownOption,

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

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" />;
 };

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';
 

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_COMPLETED = '#059669';
-const COLOR_ACTIVE = "#CFE6FC";
+const COLOR_ACTIVE = '#CFE6FC';
-const COLOR_NOT_STARTED = "#F1F5F9";
+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-black font-semibold'
-                  : "text-gray-600"
+                  : 'text-gray-600'
               }`}
             >
               {stepperValue.label}

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';

packages/frontend/src/components/VerticalStepper.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import * as CSS from 'csstype';
 
 //

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 {}
 

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 {

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;

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;

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;

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 {}
 

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 {

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;

packages/frontend/src/components/projects/ProjectCard/ProjectCard.tsx

@@ -3,12 +3,8 @@ import {
   MenuHandler,
   MenuItem,
   MenuList,
-} from '@material-tailwind/react';
+} from '@snowballtools/material-tailwind-react-fork';
-import React, {
+import { ComponentPropsWithoutRef, MouseEvent, useCallback } from 'react';
-  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={''}>
+            <MenuList>
-              <MenuItem placeholder={''}>Project settings</MenuItem>
+              <MenuItem>Project settings</MenuItem>
-              <MenuItem className="text-red-500" placeholder={''}>
+              <MenuItem className="text-red-500">Delete project</MenuItem>
-                Delete project
-              </MenuItem>
             </MenuList>
           </Menu>
         </div>

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';

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';

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'> {}

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';

packages/frontend/src/components/projects/create/ConnectAccount.tsx

@@ -1,21 +1,21 @@
-import React from "react";
+import React from 'react';
-import OauthPopup from "react-oauth-popup";
+import OauthPopup from 'react-oauth-popup';
 
-import { useGQLClient } from "../../../context/GQLClientContext";
+import { useGQLClient } from '../../../context/GQLClientContext';
-import { Button } from "../../shared/Button";
+import { Button } from '../../shared/Button';
 import {
   GitIcon,
   EllipsesIcon,
   SnowballIcon,
   GithubIcon,
   GitTeaIcon,
-} from "../../shared/CustomIcon";
+} from '../../shared/CustomIcon';
-import { useToast } from "../../shared/Toast";
+import { useToast } from '../../shared/Toast';
-import { IconWithFrame } from "../../shared/IconWithFrame";
+import { IconWithFrame } from '../../shared/IconWithFrame';
-import { Heading } from "../../shared/Heading";
+import { Heading } from '../../shared/Heading';
-import { MockConnectGitCard } from "./MockConnectGitCard";
+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",
+      id: 'connected-to-github',
-      title: "The Git account is connected.",
+      title: 'The Git account is connected.',
-      variant: "success",
+      variant: 'success',
     });
   };
 

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: 'Import a repository' },
-          { title: "Start with a template" },
+          { title: 'Start with a template' },
         ].map(({ title }, index) => (
           <Tabs.Trigger value={title} key={index}>
             {title}

packages/frontend/src/components/projects/create/Deploy.tsx

@@ -1,17 +1,17 @@
-import React, { useCallback, useEffect } from "react";
+import React, { useCallback, useEffect } from 'react';
-import { useNavigate, useParams, useSearchParams } from "react-router-dom";
+import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 
-import { DeployStep, DeployStatus } from "./DeployStep";
+import { DeployStep, DeployStatus } from './DeployStep';
-import { Stopwatch, setStopWatchOffset } from "../../StopWatch";
+import { Stopwatch, setStopWatchOffset } from '../../StopWatch';
-import { Heading } from "../../shared/Heading";
+import { Heading } from '../../shared/Heading';
-import { Button } from "../../shared/Button";
+import { Button } from '../../shared/Button';
-import { ClockOutlineIcon, WarningIcon } from "../../shared/CustomIcon";
+import { ClockOutlineIcon, WarningIcon } from '../../shared/CustomIcon';
-import { CancelDeploymentDialog } from "../../projects/Dialog/CancelDeploymentDialog";
+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);

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 { Stopwatch, setStopWatchOffset } from '../../StopWatch';
-import FormatMillisecond from "../../FormatMilliSecond";
+import FormatMillisecond from '../../FormatMilliSecond';
-import processLogs from "../../../assets/process-logs.json";
+import processLogs from '../../../assets/process-logs.json';
-import { cn } from "utils/classnames";
+import { cn } from 'utils/classnames';
 import {
   CheckRoundFilledIcon,
   ClockOutlineIcon,
@@ -13,15 +13,15 @@ import {
   LoaderIcon,
   MinusCircleIcon,
   PlusIcon,
-} from "components/shared/CustomIcon";
+} from 'components/shared/CustomIcon';
-import { Button } from "components/shared/Button";
+import { Button } from 'components/shared/Button';
-import { useToast } from "components/shared/Toast";
+import { useToast } from 'components/shared/Toast';
-import { useIntersectionObserver } from "usehooks-ts";
+import { useIntersectionObserver } from 'usehooks-ts';
 
 enum DeployStatus {
-  PROCESSING = "progress",
+  PROCESSING = 'progress',
-  COMPLETE = "complete",
+  COMPLETE = 'complete',
-  NOT_STARTED = "notStarted",
+  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",
+          'flex justify-between w-full py-5 gap-2',
-          disableCollapse && "cursor-auto",
+          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",
+              'text-left text-sm md:text-base',
-              status === DeployStatus.PROCESSING && "text-elements-link",
+              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",
+                  title: 'Logs copied',
-                  variant: "success",
+                  variant: 'success',
-                  id: "logs",
+                  id: 'logs',
                   onDismiss: dismiss,
                 });
               }}

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,

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,

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={''}>
+    <Dialog open={open} handler={handleOpen}>
-      <DialogHeader placeholder={''}>Assign Domain</DialogHeader>
+      <DialogHeader>Assign Domain</DialogHeader>
-      <DialogBody placeholder={''}>
+      <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>

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,

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';

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>

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',

packages/frontend/src/components/projects/project/overview/Activity/Activity.tsx

@@ -1,6 +1,4 @@
-import React from 'react';
+import { GitCommitWithBranch } from '../../../../../types/types';
-
-import { GitCommitWithBranch } from 'types';
 import { Heading } from 'components/shared/Heading';
 import ActivityCard from './ActivityCard';
 import { Button } from 'components/shared/Button';

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 {

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';
 

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={''}>
+        <Typography variant="small">Key</Typography>
-          Key
-        </Typography>
         <Input
-          crossOrigin={undefined}
           {...register(`variables.${index}.key`, {
             required: 'Key field cannot be empty',
           })}
         />
       </div>
       <div>
-        <Typography variant="small" placeholder={''}>
+        <Typography variant="small">Value</Typography>
-          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>

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={''}>
+    <Dialog open={open} handler={handleOpen}>
-      <DialogHeader className="flex justify-between" placeholder={''}>
+      <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={''}>
+        <DialogBody className="flex flex-col gap-2 p-4">
-          <Typography variant="small" placeholder={''}>
+          <Typography variant="small">
             We will send an invitation link to this email address.
           </Typography>
-          <Typography variant="small" placeholder={''}>
+          <Typography variant="small">Email address</Typography>
-            Email address
-          </Typography>
           <Input
             type="email"
-            crossOrigin={undefined}
             {...register('emailAddress', {
               required: 'email field cannot be empty',
             })}
           />
-          <Typography variant="small" placeholder={''}>
+          <Typography variant="small">Permissions</Typography>
-            Permissions
+          <Typography variant="small">
-          </Typography>
-          <Typography variant="small" placeholder={''}>
             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={''}>
+        <DialogFooter className="flex justify-start">
-          <Button
+          <Button variant="outlined" onClick={handleOpen} className="mr-1">
-            variant="outlined"
-            onClick={handleOpen}
-            className="mr-1"
-            placeholder={''}
-          >
             Cancel
           </Button>
           <Button
@@ -121,7 +108,6 @@ const AddMemberDialog = ({
             color="blue"
             type="submit"
             disabled={!isValid}
-            placeholder={''}
           >
             Send invite
           </Button>

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={''}>
+    <Dialog open={open} handler={handleOpen}>
-      <DialogHeader className="flex justify-between" placeholder={''}>
+      <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={''}>
+        <DialogBody className="flex flex-col gap-2">
-          <Typography variant="paragraph" placeholder={''}>
+          <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={''}>
+        <DialogFooter className="flex justify-start">
-          <Button
+          <Button variant="outlined" onClick={handleOpen} className="mr-1">
-            variant="outlined"
-            onClick={handleOpen}
-            className="mr-1"
-            placeholder={''}
-          >
             Cancel
           </Button>
           <Button
@@ -99,7 +92,6 @@ const DeleteProjectDialog = ({
             color="red"
             type="submit"
             disabled={!isValid}
-            placeholder={''}
           >
             Yes, Delete project
           </Button>

packages/frontend/src/components/projects/project/settings/DisplayEnvironmentVariables.tsx

@@ -1,5 +1,9 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
-import { Card, Collapse, Typography } from '@material-tailwind/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={''}>
+          <Card className="bg-gray-300 flex items-center p-4">
-            <Typography variant="small" className="text-black" placeholder={''}>
+            <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>

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={''}>
+      <Typography variant="small">Production</Typography>
-        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
+            <Typography variant="small" className="text-blue-500">
-              variant="small"
-              className="text-blue-500"
-              placeholder={''}
-            >
               ^ Checking records for {domain.name}
             </Typography>
           ) : (

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={''}>
+    <Dialog open={open} handler={handleOpen}>
-      <DialogHeader className="flex justify-between" placeholder={''}>
+      <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={''}>
+        <DialogBody className="flex flex-col gap-2 p-4">
-          <Typography variant="small" placeholder={''}>
+          <Typography variant="small">Domain name</Typography>
-            Domain name
+          <Input {...register('name')} />
-          </Typography>
+          <Typography variant="small">Redirect to</Typography>
-          <Input crossOrigin={undefined} {...register('name')} />
-          <Typography variant="small" placeholder={''}>
-            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={''}>
+          <Typography variant="small">Git branch</Typography>
-            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
+            <Typography variant="small" className="text-red-500">
-              variant="small"
-              className="text-red-500"
-              placeholder={''}
-            >
               We couldn&apos;t find this branch in the connected Git repository.
             </Typography>
           )}
         </DialogBody>
-        <DialogFooter className="flex justify-start" placeholder={''}>
+        <DialogFooter className="flex justify-start">
-          <Button
+          <Button variant="outlined" onClick={handleOpen} className="mr-1">
-            variant="outlined"
-            onClick={handleOpen}
-            className="mr-1"
-            placeholder={''}
-          >
             Cancel
           </Button>
           <Button
@@ -204,7 +187,6 @@ const EditDomainDialog = ({
             color="blue"
             type="submit"
             disabled={!isDirty}
-            placeholder={''}
           >
             Save changes
           </Button>

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={''}>
+          <Typography variant="small">Key</Typography>
-            Key
+          <Input disabled={!edit} {...register(`key`)} />
-          </Typography>
-          <Input
-            crossOrigin={undefined}
-            disabled={!edit}
-            {...register(`key`)}
-          />
         </div>
         <div>
-          <Typography variant="small" placeholder={''}>
+          <Typography variant="small">Value</Typography>
-            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>

packages/frontend/src/components/projects/project/settings/GitSelectionSection.tsx

@@ -1,6 +1,4 @@
-import React from 'react';
+import { GitSelect } from '../../../../types/types';
-
-import { GitSelect } from '../../../../types';
 
 const GitSelectionSection = ({
   gitSelectionHandler,

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>

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={''}>
+        <Typography variant="small">{linkedRepo.full_name}</Typography>
-          {linkedRepo.full_name}
+        <Typography variant="small">Connected just now</Typography>
-        </Typography>
-        <Typography variant="small" placeholder={''}>
-          Connected just now
-        </Typography>
       </div>
       <div>
         <Button
           onClick={() => setDisconnectRepoDialogOpen(true)}
           variant="outlined"
           size="sm"
-          placeholder={''}
         >
           ^ Disconnect
         </Button>

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={''}>
+        <Typography variant="h5">Setup domain name</Typography>
-          Setup domain name
+        <Typography variant="small">
-        </Typography>
-        <Typography variant="small" placeholder={''}>
           Add your domain and setup redirects
         </Typography>
       </div>
 
       <div className="w-auto">
-        <Typography variant="small" placeholder={''}>
+        <Typography variant="small">Domain name</Typography>
-          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>

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>

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';

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';

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';
 

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';

packages/frontend/src/components/shared/Calendar/Calendar.tsx

@@ -1,4 +1,4 @@
-import React, {
+import {
   ComponentPropsWithRef,
   MouseEvent,
   ReactNode,

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';
 

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';
 

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) => {

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) => {

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) => {

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) => {

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) => {

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) => {

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) => {

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) => {

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) => {

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) => {

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) => {

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) => {

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) => {

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) => {

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) => {

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) => {

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) => {

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) => {

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) => {

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) => {

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) => {

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) => {

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) => {

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) => {

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) => {

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) => {

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

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) => {

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';
 

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) => {

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) => {

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) => {

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) => {

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) => {

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) => {

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) => {