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"
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>
<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"
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 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
className="h-6 w-6 text-red-600"
className="h-6 w-6 text-red-500"
aria-hidden="true"
/>
</span>
@ -101,16 +101,19 @@ export const DeleteImportModal: React.FC<Props> = ({ isOpen, handleClose, data }
</span>
</div>
<span>
<p className="text-sm leading-7 text-gray-500">
Are you sure you want to delete project{" "}
<span className="break-all font-semibold">{data?.service}</span>? All of the
data related to the project will be permanently removed. This action cannot be
undone
<p className="text-sm leading-7 text-brand-secondary">
Are you sure you want to delete import from{" "}
<span className="break-all font-semibold capitalize text-brand-base">
{data?.service}
</span>
? All of the data related to the import will be permanently removed. This
action cannot be undone.
</p>
</span>
<div className="text-gray-600">
<p className="text-sm">
To confirm, type <span className="font-medium">delete import</span> below:
<div>
<p className="text-sm text-brand-secondary">
To confirm, type{" "}
<span className="font-medium text-brand-base">delete import</span> below:
</p>
<Input
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="w-full">
<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 className="flex-shrink-0">
<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 }) => (
<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 &
Import{'" '}
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="col-span-12 sm:col-span-8">
<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.
</p>
</div>
@ -49,7 +49,13 @@ export const GithubImportData: FC<Props> = ({ handleStepChange, integration, con
<SelectRepository
integration={integration}
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}
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="col-span-12 sm:col-span-8">
<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 className="col-span-12 sm:col-span-4">
{projects && (
@ -71,7 +79,13 @@ export const GithubImportData: FC<Props> = ({ handleStepChange, integration, con
render={({ field: { value, onChange } }) => (
<CustomSearchSelect
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}
options={options}
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="col-span-12 sm:col-span-8">
<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 className="col-span-12 sm:col-span-4">
<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 (
<div className="mt-6">
<div>
<div className="grid grid-cols-3 gap-2 text-sm mb-2 font-medium">
<div>Name</div>
<div>Import as...</div>
<div className="mb-2 grid grid-cols-3 gap-2 text-sm font-medium">
<div className="text-brand-secondary">Name</div>
<div className="text-brand-secondary">Import as...</div>
<div className="text-right">
{users.filter((u) => u.import !== false).length} users selected
</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>
<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 className="flex gap-16 mt-4">
<div className="text-center flex-shrink-0">
<div className="mt-4 flex gap-16">
<div className="flex-shrink-0 text-center">
<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 className="text-center flex-shrink-0">
<div className="flex-shrink-0 text-center">
<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 className="text-center flex-shrink-0">
<div className="flex-shrink-0 text-center">
<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>

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

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

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

@ -16,7 +16,7 @@ import { IWorkspaceIntegration } from "types";
type Props = {
integration: IWorkspaceIntegration;
value: any;
label: string;
label: string | JSX.Element;
onChange: (repo: any) => void;
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 (
<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="relative h-8 w-8 rounded flex-shrink-0">
<div className="relative h-8 w-8 flex-shrink-0 rounded">
<Image
src={collaborator.avatar_url}
layout="fill"
@ -112,7 +112,7 @@ export const SingleUserSelect: React.FC<Props> = ({ collaborator, index, users,
setUsers(newUsers);
}}
placeholder="Enter email of the user"
className="py-1 border-gray-200 text-xs"
className="py-1 text-xs"
/>
)}
{users[index].import === "map" && members && (

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

@ -52,10 +52,10 @@ const IntegrationGuide = () => {
handleClose={() => setDeleteImportModal(false)}
data={importToDelete}
/>
<div className="space-y-2 h-full">
<div className="h-full space-y-2">
{!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="text-lg font-medium">Relocation Guide</div>
<div className="text-sm">
@ -72,7 +72,10 @@ const IntegrationGuide = () => {
</div>
<div className="space-y-2">
{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="relative h-10 w-10 flex-shrink-0">
<Image
@ -84,7 +87,7 @@ const IntegrationGuide = () => {
</div>
<div className="w-full">
<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 className="flex-shrink-0">
<Link
@ -101,12 +104,12 @@ const IntegrationGuide = () => {
</div>
))}
</div>
<div className="rounded-[10px] border bg-white p-4">
<h3 className="mb-2 font-medium text-lg flex gap-2">
<div className="rounded-[10px] border border-brand-base bg-brand-base p-4">
<h3 className="mb-2 flex gap-2 text-lg font-medium">
Previous Imports
<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={() => {
setRefreshing(true);
mutate(IMPORTER_SERVICES_LIST(workspaceSlug as string)).then(() =>
@ -133,10 +136,12 @@ const IntegrationGuide = () => {
</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%" />

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

@ -17,30 +17,30 @@ export const JiraConfirmImport: React.FC = () => {
</div>
<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 className="col-span-1 flex items-center justify-between">
<div>
<h4 className="mb-2 text-xl font-semibold">{watch("data.total_issues")}</h4>
<p className="text-sm text-gray-500">Issues</p>
<h4 className="mb-2 text-lg font-semibold">{watch("data.total_issues")}</h4>
<p className="text-sm text-brand-secondary">Issues</p>
</div>
<div>
<h4 className="mb-2 text-xl font-semibold">{watch("data.total_states")}</h4>
<p className="text-sm text-gray-500">States</p>
<h4 className="mb-2 text-lg font-semibold">{watch("data.total_states")}</h4>
<p className="text-sm text-brand-secondary">States</p>
</div>
<div>
<h4 className="mb-2 text-xl font-semibold">{watch("data.total_modules")}</h4>
<p className="text-sm text-gray-500">Modules</p>
<h4 className="mb-2 text-lg font-semibold">{watch("data.total_modules")}</h4>
<p className="text-sm text-brand-secondary">Modules</p>
</div>
<div>
<h4 className="mb-2 text-xl font-semibold">{watch("data.total_labels")}</h4>
<p className="text-sm text-gray-500">Labels</p>
<h4 className="mb-2 text-lg font-semibold">{watch("data.total_labels")}</h4>
<p className="text-sm text-brand-secondary">Labels</p>
</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}
</h4>
<p className="text-sm text-gray-500">User</p>
<p className="text-sm text-brand-secondary">User</p>
</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="grid grid-cols-1 gap-10 md:grid-cols-2">
<div className="col-span-1">
<h3 className="text-lg font-semibold">Jira Personal Access Token</h3>
<p className="text-sm text-gray-500">
<h3 className="font-semibold">Jira Personal Access Token</h3>
<p className="text-sm text-brand-secondary">
Get to know your access token by navigating to{" "}
<Link href="https://id.atlassian.com/manage-profile/security/api-tokens">
<a
className="font-medium text-gray-600 hover:text-gray-900"
target="_blank"
rel="noreferrer"
>
<a className="text-brand-accent underline" target="_blank" rel="noreferrer">
Atlassian Settings
</a>
</Link>
@ -61,8 +57,8 @@ export const JiraGetImportDetail: React.FC = () => {
<div className="grid grid-cols-1 gap-10 md:grid-cols-2">
<div className="col-span-1">
<h3 className="text-lg font-semibold">Jira Project Key</h3>
<p className="text-sm text-gray-500">If XXX-123 is your issue, then enter XXX</p>
<h3 className="font-semibold">Jira Project Key</h3>
<p className="text-sm text-brand-secondary">If XXX-123 is your issue, then enter XXX</p>
</div>
<div className="col-span-1">
<Input
@ -80,8 +76,8 @@ export const JiraGetImportDetail: React.FC = () => {
<div className="grid grid-cols-1 gap-10 md:grid-cols-2">
<div className="col-span-1">
<h3 className="text-lg font-semibold">Jira Email Address</h3>
<p className="text-sm text-gray-500">
<h3 className="font-semibold">Jira Email Address</h3>
<p className="text-sm text-brand-secondary">
Enter the Gmail account that you use in Jira account
</p>
</div>
@ -102,8 +98,8 @@ export const JiraGetImportDetail: React.FC = () => {
<div className="grid grid-cols-1 gap-10 md:grid-cols-2">
<div className="col-span-1">
<h3 className="text-lg font-semibold">Jira Installation or Cloud Host Name</h3>
<p className="text-sm text-gray-500">Enter your companies cloud host name</p>
<h3 className="font-semibold">Jira Installation or Cloud Host Name</h3>
<p className="text-sm text-brand-secondary">Enter your companies cloud host name</p>
</div>
<div className="col-span-1">
<Input
@ -122,8 +118,10 @@ export const JiraGetImportDetail: React.FC = () => {
<div className="grid grid-cols-1 gap-10 md:grid-cols-2">
<div className="col-span-1">
<h3 className="text-lg font-semibold">Import to project</h3>
<p className="text-sm text-gray-500">Select which project you want to import to.</p>
<h3 className="font-semibold">Import to project</h3>
<p className="text-sm text-brand-secondary">
Select which project you want to import to.
</p>
</div>
<div className="col-span-1">
<Controller
@ -138,9 +136,11 @@ export const JiraGetImportDetail: React.FC = () => {
onChange={onChange}
label={
<span>
{value && value !== ""
? projects.find((p) => p.id === value)?.name
: "Select Project"}
{value && value !== "" ? (
projects.find((p) => p.id === value)?.name
) : (
<span className="text-brand-secondary">Select a project</span>
)}
</span>
}
>
@ -151,7 +151,7 @@ export const JiraGetImportDetail: React.FC = () => {
</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>
</div>
)}
@ -162,7 +162,7 @@ export const JiraGetImportDetail: React.FC = () => {
const event = new KeyboardEvent("keydown", { key: "p" });
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" />
<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 (
<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="col-span-1">
<h3 className="text-lg font-semibold">Users</h3>
<p className="text-sm text-gray-500">Update, invite or choose not to invite assignee</p>
<h3 className="font-semibold">Users</h3>
<p className="text-sm text-brand-secondary">
Update, invite or choose not to invite assignee
</p>
</div>
<div className="col-span-1">
<Controller
@ -72,8 +74,8 @@ export const JiraImportUsers: FC = () => {
{watch("data.invite_users") && (
<div className="pt-6">
<div className="grid grid-cols-3 gap-3">
<div className="col-span-1 text-gray-500">Name</div>
<div className="col-span-1 text-gray-500">Import as</div>
<div className="col-span-1 text-sm text-brand-secondary">Name</div>
<div className="col-span-1 text-sm text-brand-secondary">Import as</div>
</div>
<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) {
return (
<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{" "}
<button
onClick={() => setCurrentStep({ state: "import-configure" })}
type="button"
className="inline text-blue-500 underline"
className="inline text-brand-accent underline"
>
go back
</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="grid grid-cols-1 gap-10 md:grid-cols-2">
<div className="col-span-1">
<h3 className="text-lg font-semibold">Import Data</h3>
<p className="text-sm text-gray-500">Import Completed. We have found:</p>
<h3 className="font-semibold">Import Data</h3>
<p className="text-sm text-brand-secondary">Import Completed. We have found:</p>
</div>
<div className="col-span-1 flex items-center justify-between">
<div>
<h4 className="mb-2 text-xl font-semibold">{projectInfo?.issues}</h4>
<p className="text-sm text-gray-500">Issues</p>
<h4 className="mb-2 text-lg font-semibold">{projectInfo?.issues}</h4>
<p className="text-sm text-brand-secondary">Issues</p>
</div>
<div>
<h4 className="mb-2 text-xl font-semibold">{projectInfo?.states}</h4>
<p className="text-sm text-gray-500">States</p>
<h4 className="mb-2 text-lg font-semibold">{projectInfo?.states}</h4>
<p className="text-sm text-brand-secondary">States</p>
</div>
<div>
<h4 className="mb-2 text-xl font-semibold">{projectInfo?.modules}</h4>
<p className="text-sm text-gray-500">Modules</p>
<h4 className="mb-2 text-lg font-semibold">{projectInfo?.modules}</h4>
<p className="text-sm text-brand-secondary">Modules</p>
</div>
<div>
<h4 className="mb-2 text-xl font-semibold">{projectInfo?.labels}</h4>
<p className="text-sm text-gray-500">Labels</p>
<h4 className="mb-2 text-lg font-semibold">{projectInfo?.labels}</h4>
<p className="text-sm text-brand-secondary">Labels</p>
</div>
<div>
<h4 className="mb-2 text-xl font-semibold">{projectInfo?.users?.length}</h4>
<p className="text-sm text-gray-500">Users</p>
<h4 className="mb-2 text-lg font-semibold">{projectInfo?.users?.length}</h4>
<p className="text-sm text-brand-secondary">Users</p>
</div>
</div>
</div>
<div className="grid grid-cols-1 gap-10 md:grid-cols-2">
<div className="col-span-1">
<h3 className="text-lg font-semibold">Import Epics</h3>
<p className="text-sm text-gray-500">Import epics as modules</p>
<h3 className="font-semibold">Import Epics</h3>
<p className="text-sm text-brand-secondary">Import epics as modules</p>
</div>
<div className="col-span-1">
<Controller

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

@ -106,7 +106,7 @@ export const JiraImporterRoot = () => {
return (
<div className="flex h-full flex-col space-y-2">
<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" />
</div>
@ -114,7 +114,7 @@ export const JiraImporterRoot = () => {
</div>
</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="h-10 w-10 flex-shrink-0">
<Image src={JiraLogo} alt="jira logo" />
@ -131,14 +131,14 @@ export const JiraImporterRoot = () => {
index > activeIntegrationState() + 1 ||
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()
? `border-[#3F76FF] bg-[#3F76FF] text-white ${
? `border-brand-accent bg-brand-accent ${
index === activeIntegrationState()
? "border-opacity-100 bg-opacity-100"
: "border-opacity-80 bg-opacity-80"
}`
: "border-gray-300"
: "border-brand-base"
}`}
>
<integration.icon
@ -151,7 +151,9 @@ export const JiraImporterRoot = () => {
<div
key={index}
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 />}
</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" && (
<SecondaryButton
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 }) => (
<div className="py-3 flex justify-between items-center gap-2">
<div className="flex items-center justify-between gap-2 py-3">
<div>
<h4 className="text-sm flex items-center gap-2">
<h4 className="flex items-center gap-2 text-sm">
<span>
Import from <span className="font-medium">{importersList[service.service]}</span> to{" "}
<span className="font-medium">{service.project_detail.name}</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"
? "bg-green-100 text-green-500"
? "bg-green-500/20 text-green-500"
: service.status === "processing"
? "bg-yellow-100 text-yellow-500"
? "bg-yellow-500/20 text-yellow-500"
: service.status === "failed"
? "bg-red-100 text-red-500"
? "bg-red-500/20 text-red-500"
: ""
}`}
>
{refreshing ? "Refreshing..." : service.status}
</span>
</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>
Imported by{" "}