cerc-io/snowballtools-base
16
0
Fork 2
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

temp (?) fix build

Browse Source 
revert this if needed
This commit is contained in:
Eric Lewis 2024-02-26 11:56:51 -05:00
parent 0dfecd024d
commit 042aff2f87
46 changed files with 459 additions and 181 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/frontend/src/components/DatePicker.tsx
View File

@ -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>

6
packages/frontend/src/components/Sidebar.tsx
View File

@ -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>

24
packages/frontend/src/components/projects/ProjectCard.tsx
View File

@ -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 color="gray" variant="small">
<Typography placeholder={''}>{project.name}</Typography>
<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>
<MenuItem>^ Project settings</MenuItem>
<MenuItem className="text-red-500">^ Delete project</MenuItem>
<MenuList placeholder={''}>
<MenuItem placeholder={''}>^ Project settings</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>
)}

19
packages/frontend/src/components/projects/ProjectSearchBar.tsx
View File

@ -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>
<Avatar src={item.icon || '/gray.png'} variant="rounded" />
<ListItemPrefix placeholder={''}>
<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>

10
packages/frontend/src/components/projects/create/ConnectAccount.tsx
View File

@ -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>

6
packages/frontend/src/components/projects/create/ConnectAccountTabPanel.tsx
View File

@ -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">
<Tab className="row-span-1" value="import">
<TabsHeader className="grid grid-cols-2" placeholder={''}>
<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>

9
packages/frontend/src/components/projects/create/Deploy.tsx
View File

@ -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>

8
packages/frontend/src/components/projects/create/DeployStep.tsx
View File

@ -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>

4
packages/frontend/src/components/projects/create/ProjectRepoCard.tsx
View File

@ -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>

3
packages/frontend/src/components/projects/create/RepositoryList.tsx
View File

@ -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>

8
packages/frontend/src/components/projects/create/TemplateCard.tsx
View File

@ -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>

19
packages/frontend/src/components/projects/project/ActivityCard.tsx
View File

@ -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 variant="small" color="gray">
<Typography placeholder={''}>{activity.commit.author?.name}</Typography>
<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>

9
packages/frontend/src/components/projects/project/deployments/AssignDomainDialog.tsx
View File

@ -17,9 +17,9 @@ interface AssignDomainProps {
const AssignDomainDialog = ({ open, handleOpen }: AssignDomainProps) => {
return (
<Dialog open={open} handler={handleOpen}>
<DialogHeader>Assign Domain</DialogHeader>
<DialogBody>
<Dialog open={open} handler={handleOpen} placeholder={''}>
<DialogHeader placeholder={''}>Assign Domain</DialogHeader>
<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>

47
packages/frontend/src/components/projects/project/deployments/DeploymentDetailsCard.tsx
View File

@ -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">
<Typography color="gray" placeholder={''}>
^ {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>

8
packages/frontend/src/components/projects/project/deployments/DeploymentDialogBodyCard.tsx
View File

@ -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>

1
packages/frontend/src/components/projects/project/deployments/FilterForm.tsx
View File

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

9
packages/frontend/src/components/projects/project/settings/AddEnvironmentVariableRow.tsx
View File

@ -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>

29
packages/frontend/src/components/projects/project/settings/AddMemberDialog.tsx
View File

@ -61,23 +61,26 @@ const AddMemberDialog = ({
}, []);
return (
<Dialog open={open} handler={handleOpen}>
<DialogHeader className="flex justify-between">
<Dialog open={open} handler={handleOpen} placeholder={''}>
<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">
<Typography variant="small">
<DialogBody className="flex flex-col gap-2 p-4" placeholder={''}>
<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">
<Typography variant="small" placeholder={''}>
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">
<Button variant="outlined" onClick={handleOpen} className="mr-1">
<DialogFooter className="flex justify-start" placeholder={''}>
<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>

21
packages/frontend/src/components/projects/project/settings/DeleteProjectDialog.tsx
View File

@ -53,20 +53,21 @@ const DeleteProjectDialog = ({
}, [client, project, handleOpen]);
return (
<Dialog open={open} handler={handleOpen}>
<DialogHeader className="flex justify-between">
<Dialog open={open} handler={handleOpen} placeholder={''}>
<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">
<Typography variant="paragraph">
<DialogBody className="flex flex-col gap-2" placeholder={''}>
<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">
<Button variant="outlined" onClick={handleOpen} className="mr-1">
<DialogFooter className="flex justify-start" placeholder={''}>
<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>

6
packages/frontend/src/components/projects/project/settings/DisplayEnvironmentVariables.tsx
View File

@ -29,11 +29,11 @@ const DisplayEnvironmentVariables = ({
</div>
<Collapse open={openCollapse}>
{variables.length === 0 ? (
<Card className="bg-gray-300 flex items-center p-4">
<Typography variant="small" className="text-black">
<Card className="bg-gray-300 flex items-center p-4" placeholder={''}>
<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>

22
packages/frontend/src/components/projects/project/settings/DomainCard.tsx
View File

@ -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>
) : (

39
packages/frontend/src/components/projects/project/settings/EditDomainDialog.tsx
View File

@ -122,27 +122,32 @@ const EditDomainDialog = ({
}, [domain]);
return (
<Dialog open={open} handler={handleOpen}>
<DialogHeader className="flex justify-between">
<Dialog open={open} handler={handleOpen} placeholder={''}>
<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">
<Typography variant="small">Domain name</Typography>
<DialogBody className="flex flex-col gap-2 p-4" placeholder={''}>
<Typography variant="small" placeholder={''}>
Domain name
</Typography>
<Input crossOrigin={undefined} {...register('name')} />
<Typography variant="small">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">
<Button variant="outlined" onClick={handleOpen} className="mr-1">
<DialogFooter className="flex justify-start" placeholder={''}>
<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>

14
packages/frontend/src/components/projects/project/settings/EditEnvironmentVariableRow.tsx
View File

@ -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>

4
packages/frontend/src/components/projects/project/settings/MemberCard.tsx
View File

@ -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.

11
packages/frontend/src/components/projects/project/settings/RepoConnectedSection.tsx
View File

@ -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">Connected just now</Typography>
<Typography variant="small" placeholder={''}>
{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>

13
packages/frontend/src/components/projects/project/settings/SetupDomain.tsx
View File

@ -54,14 +54,18 @@ const SetupDomain = () => {
className="flex flex-col gap-6 w-full"
>
<div>
<Typography variant="h5">Setup domain name</Typography>
<Typography variant="small">
<Typography variant="h5" placeholder={''}>
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>

4
packages/frontend/src/components/projects/project/settings/WebhookCard.tsx
View File

@ -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>

2
packages/frontend/src/components/shared/AsyncSelect.tsx
View File

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

22
packages/frontend/src/components/shared/ConfirmDialog.tsx
View File

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

12
packages/frontend/src/layouts/ProjectSearch.tsx
View File

@ -36,11 +36,17 @@ const ProjectSearch = () => {
}}
/>
</div>
<IconButton color="blue" className="rounded-full mr-2">
<Typography variant="h5">+</Typography>
<IconButton
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 && (

6
packages/frontend/src/pages/org-slug/index.tsx
View File

@ -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>

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

@ -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>

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

@ -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>

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

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

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

@ -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>

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

@ -114,8 +114,10 @@ const CreateRepo = () => {
return (
<form onSubmit={handleSubmit(submitRepoHandler)}>
<div className="mb-2">
<Typography variant="h6">Create a repository</Typography>
<Typography color="gray">
<Typography variant="h6" placeholder={''}>
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>

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

@ -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>
<Typography variant="h5" placeholder={''}>
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>

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

@ -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 variant="small" color="gray">
<Typography placeholder={''}>{project.name}</Typography>
<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>

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

@ -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>

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

@ -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>

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

@ -133,8 +133,14 @@ export const EnvironmentVariablesTabPanel = () => {
return (
<>
<Typography variant="h6">Environment variables</Typography>
<Typography variant="small" className="font-medium text-gray-800">
<Typography variant="h6" placeholder={''}>
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>

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

@ -121,8 +121,14 @@ const GeneralTabPanel = () => {
}
})}
>
<Typography variant="h6">Project info</Typography>
<Typography variant="small" className="font-medium text-gray-800">
<Typography variant="h6" placeholder={''}>
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="small">
<Typography variant="h6" placeholder={''}>
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="small">
<Typography variant="h6" placeholder={''}>
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>

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

@ -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>

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

@ -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>

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

@ -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="small">
<Typography variant="h5" placeholder={''}>
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>

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

@ -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>