[WEB-5602] feat: new design system (#8220)
* chore: init tailwind v4 * chore: update all configs * chore: add source to parse monorepo packages * chore: combine all css files * feat: added extended colors * chore: update typography * chore: update extended color var names * refactor: remove initial spacing variable and update dark mode selector * chore: update css files * chore: update animations * chore: remove spacing tokens * fix: external css files * chore: update tailwind-merge version * chore: update font family * chore: added brief agents.md and story for new design system * chore: enhance design system documentation with rare exceptions for visual separation * chore: add fontsource package for typography * chore: material symbols font added * chore: update shadow default * chore: add stroke and outline theme vars * chore: update ring and fill colors * chore: overwrite tailwind typography tokens * chore: add high contrast mode tokens * chore: update scrollbar colors * chore: backward compatibility for buttons and placeholders * chore: add priority colors * chore: update urgent priority color * chore: update plan colors * chore: add missing utility class * chore: update height and padding classes * chore: update label colors * chore: add missing utlity * chore: add typography plugin to space app * chore: replace existing classNames with new design system tokens #8244 (#8278) * chore: update border colors * chore: update all borders * chore: update text colors * chore: update css variables * chore: update font sizes and weights * chore: update bg colors * chore: sync changes * fix: uncomment spacing-1200 variable in variables.css * chore: update primary colors * refactor: updated border to border-subtle * refactor: update various components and improve UI consistency across the application * updated classnames * updated classnames * refactor: update color-related class names to use new design system variables for consistency * chore: default automations * chore: update text sizes * chore: home and power k * chore: home and power k * chore: replace ui package button components * chore: update text sizes * chore: updated issue identifier (#8275) * refactor: top navigation and sidebar design token (#8276) * chore: update all button components (#8277) * chore: new button component * chore: update existing buttons * chore: overwrite tailwind typography tokens * fix: twMerge config + fixed cn instances * refactor: toast design token updated (#8279) * chore: update existing buttons * chore: tooltip design token updatged (#8280) * chore: moved cn utility to propel (#8281) * chore: update space app UI (#8285) * chore; update space app filters component * fix: button whitespace wrap * chore: space app votes * chore: update dropdown components * refactor: auth, onboarding, sidebar, and common component design token migration (#8291) * chore: checkbox component design token updated * chore: indicator and oauth component design token updated * chore: sidebar design token updated * chore: auth and onboarding design token updated * chore: update divider color * style: update background colors and hover effects across list components * fix: tailwind merge * refactor: toggle switch design token migration and header utility classname added (#8295) * chore: toggle component design token updated * chore: h-header utility class added * chore: updated color tokens for work item detail page (#8296) * chore: update react-day-picker UI * refactor: update button sizes and styles in filters components * refactor: breadcrumbs design token updated (#8297) * chore: update priority icon colors * refactor: updated layout variables * chore: update plan card primary CTA * Chore update editor design system (#8299) * refactor: update styles for callout, color selector, logo selector, and image uploader * refactor:fix image * chore: update settings UI * chore: updated notifications color and size tokens (#8302) * chore: update sm button border radius * fix: logo renderer * chore: icon button component * chore: remove deprecated classes * chore: remove deprecated classes * chore: update editor list spacing * fix: icon button size * chore: improvements (#8309) * chore: update cycles and modules pages * refactor: update background styles across various components to use new design system colors * fix: button type errors * chore: update modals design system (#8310) * refactor: callout bg * refactor: code bg * refactor: modal size and variant --------- Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com> * chore: update next-themes * design: update billing and plans component styles and remove unused utility functions (#8313) * refactor: empty state design token migration and improvements (#8315) * fix: profile page * refactor: tabs design token updated (#8316) * chore: updated buttons and tokens for work items (#8317) * fix: adjust trial button spacing in checkout modal * chore: update add button hover state * fix: type error (#8318) * fix: type error * chore: code refactor * refactor: update button sizes and background styles in rich filters components * refactor: update editor bg * refactor: enhance Gantt chart sidebar functionality and styling - Removed unused prop from . - Updated to include new props for better block management and scrolling behavior. - Improved auto-scroll functionality for Gantt chart items. - Adjusted styles in component for consistent design. * regression: gantt design * chore: new badge component * fix: favorite star * chore: update backgroung, typography and button sizes across workspace settings general and members pages * fix: header button sizes * fix: emoji icon logo (#8323) * more fixes * chore: update settings sidebar * refactor: avatar component * chore: updated work item detail sidebar (#8327) * refactor: update link preview * fix: work item property dropdowns * fix: dropdown buttons border radius * chore: update power k translation * chore: updated profile activity design (#8328) * chore: update settings pages * chore: update work item sidebar alignments (#8330) * refactor: admin design system * chore: update page header --------- Co-authored-by: Jayash Tripathy <76092296+JayashTripathy@users.noreply.github.com> Co-authored-by: VipinDevelops <vipinchaudhary1809@gmail.com> Co-authored-by: Vamsi Krishna <46787868+vamsikrishnamathala@users.noreply.github.com> Co-authored-by: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com> Co-authored-by: gakshita <akshitagoyal1516@gmail.com> Co-authored-by: Palanikannan M <akashmalinimurugu@gmail.com> Co-authored-by: Prateek Shourya <prateekshourya29@gmail.com> Co-authored-by: b-saikrishnakanth <bsaikrishnakanth97@gmail.com> Co-authored-by: M. Palanikannan <73993394+Palanikannan1437@users.noreply.github.com> * fix: formatting * reexport types * fix: lint error --------- Co-authored-by: Jayash Tripathy <76092296+JayashTripathy@users.noreply.github.com> Co-authored-by: VipinDevelops <vipinchaudhary1809@gmail.com> Co-authored-by: Vamsi Krishna <46787868+vamsikrishnamathala@users.noreply.github.com> Co-authored-by: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com> Co-authored-by: gakshita <akshitagoyal1516@gmail.com> Co-authored-by: Palanikannan M <akashmalinimurugu@gmail.com> Co-authored-by: Prateek Shourya <prateekshourya29@gmail.com> Co-authored-by: b-saikrishnakanth <bsaikrishnakanth97@gmail.com> Co-authored-by: M. Palanikannan <73993394+Palanikannan1437@users.noreply.github.com>
This commit is contained in:
Aaryan Khandelwal
GitHub
parent
d86418aad8
commit
22339b9786
1342 changed files with 14227 additions and 15119 deletions
|
|
@ -114,7 +114,7 @@ export const ModuleAnalyticsProgress = observer(function ModuleAnalyticsProgress
|
|||
|
||||
if (!moduleDetails) return <></>;
|
||||
return (
|
||||
<div className="border-t border-custom-border-200 space-y-4 py-4 px-3">
|
||||
<div className="border-t border-subtle space-y-4 py-4 px-3">
|
||||
<Disclosure defaultOpen={isModuleDateValid ? true : false}>
|
||||
{({ open }) => (
|
||||
<div className="space-y-6">
|
||||
|
|
@ -122,9 +122,9 @@ export const ModuleAnalyticsProgress = observer(function ModuleAnalyticsProgress
|
|||
{isModuleDateValid ? (
|
||||
<div className="relative w-full flex justify-between items-center gap-2">
|
||||
<Disclosure.Button className="relative flex items-center gap-2 w-full">
|
||||
<div className="font-medium text-custom-text-200 text-sm">{t("progress")}</div>
|
||||
<div className="font-medium text-secondary text-13">{t("progress")}</div>
|
||||
{progressHeaderPercentage > 0 && (
|
||||
<div className="flex h-5 w-9 items-center justify-center rounded bg-amber-500/20 text-xs font-medium text-amber-500">{`${progressHeaderPercentage}%`}</div>
|
||||
<div className="flex h-5 w-9 items-center justify-center rounded-sm bg-amber-500/20 text-11 font-medium text-amber-500">{`${progressHeaderPercentage}%`}</div>
|
||||
)}
|
||||
</Disclosure.Button>
|
||||
{isCurrentEstimateTypeIsPoints && (
|
||||
|
|
@ -160,10 +160,10 @@ export const ModuleAnalyticsProgress = observer(function ModuleAnalyticsProgress
|
|||
</div>
|
||||
) : (
|
||||
<div className="relative w-full flex justify-between items-center gap-2">
|
||||
<div className="font-medium text-custom-text-200 text-sm">Progress</div>
|
||||
<div className="font-medium text-secondary text-13">Progress</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<AlertCircle height={14} width={14} className="text-custom-text-200" />
|
||||
<span className="text-xs italic text-custom-text-200">
|
||||
<AlertCircle height={14} width={14} className="text-secondary" />
|
||||
<span className="text-11 italic text-secondary">
|
||||
{moduleDetails?.start_date && moduleDetails?.target_date
|
||||
? t("project_module.empty_state.sidebar.in_active")
|
||||
: t("project_module.empty_state.sidebar.invalid_date")}
|
||||
|
|
@ -197,7 +197,7 @@ export const ModuleAnalyticsProgress = observer(function ModuleAnalyticsProgress
|
|||
|
||||
{/* progress detailed view */}
|
||||
{chartDistributionData && (
|
||||
<div className="w-full border-t border-custom-border-200 pt-5">
|
||||
<div className="w-full border-t border-subtle pt-5">
|
||||
<ModuleProgressStats
|
||||
distribution={chartDistributionData}
|
||||
groupedIssues={groupedIssues}
|
||||
|
|
|
|||
|
|
@ -120,18 +120,16 @@ export const ModuleProgressStats = observer(function ModuleProgressStats(props:
|
|||
className={cn(
|
||||
`flex w-full items-center justify-between gap-2 rounded-md p-1`,
|
||||
roundedTab ? `rounded-3xl` : `rounded-md`,
|
||||
noBackground ? `` : `bg-custom-background-90`,
|
||||
size === "xs" ? `text-xs` : `text-sm`
|
||||
noBackground ? `` : `bg-surface-2`,
|
||||
size === "xs" ? `text-11` : `text-13`
|
||||
)}
|
||||
>
|
||||
{PROGRESS_STATS.map((stat) => (
|
||||
<Tab
|
||||
className={cn(
|
||||
`p-1 w-full text-custom-text-100 outline-none focus:outline-none cursor-pointer transition-all`,
|
||||
roundedTab ? `rounded-3xl border border-custom-border-200` : `rounded`,
|
||||
stat.key === currentTab
|
||||
? "bg-custom-background-100 text-custom-text-300"
|
||||
: "text-custom-text-400 hover:text-custom-text-300"
|
||||
`p-1 w-full text-primary outline-none focus:outline-none cursor-pointer transition-all`,
|
||||
roundedTab ? `rounded-3xl border border-subtle` : `rounded-sm`,
|
||||
stat.key === currentTab ? "bg-surface-1 text-tertiary" : "text-placeholder hover:text-tertiary"
|
||||
)}
|
||||
key={stat.key}
|
||||
onClick={() => setModuleTab(stat.key)}
|
||||
|
|
@ -140,7 +138,7 @@ export const ModuleProgressStats = observer(function ModuleProgressStats(props:
|
|||
</Tab>
|
||||
))}
|
||||
</Tab.List>
|
||||
<Tab.Panels className="py-3 text-custom-text-200">
|
||||
<Tab.Panels className="py-3 text-secondary">
|
||||
<Tab.Panel key={"stat-assignees"}>
|
||||
<AssigneeStatComponent
|
||||
distribution={distributionAssigneeData}
|
||||
|
|
|
|||
|
|
@ -243,15 +243,13 @@ export const ModuleAnalyticsSidebar = observer(function ModuleAnalyticsSidebar(p
|
|||
updateLink={handleUpdateLink}
|
||||
/>
|
||||
<>
|
||||
<div
|
||||
className={`sticky z-10 top-0 flex items-center justify-between bg-custom-sidebar-background-100 pb-5 pt-5`}
|
||||
>
|
||||
<div className={`sticky z-10 top-0 flex items-center justify-between bg-surface-1 pb-5 pt-5`}>
|
||||
<div>
|
||||
<button
|
||||
className="flex h-5 w-5 items-center justify-center rounded-full bg-custom-border-300"
|
||||
className="flex h-5 w-5 items-center justify-center rounded-full bg-layer-3"
|
||||
onClick={() => handleClose()}
|
||||
>
|
||||
<ChevronRightIcon className="h-3 w-3 stroke-2 text-white" />
|
||||
<ChevronRightIcon className="h-3 w-3 stroke-2 text-on-color" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -265,7 +263,7 @@ export const ModuleAnalyticsSidebar = observer(function ModuleAnalyticsSidebar(p
|
|||
<CustomSelect
|
||||
customButton={
|
||||
<span
|
||||
className={`flex h-6 w-20 items-center justify-center rounded-sm text-center text-xs ${
|
||||
className={`flex h-6 w-20 items-center justify-center rounded-xs text-center text-11 ${
|
||||
isEditingAllowed && !isArchived ? "cursor-pointer" : "cursor-not-allowed"
|
||||
}`}
|
||||
style={{
|
||||
|
|
@ -294,12 +292,12 @@ export const ModuleAnalyticsSidebar = observer(function ModuleAnalyticsSidebar(p
|
|||
)}
|
||||
/>
|
||||
</div>
|
||||
<h4 className="w-full break-words text-xl font-semibold text-custom-text-100">{moduleDetails.name}</h4>
|
||||
<h4 className="w-full break-words text-18 font-semibold text-primary">{moduleDetails.name}</h4>
|
||||
</div>
|
||||
|
||||
{moduleDetails.description && (
|
||||
<TextArea
|
||||
className="outline-none ring-none w-full max-h-max bg-transparent !p-0 !m-0 !border-0 resize-none text-sm leading-5 text-custom-text-200"
|
||||
className="outline-none ring-none w-full max-h-max bg-transparent !p-0 !m-0 !border-0 resize-none text-13 leading-5 text-secondary"
|
||||
value={moduleDetails.description}
|
||||
disabled
|
||||
/>
|
||||
|
|
@ -307,9 +305,9 @@ export const ModuleAnalyticsSidebar = observer(function ModuleAnalyticsSidebar(p
|
|||
|
||||
<div className="flex flex-col gap-5 pb-6 pt-2.5">
|
||||
<div className="flex items-center justify-start gap-1">
|
||||
<div className="flex w-2/5 items-center justify-start gap-2 text-custom-text-300">
|
||||
<div className="flex w-2/5 items-center justify-start gap-2 text-tertiary">
|
||||
<StartDatePropertyIcon className="h-4 w-4" />
|
||||
<span className="text-base">{t("date_range")}</span>
|
||||
<span className="text-14">{t("date_range")}</span>
|
||||
</div>
|
||||
<div className="h-7">
|
||||
<Controller
|
||||
|
|
@ -349,9 +347,9 @@ export const ModuleAnalyticsSidebar = observer(function ModuleAnalyticsSidebar(p
|
|||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-start gap-1">
|
||||
<div className="flex w-2/5 items-center justify-start gap-2 text-custom-text-300">
|
||||
<div className="flex w-2/5 items-center justify-start gap-2 text-tertiary">
|
||||
<SquareUser className="h-4 w-4" />
|
||||
<span className="text-base">{t("lead")}</span>
|
||||
<span className="text-14">{t("lead")}</span>
|
||||
</div>
|
||||
<Controller
|
||||
control={control}
|
||||
|
|
@ -375,9 +373,9 @@ export const ModuleAnalyticsSidebar = observer(function ModuleAnalyticsSidebar(p
|
|||
/>
|
||||
</div>
|
||||
<div className="flex items-center justify-start gap-1">
|
||||
<div className="flex w-2/5 items-center justify-start gap-2 text-custom-text-300">
|
||||
<div className="flex w-2/5 items-center justify-start gap-2 text-tertiary">
|
||||
<MembersPropertyIcon className="h-4 w-4" />
|
||||
<span className="text-base">{t("members")}</span>
|
||||
<span className="text-14">{t("members")}</span>
|
||||
</div>
|
||||
<Controller
|
||||
control={control}
|
||||
|
|
@ -400,12 +398,12 @@ export const ModuleAnalyticsSidebar = observer(function ModuleAnalyticsSidebar(p
|
|||
/>
|
||||
</div>
|
||||
<div className="flex items-center justify-start gap-1">
|
||||
<div className="flex w-2/5 items-center justify-start gap-2 text-custom-text-300">
|
||||
<div className="flex w-2/5 items-center justify-start gap-2 text-tertiary">
|
||||
<WorkItemsIcon className="h-4 w-4" />
|
||||
<span className="text-base">{t("issues")}</span>
|
||||
<span className="text-14">{t("issues")}</span>
|
||||
</div>
|
||||
<div className="flex h-7 w-3/5 items-center">
|
||||
<span className="px-1.5 text-sm text-custom-text-300">{issueCount}</span>
|
||||
<span className="px-1.5 text-13 text-tertiary">{issueCount}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -414,12 +412,12 @@ export const ModuleAnalyticsSidebar = observer(function ModuleAnalyticsSidebar(p
|
|||
*/}
|
||||
{isEstimatePointValid && (
|
||||
<div className="flex items-center justify-start gap-1">
|
||||
<div className="flex w-2/5 items-center justify-start gap-2 text-custom-text-300">
|
||||
<div className="flex w-2/5 items-center justify-start gap-2 text-tertiary">
|
||||
<WorkItemsIcon className="h-4 w-4" />
|
||||
<span className="text-base">{t("points")}</span>
|
||||
<span className="text-14">{t("points")}</span>
|
||||
</div>
|
||||
<div className="flex h-7 w-3/5 items-center">
|
||||
<span className="px-1.5 text-sm text-custom-text-300">{issueEstimatePointCount}</span>
|
||||
<span className="px-1.5 text-13 text-tertiary">{issueEstimatePointCount}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -434,16 +432,15 @@ export const ModuleAnalyticsSidebar = observer(function ModuleAnalyticsSidebar(p
|
|||
)}
|
||||
|
||||
<div className="flex flex-col">
|
||||
<div className="flex w-full flex-col items-center justify-start gap-2 border-t border-custom-border-200 px-1.5 py-5">
|
||||
<div className="flex w-full flex-col items-center justify-start gap-2 border-t border-subtle px-1.5 py-5">
|
||||
{/* Accessing link outside the disclosure as mobx is not considering the children inside Disclosure as part of the component hence not observing their state change*/}
|
||||
<Disclosure defaultOpen={!!moduleDetails?.link_module?.length}>
|
||||
{({ open }) => (
|
||||
<div className={`relative flex h-full w-full flex-col ${open ? "" : "flex-row"}`}>
|
||||
<Disclosure.Button className="flex w-full items-center justify-between gap-2 p-1.5">
|
||||
<div className="flex items-center justify-start gap-2 text-sm">
|
||||
<span className="font-medium text-custom-text-200">{t("common.links")}</span>
|
||||
<div className="flex items-center justify-start gap-2 text-13">
|
||||
<span className="font-medium text-secondary">{t("common.links")}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2.5">
|
||||
<ChevronDownIcon
|
||||
className={`h-3.5 w-3.5 ${open ? "rotate-180 transform" : ""}`}
|
||||
|
|
@ -459,7 +456,7 @@ export const ModuleAnalyticsSidebar = observer(function ModuleAnalyticsSidebar(p
|
|||
{isEditingAllowed && !isArchived && (
|
||||
<div className="flex w-full items-center justify-end">
|
||||
<button
|
||||
className="flex items-center gap-1.5 text-sm font-medium text-custom-primary-100"
|
||||
className="flex items-center gap-1.5 text-13 font-medium text-accent-primary"
|
||||
onClick={() => setModuleLinkModal(true)}
|
||||
>
|
||||
<Plus className="h-3 w-3" />
|
||||
|
|
@ -480,14 +477,12 @@ export const ModuleAnalyticsSidebar = observer(function ModuleAnalyticsSidebar(p
|
|||
) : (
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Info className="h-3.5 w-3.5 stroke-[1.5] text-custom-text-300" />
|
||||
<span className="p-0.5 text-xs text-custom-text-300">
|
||||
{t("common.no_links_added_yet")}
|
||||
</span>
|
||||
<Info className="h-3.5 w-3.5 stroke-[1.5] text-tertiary" />
|
||||
<span className="p-0.5 text-11 text-tertiary">{t("common.no_links_added_yet")}</span>
|
||||
</div>
|
||||
{isEditingAllowed && !isArchived && (
|
||||
<button
|
||||
className="flex items-center gap-1.5 text-sm font-medium text-custom-primary-100"
|
||||
className="flex items-center gap-1.5 text-13 font-medium text-accent-primary"
|
||||
onClick={() => setModuleLinkModal(true)}
|
||||
>
|
||||
<Plus className="h-3 w-3" />
|
||||
|
|
|
|||
|
|
@ -37,12 +37,12 @@ export const AppliedDateFilters = observer(function AppliedDateFilters(props: Pr
|
|||
return (
|
||||
<>
|
||||
{values.map((date) => (
|
||||
<div key={date} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
|
||||
<div key={date} className="flex items-center gap-1 rounded-sm bg-layer-1 p-1 text-11">
|
||||
<span className="normal-case">{getDateLabel(date)}</span>
|
||||
{editable && (
|
||||
<button
|
||||
type="button"
|
||||
className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
|
||||
className="grid place-items-center text-tertiary hover:text-secondary"
|
||||
onClick={() => handleRemove(date)}
|
||||
>
|
||||
<CloseIcon height={10} width={10} strokeWidth={2} />
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ export const AppliedMembersFilters = observer(function AppliedMembersFilters(pro
|
|||
if (!memberDetails) return null;
|
||||
|
||||
return (
|
||||
<div key={memberId} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
|
||||
<div key={memberId} className="flex items-center gap-1 rounded-sm bg-layer-1 p-1 text-11">
|
||||
<Avatar
|
||||
name={memberDetails.display_name}
|
||||
src={getFileURL(memberDetails.avatar_url)}
|
||||
|
|
@ -39,7 +39,7 @@ export const AppliedMembersFilters = observer(function AppliedMembersFilters(pro
|
|||
{editable && (
|
||||
<button
|
||||
type="button"
|
||||
className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
|
||||
className="grid place-items-center text-tertiary hover:text-secondary"
|
||||
onClick={() => handleRemove(memberId)}
|
||||
>
|
||||
<CloseIcon height={10} width={10} strokeWidth={2} />
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ export function ModuleAppliedFiltersList(props: Props) {
|
|||
return (
|
||||
<Tag key={filterKey}>
|
||||
<div className="flex flex-wrap items-center gap-1.5">
|
||||
<span className="text-xs text-custom-text-300">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
|
||||
<span className="text-11 text-tertiary">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
|
||||
{filterKey === "status" && (
|
||||
<AppliedStatusFilters
|
||||
editable={isEditingAllowed}
|
||||
|
|
@ -75,7 +75,7 @@ export function ModuleAppliedFiltersList(props: Props) {
|
|||
{isEditingAllowed && (
|
||||
<button
|
||||
type="button"
|
||||
className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
|
||||
className="grid place-items-center text-tertiary hover:text-secondary"
|
||||
onClick={() => handleRemoveFilter(filterKey, null)}
|
||||
>
|
||||
<CloseIcon height={12} width={12} strokeWidth={2} />
|
||||
|
|
@ -88,16 +88,16 @@ export function ModuleAppliedFiltersList(props: Props) {
|
|||
{!isArchived && isFavoriteFilterApplied && (
|
||||
<div
|
||||
key="module_display_filters"
|
||||
className="flex flex-wrap items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1 capitalize"
|
||||
className="flex flex-wrap items-center gap-2 rounded-md border border-subtle px-2 py-1 capitalize"
|
||||
>
|
||||
<div className="flex flex-wrap items-center gap-1.5">
|
||||
<span className="text-xs text-custom-text-300">Modules</span>
|
||||
<div className="flex items-center gap-1 rounded p-1 text-xs bg-custom-background-80">
|
||||
<span className="text-11 text-tertiary">Modules</span>
|
||||
<div className="flex items-center gap-1 rounded-sm p-1 text-11 bg-layer-1">
|
||||
Favorite
|
||||
{isEditingAllowed && (
|
||||
<button
|
||||
type="button"
|
||||
className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
|
||||
className="grid place-items-center text-tertiary hover:text-secondary"
|
||||
onClick={() =>
|
||||
handleDisplayFiltersUpdate &&
|
||||
handleDisplayFiltersUpdate({
|
||||
|
|
|
|||
|
|
@ -22,13 +22,13 @@ export const AppliedStatusFilters = observer(function AppliedStatusFilters(props
|
|||
if (!statusDetails) return null;
|
||||
|
||||
return (
|
||||
<div key={status} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
|
||||
<div key={status} className="flex items-center gap-1 rounded-sm bg-layer-1 p-1 text-11">
|
||||
<ModuleStatusIcon status={statusDetails.value} height="12px" width="12px" />
|
||||
{t(statusDetails.i18n_label)}
|
||||
{editable && (
|
||||
<button
|
||||
type="button"
|
||||
className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
|
||||
className="grid place-items-center text-tertiary hover:text-secondary"
|
||||
onClick={() => handleRemove(status)}
|
||||
>
|
||||
<CloseIcon height={10} width={10} strokeWidth={2} />
|
||||
|
|
|
|||
|
|
@ -76,7 +76,7 @@ export const ArchivedModulesHeader = observer(function ArchivedModulesHeader() {
|
|||
const isFiltersApplied = calculateTotalFilters(currentProjectArchivedFilters ?? {}) !== 0;
|
||||
|
||||
return (
|
||||
<div className="group relative flex border-b border-custom-border-200">
|
||||
<div className="group relative flex border-b border-subtle">
|
||||
<div className="flex w-full items-center overflow-x-auto px-4 gap-2 horizontal-scrollbar scrollbar-sm">
|
||||
<ArchiveTabsList />
|
||||
</div>
|
||||
|
|
@ -85,7 +85,7 @@ export const ArchivedModulesHeader = observer(function ArchivedModulesHeader() {
|
|||
{!isSearchOpen && (
|
||||
<button
|
||||
type="button"
|
||||
className="-mr-5 p-2 hover:bg-custom-background-80 rounded text-custom-text-400 grid place-items-center"
|
||||
className="-mr-5 p-2 hover:bg-layer-1 rounded-sm text-placeholder grid place-items-center"
|
||||
onClick={() => {
|
||||
setIsSearchOpen(true);
|
||||
inputRef.current?.focus();
|
||||
|
|
@ -96,16 +96,16 @@ export const ArchivedModulesHeader = observer(function ArchivedModulesHeader() {
|
|||
)}
|
||||
<div
|
||||
className={cn(
|
||||
"ml-auto flex items-center justify-start gap-1 rounded-md border border-transparent bg-custom-background-100 text-custom-text-400 w-0 transition-[width] ease-linear overflow-hidden opacity-0",
|
||||
"ml-auto flex items-center justify-start gap-1 rounded-md border border-transparent bg-surface-1 text-placeholder w-0 transition-[width] ease-linear overflow-hidden opacity-0",
|
||||
{
|
||||
"w-64 px-2.5 py-1.5 border-custom-border-200 opacity-100": isSearchOpen,
|
||||
"w-64 px-2.5 py-1.5 border-subtle opacity-100": isSearchOpen,
|
||||
}
|
||||
)}
|
||||
>
|
||||
<Search className="h-3.5 w-3.5" />
|
||||
<input
|
||||
ref={inputRef}
|
||||
className="w-full max-w-[234px] border-none bg-transparent text-sm text-custom-text-100 placeholder:text-custom-text-400 focus:outline-none"
|
||||
className="w-full max-w-[234px] border-none bg-transparent text-13 text-primary placeholder:text-placeholder focus:outline-none"
|
||||
placeholder="Search"
|
||||
value={archivedModulesSearchQuery}
|
||||
onChange={(e) => updateArchivedModulesSearchQuery(e.target.value)}
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@ export function ArchiveModuleModal(props: Props) {
|
|||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
|
||||
<div className="fixed inset-0 bg-backdrop transition-opacity" />
|
||||
</Transition.Child>
|
||||
|
||||
<div className="fixed inset-0 z-10 overflow-y-auto">
|
||||
|
|
@ -80,17 +80,23 @@ export function ArchiveModuleModal(props: 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-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-lg">
|
||||
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-lg">
|
||||
<div className="px-5 py-4">
|
||||
<h3 className="text-xl font-medium 2xl:text-2xl">Archive module {moduleName}</h3>
|
||||
<p className="mt-3 text-sm text-custom-text-200">
|
||||
<h3 className="text-18 font-medium 2xl:text-20">Archive module {moduleName}</h3>
|
||||
<p className="mt-3 text-13 text-secondary">
|
||||
Are you sure you want to archive the module? All your archives can be restored later.
|
||||
</p>
|
||||
<div className="mt-3 flex justify-end gap-2">
|
||||
<Button variant="neutral-primary" size="sm" onClick={onClose}>
|
||||
<Button variant="secondary" size="lg" onClick={onClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button size="sm" tabIndex={1} onClick={handleArchiveModule} loading={isArchiving}>
|
||||
<Button
|
||||
variant="primary"
|
||||
size="lg"
|
||||
tabIndex={1}
|
||||
onClick={handleArchiveModule}
|
||||
loading={isArchiving}
|
||||
>
|
||||
{isArchiving ? "Archiving" : "Archive"}
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@ export const ArchivedModuleLayoutRoot = observer(function ArchivedModuleLayoutRo
|
|||
return (
|
||||
<>
|
||||
{calculateTotalFilters(currentProjectArchivedFilters ?? {}) !== 0 && (
|
||||
<div className="border-b border-custom-border-200 px-5 py-3">
|
||||
<div className="border-b border-subtle px-5 py-3">
|
||||
<ModuleAppliedFiltersList
|
||||
appliedFilters={currentProjectArchivedFilters ?? {}}
|
||||
handleClearAllFilters={() => clearAllFilters(projectId.toString(), "archived")}
|
||||
|
|
|
|||
|
|
@ -35,8 +35,8 @@ export const ArchivedModulesView = observer(function ArchivedModulesView(props:
|
|||
className="h-36 sm:h-48 w-36 sm:w-48 mx-auto"
|
||||
alt="No matching modules"
|
||||
/>
|
||||
<h5 className="text-xl font-medium mt-7 mb-1">No matching modules</h5>
|
||||
<p className="text-custom-text-400 text-base">
|
||||
<h5 className="text-18 font-medium mt-7 mb-1">No matching modules</h5>
|
||||
<p className="text-placeholder text-14">
|
||||
{archivedModulesSearchQuery.trim() === ""
|
||||
? "Remove the filters to see all modules"
|
||||
: "Remove the search criteria to see all modules"}
|
||||
|
|
|
|||
|
|
@ -85,8 +85,8 @@ export const DeleteModuleModal = observer(function DeleteModuleModal(props: Prop
|
|||
content={
|
||||
<>
|
||||
Are you sure you want to delete module-{" "}
|
||||
<span className="break-all font-medium text-custom-text-100">{data?.name}</span>? All of the data related to
|
||||
the module will be permanently removed. This action cannot be undone.
|
||||
<span className="break-all font-medium text-primary">{data?.name}</span>? All of the data related to the
|
||||
module will be permanently removed. This action cannot be undone.
|
||||
</>
|
||||
}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -85,7 +85,7 @@ export const FilterLead = observer(function FilterLead(props: Props) {
|
|||
{sortedOptions.length > 5 && (
|
||||
<button
|
||||
type="button"
|
||||
className="ml-8 text-xs font-medium text-custom-primary-100"
|
||||
className="ml-8 text-11 font-medium text-accent-primary"
|
||||
onClick={handleViewToggle}
|
||||
>
|
||||
{itemsToRender === sortedOptions.length ? "View less" : "View all"}
|
||||
|
|
@ -93,7 +93,7 @@ export const FilterLead = observer(function FilterLead(props: Props) {
|
|||
)}
|
||||
</>
|
||||
) : (
|
||||
<p className="text-xs italic text-custom-text-400">No matches found</p>
|
||||
<p className="text-11 italic text-placeholder">No matches found</p>
|
||||
)
|
||||
) : (
|
||||
<Loader className="space-y-2">
|
||||
|
|
|
|||
|
|
@ -85,7 +85,7 @@ export const FilterMembers = observer(function FilterMembers(props: Props) {
|
|||
{sortedOptions.length > 5 && (
|
||||
<button
|
||||
type="button"
|
||||
className="ml-8 text-xs font-medium text-custom-primary-100"
|
||||
className="ml-8 text-11 font-medium text-accent-primary"
|
||||
onClick={handleViewToggle}
|
||||
>
|
||||
{itemsToRender === sortedOptions.length ? "View less" : "View all"}
|
||||
|
|
@ -93,7 +93,7 @@ export const FilterMembers = observer(function FilterMembers(props: Props) {
|
|||
)}
|
||||
</>
|
||||
) : (
|
||||
<p className="text-xs italic text-custom-text-400">No matches found</p>
|
||||
<p className="text-11 italic text-placeholder">No matches found</p>
|
||||
)
|
||||
) : (
|
||||
<Loader className="space-y-2">
|
||||
|
|
|
|||
|
|
@ -36,12 +36,12 @@ export const ModuleFiltersSelection = observer(function ModuleFiltersSelection(p
|
|||
|
||||
return (
|
||||
<div className="flex h-full w-full flex-col overflow-hidden">
|
||||
<div className="bg-custom-background-100 p-2.5 pb-0">
|
||||
<div className="flex items-center gap-1.5 rounded border-[0.5px] border-custom-border-200 bg-custom-background-90 px-1.5 py-1 text-xs">
|
||||
<Search className="text-custom-text-400" size={12} strokeWidth={2} />
|
||||
<div className="bg-surface-1 p-2.5 pb-0">
|
||||
<div className="flex items-center gap-1.5 rounded-sm border-[0.5px] border-subtle bg-surface-2 px-1.5 py-1 text-11">
|
||||
<Search className="text-placeholder" size={12} strokeWidth={2} />
|
||||
<input
|
||||
type="text"
|
||||
className="w-full bg-custom-background-90 outline-none placeholder:text-custom-text-400"
|
||||
className="w-full bg-surface-2 outline-none placeholder:text-placeholder"
|
||||
placeholder="Search"
|
||||
value={filtersSearchQuery}
|
||||
onChange={(e) => setFiltersSearchQuery(e.target.value)}
|
||||
|
|
@ -49,12 +49,12 @@ export const ModuleFiltersSelection = observer(function ModuleFiltersSelection(p
|
|||
/>
|
||||
{filtersSearchQuery !== "" && (
|
||||
<button type="button" className="grid place-items-center" onClick={() => setFiltersSearchQuery("")}>
|
||||
<CloseIcon className="text-custom-text-300" height={12} width={12} strokeWidth={2} />
|
||||
<CloseIcon className="text-tertiary" height={12} width={12} strokeWidth={2} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-full w-full divide-y divide-custom-border-200 overflow-y-auto px-2.5 vertical-scrollbar scrollbar-sm">
|
||||
<div className="h-full w-full divide-y divide-subtle-1 overflow-y-auto px-2.5 vertical-scrollbar scrollbar-sm">
|
||||
{!isArchived && (
|
||||
<div className="py-2">
|
||||
<FilterOption
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@ export const FilterStartDate = observer(function FilterStartDate(props: Props) {
|
|||
<FilterOption isChecked={isCustomDateSelected()} onClick={handleCustomDate} title="Custom" multiple />
|
||||
</>
|
||||
) : (
|
||||
<p className="text-xs italic text-custom-text-400">No matches found</p>
|
||||
<p className="text-11 italic text-placeholder">No matches found</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ export const FilterStatus = observer(function FilterStatus(props: Props) {
|
|||
/>
|
||||
))
|
||||
) : (
|
||||
<p className="text-xs italic text-custom-text-400">No matches found</p>
|
||||
<p className="text-11 italic text-placeholder">No matches found</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@ export const FilterTargetDate = observer(function FilterTargetDate(props: Props)
|
|||
<FilterOption isChecked={isCustomDateSelected()} onClick={handleCustomDate} title="Custom" multiple />
|
||||
</>
|
||||
) : (
|
||||
<p className="text-xs italic text-custom-text-400">No matches found</p>
|
||||
<p className="text-11 italic text-placeholder">No matches found</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -29,8 +29,8 @@ export function ModuleOrderByDropdown(props: Props) {
|
|||
return (
|
||||
<CustomMenu
|
||||
customButton={
|
||||
<div className={cn(getButtonStyling("neutral-primary", "sm"), "px-2 text-custom-text-300")}>
|
||||
{!isDescending ? <ArrowUpWideNarrow className="size-3 " /> : <ArrowDownWideNarrow className="size-3 " />}
|
||||
<div className={cn(getButtonStyling("secondary", "lg"), "px-2 text-tertiary")}>
|
||||
{!isDescending ? <ArrowUpWideNarrow className="size-3" /> : <ArrowDownWideNarrow className="size-3" />}
|
||||
{orderByDetails && t(orderByDetails?.i18n_label)}
|
||||
<ChevronDownIcon className="size-3" strokeWidth={2} />
|
||||
</div>
|
||||
|
|
@ -54,7 +54,7 @@ export function ModuleOrderByDropdown(props: Props) {
|
|||
))}
|
||||
{!isManual && (
|
||||
<>
|
||||
<hr className="my-2 border-custom-border-200" />
|
||||
<hr className="my-2 border-subtle" />
|
||||
<CustomMenu.MenuItem
|
||||
className="flex items-center justify-between gap-2"
|
||||
onClick={() => {
|
||||
|
|
|
|||
|
|
@ -101,7 +101,7 @@ export function ModuleForm(props: Props) {
|
|||
)}
|
||||
/>
|
||||
)}
|
||||
<h3 className="text-xl font-medium text-custom-text-200">
|
||||
<h3 className="text-18 font-medium text-secondary">
|
||||
{status ? t("common.update") : t("common.create")} {t("common.module").toLowerCase()}
|
||||
</h3>
|
||||
</div>
|
||||
|
|
@ -126,13 +126,13 @@ export function ModuleForm(props: Props) {
|
|||
onChange={onChange}
|
||||
hasError={Boolean(errors?.name)}
|
||||
placeholder={t("title")}
|
||||
className="w-full text-base"
|
||||
className="w-full text-14"
|
||||
tabIndex={getIndex("name")}
|
||||
autoFocus
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<span className="text-xs text-red-500">{errors?.name?.message}</span>
|
||||
<span className="text-11 text-red-500">{errors?.name?.message}</span>
|
||||
</div>
|
||||
<div>
|
||||
<Controller
|
||||
|
|
@ -145,7 +145,7 @@ export function ModuleForm(props: Props) {
|
|||
value={value}
|
||||
onChange={onChange}
|
||||
placeholder={t("description")}
|
||||
className="w-full text-base resize-none min-h-24"
|
||||
className="w-full text-14 resize-none min-h-24"
|
||||
hasError={Boolean(errors?.description)}
|
||||
tabIndex={getIndex("description")}
|
||||
/>
|
||||
|
|
@ -226,11 +226,11 @@ export function ModuleForm(props: Props) {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-5 py-4 flex items-center justify-end gap-2 border-t-[0.5px] border-custom-border-200">
|
||||
<Button variant="neutral-primary" size="sm" onClick={handleClose} tabIndex={getIndex("cancel")}>
|
||||
<div className="px-5 py-4 flex items-center justify-end gap-2 border-t-[0.5px] border-subtle">
|
||||
<Button variant="secondary" size="lg" onClick={handleClose} tabIndex={getIndex("cancel")}>
|
||||
{t("cancel")}
|
||||
</Button>
|
||||
<Button variant="primary" size="sm" type="submit" loading={isSubmitting} tabIndex={getIndex("submit")}>
|
||||
<Button variant="primary" size="lg" type="submit" loading={isSubmitting} tabIndex={getIndex("submit")}>
|
||||
{status
|
||||
? isSubmitting
|
||||
? t("updating")
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ export const ModuleGanttBlock = observer(function ModuleGanttBlock(props: Props)
|
|||
position="top-start"
|
||||
>
|
||||
<div
|
||||
className="relative flex h-full w-full cursor-pointer items-center rounded"
|
||||
className="relative flex h-full w-full cursor-pointer items-center rounded-sm"
|
||||
style={blockStyle}
|
||||
onClick={() =>
|
||||
router.push(
|
||||
|
|
@ -55,9 +55,9 @@ export const ModuleGanttBlock = observer(function ModuleGanttBlock(props: Props)
|
|||
)
|
||||
}
|
||||
>
|
||||
<div className="absolute left-0 top-0 h-full w-full bg-custom-background-100/50" />
|
||||
<div className="absolute left-0 top-0 h-full w-full bg-surface-1/50" />
|
||||
<div
|
||||
className="sticky w-auto overflow-hidden truncate px-2.5 py-1 text-sm text-custom-text-100"
|
||||
className="sticky w-auto overflow-hidden truncate px-2.5 py-1 text-13 text-primary"
|
||||
style={{ left: `${SIDEBAR_WIDTH}px` }}
|
||||
>
|
||||
{moduleDetails?.name}
|
||||
|
|
@ -82,7 +82,7 @@ export const ModuleGanttSidebarBlock = observer(function ModuleGanttSidebarBlock
|
|||
draggable={false}
|
||||
>
|
||||
<ModuleStatusIcon status={moduleDetails?.status ?? "backlog"} height="16px" width="16px" />
|
||||
<h6 className="flex-grow truncate text-sm font-medium">{moduleDetails?.name}</h6>
|
||||
<h6 className="flex-grow truncate text-13 font-medium">{moduleDetails?.name}</h6>
|
||||
</Link>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -81,10 +81,10 @@ export function CreateUpdateModuleLinkModal(props: Props) {
|
|||
<ModalCore isOpen={isOpen} handleClose={onClose}>
|
||||
<form onSubmit={handleSubmit(handleFormSubmit)}>
|
||||
<div className="space-y-5 p-5">
|
||||
<h3 className="text-xl font-medium text-custom-text-200">{data ? "Update" : "Add"} link</h3>
|
||||
<h3 className="text-18 font-medium text-secondary">{data ? "Update" : "Add"} link</h3>
|
||||
<div className="mt-2 space-y-3">
|
||||
<div>
|
||||
<label htmlFor="url" className="mb-2 text-custom-text-200">
|
||||
<label htmlFor="url" className="mb-2 text-secondary">
|
||||
URL
|
||||
</label>
|
||||
<Controller
|
||||
|
|
@ -108,9 +108,9 @@ export function CreateUpdateModuleLinkModal(props: Props) {
|
|||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="title" className="mb-2 text-custom-text-200">
|
||||
<label htmlFor="title" className="mb-2 text-secondary">
|
||||
Display title
|
||||
<span className="text-[10px] block">Optional</span>
|
||||
<span className="text-10 block">Optional</span>
|
||||
</label>
|
||||
<Controller
|
||||
control={control}
|
||||
|
|
@ -131,11 +131,11 @@ export function CreateUpdateModuleLinkModal(props: Props) {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-5 py-4 flex items-center justify-end gap-2 border-t-[0.5px] border-custom-border-200">
|
||||
<Button variant="neutral-primary" size="sm" onClick={onClose}>
|
||||
<div className="px-5 py-4 flex items-center justify-end gap-2 border-t-[0.5px] border-subtle">
|
||||
<Button variant="secondary" size="lg" onClick={onClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button variant="primary" size="sm" type="submit" loading={isSubmitting}>
|
||||
<Button variant="primary" size="lg" type="submit" loading={isSubmitting}>
|
||||
{data ? (isSubmitting ? "Updating link" : "Update link") : isSubmitting ? "Adding link" : "Add link"}
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -42,24 +42,24 @@ export const ModulesLinksListItem = observer(function ModulesLinksListItem(props
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="relative flex flex-col rounded-md bg-custom-background-90 p-2.5">
|
||||
<div className="relative flex flex-col rounded-md bg-layer-3 p-2.5">
|
||||
<div className="flex w-full items-start justify-between gap-2">
|
||||
<div className="flex items-start gap-2 truncate">
|
||||
<span className="py-1">
|
||||
<Icon className="size-3 stroke-2 text-custom-text-350 group-hover:text-custom-text-100 flex-shrink-0" />
|
||||
<Icon className="size-3 stroke-2 text-tertiary group-hover:text-primary shrink-0" />
|
||||
</span>
|
||||
<Tooltip tooltipContent={link.title && link.title !== "" ? link.title : link.url} isMobile={isMobile}>
|
||||
<a href={link.url} target="_blank" rel="noopener noreferrer" className="cursor-pointer truncate text-xs">
|
||||
<a href={link.url} target="_blank" rel="noopener noreferrer" className="cursor-pointer truncate text-11">
|
||||
{link.title && link.title !== "" ? link.title : link.url}
|
||||
</a>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
<div className="z-[1] flex flex-shrink-0 items-center">
|
||||
<div className="z-1 flex shrink-0 items-center">
|
||||
{isEditingAllowed && (
|
||||
<button
|
||||
type="button"
|
||||
className="grid place-items-center p-1 hover:bg-custom-background-80"
|
||||
className="grid place-items-center p-1 hover:bg-layer-transparent-hover text-secondary rounded-sm"
|
||||
data-ph-element={MODULE_TRACKER_ELEMENTS.LIST_ITEM}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
|
|
@ -67,19 +67,20 @@ export const ModulesLinksListItem = observer(function ModulesLinksListItem(props
|
|||
handleEditLink();
|
||||
}}
|
||||
>
|
||||
<Pencil className="size-3 stroke-[1.5] text-custom-text-200" />
|
||||
<Pencil className="size-3 stroke-[1.5]" />
|
||||
</button>
|
||||
)}
|
||||
<span
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => copyToClipboard(link.url)}
|
||||
className="grid place-items-center p-1 hover:bg-custom-background-80 cursor-pointer"
|
||||
className="grid place-items-center p-1 hover:bg-layer-transparent-hover text-secondary rounded-sm"
|
||||
>
|
||||
<Copy className="h-3.5 w-3.5 stroke-[1.5]" />
|
||||
</span>
|
||||
<Copy className="size-3 stroke-[1.5]" />
|
||||
</button>
|
||||
{isEditingAllowed && (
|
||||
<button
|
||||
type="button"
|
||||
className="grid place-items-center p-1 hover:bg-custom-background-80"
|
||||
className="grid place-items-center p-1 hover:bg-layer-transparent-hover text-secondary rounded-sm"
|
||||
data-ph-element={MODULE_TRACKER_ELEMENTS.LIST_ITEM}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
|
|
@ -87,13 +88,13 @@ export const ModulesLinksListItem = observer(function ModulesLinksListItem(props
|
|||
handleDeleteLink();
|
||||
}}
|
||||
>
|
||||
<Trash2 className="size-3 stroke-[1.5] text-custom-text-200" />
|
||||
<Trash2 className="size-3 stroke-[1.5]" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-5">
|
||||
<p className="flex items-center gap-1.5 mt-0.5 stroke-[1.5] text-xs text-custom-text-300">
|
||||
<p className="flex items-center gap-1.5 mt-0.5 stroke-[1.5] text-11 text-tertiary">
|
||||
Added {calculateTimeAgo(link.created_at)}{" "}
|
||||
{createdByDetails && (
|
||||
<>by {createdByDetails?.is_bot ? createdByDetails?.first_name + " Bot" : createdByDetails?.display_name}</>
|
||||
|
|
|
|||
|
|
@ -209,7 +209,7 @@ export const ModuleCardItem = observer(function ModuleCardItem(props: Props) {
|
|||
<div>
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<Tooltip tooltipContent={moduleDetails.name} position="top" isMobile={isMobile}>
|
||||
<span className="truncate text-base font-medium">{moduleDetails.name}</span>
|
||||
<span className="truncate text-14 font-medium">{moduleDetails.name}</span>
|
||||
</Tooltip>
|
||||
<div className="flex items-center gap-2" onClick={handleEventPropagation}>
|
||||
{moduleStatus && (
|
||||
|
|
@ -220,16 +220,16 @@ export const ModuleCardItem = observer(function ModuleCardItem(props: Props) {
|
|||
/>
|
||||
)}
|
||||
<button onClick={openModuleOverview}>
|
||||
<Info className="h-4 w-4 text-custom-text-400" />
|
||||
<Info className="h-4 w-4 text-placeholder" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-1.5 text-custom-text-200">
|
||||
<WorkItemsIcon className="h-4 w-4 text-custom-text-300" />
|
||||
<span className="text-xs text-custom-text-300">{issueCount ?? "0 Work item"}</span>
|
||||
<div className="flex items-center gap-1.5 text-secondary">
|
||||
<WorkItemsIcon className="h-4 w-4 text-tertiary" />
|
||||
<span className="text-11 text-tertiary">{issueCount ?? "0 Work item"}</span>
|
||||
</div>
|
||||
{moduleLeadDetails ? (
|
||||
<span className="cursor-default">
|
||||
|
|
@ -237,14 +237,14 @@ export const ModuleCardItem = observer(function ModuleCardItem(props: Props) {
|
|||
</span>
|
||||
) : (
|
||||
<Tooltip tooltipContent="No lead">
|
||||
<SquareUser className="h-4 w-4 mx-1 text-custom-text-300 " />
|
||||
<SquareUser className="h-4 w-4 mx-1 text-tertiary " />
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
<LinearProgressIndicator size="lg" data={progressIndicatorData} />
|
||||
<div className="flex items-center justify-between py-0.5" onClick={handleEventPropagation}>
|
||||
<DateRangeDropdown
|
||||
buttonContainerClassName={`h-6 w-full flex ${isDisabled ? "cursor-not-allowed" : "cursor-pointer"} items-center gap-1.5 text-custom-text-300 border-[0.5px] border-custom-border-300 rounded text-xs`}
|
||||
buttonContainerClassName={`h-6 w-full flex ${isDisabled ? "cursor-not-allowed" : "cursor-pointer"} items-center gap-1.5 text-tertiary border-[0.5px] border-strong rounded-sm text-11`}
|
||||
buttonVariant="transparent-with-text"
|
||||
className="h-7"
|
||||
value={{
|
||||
|
|
|
|||
|
|
@ -27,7 +27,9 @@ export function ModuleLayoutIcon(props: ILayoutIcon) {
|
|||
return (
|
||||
<>
|
||||
{withContainer ? (
|
||||
<div className={cn("flex items-center justify-center border rounded p-0.5 flex-shrink-0", containerClassName)}>
|
||||
<div
|
||||
className={cn("flex items-center justify-center border rounded-sm p-0.5 flex-shrink-0", containerClassName)}
|
||||
>
|
||||
<Icon width={size} height={size} className={cn(className)} />
|
||||
</div>
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -173,7 +173,7 @@ export const ModuleListItemAction = observer(function ModuleListItemAction(props
|
|||
return (
|
||||
<>
|
||||
<DateRangeDropdown
|
||||
buttonContainerClassName={`h-6 w-full flex ${isDisabled ? "cursor-not-allowed" : "cursor-pointer"} items-center gap-1.5 text-custom-text-300 border-[0.5px] border-custom-border-300 rounded text-xs`}
|
||||
buttonContainerClassName={`h-6 w-full flex ${isDisabled ? "cursor-not-allowed" : "cursor-pointer"} items-center gap-1.5 text-tertiary border-[0.5px] border-strong rounded-sm text-11`}
|
||||
buttonVariant="transparent-with-text"
|
||||
className="h-7"
|
||||
value={{
|
||||
|
|
@ -209,7 +209,7 @@ export const ModuleListItemAction = observer(function ModuleListItemAction(props
|
|||
</span>
|
||||
) : (
|
||||
<Tooltip tooltipContent="No lead">
|
||||
<SquareUser className="h-4 w-4 text-custom-text-300" />
|
||||
<SquareUser className="h-4 w-4 text-tertiary" />
|
||||
</Tooltip>
|
||||
)}
|
||||
|
||||
|
|
|
|||
|
|
@ -72,14 +72,14 @@ export const ModuleListItem = observer(function ModuleListItem(props: Props) {
|
|||
<CircularProgressIndicator size={30} percentage={progress} strokeWidth={3}>
|
||||
{completedModuleCheck ? (
|
||||
progress === 100 ? (
|
||||
<Check className="h-3 w-3 stroke-[2] text-custom-primary-100" />
|
||||
<Check className="h-3 w-3 stroke-[2] text-accent-primary" />
|
||||
) : (
|
||||
<span className="text-sm text-custom-primary-100">{`!`}</span>
|
||||
<span className="text-13 text-accent-primary">{`!`}</span>
|
||||
)
|
||||
) : progress === 100 ? (
|
||||
<Check className="h-3 w-3 stroke-[2] text-custom-primary-100" />
|
||||
<Check className="h-3 w-3 stroke-[2] text-accent-primary" />
|
||||
) : (
|
||||
<span className="text-[9px] text-custom-text-300">{`${progress}%`}</span>
|
||||
<span className="text-9 text-tertiary">{`${progress}%`}</span>
|
||||
)}
|
||||
</CircularProgressIndicator>
|
||||
}
|
||||
|
|
@ -88,7 +88,7 @@ export const ModuleListItem = observer(function ModuleListItem(props: Props) {
|
|||
onClick={openModuleOverview}
|
||||
className={`z-[5] flex-shrink-0 ${isMobile ? "flex" : "hidden group-hover:flex"}`}
|
||||
>
|
||||
<Info className="h-4 w-4 text-custom-text-400" />
|
||||
<Info className="h-4 w-4 text-placeholder" />
|
||||
</button>
|
||||
}
|
||||
actionableItems={<ModuleListItemAction moduleId={moduleId} moduleDetails={moduleDetails} parentRef={parentRef} />}
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ export const ModulePeekOverview = observer(function ModulePeekOverview({
|
|||
{peekModule && (
|
||||
<div
|
||||
ref={ref}
|
||||
className="flex h-full w-full max-w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 duration-300 absolute md:relative right-0 z-[9]"
|
||||
className="flex h-full w-full max-w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-subtle bg-surface-1 px-6 duration-300 absolute md:relative right-0 z-[9]"
|
||||
style={{
|
||||
boxShadow:
|
||||
"0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(16, 24, 40, 0.06), 0px 1px 8px -1px rgba(16, 24, 40, 0.06)",
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ export const ModuleStatusDropdown = observer(function ModuleStatusDropdown(props
|
|||
<CustomSelect
|
||||
customButton={
|
||||
<span
|
||||
className={`flex h-6 w-20 items-center justify-center rounded-sm text-center text-xs ${
|
||||
className={`flex h-6 w-20 items-center justify-center rounded-xs text-center text-11 ${
|
||||
isDisabled ? "cursor-not-allowed" : "cursor-pointer"
|
||||
}`}
|
||||
style={{
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@ import { useMember } from "@/hooks/store/use-member";
|
|||
import { useModuleFilter } from "@/hooks/store/use-module-filter";
|
||||
import { usePlatformOS } from "@/hooks/use-platform-os";
|
||||
import { ModuleLayoutIcon } from "./module-layout-icon";
|
||||
import { IconButton } from "@plane/propel/icon-button";
|
||||
// i18n
|
||||
|
||||
export const ModuleViewHeader = observer(function ModuleViewHeader() {
|
||||
|
|
@ -96,29 +97,29 @@ export const ModuleViewHeader = observer(function ModuleViewHeader() {
|
|||
<div className="hidden h-full sm:flex items-center gap-3 self-end">
|
||||
<div className="flex items-center">
|
||||
{!isSearchOpen && (
|
||||
<button
|
||||
type="button"
|
||||
className="-mr-1 p-2 hover:bg-custom-background-80 rounded text-custom-text-400 grid place-items-center"
|
||||
<IconButton
|
||||
variant="ghost"
|
||||
size="lg"
|
||||
className="-mr-1 p-"
|
||||
onClick={() => {
|
||||
setIsSearchOpen(true);
|
||||
inputRef.current?.focus();
|
||||
}}
|
||||
>
|
||||
<Search className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
icon={Search}
|
||||
/>
|
||||
)}
|
||||
<div
|
||||
className={cn(
|
||||
"ml-auto flex items-center justify-start gap-1 rounded-md border border-transparent bg-custom-background-100 text-custom-text-400 w-0 transition-[width] ease-linear overflow-hidden opacity-0",
|
||||
"ml-auto flex items-center justify-start gap-1 rounded-md border border-transparent bg-surface-1 text-placeholder w-0 transition-[width] ease-linear overflow-hidden opacity-0",
|
||||
{
|
||||
"w-64 px-2.5 py-1.5 border-custom-border-200 opacity-100": isSearchOpen,
|
||||
"w-64 px-2.5 py-1.5 border-subtle opacity-100": isSearchOpen,
|
||||
}
|
||||
)}
|
||||
>
|
||||
<Search className="h-3.5 w-3.5" />
|
||||
<input
|
||||
ref={inputRef}
|
||||
className="w-full max-w-[234px] border-none bg-transparent text-sm text-custom-text-100 placeholder:text-custom-text-400 focus:outline-none"
|
||||
className="w-full max-w-[234px] border-none bg-transparent text-13 text-primary placeholder:text-placeholder focus:outline-none"
|
||||
placeholder="Search"
|
||||
value={searchQuery}
|
||||
onChange={(e) => updateSearchQuery(e.target.value)}
|
||||
|
|
@ -138,7 +139,6 @@ export const ModuleViewHeader = observer(function ModuleViewHeader() {
|
|||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ModuleOrderByDropdown
|
||||
value={displayFilters?.order_by}
|
||||
onChange={(val) => {
|
||||
|
|
@ -165,15 +165,16 @@ export const ModuleViewHeader = observer(function ModuleViewHeader() {
|
|||
memberIds={workspaceMemberIds ?? undefined}
|
||||
/>
|
||||
</FiltersDropdown>
|
||||
<div className="hidden md:flex items-center gap-1 rounded bg-custom-background-80 p-1">
|
||||
<div className="hidden md:flex items-center gap-1 rounded-sm bg-layer-3 p-1">
|
||||
{MODULE_VIEW_LAYOUTS.map((layout) => (
|
||||
<Tooltip key={layout.key} tooltipContent={t(layout.i18n_title)} isMobile={isMobile}>
|
||||
<button
|
||||
type="button"
|
||||
className={cn(
|
||||
"group grid h-[22px] w-7 place-items-center overflow-hidden rounded transition-all hover:bg-custom-background-100",
|
||||
"group grid h-5.5 w-7 place-items-center overflow-hidden rounded-sm transition-all hover:bg-layer-transparent-hover",
|
||||
{
|
||||
"bg-custom-background-100 shadow-custom-shadow-2xs": displayFilters?.layout === layout.key,
|
||||
"bg-layer-transparent-active hover:bg-layer-transparent-active":
|
||||
displayFilters?.layout === layout.key,
|
||||
}
|
||||
)}
|
||||
onClick={() => {
|
||||
|
|
|
|||
|
|
@ -160,7 +160,7 @@ export const ModuleQuickActions = observer(function ModuleQuickActions(props: Pr
|
|||
className={cn(
|
||||
"flex items-center gap-2",
|
||||
{
|
||||
"text-custom-text-400": item.disabled,
|
||||
"text-placeholder": item.disabled,
|
||||
},
|
||||
item.className
|
||||
)}
|
||||
|
|
@ -171,8 +171,8 @@ export const ModuleQuickActions = observer(function ModuleQuickActions(props: Pr
|
|||
<h5>{item.title}</h5>
|
||||
{item.description && (
|
||||
<p
|
||||
className={cn("text-custom-text-300 whitespace-pre-line", {
|
||||
"text-custom-text-400": item.disabled,
|
||||
className={cn("text-tertiary whitespace-pre-line", {
|
||||
"text-placeholder": item.disabled,
|
||||
})}
|
||||
>
|
||||
{item.description}
|
||||
|
|
|
|||
|
|
@ -31,14 +31,14 @@ export function ModuleStatusSelect({ control, error, tabIndex }: Props) {
|
|||
<CustomSelect
|
||||
value={value}
|
||||
label={
|
||||
<div className={`flex items-center justify-center gap-2 text-xs py-0.5 ${error ? "text-red-500" : ""}`}>
|
||||
<div className={`flex items-center justify-center gap-2 text-11 py-0.5 ${error ? "text-red-500" : ""}`}>
|
||||
{value ? (
|
||||
<ModuleStatusIcon status={value} />
|
||||
) : (
|
||||
<StatePropertyIcon className={`h-3 w-3 ${error ? "text-red-500" : "text-custom-text-200"}`} />
|
||||
<StatePropertyIcon className={`h-3 w-3 ${error ? "text-red-500" : "text-secondary"}`} />
|
||||
)}
|
||||
{(selectedValue && t(selectedValue?.i18n_label)) ?? (
|
||||
<span className={`${error ? "text-red-500" : "text-custom-text-200"}`}>Status</span>
|
||||
<span className={`${error ? "text-red-500" : "text-secondary"}`}>Status</span>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ export function SidebarStatusSelect({ control, submitChanges, watch }: Props) {
|
|||
const { t } = useTranslation();
|
||||
return (
|
||||
<div className="flex flex-wrap items-center py-2">
|
||||
<div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
|
||||
<div className="flex items-center gap-x-2 text-13 sm:basis-1/2">
|
||||
<StatePropertyIcon className="h-4 w-4 flex-shrink-0" />
|
||||
<p>Status</p>
|
||||
</div>
|
||||
|
|
@ -34,7 +34,7 @@ export function SidebarStatusSelect({ control, submitChanges, watch }: Props) {
|
|||
render={({ field: { value } }) => (
|
||||
<CustomSelect
|
||||
label={
|
||||
<span className={`flex items-center gap-2 text-left capitalize ${value ? "" : "text-custom-text-100"}`}>
|
||||
<span className={`flex items-center gap-2 text-left capitalize ${value ? "" : "text-primary"}`}>
|
||||
<span
|
||||
className="h-2 w-2 flex-shrink-0 rounded-full"
|
||||
style={{
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue