temp (?) fix build

revert this if needed

packages/frontend/src/components/DatePicker.tsx

@@ -126,7 +126,8 @@ const DatePicker = ({
           crossOrigin={undefined}
         />
       </PopoverHandler>
-      <PopoverContent>
+      {/* TODO: Figure out what placeholder is for */}
+      <PopoverContent placeholder={''}>
         {mode === 'single' && (
           <DayPicker
             mode="single"
@@ -145,19 +146,23 @@ const DatePicker = ({
             />
             <HorizontalLine />
             <div className="flex justify-end">
+              {/* TODO: Figure out what placeholder is for */}
               <Button
                 size="sm"
                 className="rounded-full mr-2"
                 variant="outlined"
                 onClick={() => setIsOpen(false)}
+                placeholder={''}
               >
                 Cancel
               </Button>
+              {/* TODO: Figure out what placeholder is for */}
               <Button
                 size="sm"
                 className="rounded-full"
                 color="gray"
                 onClick={() => handleRangeSelect()}
+                placeholder={''}
               >
                 Select
               </Button>

packages/frontend/src/components/Sidebar.tsx

@@ -52,7 +52,7 @@ const Sidebar = () => {
               <div>^</div>
               <div>
                 <span>{organizations[index!]?.name}</span>
-                <Typography>Organization</Typography>
+                <Typography placeholder={''}>Organization</Typography>
               </div>
             </div>
           )}
@@ -70,7 +70,7 @@ const Sidebar = () => {
             to={`/${orgSlug}`}
             className={({ isActive }) => (isActive ? 'text-blue-500' : '')}
           >
-            <Typography>Projects</Typography>
+            <Typography placeholder={''}>Projects</Typography>
           </NavLink>
         </div>
         <div>
@@ -78,7 +78,7 @@ const Sidebar = () => {
             to={`/${orgSlug}/settings`}
             className={({ isActive }) => (isActive ? 'text-blue-500' : '')}
           >
-            <Typography>Settings</Typography>
+            <Typography placeholder={''}>Settings</Typography>
           </NavLink>
         </div>
       </div>

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

@@ -21,11 +21,15 @@ const ProjectCard: React.FC<ProjectCardProps> = ({ project }) => {
   return (
     <div className="bg-white border border-gray-200 rounded-lg shadow">
       <div className="flex gap-2 p-2 items-center">
-        <Avatar variant="rounded" src={project.icon || '/gray.png'} />
+        <Avatar
+          variant="rounded"
+          src={project.icon || '/gray.png'}
+          placeholder={''}
+        />
         <div className="grow">
           <Link to={`projects/${project.id}`}>
-            <Typography>{project.name}</Typography>
+            <Typography placeholder={''}>{project.name}</Typography>
-            <Typography color="gray" variant="small">
+            <Typography color="gray" variant="small" placeholder={''}>
               {project.deployments[0]?.domain?.name ??
                 'No Production Deployment'}
             </Typography>
@@ -35,25 +39,27 @@ const ProjectCard: React.FC<ProjectCardProps> = ({ project }) => {
           <MenuHandler>
             <button>...</button>
           </MenuHandler>
-          <MenuList>
+          <MenuList placeholder={''}>
-            <MenuItem>^ Project settings</MenuItem>
+            <MenuItem placeholder={''}>^ Project settings</MenuItem>
-            <MenuItem className="text-red-500">^ Delete project</MenuItem>
+            <MenuItem className="text-red-500" placeholder={''}>
+              ^ Delete project
+            </MenuItem>
           </MenuList>
         </Menu>
       </div>
       <div className="border-t-2 border-solid p-4 bg-gray-50">
         {project.deployments.length > 0 ? (
           <>
-            <Typography variant="small" color="gray">
+            <Typography variant="small" color="gray" placeholder={''}>
               ^ {project.deployments[0].commitMessage}
             </Typography>
-            <Typography variant="small" color="gray">
+            <Typography variant="small" color="gray" placeholder={''}>
               {relativeTimeMs(project.deployments[0].createdAt)} on ^&nbsp;
               {project.deployments[0].branch}
             </Typography>
           </>
         ) : (
-          <Typography variant="small" color="gray">
+          <Typography variant="small" color="gray" placeholder={''}>
             No Production deployment
           </Typography>
         )}

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

@@ -71,12 +71,13 @@ const ProjectSearchBar = ({ onChange }: ProjectsSearchProps) => {
         className={`absolute w-1/2 max-h-52 -mt-1 overflow-y-auto ${
           (!inputValue || !isOpen) && 'hidden'
         }`}
+        placeholder={''}
       >
         <List {...getMenuProps()}>
           {items.length ? (
             <>
               <div className="p-3">
-                <Typography variant="small" color="gray">
+                <Typography variant="small" color="gray" placeholder={''}>
                   Suggestions
                 </Typography>
               </div>
@@ -84,19 +85,25 @@ const ProjectSearchBar = ({ onChange }: ProjectsSearchProps) => {
                 <ListItem
                   selected={highlightedIndex === index || selectedItem === item}
                   key={item.id}
+                  placeholder={''}
                   {...getItemProps({ item, index })}
                 >
-                  <ListItemPrefix>
+                  <ListItemPrefix placeholder={''}>
-                    <Avatar src={item.icon || '/gray.png'} variant="rounded" />
+                    <Avatar
+                      src={item.icon || '/gray.png'}
+                      variant="rounded"
+                      placeholder={''}
+                    />
                   </ListItemPrefix>
                   <div>
-                    <Typography variant="h6" color="blue-gray">
+                    <Typography variant="h6" color="blue-gray" placeholder={''}>
                       {item.name}
                     </Typography>
                     <Typography
                       variant="small"
                       color="gray"
                       className="font-normal"
+                      placeholder={''}
                     >
                       {item.organization.name}
                     </Typography>
@@ -106,7 +113,9 @@ const ProjectSearchBar = ({ onChange }: ProjectsSearchProps) => {
             </>
           ) : (
             <div className="p-3">
-              <Typography>^ No projects matching this name</Typography>
+              <Typography placeholder={''}>
+                ^ No projects matching this name
+              </Typography>
             </div>
           )}
         </List>

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

@@ -46,9 +46,15 @@ const ConnectAccount = ({ onAuth: onToken }: ConnectAccountInterface) => {
           width={1000}
           height={1000}
         >
-          <Button className="rounded-full mx-2">Connect to Github</Button>
+          {/* TODO: figure out what placeholder is for */}
+          <Button className="rounded-full mx-2" placeholder={''}>
+            Connect to Github
+          </Button>
         </OauthPopup>
-        <Button className="rounded-full mx-2">Connect to Gitea</Button>
+        {/* TODO: figure out what placeholder is for */}
+        <Button className="rounded-full mx-2" placeholder={''}>
+          Connect to Gitea
+        </Button>
       </div>
       <ConnectAccountTabPanel />
     </div>

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

@@ -5,11 +5,11 @@ import { Tabs, TabsHeader, Tab } from '@material-tailwind/react';
 const ConnectAccountTabPanel = () => {
   return (
     <Tabs className="grid bg-white h-32 p-2 m-4 rounded-md" value="import">
-      <TabsHeader className="grid grid-cols-2">
+      <TabsHeader className="grid grid-cols-2" placeholder={''}>
-        <Tab className="row-span-1" value="import">
+        <Tab className="row-span-1" value="import" placeholder={''}>
           Import a repository
         </Tab>
-        <Tab className="row-span-2" value="template">
+        <Tab className="row-span-2" value="template" placeholder={''}>
           Start with a template
         </Tab>
       </TabsHeader>

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

@@ -43,7 +43,12 @@ const Deploy = () => {
           </div>
         </div>
         <div>
-          <Button onClick={handleOpen} variant="outlined" size="sm">
+          <Button
+            onClick={handleOpen}
+            variant="outlined"
+            size="sm"
+            placeholder={''}
+          >
             ^ Cancel
           </Button>
         </div>
@@ -55,7 +60,7 @@ const Deploy = () => {
           handleConfirm={handleCancel}
           color="red"
         >
-          <Typography variant="small">
+          <Typography variant="small" placeholder={''}>
             This will halt the deployment and you will have to start the process
             from scratch.
           </Typography>

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

@@ -62,7 +62,12 @@ const DeployStep = ({
         <div className="p-2 text-sm text-gray-500 h-36 overflow-y-scroll">
           {processLogs.map((log, key) => {
             return (
-              <Typography variant="small" color="gray" key={key}>
+              <Typography
+                variant="small"
+                color="gray"
+                key={key}
+                placeholder={''}
+              >
                 {log}
               </Typography>
             );
@@ -75,6 +80,7 @@ const DeployStep = ({
                 toast.success('Logs copied');
               }}
               color="blue"
+              placeholder={''}
             >
               ^ Copy log
             </Button>

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

@@ -66,7 +66,9 @@ const ProjectRepoCard: React.FC<ProjectRepoCardProps> = ({ repository }) => {
         <Spinner className="h-4 w-4" />
       ) : (
         <div className="hidden group-hover:block">
-          <IconButton size="sm">{'>'}</IconButton>
+          <IconButton size="sm" placeholder={''}>
+            {'>'}
+          </IconButton>
         </div>
       )}
     </div>

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

@@ -136,11 +136,12 @@ const RepositoryList = ({ octokit }: RepositoryListProps) => {
       ) : (
         <div className="mt-4 p-6 flex items-center justify-center">
           <div className="text-center">
-            <Typography>No repository found</Typography>
+            <Typography placeholder={''}>No repository found</Typography>
             <Button
               className="rounded-full mt-5"
               size="sm"
               onClick={handleResetFilters}
+              placeholder={''}
             >
               ^ Reset filters
             </Button>

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

@@ -18,11 +18,15 @@ interface TemplateCardProps {
 const CardDetails = ({ template }: { template: TemplateDetails }) => {
   return (
     <div className="h-14 group bg-gray-200 border-gray-200 rounded-lg shadow p-4 flex items-center justify-between">
-      <Typography className="grow">
+      <Typography className="grow" placeholder={''}>
         {template.icon} {template.name}
       </Typography>
       <div>
-        <IconButton size="sm" className="rounded-full hidden group-hover:block">
+        <IconButton
+          size="sm"
+          className="rounded-full hidden group-hover:block"
+          placeholder={''}
+        >
           {'>'}
         </IconButton>
       </div>

packages/frontend/src/components/projects/project/ActivityCard.tsx

@@ -13,20 +13,29 @@ const ActivityCard = ({ activity }: ActivityCardProps) => {
   return (
     <div className="group flex gap-2 hover:bg-gray-200 rounded mt-1">
       <div className="w-8">
-        <Avatar src={activity.author?.avatar_url} variant="rounded" size="sm" />
+        <Avatar
+          src={activity.author?.avatar_url}
+          variant="rounded"
+          size="sm"
+          placeholder={''}
+        />
       </div>
       <div className="grow">
-        <Typography>{activity.commit.author?.name}</Typography>
+        <Typography placeholder={''}>{activity.commit.author?.name}</Typography>
-        <Typography variant="small" color="gray">
+        <Typography variant="small" color="gray" placeholder={''}>
           {relativeTimeISO(activity.commit.author!.date!)} ^{' '}
           {activity.branch.name}
         </Typography>
-        <Typography variant="small" color="gray">
+        <Typography variant="small" color="gray" placeholder={''}>
           {activity.commit.message}
         </Typography>
       </div>
       <div className="mr-2 self-center hidden group-hover:block">
-        <IconButton size="sm" className="rounded-full bg-gray-600">
+        <IconButton
+          size="sm"
+          className="rounded-full bg-gray-600"
+          placeholder={''}
+        >
           {'>'}
         </IconButton>
       </div>

packages/frontend/src/components/projects/project/deployments/AssignDomainDialog.tsx

@@ -17,9 +17,9 @@ interface AssignDomainProps {
 
 const AssignDomainDialog = ({ open, handleOpen }: AssignDomainProps) => {
   return (
-    <Dialog open={open} handler={handleOpen}>
+    <Dialog open={open} handler={handleOpen} placeholder={''}>
-      <DialogHeader>Assign Domain</DialogHeader>
+      <DialogHeader placeholder={''}>Assign Domain</DialogHeader>
-      <DialogBody>
+      <DialogBody placeholder={''}>
         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,12 +36,13 @@ const AssignDomainDialog = ({ open, handleOpen }: AssignDomainProps) => {
           theme={atomOneLight}
         />
       </DialogBody>
-      <DialogFooter className="flex justify-start">
+      <DialogFooter className="flex justify-start" placeholder={''}>
         <Button
           className="rounded-3xl"
           variant="gradient"
           color="blue"
           onClick={handleOpen}
+          placeholder={''}
         >
           <span>Okay</span>
         </Button>

packages/frontend/src/components/projects/project/deployments/DeploymentDetailsCard.tsx

@@ -93,10 +93,12 @@ const DeploymentDetailsCard = ({
       <div className="col-span-3">
         <div className="flex">
           {deployment.url && (
-            <Typography className=" basis-3/4">{deployment.url}</Typography>
+            <Typography className="basis-3/4" placeholder={''}>
+              {deployment.url}
+            </Typography>
           )}
         </div>
-        <Typography color="gray">
+        <Typography color="gray" placeholder={''}>
           {deployment.environment === Environment.Production
             ? `Production ${deployment.isCurrent ? '(Current)' : ''}`
             : 'Preview'}
@@ -111,14 +113,16 @@ const DeploymentDetailsCard = ({
         />
       </div>
       <div className="col-span-2">
-        <Typography color="gray">^ {deployment.branch}</Typography>
+        <Typography color="gray" placeholder={''}>
-        <Typography color="gray">
+          ^ {deployment.branch}
+        </Typography>
+        <Typography color="gray" placeholder={''}>
           ^ {deployment.commitHash.substring(0, SHORT_COMMIT_HASH_LENGTH)}{' '}
           {deployment.commitMessage}
         </Typography>
       </div>
       <div className="col-span-2 flex items-center">
-        <Typography color="gray" className="grow">
+        <Typography color="gray" className="grow" placeholder={''}>
           ^ {relativeTimeMs(deployment.createdAt)} ^{' '}
           <Tooltip content={deployment.createdBy.name}>
             {formatAddress(deployment.createdBy.name ?? '')}
@@ -128,18 +132,22 @@ const DeploymentDetailsCard = ({
           <MenuHandler>
             <button className="self-start">...</button>
           </MenuHandler>
-          <MenuList>
+          <MenuList placeholder={''}>
             <a href={deployment.url} target="_blank" rel="noreferrer">
-              <MenuItem disabled={!Boolean(deployment.url)}>^ Visit</MenuItem>
+              <MenuItem disabled={!Boolean(deployment.url)} placeholder={''}>
+                ^ Visit
+              </MenuItem>
             </a>
             <MenuItem
               onClick={() => setAssignDomainDialog(!assignDomainDialog)}
+              placeholder={''}
             >
               ^ Assign domain
             </MenuItem>
             <MenuItem
               onClick={() => setChangeToProduction(!changeToProduction)}
               disabled={!(deployment.environment !== Environment.Production)}
+              placeholder={''}
             >
               ^ Change to production
             </MenuItem>
@@ -152,6 +160,7 @@ const DeploymentDetailsCard = ({
                   deployment.isCurrent
                 )
               }
+              placeholder={''}
             >
               ^ Redeploy to production
             </MenuItem>
@@ -162,6 +171,7 @@ const DeploymentDetailsCard = ({
                 deployment.environment !== Environment.Production ||
                 !Boolean(currentDeployment)
               }
+              placeholder={''}
             >
               ^ Rollback to this version
             </MenuItem>
@@ -180,17 +190,22 @@ const DeploymentDetailsCard = ({
         }}
       >
         <div className="flex flex-col gap-2">
-          <Typography variant="small">
+          <Typography variant="small" placeholder={''}>
             Upon confirmation, this deployment will be changed to production.
           </Typography>
           <DeploymentDialogBodyCard deployment={deployment} />
-          <Typography variant="small">
+          <Typography variant="small" placeholder={''}>
             The new deployment will be associated with these domains:
           </Typography>
           {prodBranchDomains.length > 0 &&
             prodBranchDomains.map((value) => {
               return (
-                <Typography variant="small" color="blue" key={value.id}>
+                <Typography
+                  variant="small"
+                  color="blue"
+                  key={value.id}
+                  placeholder={''}
+                >
                   ^ {value.name}
                 </Typography>
               );
@@ -209,16 +224,16 @@ const DeploymentDetailsCard = ({
         }}
       >
         <div className="flex flex-col gap-2">
-          <Typography variant="small">
+          <Typography variant="small" placeholder={''}>
             Upon confirmation, new deployment will be created with the same
             source code as current deployment.
           </Typography>
           <DeploymentDialogBodyCard deployment={deployment} />
-          <Typography variant="small">
+          <Typography variant="small" placeholder={''}>
             These domains will point to your new deployment:
           </Typography>
           {deployment.domain?.name && (
-            <Typography variant="small" color="blue">
+            <Typography variant="small" color="blue" placeholder={''}>
               {deployment.domain?.name}
             </Typography>
           )}
@@ -237,7 +252,7 @@ const DeploymentDetailsCard = ({
           }}
         >
           <div className="flex flex-col gap-2">
-            <Typography variant="small">
+            <Typography variant="small" placeholder={''}>
               Upon confirmation, this deployment will replace your current
               deployment
             </Typography>
@@ -255,10 +270,10 @@ const DeploymentDetailsCard = ({
                 color: 'orange',
               }}
             />
-            <Typography variant="small">
+            <Typography variant="small" placeholder={''}>
               These domains will point to your new deployment:
             </Typography>
-            <Typography variant="small" color="blue">
+            <Typography variant="small" color="blue" placeholder={''}>
               ^ {currentDeployment.domain?.name}
             </Typography>
           </div>

packages/frontend/src/components/projects/project/deployments/DeploymentDialogBodyCard.tsx

@@ -20,7 +20,7 @@ const DeploymentDialogBodyCard = ({
   deployment,
 }: DeploymentDialogBodyCardProps) => {
   return (
-    <Card className="p-2 shadow-none">
+    <Card className="p-2 shadow-none" placeholder={''}>
       {chip && (
         <Chip
           className={`w-fit normal-case font-normal`}
@@ -30,16 +30,16 @@ const DeploymentDialogBodyCard = ({
         />
       )}
       {deployment.url && (
-        <Typography variant="small" className="text-black">
+        <Typography variant="small" className="text-black" placeholder={''}>
           {deployment.url}
         </Typography>
       )}
-      <Typography variant="small">
+      <Typography variant="small" placeholder={''}>
         ^ {deployment.branch} ^{' '}
         {deployment.commitHash.substring(0, SHORT_COMMIT_HASH_LENGTH)}{' '}
         {deployment.commitMessage}
       </Typography>
-      <Typography variant="small">
+      <Typography variant="small" placeholder={''}>
         ^ {relativeTimeMs(deployment.createdAt)} ^{' '}
         {formatAddress(deployment.createdBy.name ?? '')}
       </Typography>

packages/frontend/src/components/projects/project/deployments/FilterForm.tsx

@@ -77,6 +77,7 @@ const FilterForm = ({ value, onChange }: FilterFormProps) => {
               onClick={() => setSelectedStatus(StatusOptions.ALL_STATUS)}
               className="rounded-full"
               size="sm"
+              placeholder={''}
             >
               X
             </IconButton>

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

@@ -21,7 +21,9 @@ const AddEnvironmentVariableRow = ({
   return (
     <div className="flex gap-1 p-2">
       <div>
-        <Typography variant="small">Key</Typography>
+        <Typography variant="small" placeholder={''}>
+          Key
+        </Typography>
         <Input
           crossOrigin={undefined}
           {...register(`variables.${index}.key`, {
@@ -30,7 +32,9 @@ const AddEnvironmentVariableRow = ({
         />
       </div>
       <div>
-        <Typography variant="small">Value</Typography>
+        <Typography variant="small" placeholder={''}>
+          Value
+        </Typography>
         <Input
           crossOrigin={undefined}
           {...register(`variables.${index}.value`, {
@@ -43,6 +47,7 @@ const AddEnvironmentVariableRow = ({
           size="sm"
           onClick={() => onDelete()}
           disabled={isDeleteDisabled}
+          placeholder={''}
         >
           {'>'}
         </IconButton>

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

@@ -61,23 +61,26 @@ const AddMemberDialog = ({
   }, []);
 
   return (
-    <Dialog open={open} handler={handleOpen}>
+    <Dialog open={open} handler={handleOpen} placeholder={''}>
-      <DialogHeader className="flex justify-between">
+      <DialogHeader className="flex justify-between" placeholder={''}>
         <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">
+        <DialogBody className="flex flex-col gap-2 p-4" placeholder={''}>
-          <Typography variant="small">
+          <Typography variant="small" placeholder={''}>
             We will send an invitation link to this email address.
           </Typography>
-          <Typography variant="small">Email address</Typography>
+          <Typography variant="small" placeholder={''}>
+            Email address
+          </Typography>
           <Input
             type="email"
             crossOrigin={undefined}
@@ -85,8 +88,10 @@ const AddMemberDialog = ({
               required: 'email field cannot be empty',
             })}
           />
-          <Typography variant="small">Permissions</Typography>
+          <Typography variant="small" placeholder={''}>
-          <Typography variant="small">
+            Permissions
+          </Typography>
+          <Typography variant="small" placeholder={''}>
             You can change this later if required.
           </Typography>
           <Checkbox
@@ -102,8 +107,13 @@ const AddMemberDialog = ({
             color="blue"
           />
         </DialogBody>
-        <DialogFooter className="flex justify-start">
+        <DialogFooter className="flex justify-start" placeholder={''}>
-          <Button variant="outlined" onClick={handleOpen} className="mr-1">
+          <Button
+            variant="outlined"
+            onClick={handleOpen}
+            className="mr-1"
+            placeholder={''}
+          >
             Cancel
           </Button>
           <Button
@@ -111,6 +121,7 @@ const AddMemberDialog = ({
             color="blue"
             type="submit"
             disabled={!isValid}
+            placeholder={''}
           >
             Send invite
           </Button>

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

@@ -53,20 +53,21 @@ const DeleteProjectDialog = ({
   }, [client, project, handleOpen]);
 
   return (
-    <Dialog open={open} handler={handleOpen}>
+    <Dialog open={open} handler={handleOpen} placeholder={''}>
-      <DialogHeader className="flex justify-between">
+      <DialogHeader className="flex justify-between" placeholder={''}>
         <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">
+        <DialogBody className="flex flex-col gap-2" placeholder={''}>
-          <Typography variant="paragraph">
+          <Typography variant="paragraph" placeholder={''}>
             Deleting your project is irreversible. Enter your project’s
             name&nbsp;
             <span className="bg-blue-100 text-blue-700">({project.name})</span>
@@ -80,12 +81,17 @@ const DeleteProjectDialog = ({
               validate: (value) => value === project.name,
             })}
           />
-          <Typography variant="small" color="red">
+          <Typography variant="small" color="red" placeholder={''}>
             ^ Deleting your project is irreversible.
           </Typography>
         </DialogBody>
-        <DialogFooter className="flex justify-start">
+        <DialogFooter className="flex justify-start" placeholder={''}>
-          <Button variant="outlined" onClick={handleOpen} className="mr-1">
+          <Button
+            variant="outlined"
+            onClick={handleOpen}
+            className="mr-1"
+            placeholder={''}
+          >
             Cancel
           </Button>
           <Button
@@ -93,6 +99,7 @@ const DeleteProjectDialog = ({
             color="red"
             type="submit"
             disabled={!isValid}
+            placeholder={''}
           >
             Yes, Delete project
           </Button>

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

@@ -29,11 +29,11 @@ const DisplayEnvironmentVariables = ({
       </div>
       <Collapse open={openCollapse}>
         {variables.length === 0 ? (
-          <Card className="bg-gray-300 flex items-center p-4">
+          <Card className="bg-gray-300 flex items-center p-4" placeholder={''}>
-            <Typography variant="small" className="text-black">
+            <Typography variant="small" className="text-black" placeholder={''}>
               No environment variables added yet.
             </Typography>
-            <Typography variant="small">
+            <Typography variant="small" placeholder={''}>
               Once you add them, they’ll show up here.
             </Typography>
           </Card>

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

@@ -68,7 +68,7 @@ const DomainCard = ({
     <>
       <div className="flex justify-between py-3">
         <div className="flex justify-start gap-1">
-          <Typography variant="h6">
+          <Typography variant="h6" placeholder={''}>
             <i>^</i> {domain.name}
           </Typography>
           <Chip
@@ -97,18 +97,20 @@ const DomainCard = ({
             <MenuHandler>
               <button className="border-2 rounded-full w-8 h-8">...</button>
             </MenuHandler>
-            <MenuList>
+            <MenuList placeholder={''}>
               <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>
@@ -127,7 +129,7 @@ const DomainCard = ({
           }}
           color="red"
         >
-          <Typography variant="small">
+          <Typography variant="small" placeholder={''}>
             Once deleted, the project{' '}
             <span className="bg-blue-100 rounded-sm p-0.5 text-blue-700">
               {project.name}
@@ -140,15 +142,21 @@ const DomainCard = ({
         </ConfirmDialog>
       </div>
 
-      <Typography variant="small">Production</Typography>
+      <Typography variant="small" placeholder={''}>
+        Production
+      </Typography>
       {domain.status === DomainStatus.Pending && (
-        <Card className="bg-gray-200 p-4 text-sm">
+        <Card className="bg-gray-200 p-4 text-sm" placeholder={''}>
           {refreshStatus === RefreshStatus.IDLE ? (
-            <Typography variant="small">
+            <Typography variant="small" placeholder={''}>
               ^ Add these records to your domain and refresh to check
             </Typography>
           ) : refreshStatus === RefreshStatus.CHECKING ? (
-            <Typography variant="small" className="text-blue-500">
+            <Typography
+              variant="small"
+              className="text-blue-500"
+              placeholder={''}
+            >
               ^ Checking records for {domain.name}
             </Typography>
           ) : (

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

@@ -122,27 +122,32 @@ const EditDomainDialog = ({
   }, [domain]);
 
   return (
-    <Dialog open={open} handler={handleOpen}>
+    <Dialog open={open} handler={handleOpen} placeholder={''}>
-      <DialogHeader className="flex justify-between">
+      <DialogHeader className="flex justify-between" placeholder={''}>
         <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">
+        <DialogBody className="flex flex-col gap-2 p-4" placeholder={''}>
-          <Typography variant="small">Domain name</Typography>
+          <Typography variant="small" placeholder={''}>
+            Domain name
+          </Typography>
           <Input crossOrigin={undefined} {...register('name')} />
-          <Typography variant="small">Redirect to</Typography>
+          <Typography variant="small" placeholder={''}>
+            Redirect to
+          </Typography>
           <Controller
             name="redirectedTo"
             control={control}
             render={({ field }) => (
-              <Select {...field} disabled={isDisableDropdown}>
+              <Select {...field} disabled={isDisableDropdown} placeholder={''}>
                 {redirectOptions.map((option, key) => (
                   <Option key={key} value={option}>
                     ^ {option}
@@ -154,14 +159,16 @@ const EditDomainDialog = ({
           {isDisableDropdown && (
             <div className="flex p-2 gap-2 text-black bg-gray-300 rounded-lg">
               <div>^</div>
-              <Typography variant="small">
+              <Typography variant="small" placeholder={''}>
                 Domain “{domainRedirectedFrom ? domainRedirectedFrom.name : ''}”
                 redirects to this domain so you can not redirect this doman
                 further.
               </Typography>
             </div>
           )}
-          <Typography variant="small">Git branch</Typography>
+          <Typography variant="small" placeholder={''}>
+            Git branch
+          </Typography>
           <Input
             crossOrigin={undefined}
             {...register('branch', {
@@ -174,13 +181,22 @@ const EditDomainDialog = ({
             }
           />
           {!isValid && (
-            <Typography variant="small" className="text-red-500">
+            <Typography
+              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">
+        <DialogFooter className="flex justify-start" placeholder={''}>
-          <Button variant="outlined" onClick={handleOpen} className="mr-1">
+          <Button
+            variant="outlined"
+            onClick={handleOpen}
+            className="mr-1"
+            placeholder={''}
+          >
             Cancel
           </Button>
           <Button
@@ -188,6 +204,7 @@ const EditDomainDialog = ({
             color="blue"
             type="submit"
             disabled={!isDirty}
+            placeholder={''}
           >
             Save changes
           </Button>

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

@@ -84,7 +84,9 @@ const EditEnvironmentVariableRow = ({
     <>
       <div className="flex gap-1 p-2">
         <div>
-          <Typography variant="small">Key</Typography>
+          <Typography variant="small" placeholder={''}>
+            Key
+          </Typography>
           <Input
             crossOrigin={undefined}
             disabled={!edit}
@@ -92,7 +94,9 @@ const EditEnvironmentVariableRow = ({
           />
         </div>
         <div>
-          <Typography variant="small">Value</Typography>
+          <Typography variant="small" placeholder={''}>
+            Value
+          </Typography>
           <Input
             crossOrigin={undefined}
             disabled={!edit}
@@ -114,6 +118,7 @@ const EditEnvironmentVariableRow = ({
               <IconButton
                 onClick={handleSubmit(updateEnvironmentVariableHandler)}
                 size="sm"
+                placeholder={''}
               >
                 {'S'}
               </IconButton>
@@ -125,6 +130,7 @@ const EditEnvironmentVariableRow = ({
                   reset();
                   setEdit((preVal) => !preVal);
                 }}
+                placeholder={''}
               >
                 {'C'}
               </IconButton>
@@ -138,6 +144,7 @@ const EditEnvironmentVariableRow = ({
                 onClick={() => {
                   setEdit((preVal) => !preVal);
                 }}
+                placeholder={''}
               >
                 {'E'}
               </IconButton>
@@ -146,6 +153,7 @@ const EditEnvironmentVariableRow = ({
               <IconButton
                 size="sm"
                 onClick={() => setDeleteDialogOpen((preVal) => !preVal)}
+                placeholder={''}
               >
                 {'D'}
               </IconButton>
@@ -162,7 +170,7 @@ const EditEnvironmentVariableRow = ({
         handleConfirm={removeEnvironmentVariableHandler}
         color="red"
       >
-        <Typography variant="small">
+        <Typography variant="small" placeholder={''}>
           Are you sure you want to delete the variable&nbsp;
           <span className="bg-blue-100">{variable.key}</span>?
         </Typography>

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

@@ -104,6 +104,7 @@ const MemberCard = ({
             selected={(_, index) => (
               <span>{DROPDOWN_OPTIONS[index!]?.label}</span>
             )}
+            placeholder={''}
           >
             {DROPDOWN_OPTIONS.map((permission, key) => (
               <Option key={key} value={permission.value}>
@@ -132,6 +133,7 @@ const MemberCard = ({
                 onClick={() => {
                   setRemoveMemberDialogOpen((prevVal) => !prevVal);
                 }}
+                placeholder={''}
               >
                 D
               </IconButton>
@@ -152,7 +154,7 @@ const MemberCard = ({
         }}
         color="red"
       >
-        <Typography variant="small">
+        <Typography variant="small" placeholder={''}>
           Once removed, {formatAddress(member.name ?? '')} (
           {formatAddress(ethAddress)}@{emailDomain}) will not be able to access
           this project.

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

@@ -17,14 +17,19 @@ const RepoConnectedSection = ({
     <div className="flex gap-4">
       <div>^</div>
       <div className="grow">
-        <Typography variant="small">{linkedRepo.full_name}</Typography>
+        <Typography variant="small" placeholder={''}>
-        <Typography variant="small">Connected just now</Typography>
+          {linkedRepo.full_name}
+        </Typography>
+        <Typography variant="small" placeholder={''}>
+          Connected just now
+        </Typography>
       </div>
       <div>
         <Button
           onClick={() => setDisconnectRepoDialogOpen(true)}
           variant="outlined"
           size="sm"
+          placeholder={''}
         >
           ^ Disconnect
         </Button>
@@ -39,7 +44,7 @@ const RepoConnectedSection = ({
         }}
         color="red"
       >
-        <Typography variant="small">
+        <Typography variant="small" placeholder={''}>
           Any data tied to your Git project may become misconfigured. Are you
           sure you want to continue?
         </Typography>

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

@@ -54,14 +54,18 @@ const SetupDomain = () => {
       className="flex flex-col gap-6 w-full"
     >
       <div>
-        <Typography variant="h5">Setup domain name</Typography>
+        <Typography variant="h5" placeholder={''}>
-        <Typography variant="small">
+          Setup domain name
+        </Typography>
+        <Typography variant="small" placeholder={''}>
           Add your domain and setup redirects
         </Typography>
       </div>
 
       <div className="w-auto">
-        <Typography variant="small">Domain name</Typography>
+        <Typography variant="small" placeholder={''}>
+          Domain name
+        </Typography>
         <Input
           type="text"
           variant="outlined"
@@ -76,7 +80,7 @@ const SetupDomain = () => {
 
       {isValid && (
         <div>
-          <Typography>Primary domain</Typography>
+          <Typography placeholder={''}>Primary domain</Typography>
           <div className="flex flex-col gap-3">
             <Radio
               label={domainStr}
@@ -108,6 +112,7 @@ 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

@@ -23,6 +23,7 @@ const WebhookCard = ({ webhookUrl, onDelete }: WebhookCardProps) => {
             navigator.clipboard.writeText(webhookUrl);
             toast.success('Copied to clipboard');
           }}
+          placeholder={''}
         >
           C
         </Button>
@@ -32,6 +33,7 @@ const WebhookCard = ({ webhookUrl, onDelete }: WebhookCardProps) => {
           onClick={() => {
             setDeleteDialogOpen(true);
           }}
+          placeholder={''}
         >
           X
         </Button>
@@ -48,7 +50,7 @@ const WebhookCard = ({ webhookUrl, onDelete }: WebhookCardProps) => {
         }}
         color="red"
       >
-        <Typography variant="small">
+        <Typography variant="small" placeholder={''}>
           Are you sure you want to delete the variable{' '}
           <span className="bg-blue-100 p-0.5 rounded-sm">{webhookUrl}</span>?
         </Typography>

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

@@ -9,7 +9,7 @@ const AsyncSelect = React.forwardRef((props: SelectProps, ref: any) => {
 
   useEffect(() => setKey((preVal) => preVal + 1), [props]);
 
-  return <Select key={key} ref={ref} {...props} />;
+  return <Select key={key} ref={ref} {...props} placeholder={''} />;
 });
 
 AsyncSelect.displayName = 'AsyncSelect';

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

@@ -30,23 +30,31 @@ const ConfirmDialog = ({
   color,
 }: ConfirmDialogProp) => {
   return (
-    <Dialog open={open} handler={handleOpen}>
+    <Dialog open={open} handler={handleOpen} placeholder={''}>
-      <DialogHeader className="flex justify-between">
+      <DialogHeader className="flex justify-between" placeholder={''}>
-        <Typography variant="h6">{dialogTitle} </Typography>
+        <Typography variant="h6" placeholder={''}>
+          {dialogTitle}{' '}
+        </Typography>
         <Button
           variant="outlined"
           onClick={handleOpen}
           className=" rounded-full"
+          placeholder={''}
         >
           X
         </Button>
       </DialogHeader>
-      <DialogBody>{children}</DialogBody>
+      <DialogBody placeholder={''}>{children}</DialogBody>
-      <DialogFooter className="flex justify-start gap-2">
+      <DialogFooter className="flex justify-start gap-2" placeholder={''}>
-        <Button variant="outlined" onClick={handleOpen}>
+        <Button variant="outlined" onClick={handleOpen} placeholder={''}>
           Cancel
         </Button>
-        <Button variant="gradient" color={color} onClick={handleConfirm}>
+        <Button
+          variant="gradient"
+          color={color}
+          onClick={handleConfirm}
+          placeholder={''}
+        >
           {confirmButtonTitle}
         </Button>
       </DialogFooter>

packages/frontend/src/layouts/ProjectSearch.tsx

@@ -36,11 +36,17 @@ const ProjectSearch = () => {
               }}
             />
           </div>
-          <IconButton color="blue" className="rounded-full mr-2">
+          <IconButton
-            <Typography variant="h5">+</Typography>
+            color="blue"
+            className="rounded-full mr-2"
+            placeholder={''}
+          >
+            <Typography variant="h5" placeholder={''}>
+              +
+            </Typography>
           </IconButton>
           <div className="mr-2 flex items-center">
-            <Typography>^</Typography>
+            <Typography placeholder={''}>^</Typography>
           </div>
           <div className="px-2 py-1 bg-blue-gray-50 rounded-lg flex items-center">
             {user?.name && (

packages/frontend/src/pages/org-slug/index.tsx

@@ -28,7 +28,9 @@ const Projects = () => {
       <div className="flex p-5">
         <div className="grow">
           <div className="flex gap-2 items-center">
-            <Typography variant="h4">Projects</Typography>
+            <Typography variant="h4" placeholder={''}>
+              Projects
+            </Typography>
             <Chip
               className="bg-gray-300 rounded-full static"
               value={projects.length}
@@ -38,7 +40,7 @@ const Projects = () => {
         </div>
         <div>
           <Link to="projects/create">
-            <Button className="rounded-full" color="blue">
+            <Button className="rounded-full" color="blue" placeholder={''}>
               Create project
             </Button>
           </Link>

packages/frontend/src/pages/org-slug/projects/Create.tsx

@@ -15,7 +15,11 @@ const CreateProject = () => {
         </div>
         <div>
           <Link to={`/${orgSlug}`}>
-            <IconButton className="rounded-full" variant="outlined">
+            <IconButton
+              className="rounded-full"
+              variant="outlined"
+              placeholder={''}
+            >
               X
             </IconButton>
           </Link>

packages/frontend/src/pages/org-slug/projects/Id.tsx

@@ -74,18 +74,23 @@ const Id = () => {
               variant="outlined"
               className="rounded-full"
               onClick={() => navigate(-1)}
+              placeholder={''}
             >
               {'<'}
             </Button>
-            <Typography variant="h3" className="grow">
+            <Typography variant="h3" className="grow" placeholder={''}>
               {project?.name}
             </Typography>
             <Link to={repoUrl} target="_blank">
-              <Button className="rounded-full" variant="outlined">
+              <Button
+                className="rounded-full"
+                variant="outlined"
+                placeholder={''}
+              >
                 Open Repo
               </Button>
             </Link>
-            <Button className="rounded-full" color="blue">
+            <Button className="rounded-full" color="blue" placeholder={''}>
               Go to app
             </Button>
           </div>
@@ -98,34 +103,55 @@ const Id = () => {
                   className:
                     'bg-transparent border-b-2 border-gray-900 shadow-none rounded-none',
                 }}
+                placeholder={''}
               >
                 <Link to="">
-                  <Tab value="" className={'p-2 cursor-pointer'}>
+                  <Tab
+                    value=""
+                    className={'p-2 cursor-pointer'}
+                    placeholder={''}
+                  >
                     Overview
                   </Tab>
                 </Link>
                 <Link to="deployments">
-                  <Tab value="deployments" className={'p-2 cursor-pointer'}>
+                  <Tab
+                    value="deployments"
+                    className={'p-2 cursor-pointer'}
+                    placeholder={''}
+                  >
                     Deployments
                   </Tab>
                 </Link>
                 <Link to="database">
-                  <Tab value="database" className={'p-2 cursor-pointer'}>
+                  <Tab
+                    value="database"
+                    className={'p-2 cursor-pointer'}
+                    placeholder={''}
+                  >
                     Database
                   </Tab>
                 </Link>
                 <Link to="integrations">
-                  <Tab value="integrations" className={'p-2 cursor-pointer'}>
+                  <Tab
+                    value="integrations"
+                    className={'p-2 cursor-pointer'}
+                    placeholder={''}
+                  >
                     Integrations
                   </Tab>
                 </Link>
                 <Link to="settings">
-                  <Tab value="settings" className={'p-2 cursor-pointer'}>
+                  <Tab
+                    value="settings"
+                    className={'p-2 cursor-pointer'}
+                    placeholder={''}
+                  >
                     Settings
                   </Tab>
                 </Link>
               </TabsHeader>
-              <TabsBody>
+              <TabsBody placeholder={''}>
                 <Outlet context={{ project, onUpdate }} />
               </TabsBody>
             </Tabs>

packages/frontend/src/pages/org-slug/projects/create/Template.tsx

@@ -46,7 +46,7 @@ const CreateWithTemplate = () => {
   return (
     <div className="flex flex-col items-center">
       <div className="flex justify-between w-5/6 my-4 bg-gray-200 rounded-xl p-6 items-center">
-        <Avatar variant="rounded" src="/gray.png" />
+        <Avatar variant="rounded" src="/gray.png" placeholder={''} />
         <div className="grow px-2">{template?.name}</div>
         <div>
           <a href={GIT_TEMPLATE_LINK} target="_blank" rel="noreferrer">

packages/frontend/src/pages/org-slug/projects/create/success/Id.tsx

@@ -39,7 +39,12 @@ const Id = () => {
                   custom domain.
                 </p>
                 <div className="my-2">
-                  <Button className="rounded-full" variant="outlined" size="sm">
+                  <Button
+                    className="rounded-full"
+                    variant="outlined"
+                    size="sm"
+                    placeholder={''}
+                  >
                     Setup domain
                   </Button>
                 </div>
@@ -51,14 +56,23 @@ const Id = () => {
         <div className="flex justify-center p-4 gap-2 my-5">
           <div>
             <Link to="/">
-              <Button className="rounded-full" variant="outlined">
+              <Button
+                className="rounded-full"
+                variant="outlined"
+                placeholder={''}
+              >
                 ^Back to projects
               </Button>
             </Link>
           </div>
           <div>
             <Link to={`/${orgSlug}/projects/${id}`}>
-              <Button className="rounded-full" variant="gradient" color="blue">
+              <Button
+                className="rounded-full"
+                variant="gradient"
+                color="blue"
+                placeholder={''}
+              >
                 View project
               </Button>
             </Link>

packages/frontend/src/pages/org-slug/projects/create/template/index.tsx

@@ -114,8 +114,10 @@ const CreateRepo = () => {
   return (
     <form onSubmit={handleSubmit(submitRepoHandler)}>
       <div className="mb-2">
-        <Typography variant="h6">Create a repository</Typography>
+        <Typography variant="h6" placeholder={''}>
-        <Typography color="gray">
+          Create a repository
+        </Typography>
+        <Typography color="gray" placeholder={''}>
           The project will be cloned into this repository
         </Typography>
       </div>
@@ -187,6 +189,7 @@ const CreateRepo = () => {
           type="submit"
           disabled={isLoading}
           loading={isLoading}
+          placeholder={''}
         >
           Deploy ^
         </Button>

packages/frontend/src/pages/org-slug/projects/id/Deployments.tsx

@@ -115,14 +115,17 @@ const DeploymentsTabPanel = () => {
         ) : (
           <div className="h-[50vh] bg-gray-100 flex rounded items-center justify-center">
             <div className="text-center">
-              <Typography variant="h5">No deployments found</Typography>
+              <Typography variant="h5" placeholder={''}>
-              <Typography>
+                No deployments found
+              </Typography>
+              <Typography placeholder={''}>
                 Please change your search query or filters
               </Typography>
               <Button
                 className="rounded-full mt-5"
                 color="white"
                 onClick={handleResetFilters}
+                placeholder={''}
               >
                 ^ Reset filters
               </Button>

packages/frontend/src/pages/org-slug/projects/id/Overview.tsx

@@ -110,10 +110,14 @@ const OverviewTabPanel = () => {
     <div className="grid grid-cols-5">
       <div className="col-span-3 p-2">
         <div className="flex items-center gap-2 p-2 ">
-          <Avatar src={project.icon || '/gray.png'} variant="rounded" />
+          <Avatar
+            src={project.icon || '/gray.png'}
+            variant="rounded"
+            placeholder={''}
+          />
           <div className="grow">
-            <Typography>{project.name}</Typography>
+            <Typography placeholder={''}>{project.name}</Typography>
-            <Typography variant="small" color="gray">
+            <Typography variant="small" color="gray" placeholder={''}>
               {project.subDomain}
             </Typography>
           </div>
@@ -144,6 +148,7 @@ const OverviewTabPanel = () => {
                 onClick={() => {
                   navigate('settings/domains');
                 }}
+                placeholder={''}
               >
                 Setup
               </Button>
@@ -176,7 +181,9 @@ const OverviewTabPanel = () => {
       </div>
       <div className="col-span-2 p-2">
         <div className="flex justify-between">
-          <Typography variant="h6">Activity</Typography>
+          <Typography variant="h6" placeholder={''}>
+            Activity
+          </Typography>
           <button className="text-xs bg-gray-300 rounded-full p-2">
             See all
           </button>

packages/frontend/src/pages/org-slug/projects/id/Settings.tsx

@@ -59,12 +59,14 @@ const SettingsTabPanel = () => {
           indicatorProps={{
             className: 'bg-gray-900/10 shadow-none !text-gray-900',
           }}
+          placeholder={''}
         >
           {tabsData.map(({ label, value, icon }) => (
             <Link key={value} to={value === 'general' ? '' : value}>
               <Tab
                 value={value === 'general' ? '' : `/${value}`}
                 className="flex justify-start"
+                placeholder={''}
               >
                 <div className="flex gap-2">
                   <div>{icon}</div>
@@ -74,7 +76,7 @@ const SettingsTabPanel = () => {
             </Link>
           ))}
         </TabsHeader>
-        <TabsBody className="col-span-2">
+        <TabsBody className="col-span-2" placeholder={''}>
           <Outlet context={{ project, onUpdate }} />
         </TabsBody>
       </Tabs>

packages/frontend/src/pages/org-slug/projects/id/settings/Domains.tsx

@@ -59,9 +59,16 @@ const Domains = () => {
   return (
     <>
       <div className="flex justify-between p-2">
-        <Typography variant="h3">Domain</Typography>
+        <Typography variant="h3" placeholder={''}>
+          Domain
+        </Typography>
         <Link to="add">
-          <Button color="blue" variant="outlined" className="rounded-full">
+          <Button
+            color="blue"
+            variant="outlined"
+            className="rounded-full"
+            placeholder={''}
+          >
             <i>^</i> Add domain
           </Button>
         </Link>

packages/frontend/src/pages/org-slug/projects/id/settings/EnvironmentVariables.tsx

@@ -133,8 +133,14 @@ export const EnvironmentVariablesTabPanel = () => {
 
   return (
     <>
-      <Typography variant="h6">Environment variables</Typography>
+      <Typography variant="h6" placeholder={''}>
-      <Typography variant="small" className="font-medium text-gray-800">
+        Environment variables
+      </Typography>
+      <Typography
+        variant="small"
+        className="font-medium text-gray-800"
+        placeholder={''}
+      >
         A new deployment is required for your changes to take effect.
       </Typography>
       <div className="bg-gray-300 rounded-lg p-2">
@@ -145,7 +151,7 @@ export const EnvironmentVariablesTabPanel = () => {
           + Create new variable
         </div>
         <Collapse open={createNewVariable}>
-          <Card className="bg-white p-2">
+          <Card className="bg-white p-2" placeholder={''}>
             <form onSubmit={handleSubmit(createEnvironmentVariablesHandler)}>
               {fields.map((field, index) => {
                 return (
@@ -168,11 +174,12 @@ export const EnvironmentVariablesTabPanel = () => {
                       value: '',
                     })
                   }
+                  placeholder={''}
                 >
                   + Add variable
                 </Button>
                 {/* TODO: Implement import environment varible functionality */}
-                <Button variant="outlined" size="sm" disabled>
+                <Button variant="outlined" size="sm" disabled placeholder={''}>
                   ^ Import .env
                 </Button>
               </div>
@@ -205,7 +212,7 @@ export const EnvironmentVariablesTabPanel = () => {
                 />
               </div>
               <div className="p-2">
-                <Button size="lg" color="blue" type="submit">
+                <Button size="lg" color="blue" type="submit" placeholder={''}>
                   Save changes
                 </Button>
               </div>

packages/frontend/src/pages/org-slug/projects/id/settings/General.tsx

@@ -121,8 +121,14 @@ const GeneralTabPanel = () => {
           }
         })}
       >
-        <Typography variant="h6">Project info</Typography>
+        <Typography variant="h6" placeholder={''}>
-        <Typography variant="small" className="font-medium text-gray-800">
+          Project info
+        </Typography>
+        <Typography
+          variant="small"
+          className="font-medium text-gray-800"
+          placeholder={''}
+        >
           App name
         </Typography>
         <Input
@@ -132,7 +138,11 @@ const GeneralTabPanel = () => {
           size="md"
           {...register('appName')}
         />
-        <Typography variant="small" className="font-medium text-gray-800">
+        <Typography
+          variant="small"
+          className="font-medium text-gray-800"
+          placeholder={''}
+        >
           Description (Optional)
         </Typography>
         <Input
@@ -141,7 +151,11 @@ const GeneralTabPanel = () => {
           size="md"
           {...register('description')}
         />
-        <Typography variant="small" className="font-medium text-gray-800">
+        <Typography
+          variant="small"
+          className="font-medium text-gray-800"
+          placeholder={''}
+        >
           Project ID
         </Typography>
         <Input
@@ -158,13 +172,16 @@ const GeneralTabPanel = () => {
           size="sm"
           className="mt-1"
           disabled={!updateProjectFormState.isDirty}
+          placeholder={''}
         >
           Save
         </Button>
       </form>
       <div className="mb-1">
-        <Typography variant="h6">Transfer project</Typography>
+        <Typography variant="h6" placeholder={''}>
-        <Typography variant="small">
+          Transfer project
+        </Typography>
+        <Typography variant="small" placeholder={''}>
           Transfer this app to your personal account or a team you are a member
           of.
           <Link to="" className="text-blue-500">
@@ -177,7 +194,11 @@ const GeneralTabPanel = () => {
             setOpenTransferDialog(!openTransferDialog);
           })}
         >
-          <Typography variant="small" className="font-medium text-gray-800">
+          <Typography
+            variant="small"
+            className="font-medium text-gray-800"
+            placeholder={''}
+          >
             Choose team
           </Typography>
           <Controller
@@ -204,6 +225,7 @@ const GeneralTabPanel = () => {
             className="mt-1"
             disabled={!formState.isValid}
             type="submit"
+            placeholder={''}
           >
             Transfer
           </Button>
@@ -216,15 +238,17 @@ const GeneralTabPanel = () => {
           handleConfirm={handleTransferProject}
           color="blue"
         >
-          <Typography variant="small">
+          <Typography variant="small" placeholder={''}>
             Upon confirmation, your project {project.name} will be transferred
             from {project.organization.name} to {selectedUserOrgName}.
           </Typography>
         </ConfirmDialog>
       </div>
       <div className="mb-1">
-        <Typography variant="h6">Delete project</Typography>
+        <Typography variant="h6" placeholder={''}>
-        <Typography variant="small">
+          Delete project
+        </Typography>
+        <Typography variant="small" placeholder={''}>
           The project will be permanently deleted, including its deployments and
           domains. This action is irreversible and can not be undone.
         </Typography>
@@ -233,6 +257,7 @@ const GeneralTabPanel = () => {
           size="sm"
           color="red"
           onClick={handleDeleteProjectDialog}
+          placeholder={''}
         >
           ^ Delete project
         </Button>

packages/frontend/src/pages/org-slug/projects/id/settings/Git.tsx

@@ -100,13 +100,15 @@ const GitTabPanel = () => {
   return (
     <>
       <div className="mb-2 p-2">
-        <Typography variant="h6" className="text-black">
+        <Typography variant="h6" className="text-black" placeholder={''}>
           Git repository
         </Typography>
 
         <div className="flex justify-between mt-4">
           <div>
-            <Typography variant="small">Pull request comments</Typography>
+            <Typography variant="small" placeholder={''}>
+              Pull request comments
+            </Typography>
           </div>
           <div>
             <Switch crossOrigin={undefined} defaultChecked />
@@ -115,7 +117,9 @@ const GitTabPanel = () => {
 
         <div className="flex justify-between">
           <div>
-            <Typography variant="small">Commit comments</Typography>
+            <Typography variant="small" placeholder={''}>
+              Commit comments
+            </Typography>
           </div>
           <div>
             <Switch crossOrigin={undefined} />
@@ -125,21 +129,23 @@ const GitTabPanel = () => {
 
       <form onSubmit={handleSubmitProdBranch(updateProdBranchHandler)}>
         <div className="mb-2 p-2">
-          <Typography variant="h6" className="text-black">
+          <Typography variant="h6" className="text-black" placeholder={''}>
             Production branch
           </Typography>
-          <Typography variant="small">
+          <Typography variant="small" placeholder={''}>
             By default, each commit pushed to the{' '}
             <span className="font-bold">{project.prodBranch}</span> branch
             initiates a production deployment. You can opt for a different
             branch for deployment in the settings.
           </Typography>
-          <Typography variant="small">Branch name</Typography>
+          <Typography variant="small" placeholder={''}>
+            Branch name
+          </Typography>
           <Input
             crossOrigin={undefined}
             {...registerProdBranch('prodBranch')}
           />
-          <Button size="sm" className="mt-1" type="submit">
+          <Button size="sm" className="mt-1" type="submit" placeholder={''}>
             Save
           </Button>
         </div>
@@ -147,23 +153,25 @@ const GitTabPanel = () => {
 
       <form onSubmit={handleSubmitWebhooks(updateWebhooksHandler)}>
         <div className="mb-2 p-2">
-          <Typography variant="h6" className="text-black">
+          <Typography variant="h6" className="text-black" placeholder={''}>
             Deploy webhooks
           </Typography>
-          <Typography variant="small">
+          <Typography variant="small" placeholder={''}>
             Webhooks configured to trigger when there is a change in a
             project&apos;s build or deployment status.
           </Typography>
           <div className="flex gap-1">
             <div className="grow">
-              <Typography variant="small">Webhook URL</Typography>
+              <Typography variant="small" placeholder={''}>
+                Webhook URL
+              </Typography>
               <Input
                 crossOrigin={undefined}
                 {...registerWebhooks('webhookUrl')}
               />
             </div>
             <div className="self-end">
-              <Button size="sm" type="submit">
+              <Button size="sm" type="submit" placeholder={''}>
                 Save
               </Button>
             </div>

packages/frontend/src/pages/org-slug/projects/id/settings/Members.tsx

@@ -75,7 +75,9 @@ const MembersTabPanel = () => {
     <div className="p-2 mb-20">
       <div className="flex justify-between mb-2">
         <div className="flex">
-          <Typography variant="h6">Members</Typography>
+          <Typography variant="h6" placeholder={''}>
+            Members
+          </Typography>
           <div>
             <Chip
               className="normal-case ml-3 font-normal"
@@ -88,6 +90,7 @@ const MembersTabPanel = () => {
           <Button
             size="sm"
             onClick={() => setAddMemberDialogOpen((preVal) => !preVal)}
+            placeholder={''}
           >
             + Add member
           </Button>

packages/frontend/src/pages/org-slug/projects/id/settings/domains/add/Config.tsx

@@ -39,8 +39,10 @@ const Config = () => {
   return (
     <div className="flex flex-col gap-6 w-full">
       <div>
-        <Typography variant="h5">Configure DNS</Typography>
+        <Typography variant="h5" placeholder={''}>
-        <Typography variant="small">
+          Configure DNS
+        </Typography>
+        <Typography variant="small" placeholder={''}>
           Add the following records to your domain.&nbsp;
           <a href="https://www.namecheap.com/" target="_blank" rel="noreferrer">
             <span className="underline">Go to NameCheap</span> ^
@@ -72,7 +74,12 @@ const Config = () => {
         <i>^</i>It can take up to 48 hours for these updates to reflect
         globally.
       </Alert>
-      <Button className="w-fit" color="blue" onClick={handleSubmitDomain}>
+      <Button
+        className="w-fit"
+        color="blue"
+        onClick={handleSubmitDomain}
+        placeholder={''}
+      >
         Finish <i>{'>'}</i>
       </Button>
     </div>

packages/frontend/src/pages/org-slug/projects/id/settings/domains/add/index.tsx

@@ -30,9 +30,15 @@ const AddDomain = () => {
   return (
     <div className="p-4">
       <div className="flex justify-between">
-        <Typography variant="h3">Add Domain</Typography>
+        <Typography variant="h3" placeholder={''}>
+          Add Domain
+        </Typography>
         <Link to={`/${orgSlug}/projects/${id}`}>
-          <IconButton className="rounded-full" variant="outlined">
+          <IconButton
+            className="rounded-full"
+            variant="outlined"
+            placeholder={''}
+          >
             X
           </IconButton>
         </Link>
@@ -42,7 +48,7 @@ const AddDomain = () => {
         <div className="bg-blue-gray-50 rounded-lg mt-6 mb-10">
           <div className="flex justify-start gap-3 p-5">
             <i className="bg-gray-100 w-12 h-12 rounded-lg">^</i>
-            <Typography className="my-auto w-1/3" variant="h5">
+            <Typography className="my-auto w-1/3" variant="h5" placeholder={''}>
               Project Name
             </Typography>
           </div>