mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
fix: ui and bug fixes (#980)
* style: sub issue theming * style: shortcut modal theming * style: blocking and blocked by modal theming * fix: filter labels dropdown width fix * style: display properties * chore: workspace invite * style: invite co workers theming * style: create workspace theming * style: attachment theming * style: workspace sidebar theming * style: issue property theming * style: create module modal lead icon * style: label list modal theming * delete attachment and member modal theming * style: transfer issue modal * style: delete estimate modal theming * style: module form status * style: delete state modal theming * style: shortcut modal * style: onboarding logo * style: onboarding command menu
This commit is contained in:
Anmol Singh Bhatia
GitHub
parent
0fa9451633
commit
483c49d0ff
@ -4,7 +4,7 @@ import { Dialog, Transition } from "@headlessui/react";
|
||||
// icons
|
||||
import { XMarkIcon } from "@heroicons/react/20/solid";
|
||||
import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
|
||||
import { MacCommandIcon } from "components/icons";
|
||||
import { CommandIcon } from "components/icons";
|
||||
// ui
|
||||
import { Input } from "components/ui";
|
||||
|
||||
@ -123,17 +123,23 @@ export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
|
||||
<div key={shortcut.keys} className="flex w-full flex-col">
|
||||
<div className="flex flex-col gap-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-sm text-brand-secondary">{shortcut.description}</p>
|
||||
<p className="text-sm text-brand-secondary">
|
||||
{shortcut.description}
|
||||
</p>
|
||||
<div className="flex items-center gap-x-2.5">
|
||||
{shortcut.keys.split(",").map((key, index) => (
|
||||
<span key={index} className="flex items-center gap-1">
|
||||
{key === "Ctrl" ? (
|
||||
<span className="flex h-full items-center rounded-sm border border-brand-base bg-brand-surface-1 p-2">
|
||||
<MacCommandIcon />
|
||||
<span className="flex h-full items-center rounded-sm border border-brand-base bg-brand-surface-1 p-1.5">
|
||||
<CommandIcon className="h-4 w-4 fill-current text-brand-secondary" />
|
||||
</span>
|
||||
) : key === "Ctrl" ? (
|
||||
<kbd className="rounded-sm border border-brand-base bg-brand-surface-1 p-1.5 text-sm font-medium text-brand-secondary">
|
||||
<CommandIcon className="h-4 w-4 fill-current text-brand-secondary" />
|
||||
</kbd>
|
||||
) : (
|
||||
<kbd className="rounded-sm border border-brand-base bg-brand-surface-1 px-2 py-1 text-sm font-medium text-gray-800">
|
||||
{key === "Ctrl" ? <MacCommandIcon /> : key}
|
||||
<kbd className="rounded-sm border border-brand-base bg-brand-surface-1 px-2 py-1 text-sm font-medium text-brand-secondary">
|
||||
{key}
|
||||
</kbd>
|
||||
)}
|
||||
</span>
|
||||
@ -167,12 +173,16 @@ export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
|
||||
{keys.split(",").map((key, index) => (
|
||||
<span key={index} className="flex items-center gap-1">
|
||||
{key === "Ctrl" ? (
|
||||
<span className="flex h-full items-center rounded-sm border border-brand-base text-brand-secondary bg-brand-surface-1 p-2">
|
||||
<MacCommandIcon />
|
||||
<span className="flex h-full items-center rounded-sm border border-brand-base bg-brand-surface-1 p-1.5 text-brand-secondary">
|
||||
<CommandIcon className="h-4 w-4 fill-current text-brand-secondary" />
|
||||
</span>
|
||||
) : key === "Ctrl" ? (
|
||||
<kbd className="rounded-sm border border-brand-base bg-brand-surface-1 p-1.5 text-sm font-medium text-brand-secondary">
|
||||
<CommandIcon className="h-4 w-4 fill-current text-brand-secondary" />
|
||||
</kbd>
|
||||
) : (
|
||||
<kbd className="rounded-sm border border-brand-base bg-brand-surface-1 px-2 py-1 text-sm font-medium text-brand-secondary">
|
||||
{key === "Ctrl" ? <MacCommandIcon /> : key}
|
||||
{key}
|
||||
</kbd>
|
||||
)}
|
||||
</span>
|
||||
|
||||
@ -391,8 +391,8 @@ export const SingleBoardIssue: React.FC<Props> = ({
|
||||
{properties.link && (
|
||||
<div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
|
||||
<Tooltip tooltipHeading="Link" tooltipContent={`${issue.link_count}`}>
|
||||
<div className="flex items-center gap-1 text-gray-500">
|
||||
<LinkIcon className="h-3.5 w-3.5 text-gray-500" />
|
||||
<div className="flex items-center gap-1 text-brand-secondary">
|
||||
<LinkIcon className="h-3.5 w-3.5 text-brand-secondary" />
|
||||
{issue.link_count}
|
||||
</div>
|
||||
</Tooltip>
|
||||
@ -401,8 +401,8 @@ export const SingleBoardIssue: React.FC<Props> = ({
|
||||
{properties.attachment_count && (
|
||||
<div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
|
||||
<Tooltip tooltipHeading="Attachment" tooltipContent={`${issue.attachment_count}`}>
|
||||
<div className="flex items-center gap-1 text-gray-500">
|
||||
<PaperClipIcon className="h-3.5 w-3.5 -rotate-45 text-gray-500" />
|
||||
<div className="flex items-center gap-1 text-brand-secondary">
|
||||
<PaperClipIcon className="h-3.5 w-3.5 -rotate-45 text-brand-secondary" />
|
||||
{issue.attachment_count}
|
||||
</div>
|
||||
</Tooltip>
|
||||
|
||||
@ -160,7 +160,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
|
||||
Select issues to add
|
||||
</h2>
|
||||
)}
|
||||
<ul className="text-sm text-gray-700">
|
||||
<ul className="text-sm text-brand-base">
|
||||
{filteredIssues.map((issue) => (
|
||||
<Combobox.Option
|
||||
key={issue.id}
|
||||
|
||||
@ -246,7 +246,7 @@ export const IssuesFilterView: React.FC = () => {
|
||||
type="button"
|
||||
className={`rounded border px-2 py-1 text-xs capitalize ${
|
||||
properties[key as keyof Properties]
|
||||
? "border-brand-accent bg-brand-accent text-brand-base"
|
||||
? "border-brand-accent bg-brand-accent text-white"
|
||||
: "border-brand-base"
|
||||
}`}
|
||||
onClick={() => setProperties(key as keyof Properties)}
|
||||
|
||||
@ -313,8 +313,8 @@ export const SingleListIssue: React.FC<Props> = ({
|
||||
{properties.link && (
|
||||
<div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
|
||||
<Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
|
||||
<div className="flex items-center gap-1 text-gray-500">
|
||||
<LinkIcon className="h-3.5 w-3.5 text-gray-500" />
|
||||
<div className="flex items-center gap-1 text-brand-secondary">
|
||||
<LinkIcon className="h-3.5 w-3.5 text-brand-secondary" />
|
||||
{issue.link_count}
|
||||
</div>
|
||||
</Tooltip>
|
||||
@ -323,8 +323,8 @@ export const SingleListIssue: React.FC<Props> = ({
|
||||
{properties.attachment_count && (
|
||||
<div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
|
||||
<Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}>
|
||||
<div className="flex items-center gap-1 text-gray-500">
|
||||
<PaperClipIcon className="h-3.5 w-3.5 -rotate-45 text-gray-500" />
|
||||
<div className="flex items-center gap-1 text-brand-secondary">
|
||||
<PaperClipIcon className="h-3.5 w-3.5 -rotate-45 text-brand-secondary" />
|
||||
{issue.attachment_count}
|
||||
</div>
|
||||
</Tooltip>
|
||||
|
||||
@ -106,30 +106,30 @@ export const TransferIssuesModal: React.FC<Props> = ({ isOpen, handleClose }) =>
|
||||
<Dialog.Panel className="relative transform rounded-lg bg-brand-surface-1 py-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex items-center justify-between px-5">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center gap-3">
|
||||
<TransferIcon className="h-4 w-5" color="#495057" />
|
||||
<h4 className="text-gray-700 font-medium text-[1.50rem]">Transfer Issues</h4>
|
||||
<h4 className="text-xl font-medium text-brand-base">Transfer Issues</h4>
|
||||
</div>
|
||||
<button onClick={handleClose}>
|
||||
<XMarkIcon className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 pb-3 px-5 border-b border-brand-base">
|
||||
<div className="flex items-center gap-2 border-b border-brand-base px-5 pb-3">
|
||||
<MagnifyingGlassIcon className="h-4 w-4 text-brand-secondary" />
|
||||
<input
|
||||
className="outline-none"
|
||||
className="bg-brand-surface-1 outline-none"
|
||||
placeholder="Search for a cycle..."
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
value={query}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col items-start w-full gap-2 px-5">
|
||||
<div className="flex w-full flex-col items-start gap-2 px-5">
|
||||
{filteredOptions ? (
|
||||
filteredOptions.length > 0 ? (
|
||||
filteredOptions.map((option: ICycle) => (
|
||||
<button
|
||||
key={option.id}
|
||||
className="flex items-center gap-4 px-4 py-3 text-gray-600 text-sm rounded w-full hover:bg-brand-surface-1"
|
||||
className="flex w-full items-center gap-4 rounded px-4 py-3 text-sm text-brand-secondary hover:bg-brand-surface-1"
|
||||
onClick={() => {
|
||||
transferIssue({
|
||||
new_cycle_id: option?.id,
|
||||
@ -138,16 +138,16 @@ export const TransferIssuesModal: React.FC<Props> = ({ isOpen, handleClose }) =>
|
||||
}}
|
||||
>
|
||||
<ContrastIcon className="h-5 w-5" />
|
||||
<div className="flex justify-between w-full">
|
||||
<div className="flex w-full justify-between">
|
||||
<span>{option?.name}</span>
|
||||
<span className=" flex bg-gray-200 capitalize px-2 rounded-full items-center">
|
||||
<span className=" flex items-center rounded-full bg-brand-surface-2 px-2 capitalize">
|
||||
{getDateRangeStatus(option?.start_date, option?.end_date)}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
))
|
||||
) : (
|
||||
<div className="flex items-center justify-center gap-4 p-5 text-sm w-full">
|
||||
<div className="flex w-full items-center justify-center gap-4 p-5 text-sm">
|
||||
<ExclamationIcon height={14} width={14} />
|
||||
<span className="text-center text-brand-secondary">
|
||||
You don’t have any current cycle. Please create one to transfer the
|
||||
|
||||
@ -37,7 +37,7 @@ export const TransferIssues: React.FC<Props> = ({ handleClick }) => {
|
||||
? cycleDetails.backlog_issues + cycleDetails.unstarted_issues + cycleDetails.started_issues
|
||||
: 0;
|
||||
return (
|
||||
<div className="flex items-center justify-between -mt-4 mb-4">
|
||||
<div className="-mt-2 mb-4 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2 text-sm text-brand-secondary">
|
||||
<ExclamationIcon height={14} width={14} />
|
||||
<span>Completed cycles are not editable.</span>
|
||||
@ -46,7 +46,7 @@ export const TransferIssues: React.FC<Props> = ({ handleClick }) => {
|
||||
{transferableIssuesCount > 0 && (
|
||||
<div>
|
||||
<PrimaryButton onClick={handleClick} className="flex items-center gap-3 rounded-lg">
|
||||
<TransferIcon className="h-4 w-4" color="white"/>
|
||||
<TransferIcon className="h-4 w-4" color="white" />
|
||||
<span className="text-white">Transfer Issues</span>
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
|
||||
@ -46,7 +46,7 @@ export const DeleteEstimateModal: React.FC<Props> = ({
|
||||
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-10 overflow-y-auto">
|
||||
@ -60,10 +60,10 @@ export const DeleteEstimateModal: React.FC<Props> = ({
|
||||
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"
|
||||
aria-hidden="true"
|
||||
@ -74,9 +74,9 @@ export const DeleteEstimateModal: React.FC<Props> = ({
|
||||
</span>
|
||||
</div>
|
||||
<span>
|
||||
<p className="break-all text-sm leading-7 text-gray-500">
|
||||
<p className="break-all text-sm leading-7 text-brand-secondary">
|
||||
Are you sure you want to delete estimate-{" "}
|
||||
<span className="break-all font-semibold">{data.name}</span>
|
||||
<span className="break-all font-medium text-brand-base">{data.name}</span>
|
||||
{""}? All of the data related to the estiamte will be permanently removed.
|
||||
This action cannot be undone.
|
||||
</p>
|
||||
|
||||
21
apps/app/components/icons/command-icon.tsx
Normal file
21
apps/app/components/icons/command-icon.tsx
Normal file
@ -0,0 +1,21 @@
|
||||
import React from "react";
|
||||
|
||||
import type { Props } from "./types";
|
||||
|
||||
export const CommandIcon: React.FC<Props> = ({
|
||||
width = "81",
|
||||
height = "80",
|
||||
color = "#858E96",
|
||||
className,
|
||||
}) => (
|
||||
<svg
|
||||
width={width}
|
||||
height={height}
|
||||
className={className}
|
||||
viewBox="0 0 81 80"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M21.4577 69.8924C18.4684 69.8924 15.922 68.8406 13.8184 66.737C11.7149 64.6335 10.6631 62.087 10.6631 59.0978C10.6631 56.1085 11.7149 53.562 13.8184 51.4585C15.922 49.3549 18.4684 48.3031 21.4577 48.3031H27.2702V31.696H21.4577C18.4684 31.696 15.922 30.6442 13.8184 28.5406C11.7149 26.437 10.6631 23.8906 10.6631 20.9013C10.6631 17.912 11.7149 15.3656 13.8184 13.262C15.922 11.1585 18.4684 10.1067 21.4577 10.1067C24.447 10.1067 26.9934 11.1585 29.097 13.262C31.2006 15.3656 32.2524 17.912 32.2524 20.9013V26.7138H48.8595V20.9013C48.8595 17.912 49.9113 15.3656 52.0149 13.262C54.1184 11.1585 56.6649 10.1067 59.6542 10.1067C62.6434 10.1067 65.1899 11.1585 67.2934 13.262C69.397 15.3656 70.4488 17.912 70.4488 20.9013C70.4488 23.8906 69.397 26.437 67.2934 28.5406C65.1899 30.6442 62.6434 31.696 59.6542 31.696H53.8417V48.3031H59.6542C62.6434 48.3031 65.1899 49.3549 67.2934 51.4585C69.397 53.562 70.4488 56.1085 70.4488 59.0978C70.4488 62.087 69.397 64.6335 67.2934 66.737C65.1899 68.8406 62.6434 69.8924 59.6542 69.8924C56.6649 69.8924 54.1184 68.8406 52.0149 66.737C49.9113 64.6335 48.8595 62.087 48.8595 59.0978V53.2853H32.2524V59.0978C32.2524 62.087 31.2006 64.6335 29.097 66.737C26.9934 68.8406 24.447 69.8924 21.4577 69.8924ZM21.4577 64.9103C23.0631 64.9103 24.4332 64.3428 25.568 63.208C26.7028 62.0732 27.2702 60.7031 27.2702 59.0978V53.2853H21.4577C19.8524 53.2853 18.4823 53.8527 17.3475 54.9875C16.2126 56.1223 15.6452 57.4924 15.6452 59.0978C15.6452 60.7031 16.2126 62.0732 17.3475 63.208C18.4823 64.3428 19.8524 64.9103 21.4577 64.9103ZM59.6542 64.9103C61.2595 64.9103 62.6296 64.3428 63.7644 63.208C64.8992 62.0732 65.4667 60.7031 65.4667 59.0978C65.4667 57.4924 64.8992 56.1223 63.7644 54.9875C62.6296 53.8527 61.2595 53.2853 59.6542 53.2853H53.8417V59.0978C53.8417 60.7031 54.4091 62.0732 55.5439 63.208C56.6787 64.3428 58.0488 64.9103 59.6542 64.9103ZM32.2524 48.3031H48.8595V31.696H32.2524V48.3031ZM21.4577 26.7138H27.2702V20.9013C27.2702 19.296 26.7028 17.9259 25.568 16.7911C24.4332 15.6562 23.0631 15.0888 21.4577 15.0888C19.8524 15.0888 18.4823 15.6562 17.3475 16.7911C16.2126 17.9259 15.6452 19.296 15.6452 20.9013C15.6452 22.5067 16.2126 23.8768 17.3475 25.0116C18.4823 26.1464 19.8524 26.7138 21.4577 26.7138ZM53.8417 26.7138H59.6542C61.2595 26.7138 62.6296 26.1464 63.7644 25.0116C64.8992 23.8768 65.4667 22.5067 65.4667 20.9013C65.4667 19.296 64.8992 17.9259 63.7644 16.7911C62.6296 15.6562 61.2595 15.0888 59.6542 15.0888C58.0488 15.0888 56.6787 15.6562 55.5439 16.7911C54.4091 17.9259 53.8417 19.296 53.8417 20.9013V26.7138Z" />
|
||||
</svg>
|
||||
);
|
||||
@ -43,7 +43,7 @@ export * from "./user-icon";
|
||||
export * from "./grid-view-icons";
|
||||
export * from "./assignment-clipboard-icon";
|
||||
export * from "./tick-mark-icon";
|
||||
export * from "./target-icon"
|
||||
export * from "./target-icon";
|
||||
export * from "./contrast-icon";
|
||||
export * from "./people-group-icon";
|
||||
export * from "./cmd-icon";
|
||||
@ -72,4 +72,5 @@ export * from "./svg-file-icon";
|
||||
export * from "./txt-file-icon";
|
||||
export * from "./default-file-icon";
|
||||
export * from "./video-file-icon";
|
||||
export * from "./audio-file-icon";
|
||||
export * from "./audio-file-icon";
|
||||
export * from "./command-icon";
|
||||
|
||||
@ -34,7 +34,7 @@ export const IssueAttachments = () => {
|
||||
workspaceSlug && projectId && issueId ? ISSUE_ATTACHMENTS(issueId as string) : null,
|
||||
workspaceSlug && projectId && issueId
|
||||
? () =>
|
||||
issuesService.getIssueAttachment(
|
||||
issuesService.getIssueAttachment(
|
||||
workspaceSlug as string,
|
||||
projectId as string,
|
||||
issueId as string
|
||||
@ -61,7 +61,7 @@ export const IssueAttachments = () => {
|
||||
attachments.map((file) => (
|
||||
<div
|
||||
key={file.id}
|
||||
className="flex items-center justify-between h-[60px] gap-1 px-4 py-2 text-sm border border-gray-200 bg-white rounded-md"
|
||||
className="flex h-[60px] items-center justify-between gap-1 rounded-md border-[2px] border-brand-surface-2 bg-brand-base px-4 py-2 text-sm"
|
||||
>
|
||||
<Link href={file.asset}>
|
||||
<a target="_blank">
|
||||
@ -87,7 +87,7 @@ export const IssueAttachments = () => {
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 text-gray-500 text-xs">
|
||||
<div className="flex items-center gap-3 text-xs text-gray-500">
|
||||
<span>{getFileExtension(file.asset).toUpperCase()}</span>
|
||||
<span>{convertBytesToSize(file.attributes.size)}</span>
|
||||
</div>
|
||||
|
||||
@ -75,7 +75,7 @@ export const DeleteAttachmentModal: React.FC<Props> = ({ isOpen, setIsOpen, 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-75 transition-opacity" />
|
||||
</Transition.Child>
|
||||
|
||||
<div className="fixed inset-0 z-20 overflow-y-auto">
|
||||
@ -89,8 +89,8 @@ export const DeleteAttachmentModal: React.FC<Props> = ({ isOpen, setIsOpen, 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-[40rem]">
|
||||
<div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
||||
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
|
||||
<div className="bg-brand-surface-2 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
||||
<div className="sm:flex sm:items-start">
|
||||
<div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
|
||||
<ExclamationTriangleIcon
|
||||
@ -101,12 +101,12 @@ export const DeleteAttachmentModal: React.FC<Props> = ({ isOpen, setIsOpen, data
|
||||
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
|
||||
<Dialog.Title
|
||||
as="h3"
|
||||
className="text-lg font-medium leading-6 text-gray-900"
|
||||
className="text-lg font-medium leading-6 text-brand-base"
|
||||
>
|
||||
Delete Attachment
|
||||
</Dialog.Title>
|
||||
<div className="mt-2">
|
||||
<p className="text-sm text-gray-500">
|
||||
<p className="text-sm text-brand-secondary">
|
||||
Are you sure you want to delete attachment-{" "}
|
||||
<span className="font-bold">{getFileName(data.attributes.name)}</span>?
|
||||
This attachment will be permanently removed. This action cannot be
|
||||
@ -116,7 +116,7 @@ export const DeleteAttachmentModal: React.FC<Props> = ({ isOpen, setIsOpen, data
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-end gap-2 bg-gray-50 p-4 sm:px-6">
|
||||
<div className="flex justify-end gap-2 bg-brand-surface-1 p-4 sm:px-6">
|
||||
<SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
|
||||
<DangerButton
|
||||
onClick={() => {
|
||||
|
||||
@ -163,7 +163,7 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 bg-gray-500 bg-opacity-25 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 p-4 sm:p-6 md:p-20">
|
||||
@ -176,7 +176,7 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
<Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-brand-surface-2 bg-opacity-80 shadow-2xl ring-1 ring-black ring-opacity-5 backdrop-blur backdrop-filter transition-all">
|
||||
<Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-xl border border-brand-base bg-brand-base shadow-2xl transition-all">
|
||||
<form>
|
||||
<Combobox
|
||||
onChange={(val: string) => {
|
||||
@ -204,7 +204,7 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
|
||||
|
||||
<Combobox.Options
|
||||
static
|
||||
className="max-h-80 scroll-py-2 divide-y divide-gray-500 divide-opacity-10 overflow-y-auto"
|
||||
className="max-h-80 scroll-py-2 divide-y divide-brand-base overflow-y-auto"
|
||||
>
|
||||
{filteredIssues.length > 0 ? (
|
||||
<li className="p-2">
|
||||
@ -213,7 +213,7 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
|
||||
Select blocked issues
|
||||
</h2>
|
||||
)}
|
||||
<ul className="text-sm text-gray-700">
|
||||
<ul className="text-sm text-brand-base">
|
||||
{filteredIssues.map((issue) => {
|
||||
if (
|
||||
!watch("blocked_list").includes(issue.id) &&
|
||||
@ -225,8 +225,8 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
|
||||
as="div"
|
||||
value={issue.id}
|
||||
className={({ active }) =>
|
||||
`flex cursor-pointer select-none items-center justify-between rounded-md px-3 py-2 ${
|
||||
active ? "bg-gray-900 bg-opacity-5 text-brand-base" : ""
|
||||
`flex w-full cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 text-brand-secondary ${
|
||||
active ? "bg-brand-surface-2 text-brand-base" : ""
|
||||
}`
|
||||
}
|
||||
>
|
||||
@ -262,7 +262,7 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
|
||||
<LayerDiagonalIcon height="56" width="56" />
|
||||
<h3 className="text-brand-secondary">
|
||||
<h3 className="text-sm text-brand-secondary">
|
||||
No issues found. Create a new issue with{" "}
|
||||
<pre className="inline rounded bg-brand-surface-2 px-2 py-1">C</pre>.
|
||||
</h3>
|
||||
|
||||
@ -163,7 +163,7 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 bg-gray-500 bg-opacity-25 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 p-4 sm:p-6 md:p-20">
|
||||
@ -176,7 +176,7 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
<Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-brand-surface-2 bg-opacity-80 shadow-2xl ring-1 ring-black ring-opacity-5 backdrop-blur backdrop-filter transition-all">
|
||||
<Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-xl border border-brand-base bg-brand-base shadow-2xl transition-all">
|
||||
<Combobox
|
||||
onChange={(val: string) => {
|
||||
const selectedIssues = watchBlocker("blocker_issue_ids");
|
||||
@ -203,7 +203,7 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
|
||||
|
||||
<Combobox.Options
|
||||
static
|
||||
className="max-h-80 scroll-py-2 divide-y divide-gray-500 divide-opacity-10 overflow-y-auto"
|
||||
className="max-h-80 scroll-py-2 divide-y divide-brand-base overflow-y-auto"
|
||||
>
|
||||
{filteredIssues.length > 0 ? (
|
||||
<li className="p-2">
|
||||
@ -212,7 +212,7 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
|
||||
Select blocker issues
|
||||
</h2>
|
||||
)}
|
||||
<ul className="text-sm text-gray-700">
|
||||
<ul className="text-sm text-brand-base">
|
||||
{filteredIssues.map((issue) => {
|
||||
if (
|
||||
!watch("blockers_list").includes(issue.id) &&
|
||||
@ -224,9 +224,9 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
|
||||
as="div"
|
||||
value={issue.id}
|
||||
className={({ active }) =>
|
||||
`flex cursor-pointer select-none items-center justify-between rounded-md px-3 py-2 ${
|
||||
active ? "bg-gray-900 bg-opacity-5 text-brand-base" : ""
|
||||
}`
|
||||
`flex w-full cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 text-brand-secondary ${
|
||||
active ? "bg-brand-surface-2 text-brand-base" : ""
|
||||
} `
|
||||
}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
@ -260,7 +260,7 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
|
||||
<LayerDiagonalIcon height="56" width="56" />
|
||||
<h3 className="text-brand-secondary">
|
||||
<h3 className="text-sm text-brand-secondary">
|
||||
No issues found. Create a new issue with{" "}
|
||||
<pre className="inline rounded bg-brand-surface-2 px-2 py-1">C</pre>.
|
||||
</h3>
|
||||
|
||||
@ -213,13 +213,13 @@ export const SubIssuesList: FC<Props> = ({ parentIssue }) => {
|
||||
<Disclosure.Button className="flex items-center gap-1 rounded px-2 py-1 text-xs font-medium hover:bg-brand-surface-1">
|
||||
<ChevronRightIcon className={`h-3 w-3 ${open ? "rotate-90" : ""}`} />
|
||||
Sub-issues{" "}
|
||||
<span className="ml-1 text-gray-600">
|
||||
<span className="ml-1 text-brand-secondary">
|
||||
{subIssuesResponse.sub_issues.length}
|
||||
</span>
|
||||
</Disclosure.Button>
|
||||
{subIssuesResponse.state_distribution && (
|
||||
<div className="flex w-60 items-center gap-2 text-gray-800">
|
||||
<div className="bar relative h-1.5 w-full rounded bg-gray-300">
|
||||
<div className="flex w-60 items-center gap-2 text-brand-base">
|
||||
<div className="bar relative h-1.5 w-full rounded bg-brand-surface-2">
|
||||
<div
|
||||
className="absolute top-0 left-0 h-1.5 rounded bg-green-500 duration-300"
|
||||
style={{
|
||||
@ -286,7 +286,7 @@ export const SubIssuesList: FC<Props> = ({ parentIssue }) => {
|
||||
backgroundColor: issue.state_detail.color,
|
||||
}}
|
||||
/>
|
||||
<span className="flex-shrink-0 text-gray-600">
|
||||
<span className="flex-shrink-0 text-brand-secondary">
|
||||
{issue.project_detail.identifier}-{issue.sequence_id}
|
||||
</span>
|
||||
<span className="max-w-sm break-all font-medium">{issue.name}</span>
|
||||
|
||||
@ -76,7 +76,7 @@ export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent }
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 bg-gray-500 bg-opacity-25 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 p-4 sm:p-6 md:p-20">
|
||||
@ -89,7 +89,7 @@ export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent }
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
<Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-brand-surface-2 shadow-2xl ring-1 ring-black ring-opacity-5 transition-all">
|
||||
<Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-xl border border-brand-base bg-brand-base shadow-2xl transition-all">
|
||||
<Combobox>
|
||||
<div className="relative m-1">
|
||||
<MagnifyingGlassIcon
|
||||
@ -131,8 +131,8 @@ export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent }
|
||||
name: label.name,
|
||||
}}
|
||||
className={({ active }) =>
|
||||
`flex cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 ${
|
||||
active ? "bg-gray-900 bg-opacity-5 text-brand-base" : ""
|
||||
`flex w-full cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 text-brand-secondary ${
|
||||
active ? "bg-brand-surface-2 text-brand-base" : ""
|
||||
}`
|
||||
}
|
||||
onClick={() => {
|
||||
|
||||
@ -10,7 +10,7 @@ import projectServices from "services/project.service";
|
||||
// ui
|
||||
import { Avatar, CustomSearchSelect } from "components/ui";
|
||||
// icons
|
||||
import User from "public/user.png";
|
||||
import { UserCircleIcon } from "@heroicons/react/24/outline";
|
||||
// fetch-keys
|
||||
import { PROJECT_MEMBERS } from "constants/fetch-keys";
|
||||
|
||||
@ -60,9 +60,7 @@ export const ModuleLeadSelect: React.FC<Props> = ({ value, onChange }) => {
|
||||
{selectedOption ? (
|
||||
<Avatar user={selectedOption} />
|
||||
) : (
|
||||
<div className="h-4 w-4 rounded-full bg-brand-surface-2">
|
||||
<Image src={User} height="100%" width="100%" className="rounded-full" alt="No user" />
|
||||
</div>
|
||||
<UserCircleIcon className="h-4 w-4 text-brand-secondary" />
|
||||
)}
|
||||
{selectedOption ? (
|
||||
selectedOption?.first_name && selectedOption.first_name !== "" ? (
|
||||
|
||||
@ -43,7 +43,7 @@ export const ModuleStatusSelect: React.FC<Props> = ({ control, error }) => (
|
||||
/>
|
||||
)}
|
||||
{MODULE_STATUS.find((s) => s.value === value)?.label ?? (
|
||||
<span className="text-brand-secondary">Status</span>
|
||||
<span className={`${error ? "text-red-500" : "text-brand-secondary"}`}>Status</span>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
export * from "./invite-members";
|
||||
export * from "./onboarding-card";
|
||||
export * from "./user-details";
|
||||
export * from "./workspace";
|
||||
export * from "./workspace";
|
||||
export * from "./onboarding-logo";
|
||||
|
||||
@ -19,7 +19,10 @@ export const OnboardingCard: React.FC<Props> = ({ data, gradient = false }) => (
|
||||
gradient ? "bg-gradient-to-b from-[#2C8DFF]/50 via-brand-base to-transparent" : ""
|
||||
}`}
|
||||
>
|
||||
<div className="h-44 w-full">
|
||||
<div className="relative h-44">
|
||||
<h3 className="absolute top-3 left-28 text-base text-brand-secondary">
|
||||
Open the contextual menu with:
|
||||
</h3>
|
||||
<Image src={data.imgURL} height="180" width="450" alt={data.title} />
|
||||
</div>
|
||||
<h3 className="text-2xl font-medium">{data.title}</h3>
|
||||
|
||||
29
apps/app/components/onboarding/onboarding-logo.tsx
Normal file
29
apps/app/components/onboarding/onboarding-logo.tsx
Normal file
@ -0,0 +1,29 @@
|
||||
import React from "react";
|
||||
|
||||
type Props = {
|
||||
className?: string;
|
||||
width?: string | number;
|
||||
height?: string | number;
|
||||
color?: string;
|
||||
};
|
||||
|
||||
export const OnboardingLogo: React.FC<Props> = ({
|
||||
width = "378",
|
||||
height = "117",
|
||||
color = "#858E96",
|
||||
className,
|
||||
}) => (
|
||||
<svg
|
||||
width={width}
|
||||
height={height}
|
||||
className={className}
|
||||
viewBox="0 0 378 117"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M125.91 92V19.18H158.69C166.463 19.18 172.587 21.3067 177.06 25.56C181.533 29.74 183.77 35.4233 183.77 42.61C183.77 49.7967 181.533 55.5167 177.06 59.77C172.587 63.95 166.463 66.04 158.69 66.04H134.16V92H125.91ZM134.16 58.34H158.14C163.86 58.34 168.187 56.9467 171.12 54.16C174.053 51.3733 175.52 47.5233 175.52 42.61C175.52 37.77 174.053 33.9567 171.12 31.17C168.187 28.3833 163.86 26.99 158.14 26.99H134.16V58.34ZM188.272 92V15H196.522V92H188.272ZM229.091 92.88C223.738 92.88 219.044 91.6333 215.011 89.14C211.051 86.5733 207.971 83.1267 205.771 78.8C203.571 74.4733 202.471 69.7067 202.471 64.5C202.471 59.22 203.571 54.4533 205.771 50.2C207.971 45.8733 211.051 42.4633 215.011 39.97C219.044 37.4033 223.738 36.12 229.091 36.12C233.638 36.12 237.524 37 240.751 38.76C244.051 40.52 246.728 42.9033 248.781 45.91V37H257.031V92H248.781V83.2C246.728 86.1333 244.051 88.48 240.751 90.24C237.524 92 233.638 92.88 229.091 92.88ZM230.191 85.4C234.298 85.4 237.744 84.4467 240.531 82.54C243.391 80.6333 245.554 78.1033 247.021 74.95C248.488 71.7233 249.221 68.24 249.221 64.5C249.221 60.6867 248.488 57.2033 247.021 54.05C245.554 50.8967 243.391 48.3667 240.531 46.46C237.744 44.5533 234.298 43.6 230.191 43.6C226.158 43.6 222.674 44.5533 219.741 46.46C216.808 48.3667 214.571 50.8967 213.031 54.05C211.491 57.2033 210.721 60.6867 210.721 64.5C210.721 68.24 211.491 71.7233 213.031 74.95C214.571 78.1033 216.808 80.6333 219.741 82.54C222.674 84.4467 226.158 85.4 230.191 85.4ZM266.351 92V37H274.601V45.58C276.581 42.94 279.001 40.7033 281.861 38.87C284.721 37.0367 288.387 36.12 292.861 36.12C296.674 36.12 300.231 37.0367 303.531 38.87C306.904 40.63 309.617 43.3067 311.671 46.9C313.797 50.42 314.861 54.7833 314.861 59.99V92H306.611V60.21C306.611 55.2233 305.181 51.2267 302.321 48.22C299.461 45.14 295.757 43.6 291.211 43.6C288.131 43.6 285.344 44.2967 282.851 45.69C280.357 47.0833 278.341 49.0633 276.801 51.63C275.334 54.1233 274.601 57.02 274.601 60.32V92H266.351ZM348.125 92.88C342.552 92.88 337.675 91.6333 333.495 89.14C329.315 86.5733 326.052 83.1267 323.705 78.8C321.432 74.4733 320.295 69.7067 320.295 64.5C320.295 59.22 321.395 54.4533 323.595 50.2C325.795 45.8733 328.949 42.4633 333.055 39.97C337.162 37.4033 342.002 36.12 347.575 36.12C353.222 36.12 358.062 37.4033 362.095 39.97C366.202 42.4633 369.355 45.8733 371.555 50.2C373.755 54.4533 374.855 59.22 374.855 64.5V67.8H328.765C329.205 71.0267 330.232 73.9967 331.845 76.71C333.532 79.35 335.769 81.4767 338.555 83.09C341.342 84.63 344.569 85.4 348.235 85.4C352.122 85.4 355.385 84.5567 358.025 82.87C360.665 81.11 362.719 78.8733 364.185 76.16H373.205C371.299 81.0733 368.255 85.1067 364.075 88.26C359.969 91.34 354.652 92.88 348.125 92.88ZM328.875 60.1H366.275C365.542 55.4067 363.562 51.4833 360.335 48.33C357.109 45.1767 352.855 43.6 347.575 43.6C342.295 43.6 338.042 45.1767 334.815 48.33C331.662 51.4833 329.682 55.4067 328.875 60.1Z" />
|
||||
<path d="M81 8H27V36H54V63H81V8Z" fill="#3F76FF" />
|
||||
<rect y="36" width="27" height="27" fill="#3F76FF" />
|
||||
<rect x="27" y="63" width="27" height="27" fill="#3F76FF" />
|
||||
</svg>
|
||||
);
|
||||
@ -163,7 +163,7 @@ export const Workspace: React.FC<Props> = ({ setStep, setWorkspace }) => {
|
||||
))
|
||||
) : (
|
||||
<div className="text-center">
|
||||
<h3 className="text-brand-secondary">You have no invitations</h3>
|
||||
<h3 className="text-brand-secondary">{`You don't have any invitations yet.`}</h3>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -63,21 +63,23 @@ const ConfirmProjectMemberRemove: React.FC<Props> = ({ isOpen, onClose, data, ha
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
|
||||
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
|
||||
<Dialog.Title
|
||||
as="h3"
|
||||
className="text-lg font-medium leading-6 text-brand-base"
|
||||
>
|
||||
Remove {data?.email}?
|
||||
</Dialog.Title>
|
||||
<div className="mt-2">
|
||||
<p className="text-sm text-brand-secondary">
|
||||
Are you sure you want to remove member- {" "}
|
||||
<span className="font-bold">{data?.email}</span>
|
||||
? They will no longer have access to this project. This action
|
||||
cannot be undone.
|
||||
Are you sure you want to remove member-{" "}
|
||||
<span className="font-bold">{data?.email}</span>? They will no longer have
|
||||
access to this project. This action cannot be undone.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-end gap-2 bg-gray-50 p-4 sm:px-6">
|
||||
<div className="flex justify-end gap-2 bg-brand-surface-1 p-4 sm:px-6">
|
||||
<SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
|
||||
<DangerButton onClick={handleDeletion} loading={isDeleteLoading}>
|
||||
{isDeleteLoading ? "Removing..." : "Remove"}
|
||||
|
||||
@ -180,7 +180,9 @@ export const ProjectSidebarList: FC = () => {
|
||||
) : (
|
||||
<div className="space-y-3 text-center">
|
||||
{!sidebarCollapse && (
|
||||
<h4 className="text-sm text-gray-700">You don{"'"}t have any project yet</h4>
|
||||
<h4 className="text-sm text-brand-secondary">
|
||||
You don{"'"}t have any project yet
|
||||
</h4>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
|
||||
@ -126,8 +126,9 @@ export const DeleteStateModal: React.FC<Props> = ({ isOpen, onClose, data }) =>
|
||||
<div className="mt-2">
|
||||
<p className="text-sm text-brand-secondary">
|
||||
Are you sure you want to delete state-{" "}
|
||||
<span className="italic">{data?.name}</span>? All of the data related to
|
||||
the state will be permanently removed. This action cannot be undone.
|
||||
<span className="font-medium text-brand-base">{data?.name}</span>? All of
|
||||
the data related to the state will be permanently removed. This action
|
||||
cannot be undone.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -56,7 +56,11 @@ export const MultiInput = ({ label, name, placeholder, setValue, watch }: any) =
|
||||
{label && <label className="mb-2 text-brand-secondary">{label}</label>}
|
||||
<div className="rounded-md border border-brand-base p-2">
|
||||
{watch(name)?.map((tag: any, index: number) => (
|
||||
<button type="button" className="m-1.5 rounded-full bg-slate-300 p-1.5" key={index}>
|
||||
<button
|
||||
type="button"
|
||||
className="m-1.5 rounded-full bg-brand-surface-2 px-3 py-2 "
|
||||
key={index}
|
||||
>
|
||||
{tag.email} <span onClick={() => removeTag(index)}>×</span>
|
||||
</button>
|
||||
))}
|
||||
|
||||
@ -101,7 +101,7 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
|
||||
</Menu.Item>
|
||||
{option.children && option.id === openChildFor && (
|
||||
<div
|
||||
className={`absolute top-0 w-36 origin-top-right select-none overflow-y-scroll rounded-md bg-brand-surface-1 shadow-lg focus:outline-none ${
|
||||
className={`absolute top-0 w-auto min-w-[144px] max-w-[192px] origin-top-right select-none overflow-y-scroll rounded-md bg-brand-surface-1 shadow-lg focus:outline-none ${
|
||||
direction === "left"
|
||||
? "right-full -translate-x-1"
|
||||
: "left-full translate-x-1"
|
||||
@ -127,7 +127,7 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
|
||||
}}
|
||||
className={`${
|
||||
child.selected ? "bg-brand-surface-2" : ""
|
||||
} flex w-full items-center break-all rounded px-1 py-1.5 text-left capitalize text-brand-secondary hover:bg-brand-surface-2`}
|
||||
} flex w-full items-center whitespace-nowrap break-all rounded px-1 py-1.5 text-left capitalize text-brand-secondary hover:bg-brand-surface-2`}
|
||||
>
|
||||
{child.label}
|
||||
</button>
|
||||
|
||||
@ -39,7 +39,7 @@ const ConfirmWorkspaceMemberRemove: React.FC<Props> = ({ isOpen, onClose, data,
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 bg-[#131313] bg-opacity-50 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">
|
||||
@ -63,21 +63,23 @@ const ConfirmWorkspaceMemberRemove: React.FC<Props> = ({ isOpen, onClose, data,
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
|
||||
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
|
||||
<Dialog.Title
|
||||
as="h3"
|
||||
className="text-lg font-medium leading-6 text-brand-base"
|
||||
>
|
||||
Remove {data?.email}?
|
||||
</Dialog.Title>
|
||||
<div className="mt-2">
|
||||
<p className="text-sm text-brand-secondary">
|
||||
Are you sure you want to remove member- {" "}
|
||||
<span className="font-bold">{data?.email}</span>
|
||||
? They will no longer have access to this workspace. This action
|
||||
cannot be undone.
|
||||
Are you sure you want to remove member-{" "}
|
||||
<span className="font-bold">{data?.email}</span>? They will no longer have
|
||||
access to this workspace. This action cannot be undone.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-end gap-2 bg-gray-50 p-4 sm:px-6">
|
||||
<div className="flex justify-end gap-2 bg-brand-surface-1 p-4 sm:px-6">
|
||||
<SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
|
||||
<DangerButton onClick={handleDeletion} loading={isDeleteLoading}>
|
||||
{isDeleteLoading ? "Removing..." : "Remove"}
|
||||
|
||||
@ -122,6 +122,7 @@ export const CreateWorkspaceForm: React.FC<Props> = ({
|
||||
`Name can only contain (" "), ( - ), ( _ ) & Alphanumeric characters.`,
|
||||
}}
|
||||
placeholder="e.g. My Workspace"
|
||||
className="placeholder:text-brand-secondary"
|
||||
error={errors.name}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -13,13 +13,17 @@ import useUser from "hooks/use-user";
|
||||
import DefaultLayout from "layouts/default-layout";
|
||||
import { UserAuthorizationLayout } from "layouts/auth-layout/user-authorization-wrapper";
|
||||
// components
|
||||
import { InviteMembers, OnboardingCard, UserDetails, Workspace } from "components/onboarding";
|
||||
import {
|
||||
InviteMembers,
|
||||
OnboardingCard,
|
||||
OnboardingLogo,
|
||||
UserDetails,
|
||||
Workspace,
|
||||
} from "components/onboarding";
|
||||
// ui
|
||||
import { PrimaryButton } from "components/ui";
|
||||
// constant
|
||||
import { ONBOARDING_CARDS } from "constants/workspace";
|
||||
// images
|
||||
import Logo from "public/onboarding/logo.svg";
|
||||
// types
|
||||
import type { NextPage } from "next";
|
||||
import { ICurrentUserResponse } from "types";
|
||||
@ -42,8 +46,8 @@ const Onboarding: NextPage = () => {
|
||||
<div className="grid h-full place-items-center p-5">
|
||||
{step <= 3 ? (
|
||||
<div className="w-full">
|
||||
<div className="mb-8 text-center">
|
||||
<Image src={Logo} height="50" alt="Plane Logo" />
|
||||
<div className="mb-8 flex items-center justify-center text-center">
|
||||
<OnboardingLogo className="h-12 w-48 fill-current text-brand-base" />
|
||||
</div>
|
||||
{step === 1 ? (
|
||||
<UserDetails user={user} setStep={setStep} setUserRole={setUserRole} />
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 3.0 KiB |
Loading…
Reference in New Issue
Block a user