thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

style: imports theming (#945)

Browse Source
This commit is contained in:
Aaryan Khandelwal 2023-04-24 13:20:41 +05:30 committed by GitHub
parent 5412e09701
commit d8a5b8d848
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 144 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
apps/app/components/integration/delete-import-modal.tsx
View File

@ -73,7 +73,7 @@ export const DeleteImportModal: React.FC<Props> = ({ isOpen, handleClose, data }
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" /> <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
</Transition.Child> </Transition.Child>
<div className="fixed inset-0 z-20 overflow-y-auto"> <div className="fixed inset-0 z-20 overflow-y-auto">
@ -87,12 +87,12 @@ export const DeleteImportModal: React.FC<Props> = ({ isOpen, handleClose, data }
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl"> <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-brand-base bg-brand-base text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
<div className="flex flex-col gap-6 p-6"> <div className="flex flex-col gap-6 p-6">
<div className="flex w-full items-center justify-start gap-6"> <div className="flex w-full items-center justify-start gap-6">
<span className="place-items-center rounded-full bg-red-100 p-4"> <span className="place-items-center rounded-full bg-red-500/20 p-4">
<ExclamationTriangleIcon <ExclamationTriangleIcon
className="h-6 w-6 text-red-600" className="h-6 w-6 text-red-500"
aria-hidden="true" aria-hidden="true"
/> />
</span> </span>
@ -101,16 +101,19 @@ export const DeleteImportModal: React.FC<Props> = ({ isOpen, handleClose, data }
</span> </span>
</div> </div>
<span> <span>
<p className="text-sm leading-7 text-gray-500"> <p className="text-sm leading-7 text-brand-secondary">
Are you sure you want to delete project{" "} Are you sure you want to delete import from{" "}
<span className="break-all font-semibold">{data?.service}</span>? All of the <span className="break-all font-semibold capitalize text-brand-base">
data related to the project will be permanently removed. This action cannot be {data?.service}
undone </span>
? All of the data related to the import will be permanently removed. This
action cannot be undone.
</p> </p>
</span> </span>
<div className="text-gray-600"> <div>
<p className="text-sm"> <p className="text-sm text-brand-secondary">
To confirm, type <span className="font-medium">delete import</span> below: To confirm, type{" "}
<span className="font-medium text-brand-base">delete import</span> below:
</p> </p>
<Input <Input
type="text" type="text"

2
apps/app/components/integration/github/import-configure.tsx
View File

@ -36,7 +36,7 @@ export const GithubImportConfigure: React.FC<Props> = ({
<div className="flex items-center gap-2 py-5"> <div className="flex items-center gap-2 py-5">
<div className="w-full"> <div className="w-full">
<div className="font-medium">Configure</div> <div className="font-medium">Configure</div>
<div className="text-sm text-gray-600">Set up your GitHub import.</div> <div className="text-sm text-brand-secondary">Set up your GitHub import.</div>
</div> </div>
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<GithubAuth workspaceIntegration={workspaceIntegration} provider={provider} /> <GithubAuth workspaceIntegration={workspaceIntegration} provider={provider} />

2
apps/app/components/integration/github/import-confirm.tsx
View File

@ -14,7 +14,7 @@ type Props = {
export const GithubImportConfirm: FC<Props> = ({ handleStepChange, watch }) => ( export const GithubImportConfirm: FC<Props> = ({ handleStepChange, watch }) => (
<div className="mt-6"> <div className="mt-6">
<h4 className="font-medium"> <h4 className="font-medium text-brand-secondary">
You are about to import issues from {watch("github").full_name}. Click on {'"'}Confirm & You are about to import issues from {watch("github").full_name}. Click on {'"'}Confirm &
Import{'" '} Import{'" '}
to complete the process. to complete the process.

26
apps/app/components/integration/github/import-data.tsx
View File

@ -36,7 +36,7 @@ export const GithubImportData: FC<Props> = ({ handleStepChange, integration, con
<div className="grid grid-cols-12 gap-4 sm:gap-16"> <div className="grid grid-cols-12 gap-4 sm:gap-16">
<div className="col-span-12 sm:col-span-8"> <div className="col-span-12 sm:col-span-8">
<h4 className="font-semibold">Select Repository</h4> <h4 className="font-semibold">Select Repository</h4>
<p className="text-gray-500 text-xs"> <p className="text-xs text-brand-secondary">
Select the repository that you want the issues to be imported from. Select the repository that you want the issues to be imported from.
</p> </p>
</div> </div>
@ -49,7 +49,13 @@ export const GithubImportData: FC<Props> = ({ handleStepChange, integration, con
<SelectRepository <SelectRepository
integration={integration} integration={integration}
value={value ? value.id : null} value={value ? value.id : null}
label={value ? `${value.full_name}` : "Select Repository"} label={
value ? (
`${value.full_name}`
) : (
<span className="text-brand-secondary">Select Repository</span>
)
}
onChange={onChange} onChange={onChange}
characterLimit={50} characterLimit={50}
/> />
@ -61,7 +67,9 @@ export const GithubImportData: FC<Props> = ({ handleStepChange, integration, con
<div className="grid grid-cols-12 gap-4 sm:gap-16"> <div className="grid grid-cols-12 gap-4 sm:gap-16">
<div className="col-span-12 sm:col-span-8"> <div className="col-span-12 sm:col-span-8">
<h4 className="font-semibold">Select Project</h4> <h4 className="font-semibold">Select Project</h4>
<p className="text-gray-500 text-xs">Select the project to import the issues to.</p> <p className="text-xs text-brand-secondary">
Select the project to import the issues to.
</p>
</div> </div>
<div className="col-span-12 sm:col-span-4"> <div className="col-span-12 sm:col-span-4">
{projects && ( {projects && (
@ -71,7 +79,13 @@ export const GithubImportData: FC<Props> = ({ handleStepChange, integration, con
render={({ field: { value, onChange } }) => ( render={({ field: { value, onChange } }) => (
<CustomSearchSelect <CustomSearchSelect
value={value} value={value}
label={value ? projects.find((p) => p.id === value)?.name : "Select Project"} label={
value ? (
projects.find((p) => p.id === value)?.name
) : (
<span className="text-brand-secondary">Select Project</span>
)
}
onChange={onChange} onChange={onChange}
options={options} options={options}
optionsClassName="w-full" optionsClassName="w-full"
@ -84,7 +98,9 @@ export const GithubImportData: FC<Props> = ({ handleStepChange, integration, con
<div className="grid grid-cols-12 gap-4 sm:gap-16"> <div className="grid grid-cols-12 gap-4 sm:gap-16">
<div className="col-span-12 sm:col-span-8"> <div className="col-span-12 sm:col-span-8">
<h4 className="font-semibold">Sync Issues</h4> <h4 className="font-semibold">Sync Issues</h4>
<p className="text-gray-500 text-xs">Set whether you want to sync the issues or not.</p> <p className="text-xs text-brand-secondary">
Set whether you want to sync the issues or not.
</p>
</div> </div>
<div className="col-span-12 sm:col-span-4"> <div className="col-span-12 sm:col-span-4">
<Controller <Controller

6
apps/app/components/integration/github/import-users.tsx
View File

@ -25,9 +25,9 @@ export const GithubImportUsers: FC<Props> = ({ handleStepChange, users, setUsers
return ( return (
<div className="mt-6"> <div className="mt-6">
<div> <div>
<div className="grid grid-cols-3 gap-2 text-sm mb-2 font-medium"> <div className="mb-2 grid grid-cols-3 gap-2 text-sm font-medium">
<div>Name</div> <div className="text-brand-secondary">Name</div>
<div>Import as...</div> <div className="text-brand-secondary">Import as...</div>
<div className="text-right"> <div className="text-right">
{users.filter((u) => u.import !== false).length} users selected {users.filter((u) => u.import !== false).length} users selected
</div> </div>

16
apps/app/components/integration/github/repo-details.tsx
View File

@ -64,20 +64,20 @@ export const GithubRepoDetails: FC<Props> = ({
<div className="flex items-center justify-between gap-4"> <div className="flex items-center justify-between gap-4">
<div> <div>
<div className="font-medium">Repository Details</div> <div className="font-medium">Repository Details</div>
<div className="text-sm text-gray-600">Import completed. We have found:</div> <div className="text-sm text-brand-secondary">Import completed. We have found:</div>
</div> </div>
<div className="flex gap-16 mt-4"> <div className="mt-4 flex gap-16">
<div className="text-center flex-shrink-0"> <div className="flex-shrink-0 text-center">
<p className="text-3xl font-bold">{repoInfo.issue_count}</p> <p className="text-3xl font-bold">{repoInfo.issue_count}</p>
<h6 className="text-sm text-gray-500">Issues</h6> <h6 className="text-sm text-brand-secondary">Issues</h6>
</div> </div>
<div className="text-center flex-shrink-0"> <div className="flex-shrink-0 text-center">
<p className="text-3xl font-bold">{repoInfo.labels}</p> <p className="text-3xl font-bold">{repoInfo.labels}</p>
<h6 className="text-sm text-gray-500">Labels</h6> <h6 className="text-sm text-brand-secondary">Labels</h6>
</div> </div>
<div className="text-center flex-shrink-0"> <div className="flex-shrink-0 text-center">
<p className="text-3xl font-bold">{repoInfo.collaborators.length}</p> <p className="text-3xl font-bold">{repoInfo.collaborators.length}</p>
<h6 className="text-sm text-gray-500">Users</h6> <h6 className="text-sm text-brand-secondary">Users</h6>
</div> </div>
</div> </div>
</div> </div>

16
apps/app/components/integration/github/root.tsx
View File

@ -175,15 +175,13 @@ export const GithubImporterRoot = () => {
<form onSubmit={handleSubmit(createGithubImporterService)}> <form onSubmit={handleSubmit(createGithubImporterService)}>
<div className="space-y-2"> <div className="space-y-2">
<Link href={`/${workspaceSlug}/settings/import-export`}> <Link href={`/${workspaceSlug}/settings/import-export`}>
<div className="inline-flex cursor-pointer items-center gap-2 text-sm font-medium text-gray-600 hover:text-gray-900"> <div className="inline-flex cursor-pointer items-center gap-2 text-sm font-medium text-brand-secondary hover:text-brand-base">
<div> <ArrowLeftIcon className="h-3 w-3" />
<ArrowLeftIcon className="h-3 w-3" />
</div>
<div>Cancel import & go back</div> <div>Cancel import & go back</div>
</div> </div>
</Link> </Link>
<div className="space-y-4 rounded-[10px] border border-gray-200 bg-white p-4"> <div className="space-y-4 rounded-[10px] border border-brand-base bg-brand-base p-4">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div className="h-10 w-10 flex-shrink-0"> <div className="h-10 w-10 flex-shrink-0">
<Image src={GithubLogo} alt="GithubLogo" /> <Image src={GithubLogo} alt="GithubLogo" />
@ -194,12 +192,12 @@ export const GithubImporterRoot = () => {
<div <div
className={`flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border ${ className={`flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border ${
index <= activeIntegrationState() index <= activeIntegrationState()
? `border-[#3F76FF] bg-[#3F76FF] text-white ${ ? `border-brand-accent bg-brand-accent ${
index === activeIntegrationState() index === activeIntegrationState()
? "border-opacity-100 bg-opacity-100" ? "border-opacity-100 bg-opacity-100"
: "border-opacity-80 bg-opacity-80" : "border-opacity-80 bg-opacity-80"
}` }`
: "border-gray-300" : "border-brand-base"
}`} }`}
> >
<integration.icon <integration.icon
@ -213,8 +211,8 @@ export const GithubImporterRoot = () => {
key={index} key={index}
className={`border-b px-7 ${ className={`border-b px-7 ${
index <= activeIntegrationState() - 1 index <= activeIntegrationState() - 1
? `border-[#3F76FF]` ? `border-brand-accent`
: `border-gray-300` : `border-brand-base`
}`} }`}
> >
{" "} {" "}

2
apps/app/components/integration/github/select-repository.tsx
View File

@ -16,7 +16,7 @@ import { IWorkspaceIntegration } from "types";
type Props = { type Props = {
integration: IWorkspaceIntegration; integration: IWorkspaceIntegration;
value: any; value: any;
label: string; label: string | JSX.Element;
onChange: (repo: any) => void; onChange: (repo: any) => void;
characterLimit?: number; characterLimit?: number;
}; };

6
apps/app/components/integration/github/single-user-select.tsx
View File

@ -64,9 +64,9 @@ export const SingleUserSelect: React.FC<Props> = ({ collaborator, index, users,
})) ?? []; })) ?? [];
return ( return (
<div className="bg-gray-50 px-2 py-3 rounded-md grid grid-cols-3 items-center gap-2"> <div className="grid grid-cols-3 items-center gap-2 rounded-md bg-brand-surface-2 px-2 py-3">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div className="relative h-8 w-8 rounded flex-shrink-0"> <div className="relative h-8 w-8 flex-shrink-0 rounded">
<Image <Image
src={collaborator.avatar_url} src={collaborator.avatar_url}
layout="fill" layout="fill"
@ -112,7 +112,7 @@ export const SingleUserSelect: React.FC<Props> = ({ collaborator, index, users,
setUsers(newUsers); setUsers(newUsers);
}} }}
placeholder="Enter email of the user" placeholder="Enter email of the user"
className="py-1 border-gray-200 text-xs" className="py-1 text-xs"
/> />
)} )}
{users[index].import === "map" && members && ( {users[index].import === "map" && members && (

23
apps/app/components/integration/guide.tsx
View File

@ -52,10 +52,10 @@ const IntegrationGuide = () => {
handleClose={() => setDeleteImportModal(false)} handleClose={() => setDeleteImportModal(false)}
data={importToDelete} data={importToDelete}
/> />
<div className="space-y-2 h-full"> <div className="h-full space-y-2">
{!provider && ( {!provider && (
<> <>
<div className="flex items-center gap-2 mb-5"> <div className="mb-5 flex items-center gap-2">
<div className="h-full w-full space-y-1"> <div className="h-full w-full space-y-1">
<div className="text-lg font-medium">Relocation Guide</div> <div className="text-lg font-medium">Relocation Guide</div>
<div className="text-sm"> <div className="text-sm">
@ -72,7 +72,10 @@ const IntegrationGuide = () => {
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
{IMPORTERS_EXPORTERS_LIST.map((service) => ( {IMPORTERS_EXPORTERS_LIST.map((service) => (
<div key={service.provider} className="rounded-[10px] border bg-white p-4"> <div
key={service.provider}
className="rounded-[10px] border border-brand-base bg-brand-base p-4"
>
<div className="flex items-center gap-4 whitespace-nowrap"> <div className="flex items-center gap-4 whitespace-nowrap">
<div className="relative h-10 w-10 flex-shrink-0"> <div className="relative h-10 w-10 flex-shrink-0">
<Image <Image
@ -84,7 +87,7 @@ const IntegrationGuide = () => {
</div> </div>
<div className="w-full"> <div className="w-full">
<h3>{service.title}</h3> <h3>{service.title}</h3>
<p className="text-sm text-gray-500">{service.description}</p> <p className="text-sm text-brand-secondary">{service.description}</p>
</div> </div>
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<Link <Link
@ -101,12 +104,12 @@ const IntegrationGuide = () => {
</div> </div>
))} ))}
</div> </div>
<div className="rounded-[10px] border bg-white p-4"> <div className="rounded-[10px] border border-brand-base bg-brand-base p-4">
<h3 className="mb-2 font-medium text-lg flex gap-2"> <h3 className="mb-2 flex gap-2 text-lg font-medium">
Previous Imports Previous Imports
<button <button
type="button" type="button"
className="flex-shrink-0 flex items-center gap-1 outline-none text-xs py-1 px-1.5 bg-gray-100 rounded" className="flex flex-shrink-0 items-center gap-1 rounded bg-brand-surface-2 py-1 px-1.5 text-xs outline-none"
onClick={() => { onClick={() => {
setRefreshing(true); setRefreshing(true);
mutate(IMPORTER_SERVICES_LIST(workspaceSlug as string)).then(() => mutate(IMPORTER_SERVICES_LIST(workspaceSlug as string)).then(() =>
@ -133,10 +136,12 @@ const IntegrationGuide = () => {
</div> </div>
</div> </div>
) : ( ) : (
<div className="py-2 text-sm text-gray-800">No previous imports available.</div> <p className="py-2 text-sm text-brand-secondary">
No previous imports available.
</p>
) )
) : ( ) : (
<Loader className="grid grid-cols-1 gap-3 mt-6"> <Loader className="mt-6 grid grid-cols-1 gap-3">
<Loader.Item height="40px" width="100%" /> <Loader.Item height="40px" width="100%" />
<Loader.Item height="40px" width="100%" /> <Loader.Item height="40px" width="100%" />
<Loader.Item height="40px" width="100%" /> <Loader.Item height="40px" width="100%" />

22
apps/app/components/integration/jira/confirm-import.tsx
View File

@ -17,30 +17,30 @@ export const JiraConfirmImport: React.FC = () => {
</div> </div>
<div className="col-span-1"> <div className="col-span-1">
<p className="text-sm text-gray-500">Migrating</p> <p className="text-sm text-brand-secondary">Migrating</p>
</div> </div>
<div className="col-span-1 flex items-center justify-between"> <div className="col-span-1 flex items-center justify-between">
<div> <div>
<h4 className="mb-2 text-xl font-semibold">{watch("data.total_issues")}</h4> <h4 className="mb-2 text-lg font-semibold">{watch("data.total_issues")}</h4>
<p className="text-sm text-gray-500">Issues</p> <p className="text-sm text-brand-secondary">Issues</p>
</div> </div>
<div> <div>
<h4 className="mb-2 text-xl font-semibold">{watch("data.total_states")}</h4> <h4 className="mb-2 text-lg font-semibold">{watch("data.total_states")}</h4>
<p className="text-sm text-gray-500">States</p> <p className="text-sm text-brand-secondary">States</p>
</div> </div>
<div> <div>
<h4 className="mb-2 text-xl font-semibold">{watch("data.total_modules")}</h4> <h4 className="mb-2 text-lg font-semibold">{watch("data.total_modules")}</h4>
<p className="text-sm text-gray-500">Modules</p> <p className="text-sm text-brand-secondary">Modules</p>
</div> </div>
<div> <div>
<h4 className="mb-2 text-xl font-semibold">{watch("data.total_labels")}</h4> <h4 className="mb-2 text-lg font-semibold">{watch("data.total_labels")}</h4>
<p className="text-sm text-gray-500">Labels</p> <p className="text-sm text-brand-secondary">Labels</p>
</div> </div>
<div> <div>
<h4 className="mb-2 text-xl font-semibold"> <h4 className="mb-2 text-lg font-semibold">
{watch("data.users").filter((user) => user.import).length} {watch("data.users").filter((user) => user.import).length}
</h4> </h4>
<p className="text-sm text-gray-500">User</p> <p className="text-sm text-brand-secondary">User</p>
</div> </div>
</div> </div>
</div> </div>

40
apps/app/components/integration/jira/give-details.tsx
View File

@ -30,15 +30,11 @@ export const JiraGetImportDetail: React.FC = () => {
<div className="h-full w-full space-y-8 overflow-y-auto"> <div className="h-full w-full space-y-8 overflow-y-auto">
<div className="grid grid-cols-1 gap-10 md:grid-cols-2"> <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
<div className="col-span-1"> <div className="col-span-1">
<h3 className="text-lg font-semibold">Jira Personal Access Token</h3> <h3 className="font-semibold">Jira Personal Access Token</h3>
<p className="text-sm text-gray-500"> <p className="text-sm text-brand-secondary">
Get to know your access token by navigating to{" "} Get to know your access token by navigating to{" "}
<Link href="https://id.atlassian.com/manage-profile/security/api-tokens"> <Link href="https://id.atlassian.com/manage-profile/security/api-tokens">
<a <a className="text-brand-accent underline" target="_blank" rel="noreferrer">
className="font-medium text-gray-600 hover:text-gray-900"
target="_blank"
rel="noreferrer"
>
Atlassian Settings Atlassian Settings
</a> </a>
</Link> </Link>
@ -61,8 +57,8 @@ export const JiraGetImportDetail: React.FC = () => {
<div className="grid grid-cols-1 gap-10 md:grid-cols-2"> <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
<div className="col-span-1"> <div className="col-span-1">
<h3 className="text-lg font-semibold">Jira Project Key</h3> <h3 className="font-semibold">Jira Project Key</h3>
<p className="text-sm text-gray-500">If XXX-123 is your issue, then enter XXX</p> <p className="text-sm text-brand-secondary">If XXX-123 is your issue, then enter XXX</p>
</div> </div>
<div className="col-span-1"> <div className="col-span-1">
<Input <Input
@ -80,8 +76,8 @@ export const JiraGetImportDetail: React.FC = () => {
<div className="grid grid-cols-1 gap-10 md:grid-cols-2"> <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
<div className="col-span-1"> <div className="col-span-1">
<h3 className="text-lg font-semibold">Jira Email Address</h3> <h3 className="font-semibold">Jira Email Address</h3>
<p className="text-sm text-gray-500"> <p className="text-sm text-brand-secondary">
Enter the Gmail account that you use in Jira account Enter the Gmail account that you use in Jira account
</p> </p>
</div> </div>
@ -102,8 +98,8 @@ export const JiraGetImportDetail: React.FC = () => {
<div className="grid grid-cols-1 gap-10 md:grid-cols-2"> <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
<div className="col-span-1"> <div className="col-span-1">
<h3 className="text-lg font-semibold">Jira Installation or Cloud Host Name</h3> <h3 className="font-semibold">Jira Installation or Cloud Host Name</h3>
<p className="text-sm text-gray-500">Enter your companies cloud host name</p> <p className="text-sm text-brand-secondary">Enter your companies cloud host name</p>
</div> </div>
<div className="col-span-1"> <div className="col-span-1">
<Input <Input
@ -122,8 +118,10 @@ export const JiraGetImportDetail: React.FC = () => {
<div className="grid grid-cols-1 gap-10 md:grid-cols-2"> <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
<div className="col-span-1"> <div className="col-span-1">
<h3 className="text-lg font-semibold">Import to project</h3> <h3 className="font-semibold">Import to project</h3>
<p className="text-sm text-gray-500">Select which project you want to import to.</p> <p className="text-sm text-brand-secondary">
Select which project you want to import to.
</p>
</div> </div>
<div className="col-span-1"> <div className="col-span-1">
<Controller <Controller
@ -138,9 +136,11 @@ export const JiraGetImportDetail: React.FC = () => {
onChange={onChange} onChange={onChange}
label={ label={
<span> <span>
{value && value !== "" {value && value !== "" ? (
? projects.find((p) => p.id === value)?.name projects.find((p) => p.id === value)?.name
: "Select Project"} ) : (
<span className="text-brand-secondary">Select a project</span>
)}
</span> </span>
} }
> >
@ -151,7 +151,7 @@ export const JiraGetImportDetail: React.FC = () => {
</CustomSelect.Option> </CustomSelect.Option>
)) ))
) : ( ) : (
<div className="flex cursor-pointer select-none items-center space-x-2 truncate rounded px-1 py-1.5 text-gray-500"> <div className="flex cursor-pointer select-none items-center space-x-2 truncate rounded px-1 py-1.5 text-brand-secondary">
<p>You don{"'"}t have any project. Please create a project first.</p> <p>You don{"'"}t have any project. Please create a project first.</p>
</div> </div>
)} )}
@ -162,7 +162,7 @@ export const JiraGetImportDetail: React.FC = () => {
const event = new KeyboardEvent("keydown", { key: "p" }); const event = new KeyboardEvent("keydown", { key: "p" });
document.dispatchEvent(event); document.dispatchEvent(event);
}} }}
className="flex cursor-pointer select-none items-center space-x-2 truncate rounded px-1 py-1.5 text-gray-500" className="flex cursor-pointer select-none items-center space-x-2 truncate rounded px-1 py-1.5 text-brand-secondary"
> >
<PlusIcon className="h-4 w-4 text-gray-500" /> <PlusIcon className="h-4 w-4 text-gray-500" />
<span>Create new project</span> <span>Create new project</span>

12
apps/app/components/integration/jira/import-users.tsx
View File

@ -52,11 +52,13 @@ export const JiraImportUsers: FC = () => {
})) ?? []; })) ?? [];
return ( return (
<div className="h-full w-full space-y-10 divide-y-2 overflow-y-auto"> <div className="h-full w-full space-y-10 divide-y-2 divide-brand-base overflow-y-auto">
<div className="grid grid-cols-1 gap-10 md:grid-cols-2"> <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
<div className="col-span-1"> <div className="col-span-1">
<h3 className="text-lg font-semibold">Users</h3> <h3 className="font-semibold">Users</h3>
<p className="text-sm text-gray-500">Update, invite or choose not to invite assignee</p> <p className="text-sm text-brand-secondary">
Update, invite or choose not to invite assignee
</p>
</div> </div>
<div className="col-span-1"> <div className="col-span-1">
<Controller <Controller
@ -72,8 +74,8 @@ export const JiraImportUsers: FC = () => {
{watch("data.invite_users") && ( {watch("data.invite_users") && (
<div className="pt-6"> <div className="pt-6">
<div className="grid grid-cols-3 gap-3"> <div className="grid grid-cols-3 gap-3">
<div className="col-span-1 text-gray-500">Name</div> <div className="col-span-1 text-sm text-brand-secondary">Name</div>
<div className="col-span-1 text-gray-500">Import as</div> <div className="col-span-1 text-sm text-brand-secondary">Import as</div>
</div> </div>
<div className="mt-5 space-y-3"> <div className="mt-5 space-y-3">

32
apps/app/components/integration/jira/jira-project-detail.tsx
View File

@ -102,12 +102,12 @@ export const JiraProjectDetail: React.FC<Props> = (props) => {
if (error) { if (error) {
return ( return (
<div className="flex h-full w-full items-center justify-center"> <div className="flex h-full w-full items-center justify-center">
<p className="text-sm text-gray-500"> <p className="text-sm text-brand-secondary">
Something went wrong. Please{" "} Something went wrong. Please{" "}
<button <button
onClick={() => setCurrentStep({ state: "import-configure" })} onClick={() => setCurrentStep({ state: "import-configure" })}
type="button" type="button"
className="inline text-blue-500 underline" className="inline text-brand-accent underline"
> >
go back go back
</button>{" "} </button>{" "}
@ -121,37 +121,37 @@ export const JiraProjectDetail: React.FC<Props> = (props) => {
<div className="h-full w-full space-y-10 overflow-y-auto"> <div className="h-full w-full space-y-10 overflow-y-auto">
<div className="grid grid-cols-1 gap-10 md:grid-cols-2"> <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
<div className="col-span-1"> <div className="col-span-1">
<h3 className="text-lg font-semibold">Import Data</h3> <h3 className="font-semibold">Import Data</h3>
<p className="text-sm text-gray-500">Import Completed. We have found:</p> <p className="text-sm text-brand-secondary">Import Completed. We have found:</p>
</div> </div>
<div className="col-span-1 flex items-center justify-between"> <div className="col-span-1 flex items-center justify-between">
<div> <div>
<h4 className="mb-2 text-xl font-semibold">{projectInfo?.issues}</h4> <h4 className="mb-2 text-lg font-semibold">{projectInfo?.issues}</h4>
<p className="text-sm text-gray-500">Issues</p> <p className="text-sm text-brand-secondary">Issues</p>
</div> </div>
<div> <div>
<h4 className="mb-2 text-xl font-semibold">{projectInfo?.states}</h4> <h4 className="mb-2 text-lg font-semibold">{projectInfo?.states}</h4>
<p className="text-sm text-gray-500">States</p> <p className="text-sm text-brand-secondary">States</p>
</div> </div>
<div> <div>
<h4 className="mb-2 text-xl font-semibold">{projectInfo?.modules}</h4> <h4 className="mb-2 text-lg font-semibold">{projectInfo?.modules}</h4>
<p className="text-sm text-gray-500">Modules</p> <p className="text-sm text-brand-secondary">Modules</p>
</div> </div>
<div> <div>
<h4 className="mb-2 text-xl font-semibold">{projectInfo?.labels}</h4> <h4 className="mb-2 text-lg font-semibold">{projectInfo?.labels}</h4>
<p className="text-sm text-gray-500">Labels</p> <p className="text-sm text-brand-secondary">Labels</p>
</div> </div>
<div> <div>
<h4 className="mb-2 text-xl font-semibold">{projectInfo?.users?.length}</h4> <h4 className="mb-2 text-lg font-semibold">{projectInfo?.users?.length}</h4>
<p className="text-sm text-gray-500">Users</p> <p className="text-sm text-brand-secondary">Users</p>
</div> </div>
</div> </div>
</div> </div>
<div className="grid grid-cols-1 gap-10 md:grid-cols-2"> <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
<div className="col-span-1"> <div className="col-span-1">
<h3 className="text-lg font-semibold">Import Epics</h3> <h3 className="font-semibold">Import Epics</h3>
<p className="text-sm text-gray-500">Import epics as modules</p> <p className="text-sm text-brand-secondary">Import epics as modules</p>
</div> </div>
<div className="col-span-1"> <div className="col-span-1">
<Controller <Controller

16
apps/app/components/integration/jira/root.tsx
View File

@ -106,7 +106,7 @@ export const JiraImporterRoot = () => {
return ( return (
<div className="flex h-full flex-col space-y-2"> <div className="flex h-full flex-col space-y-2">
<Link href={`/${workspaceSlug}/settings/import-export`}> <Link href={`/${workspaceSlug}/settings/import-export`}>
<div className="inline-flex cursor-pointer items-center gap-2 text-sm font-medium text-gray-600 hover:text-gray-900"> <div className="inline-flex cursor-pointer items-center gap-2 text-sm font-medium text-brand-secondary hover:text-brand-base">
<div> <div>
<ArrowLeftIcon className="h-3 w-3" /> <ArrowLeftIcon className="h-3 w-3" />
</div> </div>
@ -114,7 +114,7 @@ export const JiraImporterRoot = () => {
</div> </div>
</Link> </Link>
<div className="flex h-full flex-col space-y-4 rounded-[10px] border border-gray-200 bg-white p-4"> <div className="flex h-full flex-col space-y-4 rounded-[10px] border border-brand-base bg-brand-base p-4">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div className="h-10 w-10 flex-shrink-0"> <div className="h-10 w-10 flex-shrink-0">
<Image src={JiraLogo} alt="jira logo" /> <Image src={JiraLogo} alt="jira logo" />
@ -131,14 +131,14 @@ export const JiraImporterRoot = () => {
index > activeIntegrationState() + 1 || index > activeIntegrationState() + 1 ||
Boolean(index === activeIntegrationState() + 1 && disableTopBarAfter) Boolean(index === activeIntegrationState() + 1 && disableTopBarAfter)
} }
className={`flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border ${ className={`flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border border-brand-base ${
index <= activeIntegrationState() index <= activeIntegrationState()
? `border-[#3F76FF] bg-[#3F76FF] text-white ${ ? `border-brand-accent bg-brand-accent ${
index === activeIntegrationState() index === activeIntegrationState()
? "border-opacity-100 bg-opacity-100" ? "border-opacity-100 bg-opacity-100"
: "border-opacity-80 bg-opacity-80" : "border-opacity-80 bg-opacity-80"
}` }`
: "border-gray-300" : "border-brand-base"
}`} }`}
> >
<integration.icon <integration.icon
@ -151,7 +151,9 @@ export const JiraImporterRoot = () => {
<div <div
key={index} key={index}
className={`border-b px-7 ${ className={`border-b px-7 ${
index <= activeIntegrationState() - 1 ? `border-[#3F76FF]` : `border-gray-300` index <= activeIntegrationState() - 1
? `border-brand-accent`
: `border-brand-base`
}`} }`}
> >
{" "} {" "}
@ -177,7 +179,7 @@ export const JiraImporterRoot = () => {
{currentStep?.state === "import-confirmation" && <JiraConfirmImport />} {currentStep?.state === "import-confirmation" && <JiraConfirmImport />}
</div> </div>
<div className="-mx-4 mt-4 flex justify-end gap-4 border-t p-4 pb-0"> <div className="-mx-4 mt-4 flex justify-end gap-4 border-t border-brand-base p-4 pb-0">
{currentStep?.state !== "import-configure" && ( {currentStep?.state !== "import-configure" && (
<SecondaryButton <SecondaryButton
onClick={() => { onClick={() => {

14
apps/app/components/integration/single-import.tsx
View File

@ -18,28 +18,28 @@ const importersList: { [key: string]: string } = {
}; };
export const SingleImport: React.FC<Props> = ({ service, refreshing, handleDelete }) => ( export const SingleImport: React.FC<Props> = ({ service, refreshing, handleDelete }) => (
<div className="py-3 flex justify-between items-center gap-2"> <div className="flex items-center justify-between gap-2 py-3">
<div> <div>
<h4 className="text-sm flex items-center gap-2"> <h4 className="flex items-center gap-2 text-sm">
<span> <span>
Import from <span className="font-medium">{importersList[service.service]}</span> to{" "} Import from <span className="font-medium">{importersList[service.service]}</span> to{" "}
<span className="font-medium">{service.project_detail.name}</span> <span className="font-medium">{service.project_detail.name}</span>
</span> </span>
<span <span
className={`capitalize px-2 py-0.5 text-xs rounded ${ className={`rounded px-2 py-0.5 text-xs capitalize ${
service.status === "completed" service.status === "completed"
? "bg-green-100 text-green-500" ? "bg-green-500/20 text-green-500"
: service.status === "processing" : service.status === "processing"
? "bg-yellow-100 text-yellow-500" ? "bg-yellow-500/20 text-yellow-500"
: service.status === "failed" : service.status === "failed"
? "bg-red-100 text-red-500" ? "bg-red-500/20 text-red-500"
: "" : ""
}`} }`}
> >
{refreshing ? "Refreshing..." : service.status} {refreshing ? "Refreshing..." : service.status}
</span> </span>
</h4> </h4>
<div className="text-gray-500 text-xs mt-2 flex items-center gap-2"> <div className="mt-2 flex items-center gap-2 text-xs text-brand-secondary">
<span>{renderShortDateWithYearFormat(service.created_at)}</span>| <span>{renderShortDateWithYearFormat(service.created_at)}</span>|
<span> <span>
Imported by{" "} Imported by{" "}