[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
|
|
@ -18,7 +18,7 @@ export const WorkspaceActiveCycleHeader = observer(function WorkspaceActiveCycle
|
|||
component={
|
||||
<BreadcrumbLink
|
||||
label={t("active_cycles")}
|
||||
icon={<CycleIcon className="h-4 w-4 text-custom-text-300 rotate-180" />}
|
||||
icon={<CycleIcon className="h-4 w-4 text-tertiary rotate-180" />}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ export const WorkspaceAnalyticsHeader = observer(function WorkspaceAnalyticsHead
|
|||
component={
|
||||
<BreadcrumbLink
|
||||
label={t("workspace_analytics.label")}
|
||||
icon={<AnalyticsIcon className="h-4 w-4 text-custom-text-300" />}
|
||||
icon={<AnalyticsIcon className="h-4 w-4 text-tertiary" />}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -67,12 +67,12 @@ function AnalyticsPage({ params }: Route.ComponentProps) {
|
|||
{workspaceProjectIds && (
|
||||
<>
|
||||
{workspaceProjectIds.length > 0 || loader === "init-loader" ? (
|
||||
<div className="flex h-full overflow-hidden bg-custom-background-100 ">
|
||||
<div className="flex h-full overflow-hidden bg-surface-1 ">
|
||||
<Tabs value={selectedTab} onValueChange={handleTabChange} className="w-full h-full">
|
||||
<div className={"flex flex-col w-full h-full"}>
|
||||
<div
|
||||
className={cn(
|
||||
"px-6 py-2 border-b border-custom-border-200 flex items-center gap-4 overflow-hidden w-full justify-between"
|
||||
"px-6 py-2 border-b border-subtle flex items-center gap-4 overflow-hidden w-full justify-between"
|
||||
)}
|
||||
>
|
||||
<Tabs.List className={"my-2 overflow-x-auto flex w-fit"}>
|
||||
|
|
|
|||
|
|
@ -32,8 +32,8 @@ export const ProjectWorkItemDetailsHeader = observer(function ProjectWorkItemDet
|
|||
<>
|
||||
{projectPreferences.navigationMode === "horizontal" && (
|
||||
<div className="z-20">
|
||||
<Row className="h-header flex gap-2 w-full items-center border-b border-custom-border-200 bg-custom-sidebar-background-100">
|
||||
<div className="flex items-center gap-2 divide-x divide-custom-border-100 h-full w-full">
|
||||
<Row className="h-header flex gap-2 w-full items-center border-b border-subtle bg-surface-1">
|
||||
<div className="flex items-center gap-2 divide-x divide-subtle h-full w-full">
|
||||
<div className="flex items-center gap-2 size-full flex-1">
|
||||
{sidebarCollapsed && (
|
||||
<div className="shrink-0">
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ export const WorkItemDetailsHeader = observer(function WorkItemDetailsHeader() {
|
|||
<BreadcrumbLink
|
||||
label="Work Items"
|
||||
href={`/${workspaceSlug}/projects/${projectId}/issues/`}
|
||||
icon={<WorkItemsIcon className="h-4 w-4 text-custom-text-300" />}
|
||||
icon={<WorkItemsIcon className="h-4 w-4 text-tertiary" />}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ export const WorkspaceDraftHeader = observer(function WorkspaceDraftHeader() {
|
|||
<Breadcrumbs>
|
||||
<Breadcrumbs.Item
|
||||
component={
|
||||
<BreadcrumbLink label={t("drafts")} icon={<DraftIcon className="h-4 w-4 text-custom-text-300" />} />
|
||||
<BreadcrumbLink label={t("drafts")} icon={<DraftIcon className="h-4 w-4 text-tertiary" />} />
|
||||
}
|
||||
/>
|
||||
</Breadcrumbs>
|
||||
|
|
@ -62,7 +62,7 @@ export const WorkspaceDraftHeader = observer(function WorkspaceDraftHeader() {
|
|||
{joinedProjectIds && joinedProjectIds.length > 0 && (
|
||||
<Button
|
||||
variant="primary"
|
||||
size="sm"
|
||||
size="lg"
|
||||
className="items-center gap-1"
|
||||
onClick={() => setIsDraftIssueModalOpen(true)}
|
||||
disabled={!isAuthorizedUser}
|
||||
|
|
|
|||
|
|
@ -106,13 +106,13 @@ export const ExtendedProjectSidebar = observer(function ExtendedProjectSidebar()
|
|||
>
|
||||
<div className="flex flex-col gap-1 w-full sticky top-4 px-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm font-semibold text-custom-text-300 py-1.5">Projects</span>
|
||||
<span className="text-13 font-semibold text-tertiary py-1.5">Projects</span>
|
||||
{isAuthorizedUser && (
|
||||
<Tooltip tooltipHeading={t("create_project")} tooltipContent="">
|
||||
<button
|
||||
type="button"
|
||||
data-ph-element={PROJECT_TRACKER_ELEMENTS.EXTENDED_SIDEBAR_ADD_BUTTON}
|
||||
className="p-0.5 rounded hover:bg-custom-sidebar-background-80 flex-shrink-0 text-custom-text-300 hover:text-custom-text-200 transition-colors"
|
||||
className="p-0.5 rounded-sm hover:bg-layer-1 flex-shrink-0 text-tertiary hover:text-secondary transition-colors"
|
||||
onClick={() => {
|
||||
setIsProjectModalOpen(true);
|
||||
}}
|
||||
|
|
@ -122,10 +122,10 @@ export const ExtendedProjectSidebar = observer(function ExtendedProjectSidebar()
|
|||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
<div className="ml-auto flex items-center gap-1.5 rounded-md border border-custom-border-200 bg-custom-background-100 px-2.5 py-1 w-full">
|
||||
<Search className="h-3.5 w-3.5 text-custom-text-400" />
|
||||
<div className="ml-auto flex items-center gap-1.5 rounded-md border border-subtle bg-surface-1 px-2.5 py-1 w-full">
|
||||
<Search className="h-3.5 w-3.5 text-placeholder" />
|
||||
<input
|
||||
className="w-full max-w-[234px] border-none bg-transparent text-sm outline-none placeholder:text-custom-text-400"
|
||||
className="w-full max-w-[234px] border-none bg-transparent text-13 outline-none placeholder:text-placeholder"
|
||||
placeholder={t("search")}
|
||||
value={searchQuery}
|
||||
autoFocus
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ export const ExtendedSidebarWrapper = observer(function ExtendedSidebarWrapper(p
|
|||
id={excludedElementId}
|
||||
ref={extendedSidebarRef}
|
||||
className={cn(
|
||||
"absolute h-full z-[21] flex flex-col py-2 transform transition-all duration-300 ease-in-out bg-custom-sidebar-background-100 border-r border-custom-sidebar-border-200 p-4 shadow-sm",
|
||||
"absolute h-full z-[21] flex flex-col py-2 transform transition-all duration-300 ease-in-out bg-surface-1 border-r border-subtle p-4 shadow-sm",
|
||||
{
|
||||
"opacity-100": isExtendedSidebarOpened,
|
||||
"opacity-0 hidden": !isExtendedSidebarOpened,
|
||||
|
|
|
|||
|
|
@ -24,10 +24,7 @@ export const WorkspaceDashboardHeader = observer(function WorkspaceDashboardHead
|
|||
<Breadcrumbs>
|
||||
<Breadcrumbs.Item
|
||||
component={
|
||||
<BreadcrumbLink
|
||||
label={t("home.title")}
|
||||
icon={<HomeIcon className="h-4 w-4 text-custom-text-300" />}
|
||||
/>
|
||||
<BreadcrumbLink label={t("home.title")} icon={<HomeIcon className="h-4 w-4 text-tertiary" />} />
|
||||
}
|
||||
/>
|
||||
</Breadcrumbs>
|
||||
|
|
@ -35,13 +32,13 @@ export const WorkspaceDashboardHeader = observer(function WorkspaceDashboardHead
|
|||
</Header.LeftItem>
|
||||
<Header.RightItem>
|
||||
<Button
|
||||
variant="neutral-primary"
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
size="lg"
|
||||
onClick={() => toggleWidgetSettings(true)}
|
||||
className="my-auto mb-0"
|
||||
prependIcon={<Shapes />}
|
||||
>
|
||||
<Shapes size={16} />
|
||||
<div className="hidden text-xs font-medium sm:hidden md:block">{t("home.manage_widgets")}</div>
|
||||
<div className="hidden sm:hidden md:block">{t("home.manage_widgets")}</div>
|
||||
</Button>
|
||||
</Header.RightItem>
|
||||
</Header>
|
||||
|
|
|
|||
|
|
@ -9,12 +9,12 @@ function WorkspaceLayout() {
|
|||
return (
|
||||
<>
|
||||
<ProjectsAppPowerKProvider />
|
||||
<div className="relative flex flex-col h-full w-full overflow-hidden rounded-lg border border-custom-border-200">
|
||||
<div className="relative flex flex-col h-full w-full overflow-hidden rounded-lg border border-subtle">
|
||||
<div id="full-screen-portal" className="inset-0 absolute w-full" />
|
||||
<div className="relative flex size-full overflow-hidden">
|
||||
<ProjectAppSidebar />
|
||||
<ExtendedProjectSidebar />
|
||||
<main className="relative flex h-full w-full flex-col overflow-hidden bg-custom-background-100">
|
||||
<main className="relative flex h-full w-full flex-col overflow-hidden bg-surface-1">
|
||||
<Outlet />
|
||||
</main>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -51,14 +51,14 @@ function ProfileActivityPage() {
|
|||
<PageHead title="Profile - Activity" />
|
||||
<div className="flex h-full w-full flex-col overflow-hidden py-5">
|
||||
<div className="flex items-center justify-between gap-2 px-5 md:px-9">
|
||||
<h3 className="text-lg font-medium">{t("profile.stats.recent_activity.title")}</h3>
|
||||
<h3 className="text-16 font-medium">{t("profile.stats.recent_activity.title")}</h3>
|
||||
{canDownloadActivity && <DownloadActivityButton />}
|
||||
</div>
|
||||
<div className="vertical-scrollbar scrollbar-md flex h-full flex-col overflow-y-auto px-5 md:px-9">
|
||||
{activityPages}
|
||||
{pageCount < totalPages && resultsCount !== 0 && (
|
||||
<div className="flex w-full items-center justify-center text-xs">
|
||||
<Button variant="accent-primary" size="sm" onClick={handleLoadMore}>
|
||||
<div className="flex w-full items-center justify-center text-11">
|
||||
<Button variant="secondary" onClick={handleLoadMore}>
|
||||
{t("common.load_more")}
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ import { ProfileIssuesFilter } from "@/components/profile/profile-issues-filter"
|
|||
// hooks
|
||||
import { useAppTheme } from "@/hooks/store/use-app-theme";
|
||||
import { useUser, useUserPermissions } from "@/hooks/store/user";
|
||||
import { Button } from "@plane/propel/button";
|
||||
|
||||
type TUserProfileHeader = {
|
||||
userProjectsData: IUserProfileProjectSegregation | undefined;
|
||||
|
|
@ -57,7 +58,7 @@ export const UserProfileHeader = observer(function UserProfileHeader(props: TUse
|
|||
<BreadcrumbLink
|
||||
label={breadcrumbLabel}
|
||||
disableTooltip
|
||||
icon={<YourWorkIcon className="h-4 w-4 text-custom-text-300" />}
|
||||
icon={<YourWorkIcon className="h-4 w-4 text-tertiary" />}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
|
@ -68,15 +69,15 @@ export const UserProfileHeader = observer(function UserProfileHeader(props: TUse
|
|||
<div className="flex gap-4 md:hidden">
|
||||
<CustomMenu
|
||||
maxHeight={"md"}
|
||||
className="flex flex-grow justify-center text-sm text-custom-text-200"
|
||||
className="flex flex-grow justify-center text-13 text-secondary"
|
||||
placement="bottom-start"
|
||||
customButton={
|
||||
<div className="flex items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1.5">
|
||||
<span className="flex flex-grow justify-center text-sm text-custom-text-200">{type}</span>
|
||||
<ChevronDownIcon className="h-4 w-4 text-custom-text-400" />
|
||||
<div className="flex items-center gap-2 rounded-md border border-subtle px-2 py-1.5">
|
||||
<span className="flex flex-grow justify-center text-13 text-secondary">{type}</span>
|
||||
<ChevronDownIcon className="h-4 w-4 text-placeholder" />
|
||||
</div>
|
||||
}
|
||||
customButtonClassName="flex flex-grow justify-center text-custom-text-200 text-sm"
|
||||
customButtonClassName="flex flex-grow justify-center text-secondary text-13"
|
||||
closeOnSelect
|
||||
>
|
||||
<></>
|
||||
|
|
@ -86,23 +87,22 @@ export const UserProfileHeader = observer(function UserProfileHeader(props: TUse
|
|||
key={tab.route}
|
||||
onClick={() => router.push(`/${workspaceSlug}/profile/${userId}/${tab.route}`)}
|
||||
>
|
||||
<span className="w-full text-custom-text-300">{t(tab.i18n_label)}</span>
|
||||
<span className="w-full text-tertiary">{t(tab.i18n_label)}</span>
|
||||
</CustomMenu.MenuItem>
|
||||
))}
|
||||
</CustomMenu>
|
||||
<button
|
||||
className="block transition-all md:hidden"
|
||||
onClick={() => {
|
||||
toggleProfileSidebar();
|
||||
}}
|
||||
>
|
||||
<PanelRight
|
||||
className={cn(
|
||||
"block h-4 w-4 md:hidden",
|
||||
!profileSidebarCollapsed ? "text-[#3E63DD]" : "text-custom-text-200"
|
||||
)}
|
||||
/>
|
||||
</button>
|
||||
<div className="shrink-0 md:hidden">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="lg"
|
||||
onClick={() => {
|
||||
toggleProfileSidebar();
|
||||
}}
|
||||
appendIcon={
|
||||
<PanelRight className={!profileSidebarCollapsed ? "text-accent-primary" : "text-secondary"} />
|
||||
}
|
||||
></Button>
|
||||
</div>
|
||||
</div>
|
||||
</Header.RightItem>
|
||||
</Header>
|
||||
|
|
|
|||
|
|
@ -74,7 +74,7 @@ function UseProfileLayout({ params }: Route.ComponentProps) {
|
|||
<Outlet />
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid h-full w-full place-items-center text-custom-text-200">
|
||||
<div className="grid h-full w-full place-items-center text-secondary">
|
||||
{t("you_do_not_have_the_permission_to_access_this_page")}
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -78,18 +78,18 @@ export const ProfileIssuesMobileHeader = observer(function ProfileIssuesMobileHe
|
|||
);
|
||||
|
||||
return (
|
||||
<div className="flex justify-evenly border-b border-custom-border-200 py-2 md:hidden">
|
||||
<div className="flex justify-evenly border-b border-subtle py-2 md:hidden">
|
||||
<CustomMenu
|
||||
maxHeight={"md"}
|
||||
className="flex flex-grow justify-center text-sm text-custom-text-200"
|
||||
className="flex flex-grow justify-center text-13 text-secondary"
|
||||
placement="bottom-start"
|
||||
customButton={
|
||||
<div className="flex flex-center text-sm text-custom-text-200">
|
||||
<div className="flex flex-center text-13 text-secondary">
|
||||
{t("common.layout")}
|
||||
<ChevronDownIcon className="ml-2 h-4 w-4 text-custom-text-200 my-auto" strokeWidth={2} />
|
||||
<ChevronDownIcon className="ml-2 h-4 w-4 text-secondary my-auto" strokeWidth={2} />
|
||||
</div>
|
||||
}
|
||||
customButtonClassName="flex flex-center text-custom-text-200 text-sm"
|
||||
customButtonClassName="flex flex-center text-secondary text-13"
|
||||
closeOnSelect
|
||||
>
|
||||
{ISSUE_LAYOUTS.map((layout, index) => {
|
||||
|
|
@ -103,19 +103,19 @@ export const ProfileIssuesMobileHeader = observer(function ProfileIssuesMobileHe
|
|||
className="flex items-center gap-2"
|
||||
>
|
||||
<IssueLayoutIcon layout={ISSUE_LAYOUTS[index].key} className="h-3 w-3" />
|
||||
<div className="text-custom-text-300">{t(layout.i18n_title)}</div>
|
||||
<div className="text-tertiary">{t(layout.i18n_title)}</div>
|
||||
</CustomMenu.MenuItem>
|
||||
);
|
||||
})}
|
||||
</CustomMenu>
|
||||
<div className="flex flex-grow items-center justify-center border-l border-custom-border-200 text-sm text-custom-text-200">
|
||||
<div className="flex flex-grow items-center justify-center border-l border-subtle text-13 text-secondary">
|
||||
<FiltersDropdown
|
||||
title={t("common.display")}
|
||||
placement="bottom-end"
|
||||
menuButton={
|
||||
<div className="flex flex-center text-sm text-custom-text-200">
|
||||
<div className="flex flex-center text-13 text-secondary">
|
||||
{t("common.display")}
|
||||
<ChevronDownIcon className="ml-2 h-4 w-4 text-custom-text-200" strokeWidth={2} />
|
||||
<ChevronDownIcon className="ml-2 h-4 w-4 text-secondary" strokeWidth={2} />
|
||||
</div>
|
||||
}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,10 @@
|
|||
import React from "react";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useParams, usePathname } from "next/navigation";
|
||||
// plane imports
|
||||
import { PROFILE_VIEWER_TAB, PROFILE_ADMINS_TAB } from "@plane/constants";
|
||||
import { useTranslation } from "@plane/i18n";
|
||||
|
||||
// components
|
||||
// constants
|
||||
import { Header, EHeaderVariant } from "@plane/ui";
|
||||
import { cn } from "@plane/utils";
|
||||
|
||||
type Props = {
|
||||
isAuthorized: boolean;
|
||||
|
|
@ -27,11 +24,13 @@ export function ProfileNavbar(props: Props) {
|
|||
{tabsList.map((tab) => (
|
||||
<Link key={tab.route} href={`/${workspaceSlug}/profile/${userId}/${tab.route}`}>
|
||||
<span
|
||||
className={`flex whitespace-nowrap border-b-2 p-4 text-sm font-medium outline-none ${
|
||||
pathname === `/${workspaceSlug}/profile/${userId}${tab.selected}`
|
||||
? "border-custom-primary-100 text-custom-primary-100"
|
||||
: "border-transparent"
|
||||
}`}
|
||||
className={cn(
|
||||
`flex whitespace-nowrap border-b-2 p-4 text-13 font-medium outline-none text-tertiary hover:text-primary ${
|
||||
pathname === `/${workspaceSlug}/profile/${userId}${tab.selected}`
|
||||
? "border-accent-strong text-accent-primary hover:text-accent-primary"
|
||||
: "border-transparent"
|
||||
}`
|
||||
)}
|
||||
>
|
||||
{t(tab.i18n_label)}
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@ export const ProjectArchivesHeader = observer(function ProjectArchivesHeader(pro
|
|||
<BreadcrumbLink
|
||||
href={`/${workspaceSlug}/projects/${projectId}/archives/issues`}
|
||||
label="Archives"
|
||||
icon={<ArchiveIcon className="h-4 w-4 text-custom-text-300" />}
|
||||
icon={<ArchiveIcon className="h-4 w-4 text-tertiary" />}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
|
@ -81,7 +81,7 @@ export const ProjectArchivesHeader = observer(function ProjectArchivesHeader(pro
|
|||
component={
|
||||
<BreadcrumbLink
|
||||
label={activeTabBreadcrumbDetail.label}
|
||||
icon={<activeTabBreadcrumbDetail.icon className="h-4 w-4 text-custom-text-300" />}
|
||||
icon={<activeTabBreadcrumbDetail.icon className="h-4 w-4 text-tertiary" />}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
|
@ -93,7 +93,7 @@ export const ProjectArchivesHeader = observer(function ProjectArchivesHeader(pro
|
|||
tooltipContent={`There are ${issueCount} ${issueCount > 1 ? "work items" : "work item"} in project's archived`}
|
||||
position="bottom"
|
||||
>
|
||||
<span className="cursor-default flex items-center text-center justify-center px-2.5 py-0.5 flex-shrink-0 bg-custom-primary-100/20 text-custom-primary-100 text-xs font-semibold rounded-xl">
|
||||
<span className="cursor-default flex items-center text-center justify-center px-2.5 py-0.5 flex-shrink-0 bg-accent-primary/20 text-accent-primary text-11 font-semibold rounded-xl">
|
||||
{issueCount}
|
||||
</span>
|
||||
</Tooltip>
|
||||
|
|
|
|||
|
|
@ -67,17 +67,16 @@ function ArchivedIssueDetailsPage({ params }: Route.ComponentProps) {
|
|||
icon={<ArchiveIcon className="size-4" />}
|
||||
action={
|
||||
<Button
|
||||
variant="neutral-primary"
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}/archives/issues/`)}
|
||||
>
|
||||
Go to archives
|
||||
</Button>
|
||||
}
|
||||
className="border-b border-custom-border-200"
|
||||
className="border-b border-subtle"
|
||||
/>
|
||||
<div className="flex h-full overflow-hidden">
|
||||
<div className="h-full w-full space-y-3 divide-y-2 divide-custom-border-200 overflow-y-auto">
|
||||
<div className="h-full w-full space-y-3 divide-y-2 divide-subtle-1 overflow-y-auto">
|
||||
<IssueDetailRoot
|
||||
workspaceSlug={workspaceSlug}
|
||||
projectId={projectId}
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ export const ProjectArchivedIssueDetailsHeader = observer(function ProjectArchiv
|
|||
<BreadcrumbLink
|
||||
href={`/${workspaceSlug}/projects/${projectId}/archives/issues`}
|
||||
label="Archives"
|
||||
icon={<ArchiveIcon className="h-4 w-4 text-custom-text-300" />}
|
||||
icon={<ArchiveIcon className="h-4 w-4 text-tertiary" />}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
|
@ -50,7 +50,7 @@ export const ProjectArchivedIssueDetailsHeader = observer(function ProjectArchiv
|
|||
<BreadcrumbLink
|
||||
href={`/${workspaceSlug}/projects/${projectId}/archives/issues`}
|
||||
label="Work items"
|
||||
icon={<WorkItemsIcon className="h-4 w-4 text-custom-text-300" />}
|
||||
icon={<WorkItemsIcon className="h-4 w-4 text-tertiary" />}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -66,12 +66,8 @@ function CycleDetailPage({ params }: Route.ComponentProps) {
|
|||
{!isSidebarCollapsed && (
|
||||
<div
|
||||
className={cn(
|
||||
"flex h-full w-[21.5rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-4 duration-300 vertical-scrollbar scrollbar-sm absolute right-0 z-[13]"
|
||||
"flex h-full w-[21.5rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-subtle bg-surface-1 px-4 duration-300 vertical-scrollbar scrollbar-sm absolute right-0 z-13 shadow-raised-200"
|
||||
)}
|
||||
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)",
|
||||
}}
|
||||
>
|
||||
<CycleDetailsSidebar
|
||||
handleClose={toggleSidebar}
|
||||
|
|
|
|||
|
|
@ -137,7 +137,7 @@ export const CycleIssuesHeader = observer(function CycleIssuesHeader() {
|
|||
<BreadcrumbLink
|
||||
label="Cycles"
|
||||
href={`/${workspaceSlug}/projects/${projectId}/cycles/`}
|
||||
icon={<CycleIcon className="h-4 w-4 text-custom-text-300" />}
|
||||
icon={<CycleIcon className="h-4 w-4 text-tertiary" />}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
|
@ -152,7 +152,7 @@ export const CycleIssuesHeader = observer(function CycleIssuesHeader() {
|
|||
title={cycleDetails?.name}
|
||||
icon={
|
||||
<Breadcrumbs.Icon>
|
||||
<CycleIcon className="size-4 flex-shrink-0 text-custom-text-300" />
|
||||
<CycleIcon className="size-4 flex-shrink-0 text-tertiary" />
|
||||
</Breadcrumbs.Icon>
|
||||
}
|
||||
isLast
|
||||
|
|
@ -169,7 +169,7 @@ export const CycleIssuesHeader = observer(function CycleIssuesHeader() {
|
|||
} in this cycle`}
|
||||
position="bottom"
|
||||
>
|
||||
<span className="flex flex-shrink-0 cursor-default items-center justify-center rounded-xl bg-custom-primary-100/20 px-2 text-center text-xs font-semibold text-custom-primary-100">
|
||||
<span className="flex flex-shrink-0 cursor-default items-center justify-center rounded-xl bg-accent-primary/20 px-2 text-center text-11 font-semibold text-accent-primary">
|
||||
{workItemsCount}
|
||||
</span>
|
||||
</Tooltip>
|
||||
|
|
@ -226,39 +226,36 @@ export const CycleIssuesHeader = observer(function CycleIssuesHeader() {
|
|||
|
||||
{canUserCreateIssue && (
|
||||
<>
|
||||
<Button onClick={() => setAnalyticsModal(true)} variant="neutral-primary" size="sm">
|
||||
<div className="hidden @4xl:flex">Analytics</div>
|
||||
<div className="flex @4xl:hidden">
|
||||
<Button onClick={() => setAnalyticsModal(true)} variant="secondary" size="lg">
|
||||
<span className="hidden @4xl:flex">Analytics</span>
|
||||
<span className="@4xl:hidden">
|
||||
<ChartNoAxesColumn className="size-3.5" />
|
||||
</div>
|
||||
</span>
|
||||
</Button>
|
||||
{!isCompletedCycle && (
|
||||
<Button
|
||||
className="h-full self-start"
|
||||
variant="primary"
|
||||
size="lg"
|
||||
className="self-start"
|
||||
onClick={() => {
|
||||
toggleCreateIssueModal(true, EIssuesStoreType.CYCLE);
|
||||
}}
|
||||
data-ph-element={WORK_ITEM_TRACKER_ELEMENTS.HEADER_ADD_BUTTON.CYCLE}
|
||||
size="sm"
|
||||
>
|
||||
{t("issue.add.label")}
|
||||
</Button>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
className="p-1.5 rounded outline-none hover:bg-custom-sidebar-background-80 bg-custom-background-80/70"
|
||||
onClick={toggleSidebar}
|
||||
>
|
||||
<PanelRight className={cn("h-4 w-4", !isSidebarCollapsed ? "text-[#3E63DD]" : "text-custom-text-200")} />
|
||||
</button>
|
||||
<Button variant="ghost" size="lg" onClick={toggleSidebar}>
|
||||
<PanelRight className={cn("h-4 w-4", !isSidebarCollapsed ? "text-accent-primary" : "text-secondary")} />
|
||||
</Button>
|
||||
<CycleQuickActions
|
||||
parentRef={parentRef}
|
||||
cycleId={cycleId}
|
||||
projectId={projectId}
|
||||
workspaceSlug={workspaceSlug}
|
||||
customClassName="flex-shrink-0 flex items-center justify-center size-[26px] bg-custom-background-80/70 rounded"
|
||||
customClassName="flex-shrink-0 flex items-center justify-center size-[26px] bg-layer-1/70 rounded-sm"
|
||||
/>
|
||||
</div>
|
||||
</Header.RightItem>
|
||||
|
|
|
|||
|
|
@ -90,15 +90,15 @@ export const CycleIssuesMobileHeader = observer(function CycleIssuesMobileHeader
|
|||
onClose={() => setAnalyticsModal(false)}
|
||||
cycleDetails={cycleDetails ?? undefined}
|
||||
/>
|
||||
<div className="flex justify-evenly py-2 border-b border-custom-border-200 md:hidden bg-custom-background-100">
|
||||
<div className="flex justify-evenly py-2 border-b border-subtle md:hidden bg-surface-1">
|
||||
<CustomMenu
|
||||
maxHeight={"md"}
|
||||
className="flex flex-grow justify-center text-custom-text-200 text-sm"
|
||||
className="flex flex-grow justify-center text-secondary text-13"
|
||||
placement="bottom-start"
|
||||
customButton={
|
||||
<span className="flex flex-grow justify-center text-custom-text-200 text-sm">{t("common.layout")}</span>
|
||||
<span className="flex flex-grow justify-center text-secondary text-13">{t("common.layout")}</span>
|
||||
}
|
||||
customButtonClassName="flex flex-grow justify-center text-custom-text-200 text-sm"
|
||||
customButtonClassName="flex flex-grow justify-center text-secondary text-13"
|
||||
closeOnSelect
|
||||
>
|
||||
{SUPPORTED_LAYOUTS.map((layout, index) => (
|
||||
|
|
@ -110,18 +110,18 @@ export const CycleIssuesMobileHeader = observer(function CycleIssuesMobileHeader
|
|||
className="flex items-center gap-2"
|
||||
>
|
||||
<IssueLayoutIcon layout={ISSUE_LAYOUTS[index].key} className="w-3 h-3" />
|
||||
<div className="text-custom-text-300">{t(layout.titleTranslationKey)}</div>
|
||||
<div className="text-tertiary">{t(layout.titleTranslationKey)}</div>
|
||||
</CustomMenu.MenuItem>
|
||||
))}
|
||||
</CustomMenu>
|
||||
<div className="flex flex-grow justify-center border-l border-custom-border-200 items-center text-custom-text-200 text-sm">
|
||||
<div className="flex flex-grow justify-center border-l border-subtle items-center text-secondary text-13">
|
||||
<FiltersDropdown
|
||||
title={t("common.display")}
|
||||
placement="bottom-end"
|
||||
menuButton={
|
||||
<span className="flex items-center text-custom-text-200 text-sm">
|
||||
<span className="flex items-center text-secondary text-13">
|
||||
{t("common.display")}
|
||||
<ChevronDownIcon className="text-custom-text-200 h-4 w-4 ml-2" />
|
||||
<ChevronDownIcon className="text-secondary h-4 w-4 ml-2" />
|
||||
</span>
|
||||
}
|
||||
>
|
||||
|
|
@ -142,7 +142,7 @@ export const CycleIssuesMobileHeader = observer(function CycleIssuesMobileHeader
|
|||
|
||||
<span
|
||||
onClick={() => setAnalyticsModal(true)}
|
||||
className="flex flex-grow justify-center text-custom-text-200 text-sm border-l border-custom-border-200"
|
||||
className="flex flex-grow justify-center text-secondary text-13 border-l border-subtle"
|
||||
>
|
||||
{t("common.analytics")}
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ export const CyclesListHeader = observer(function CyclesListHeader() {
|
|||
<BreadcrumbLink
|
||||
label="Cycles"
|
||||
href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/cycles/`}
|
||||
icon={<CycleIcon className="h-4 w-4 text-custom-text-300" />}
|
||||
icon={<CycleIcon className="h-4 w-4 text-tertiary" />}
|
||||
isLast
|
||||
/>
|
||||
}
|
||||
|
|
@ -56,7 +56,7 @@ export const CyclesListHeader = observer(function CyclesListHeader() {
|
|||
<CyclesViewHeader projectId={currentProjectDetails.id} />
|
||||
<Button
|
||||
variant="primary"
|
||||
size="sm"
|
||||
size="lg"
|
||||
data-ph-element={CYCLE_TRACKER_ELEMENTS.RIGHT_HEADER_ADD_BUTTON}
|
||||
onClick={() => {
|
||||
toggleCreateCycleModal(true);
|
||||
|
|
|
|||
|
|
@ -40,15 +40,15 @@ export const CyclesListMobileHeader = observer(function CyclesListMobileHeader()
|
|||
<div className="flex justify-center sm:hidden">
|
||||
<CustomMenu
|
||||
maxHeight={"md"}
|
||||
className="flex flex-grow justify-center text-custom-text-200 text-sm py-2 border-b border-custom-border-200 bg-custom-sidebar-background-100"
|
||||
className="flex flex-grow justify-center text-secondary text-13 py-2 border-b border-subtle bg-surface-1"
|
||||
// placement="bottom-start"
|
||||
customButton={
|
||||
<span className="flex items-center gap-2">
|
||||
<ListLayoutIcon className="h-4 w-4" />
|
||||
<span className="flex flex-grow justify-center text-custom-text-200 text-sm">Layout</span>
|
||||
<span className="flex flex-grow justify-center text-secondary text-13">Layout</span>
|
||||
</span>
|
||||
}
|
||||
customButtonClassName="flex flex-grow justify-center items-center text-custom-text-200 text-sm"
|
||||
customButtonClassName="flex flex-grow justify-center items-center text-secondary text-13"
|
||||
closeOnSelect
|
||||
>
|
||||
{CYCLE_VIEW_LAYOUTS.map((layout) => {
|
||||
|
|
@ -64,7 +64,7 @@ export const CyclesListMobileHeader = observer(function CyclesListMobileHeader()
|
|||
className="flex items-center gap-2"
|
||||
>
|
||||
<layout.icon className="w-3 h-3" />
|
||||
<div className="text-custom-text-300">{layout.title}</div>
|
||||
<div className="text-tertiary">{layout.title}</div>
|
||||
</CustomMenu.MenuItem>
|
||||
);
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -62,19 +62,19 @@ export const ProjectIssuesMobileHeader = observer(function ProjectIssuesMobileHe
|
|||
onClose={() => setAnalyticsModal(false)}
|
||||
projectDetails={currentProjectDetails ?? undefined}
|
||||
/>
|
||||
<div className="md:hidden flex justify-evenly border-b border-custom-border-200 py-2 z-[13] bg-custom-background-100">
|
||||
<div className="md:hidden flex justify-evenly border-b border-subtle py-2 z-[13] bg-surface-1">
|
||||
<MobileLayoutSelection
|
||||
layouts={[EIssueLayoutTypes.LIST, EIssueLayoutTypes.KANBAN, EIssueLayoutTypes.CALENDAR]}
|
||||
onChange={handleLayoutChange}
|
||||
/>
|
||||
<div className="flex flex-grow items-center justify-center border-l border-custom-border-200 text-sm text-custom-text-200">
|
||||
<div className="flex flex-grow items-center justify-center border-l border-subtle text-13 text-secondary">
|
||||
<FiltersDropdown
|
||||
title={t("common.display")}
|
||||
placement="bottom-end"
|
||||
menuButton={
|
||||
<span className="flex items-center text-sm text-custom-text-200">
|
||||
<span className="flex items-center text-13 text-secondary">
|
||||
{t("common.display")}
|
||||
<ChevronDownIcon className="ml-2 h-4 w-4 text-custom-text-200" />
|
||||
<ChevronDownIcon className="ml-2 h-4 w-4 text-secondary" />
|
||||
</span>
|
||||
}
|
||||
>
|
||||
|
|
@ -94,7 +94,7 @@ export const ProjectIssuesMobileHeader = observer(function ProjectIssuesMobileHe
|
|||
|
||||
<button
|
||||
onClick={() => setAnalyticsModal(true)}
|
||||
className="flex flex-grow justify-center border-l border-custom-border-200 text-sm text-custom-text-200"
|
||||
className="flex flex-grow justify-center border-l border-subtle text-13 text-secondary"
|
||||
>
|
||||
{t("common.analytics")}
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -25,8 +25,8 @@ function ProjectLayout({ params }: Route.ComponentProps) {
|
|||
<>
|
||||
{projectPreferences.navigationMode === "horizontal" && (
|
||||
<div className="z-20">
|
||||
<Row className="h-header flex gap-2 w-full items-center border-b border-custom-border-200 bg-custom-sidebar-background-100">
|
||||
<div className="flex items-center gap-2 divide-x divide-custom-border-100 h-full w-full">
|
||||
<Row className="h-header flex gap-2 w-full items-center border-b border-subtle bg-surface-1">
|
||||
<div className="flex items-center gap-2 divide-x divide-subtle h-full w-full">
|
||||
<div className="flex items-center gap-2 size-full flex-1">
|
||||
{sidebarCollapsed && (
|
||||
<div className="shrink-0">
|
||||
|
|
|
|||
|
|
@ -62,12 +62,8 @@ function ModuleIssuesPage({ params }: Route.ComponentProps) {
|
|||
{!isSidebarCollapsed && (
|
||||
<div
|
||||
className={cn(
|
||||
"flex h-full 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 vertical-scrollbar scrollbar-sm absolute right-0 z-[13]"
|
||||
"flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-subtle bg-surface-1 px-6 duration-300 vertical-scrollbar scrollbar-sm absolute right-0 z-13 shadow-raised-200"
|
||||
)}
|
||||
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)",
|
||||
}}
|
||||
>
|
||||
<ModuleAnalyticsSidebar moduleId={moduleId} handleClose={toggleSidebar} />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -134,7 +134,7 @@ export const ModuleIssuesHeader = observer(function ModuleIssuesHeader() {
|
|||
<BreadcrumbLink
|
||||
label="Modules"
|
||||
href={`/${workspaceSlug}/projects/${projectId}/modules/`}
|
||||
icon={<ModuleIcon className="h-4 w-4 text-custom-text-300" />}
|
||||
icon={<ModuleIcon className="h-4 w-4 text-tertiary" />}
|
||||
isLast
|
||||
/>
|
||||
}
|
||||
|
|
@ -149,7 +149,7 @@ export const ModuleIssuesHeader = observer(function ModuleIssuesHeader() {
|
|||
router.push(`/${workspaceSlug}/projects/${projectId}/modules/${value}`);
|
||||
}}
|
||||
title={moduleDetails?.name}
|
||||
icon={<ModuleIcon className="size-3.5 flex-shrink-0 text-custom-text-300" />}
|
||||
icon={<ModuleIcon className="size-3.5 flex-shrink-0 text-tertiary" />}
|
||||
isLast
|
||||
/>
|
||||
}
|
||||
|
|
@ -163,7 +163,7 @@ export const ModuleIssuesHeader = observer(function ModuleIssuesHeader() {
|
|||
} in this module`}
|
||||
position="bottom"
|
||||
>
|
||||
<span className="flex flex-shrink-0 cursor-default items-center justify-center rounded-xl bg-custom-primary-100/20 px-2 text-center text-xs font-semibold text-custom-primary-100">
|
||||
<span className="flex flex-shrink-0 cursor-default items-center justify-center rounded-xl bg-accent-primary/20 px-2 text-center text-11 font-semibold text-accent-primary">
|
||||
{workItemsCount}
|
||||
</span>
|
||||
</Tooltip>
|
||||
|
|
@ -221,24 +221,20 @@ export const ModuleIssuesHeader = observer(function ModuleIssuesHeader() {
|
|||
|
||||
{canUserCreateIssue ? (
|
||||
<>
|
||||
<Button
|
||||
className="hidden md:block"
|
||||
onClick={() => setAnalyticsModal(true)}
|
||||
variant="neutral-primary"
|
||||
size="sm"
|
||||
>
|
||||
<div className="hidden @4xl:flex">Analytics</div>
|
||||
<div className="flex @4xl:hidden">
|
||||
<Button className="hidden md:block" onClick={() => setAnalyticsModal(true)} variant="secondary" size="lg">
|
||||
<span className="hidden @4xl:flex">Analytics</span>
|
||||
<span className="@4xl:hidden">
|
||||
<ChartNoAxesColumn className="size-3.5" />
|
||||
</div>
|
||||
</span>
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
size="lg"
|
||||
className="hidden sm:flex"
|
||||
onClick={() => {
|
||||
toggleCreateIssueModal(true, EIssuesStoreType.MODULE);
|
||||
}}
|
||||
data-ph-element={WORK_ITEM_TRACKER_ELEMENTS.HEADER_ADD_BUTTON.MODULE}
|
||||
size="sm"
|
||||
>
|
||||
Add work item
|
||||
</Button>
|
||||
|
|
@ -246,20 +242,16 @@ export const ModuleIssuesHeader = observer(function ModuleIssuesHeader() {
|
|||
) : (
|
||||
<></>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
className="p-1.5 rounded outline-none hover:bg-custom-sidebar-background-80 bg-custom-background-80/70"
|
||||
onClick={toggleSidebar}
|
||||
>
|
||||
<PanelRight className={cn("h-4 w-4", !isSidebarCollapsed ? "text-[#3E63DD]" : "text-custom-text-200")} />
|
||||
</button>
|
||||
<Button variant="ghost" size="lg" onClick={toggleSidebar}>
|
||||
<PanelRight className={cn("h-4 w-4", !isSidebarCollapsed ? "text-accent-primary" : "text-secondary")} />
|
||||
</Button>
|
||||
{moduleId && (
|
||||
<ModuleQuickActions
|
||||
parentRef={parentRef}
|
||||
moduleId={moduleId}
|
||||
projectId={projectId.toString()}
|
||||
workspaceSlug={workspaceSlug.toString()}
|
||||
customClassName="flex-shrink-0 flex items-center justify-center bg-custom-background-80/70 rounded size-[26px]"
|
||||
customClassName="flex-shrink-0 flex items-center justify-center bg-layer-1/70 rounded-sm size-[26px]"
|
||||
/>
|
||||
)}
|
||||
</Header.RightItem>
|
||||
|
|
|
|||
|
|
@ -72,13 +72,13 @@ export const ModuleIssuesMobileHeader = observer(function ModuleIssuesMobileHead
|
|||
moduleDetails={moduleDetails ?? undefined}
|
||||
projectDetails={currentProjectDetails}
|
||||
/>
|
||||
<div className="flex justify-evenly border-b border-custom-border-200 bg-custom-background-100 py-2">
|
||||
<div className="flex justify-evenly border-b border-subtle bg-surface-1 py-2">
|
||||
<CustomMenu
|
||||
maxHeight={"md"}
|
||||
className="flex flex-grow justify-center text-sm text-custom-text-200"
|
||||
className="flex flex-grow justify-center text-13 text-secondary"
|
||||
placement="bottom-start"
|
||||
customButton={<span className="flex flex-grow justify-center text-sm text-custom-text-200">Layout</span>}
|
||||
customButtonClassName="flex flex-grow justify-center text-custom-text-200 text-sm"
|
||||
customButton={<span className="flex flex-grow justify-center text-13 text-secondary">Layout</span>}
|
||||
customButtonClassName="flex flex-grow justify-center text-secondary text-13"
|
||||
closeOnSelect
|
||||
>
|
||||
{SUPPORTED_LAYOUTS.map((layout, index) => (
|
||||
|
|
@ -90,18 +90,18 @@ export const ModuleIssuesMobileHeader = observer(function ModuleIssuesMobileHead
|
|||
className="flex items-center gap-2"
|
||||
>
|
||||
<IssueLayoutIcon layout={ISSUE_LAYOUTS[index].key} className="h-3 w-3" />
|
||||
<div className="text-custom-text-300">{t(layout.i18n_title)}</div>
|
||||
<div className="text-tertiary">{t(layout.i18n_title)}</div>
|
||||
</CustomMenu.MenuItem>
|
||||
))}
|
||||
</CustomMenu>
|
||||
<div className="flex flex-grow items-center justify-center border-l border-custom-border-200 text-sm text-custom-text-200">
|
||||
<div className="flex flex-grow items-center justify-center border-l border-subtle text-13 text-secondary">
|
||||
<FiltersDropdown
|
||||
title="Display"
|
||||
placement="bottom-end"
|
||||
menuButton={
|
||||
<span className="flex items-center text-sm text-custom-text-200">
|
||||
<span className="flex items-center text-13 text-secondary">
|
||||
Display
|
||||
<ChevronDownIcon className="ml-2 h-4 w-4 text-custom-text-200" />
|
||||
<ChevronDownIcon className="ml-2 h-4 w-4 text-secondary" />
|
||||
</span>
|
||||
}
|
||||
>
|
||||
|
|
@ -122,7 +122,7 @@ export const ModuleIssuesMobileHeader = observer(function ModuleIssuesMobileHead
|
|||
|
||||
<button
|
||||
onClick={() => setAnalyticsModal(true)}
|
||||
className="flex flex-grow justify-center border-l border-custom-border-200 text-sm text-custom-text-200"
|
||||
className="flex flex-grow justify-center border-l border-subtle text-13 text-secondary"
|
||||
>
|
||||
Analytics
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ export const ModulesListHeader = observer(function ModulesListHeader() {
|
|||
<BreadcrumbLink
|
||||
label="Modules"
|
||||
href={`/${workspaceSlug}/projects/${projectId}/modules/`}
|
||||
icon={<ModuleIcon className="h-4 w-4 text-custom-text-300" />}
|
||||
icon={<ModuleIcon className="h-4 w-4 text-tertiary" />}
|
||||
isLast
|
||||
/>
|
||||
}
|
||||
|
|
@ -61,11 +61,11 @@ export const ModulesListHeader = observer(function ModulesListHeader() {
|
|||
{canUserCreateModule ? (
|
||||
<Button
|
||||
variant="primary"
|
||||
size="sm"
|
||||
data-ph-element={MODULE_TRACKER_ELEMENTS.RIGHT_HEADER_ADD_BUTTON}
|
||||
onClick={() => {
|
||||
toggleCreateModuleModal(true);
|
||||
}}
|
||||
size="lg"
|
||||
>
|
||||
<div className="sm:hidden block">{t("add")}</div>
|
||||
<div className="hidden sm:block">{t("project_module.add_module")}</div>
|
||||
|
|
|
|||
|
|
@ -16,14 +16,14 @@ export const ModulesListMobileHeader = observer(function ModulesListMobileHeader
|
|||
<div className="flex justify-start md:hidden">
|
||||
<CustomMenu
|
||||
maxHeight={"md"}
|
||||
className="flex flex-grow justify-start text-custom-text-200 text-sm py-2 border-b border-custom-border-200 bg-custom-sidebar-background-100"
|
||||
className="flex flex-grow justify-start text-secondary text-13 py-2 border-b border-subtle bg-surface-1"
|
||||
// placement="bottom-start"
|
||||
customButton={
|
||||
<Row className="flex flex-grow justify-center text-custom-text-200 text-sm gap-2">
|
||||
<span>Layout</span> <ChevronDownIcon className="h-4 w-4 text-custom-text-200 my-auto" strokeWidth={1} />
|
||||
<Row className="flex flex-grow justify-center text-secondary text-13 gap-2">
|
||||
<span>Layout</span> <ChevronDownIcon className="h-4 w-4 text-secondary my-auto" strokeWidth={1} />
|
||||
</Row>
|
||||
}
|
||||
customButtonClassName="flex flex-grow justify-center items-center text-custom-text-200 text-sm"
|
||||
customButtonClassName="flex flex-grow justify-center items-center text-secondary text-13"
|
||||
closeOnSelect
|
||||
>
|
||||
{MODULE_VIEW_LAYOUTS.map((layout) => {
|
||||
|
|
@ -37,7 +37,7 @@ export const ModulesListMobileHeader = observer(function ModulesListMobileHeader
|
|||
className="flex items-center gap-2"
|
||||
>
|
||||
<ModuleLayoutIcon layoutType={layout.key} />
|
||||
<div className="text-custom-text-300">{t(layout.i18n_title)}</div>
|
||||
<div className="text-tertiary">{t(layout.i18n_title)}</div>
|
||||
</CustomMenu.MenuItem>
|
||||
);
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -155,13 +155,13 @@ function PageDetailsPage({ params }: Route.ComponentProps) {
|
|||
if (pageDetailsError || !canCurrentUserAccessPage)
|
||||
return (
|
||||
<div className="h-full w-full flex flex-col items-center justify-center">
|
||||
<h3 className="text-lg font-semibold text-center">Page not found</h3>
|
||||
<p className="text-sm text-custom-text-200 text-center mt-3">
|
||||
<h3 className="text-16 font-semibold text-center">Page not found</h3>
|
||||
<p className="text-13 text-secondary text-center mt-3">
|
||||
The page you are trying to access doesn{"'"}t exist or you don{"'"}t have permission to view it.
|
||||
</p>
|
||||
<Link
|
||||
href={`/${workspaceSlug}/projects/${projectId}/pages`}
|
||||
className={cn(getButtonStyling("neutral-primary", "md"), "mt-5")}
|
||||
className={cn(getButtonStyling("secondary", "base"), "mt-5")}
|
||||
>
|
||||
View other Pages
|
||||
</Link>
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@ export const PageDetailsHeader = observer(function PageDetailsHeader() {
|
|||
<BreadcrumbLink
|
||||
label="Pages"
|
||||
href={`/${workspaceSlug}/projects/${projectId}/pages/`}
|
||||
icon={<PageIcon className="h-4 w-4 text-custom-text-300" />}
|
||||
icon={<PageIcon className="h-4 w-4 text-tertiary" />}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -76,7 +76,7 @@ export const PagesListHeader = observer(function PagesListHeader() {
|
|||
<BreadcrumbLink
|
||||
label="Pages"
|
||||
href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/pages/`}
|
||||
icon={<PageIcon className="h-4 w-4 text-custom-text-300" />}
|
||||
icon={<PageIcon className="h-4 w-4 text-tertiary" />}
|
||||
isLast
|
||||
/>
|
||||
}
|
||||
|
|
@ -84,11 +84,11 @@ export const PagesListHeader = observer(function PagesListHeader() {
|
|||
/>
|
||||
</Breadcrumbs>
|
||||
</Header.LeftItem>
|
||||
{canCurrentUserCreatePage ? (
|
||||
{canCurrentUserCreatePage && (
|
||||
<Header.RightItem>
|
||||
<Button
|
||||
variant="primary"
|
||||
size="sm"
|
||||
size="lg"
|
||||
onClick={handleCreatePage}
|
||||
loading={isCreatingPage}
|
||||
data-ph-element={PROJECT_TRACKER_ELEMENTS.CREATE_HEADER_BUTTON}
|
||||
|
|
@ -96,8 +96,6 @@ export const PagesListHeader = observer(function PagesListHeader() {
|
|||
{isCreatingPage ? "Adding" : "Add page"}
|
||||
</Button>
|
||||
</Header.RightItem>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</Header>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -124,7 +124,7 @@ export const ProjectViewIssuesHeader = observer(function ProjectViewIssuesHeader
|
|||
<BreadcrumbLink
|
||||
label="Views"
|
||||
href={`/${workspaceSlug}/projects/${projectId}/views/`}
|
||||
icon={<ViewsIcon className="h-4 w-4 text-custom-text-300" />}
|
||||
icon={<ViewsIcon className="h-4 w-4 text-tertiary" />}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
|
@ -149,7 +149,7 @@ export const ProjectViewIssuesHeader = observer(function ProjectViewIssuesHeader
|
|||
</Breadcrumbs>
|
||||
|
||||
{viewDetails?.access === EViewAccess.PRIVATE ? (
|
||||
<div className="cursor-default text-custom-text-300">
|
||||
<div className="cursor-default text-tertiary">
|
||||
<Tooltip tooltipContent={"Private"}>
|
||||
<Lock className="h-4 w-4" />
|
||||
</Tooltip>
|
||||
|
|
@ -190,23 +190,22 @@ export const ProjectViewIssuesHeader = observer(function ProjectViewIssuesHeader
|
|||
</FiltersDropdown>
|
||||
)}
|
||||
</>
|
||||
{canUserCreateIssue ? (
|
||||
{canUserCreateIssue && (
|
||||
<Button
|
||||
variant="primary"
|
||||
size="lg"
|
||||
onClick={() => {
|
||||
toggleCreateIssueModal(true, EIssuesStoreType.PROJECT_VIEW);
|
||||
}}
|
||||
data-ph-element={WORK_ITEM_TRACKER_ELEMENTS.HEADER_ADD_BUTTON.PROJECT_VIEW}
|
||||
size="sm"
|
||||
>
|
||||
Add work item
|
||||
</Button>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
<div className="hidden md:block">
|
||||
<ViewQuickActions
|
||||
parentRef={parentRef}
|
||||
customClassName="flex-shrink-0 flex items-center justify-center size-[26px] bg-custom-background-80/70 rounded"
|
||||
customClassName="flex-shrink-0 flex items-center justify-center size-[26px] bg-layer-1/70 rounded-sm"
|
||||
projectId={projectId.toString()}
|
||||
view={viewDetails}
|
||||
workspaceSlug={workspaceSlug.toString()}
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ export const ProjectViewsHeader = observer(function ProjectViewsHeader() {
|
|||
<BreadcrumbLink
|
||||
label="Views"
|
||||
href={`/${workspaceSlug}/projects/${projectId}/views/`}
|
||||
icon={<ViewsIcon className="h-4 w-4 text-custom-text-300" />}
|
||||
icon={<ViewsIcon className="h-4 w-4 text-tertiary" />}
|
||||
isLast
|
||||
/>
|
||||
}
|
||||
|
|
@ -45,7 +45,7 @@ export const ProjectViewsHeader = observer(function ProjectViewsHeader() {
|
|||
<Button
|
||||
data-ph-element={PROJECT_VIEW_TRACKER_ELEMENTS.RIGHT_HEADER_ADD_BUTTON}
|
||||
variant="primary"
|
||||
size="sm"
|
||||
size="lg"
|
||||
onClick={() => toggleCreateViewModal(true)}
|
||||
>
|
||||
Add view
|
||||
|
|
|
|||
|
|
@ -20,8 +20,8 @@ export const ViewMobileHeader = observer(function ViewMobileHeader() {
|
|||
|
||||
return (
|
||||
<>
|
||||
<div className="md:hidden flex justify-evenly border-b border-custom-border-200 py-2 z-[13] bg-custom-background-100">
|
||||
<Row className="flex flex-grow items-center justify-center border-l border-custom-border-200 text-sm text-custom-text-200">
|
||||
<div className="md:hidden flex justify-evenly border-b border-subtle py-2 z-[13] bg-surface-1">
|
||||
<Row className="flex flex-grow items-center justify-center border-l border-subtle text-13 text-secondary">
|
||||
<ViewOrderByDropdown
|
||||
sortBy={filters.sortBy}
|
||||
sortKey={filters.sortKey}
|
||||
|
|
@ -32,16 +32,16 @@ export const ViewMobileHeader = observer(function ViewMobileHeader() {
|
|||
isMobile
|
||||
/>
|
||||
</Row>
|
||||
<div className="flex flex-grow items-center justify-center border-l border-custom-border-200 text-sm text-custom-text-200">
|
||||
<div className="flex flex-grow items-center justify-center border-l border-subtle text-13 text-secondary">
|
||||
<FiltersDropdown
|
||||
icon={<ListFilter className="h-3 w-3" />}
|
||||
title="Filters"
|
||||
placement="bottom-end"
|
||||
isFiltersApplied={false}
|
||||
menuButton={
|
||||
<Row className="flex items-center text-sm text-custom-text-200">
|
||||
<Row className="flex items-center text-13 text-secondary">
|
||||
Filters
|
||||
<ChevronDownIcon className="ml-2 h-4 w-4 text-custom-text-200" strokeWidth={2} />
|
||||
<ChevronDownIcon className="ml-2 h-4 w-4 text-secondary" strokeWidth={2} />
|
||||
</Row>
|
||||
}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -29,13 +29,13 @@ export function StarUsOnGitHubLink() {
|
|||
},
|
||||
})
|
||||
}
|
||||
className="flex flex-shrink-0 items-center gap-1.5 rounded bg-custom-background-80 px-3 py-1.5"
|
||||
className="flex flex-shrink-0 items-center gap-1.5 rounded-sm bg-layer-1 px-3 py-1.5"
|
||||
href="https://github.com/makeplane/plane"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<img src={imageSrc} className="h-4 w-4 object-contain" alt="GitHub Logo" aria-hidden="true" />
|
||||
<span className="hidden text-xs font-medium sm:hidden md:block">{t("home.star_us_on_github")}</span>
|
||||
<span className="hidden text-11 font-medium sm:hidden md:block">{t("home.star_us_on_github")}</span>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ export const WorkspaceStickyHeader = observer(function WorkspaceStickyHeader() {
|
|||
component={
|
||||
<BreadcrumbLink
|
||||
label={`Stickies`}
|
||||
icon={<RecentStickyIcon className="size-5 rotate-90 text-custom-text-200" />}
|
||||
icon={<RecentStickyIcon className="size-5 rotate-90 text-secondary" />}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
|
@ -39,8 +39,7 @@ export const WorkspaceStickyHeader = observer(function WorkspaceStickyHeader() {
|
|||
<StickySearch />
|
||||
<Button
|
||||
variant="primary"
|
||||
size="sm"
|
||||
className="items-center gap-1"
|
||||
size="lg"
|
||||
onClick={() => {
|
||||
toggleShowNewSticky(true);
|
||||
stickyOperations.create();
|
||||
|
|
|
|||
|
|
@ -120,9 +120,7 @@ export const GlobalIssuesHeader = observer(function GlobalIssuesHeader() {
|
|||
<Header.LeftItem>
|
||||
<Breadcrumbs>
|
||||
<Breadcrumbs.Item
|
||||
component={
|
||||
<BreadcrumbLink label={t("views")} icon={<ViewsIcon className="h-4 w-4 text-custom-text-300" />} />
|
||||
}
|
||||
component={<BreadcrumbLink label={t("views")} icon={<ViewsIcon className="h-4 w-4 text-tertiary" />} />}
|
||||
/>
|
||||
<Breadcrumbs.Item
|
||||
component={
|
||||
|
|
@ -135,7 +133,7 @@ export const GlobalIssuesHeader = observer(function GlobalIssuesHeader() {
|
|||
title={viewDetails?.name ?? t(defaultViewDetails?.i18n_label ?? "")}
|
||||
icon={
|
||||
<Breadcrumbs.Icon>
|
||||
<ViewsIcon className="size-4 flex-shrink-0 text-custom-text-300" />
|
||||
<ViewsIcon className="size-4 flex-shrink-0 text-tertiary" />
|
||||
</Breadcrumbs.Icon>
|
||||
}
|
||||
isLast
|
||||
|
|
@ -166,10 +164,9 @@ export const GlobalIssuesHeader = observer(function GlobalIssuesHeader() {
|
|||
/>
|
||||
</FiltersDropdown>
|
||||
)}
|
||||
|
||||
<Button
|
||||
variant="primary"
|
||||
size="sm"
|
||||
size="lg"
|
||||
data-ph-element={GLOBAL_VIEW_TRACKER_ELEMENTS.RIGHT_HEADER_ADD_BUTTON}
|
||||
onClick={() => setCreateViewModal(true)}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -24,10 +24,10 @@ function WorkspaceViewsPage() {
|
|||
<>
|
||||
<PageHead title={pageTitle} />
|
||||
<div className="flex flex-col h-full w-full overflow-hidden">
|
||||
<div className="flex h-11 w-full items-center gap-2.5 px-5 py-3 overflow-hidden border-b border-custom-border-200">
|
||||
<Search className="text-custom-text-200" size={14} strokeWidth={2} />
|
||||
<div className="flex h-11 w-full items-center gap-2.5 px-5 py-3 overflow-hidden border-b border-subtle">
|
||||
<Search className="text-secondary" size={14} strokeWidth={2} />
|
||||
<Input
|
||||
className="w-full bg-transparent !p-0 text-xs leading-5 text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
|
||||
className="w-full bg-transparent !p-0 text-11 leading-5 text-secondary placeholder:text-placeholder focus:outline-none"
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
placeholder="Search"
|
||||
|
|
|
|||
|
|
@ -8,13 +8,13 @@ export default function SettingsLayout() {
|
|||
return (
|
||||
<>
|
||||
<ProjectsAppPowerKProvider />
|
||||
<div className="relative flex h-full w-full overflow-hidden rounded-lg border border-custom-border-200">
|
||||
<main className="relative flex h-full w-full flex-col overflow-hidden bg-custom-background-100">
|
||||
<div className="relative flex size-full overflow-hidden rounded-lg border border-subtle">
|
||||
<main className="relative flex size-full flex-col overflow-hidden">
|
||||
{/* Header */}
|
||||
<SettingsHeader />
|
||||
{/* Content */}
|
||||
<ContentWrapper className="p-page-x md:flex w-full">
|
||||
<div className="w-full h-full overflow-hidden">
|
||||
<ContentWrapper className="p-page-x md:flex w-full bg-surface-1">
|
||||
<div className="size-full overflow-hidden">
|
||||
<Outlet />
|
||||
</div>
|
||||
</ContentWrapper>
|
||||
|
|
|
|||
|
|
@ -128,17 +128,17 @@ const WorkspaceMembersSettingsPage = observer(function WorkspaceMembersSettingsP
|
|||
})}
|
||||
>
|
||||
<div className="flex justify-between gap-4 pb-3.5 items-start">
|
||||
<h4 className="flex items-center gap-2.5 text-xl font-medium">
|
||||
<h4 className="flex items-center gap-2.5 text-h5-medium">
|
||||
{t("workspace_settings.settings.members.title")}
|
||||
{workspaceMemberIds && workspaceMemberIds.length > 0 && (
|
||||
<CountChip count={workspaceMemberIds.length} className="h-5 m-auto" />
|
||||
)}
|
||||
</h4>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center gap-1.5 rounded-md border border-custom-border-200 bg-custom-background-100 px-2.5 py-1.5">
|
||||
<Search className="h-3.5 w-3.5 text-custom-text-400" />
|
||||
<div className="flex items-center gap-1.5 rounded-md border border-subtle bg-surface-1 px-2.5 py-1.5">
|
||||
<Search className="h-3.5 w-3.5 text-placeholder" />
|
||||
<input
|
||||
className="w-full max-w-[234px] border-none bg-transparent text-sm outline-none placeholder:text-custom-text-400"
|
||||
className="w-full max-w-[234px] border-none bg-transparent text-body-xs-regular outline-none placeholder:text-placeholder"
|
||||
placeholder={`${t("search")}...`}
|
||||
value={searchQuery}
|
||||
// eslint-disable-next-line jsx-a11y/no-autofocus
|
||||
|
|
@ -155,7 +155,7 @@ const WorkspaceMembersSettingsPage = observer(function WorkspaceMembersSettingsP
|
|||
{canPerformWorkspaceAdminActions && (
|
||||
<Button
|
||||
variant="primary"
|
||||
size="sm"
|
||||
size="lg"
|
||||
onClick={() => setInviteModal(true)}
|
||||
data-ph-element={MEMBER_TRACKER_ELEMENTS.HEADER_ADD_BUTTON}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ export const MobileWorkspaceSettingsTabs = observer(function MobileWorkspaceSett
|
|||
const { allowPermissions } = useUserPermissions();
|
||||
|
||||
return (
|
||||
<div className="flex-shrink-0 md:hidden sticky inset-0 flex overflow-x-auto bg-custom-background-100 z-10">
|
||||
<div className="flex-shrink-0 md:hidden sticky inset-0 flex overflow-x-auto bg-surface-1 z-10">
|
||||
{WORKSPACE_SETTINGS_LINKS.map(
|
||||
(item, index) =>
|
||||
shouldRenderSettingLink(workspaceSlug.toString(), item.key) &&
|
||||
|
|
@ -25,8 +25,8 @@ export const MobileWorkspaceSettingsTabs = observer(function MobileWorkspaceSett
|
|||
<div
|
||||
className={`${
|
||||
item.highlight(pathname, `/${workspaceSlug}`)
|
||||
? "text-custom-primary-100 text-sm py-2 px-3 whitespace-nowrap flex flex-grow cursor-pointer justify-around border-b border-custom-primary-200"
|
||||
: "text-custom-text-200 flex flex-grow cursor-pointer justify-around border-b border-custom-border-200 text-sm py-2 px-3 whitespace-nowrap"
|
||||
? "text-accent-primary text-13 py-2 px-3 whitespace-nowrap flex flex-grow cursor-pointer justify-around border-b border-accent-strong-200"
|
||||
: "text-secondary flex flex-grow cursor-pointer justify-around border-b border-subtle text-13 py-2 px-3 whitespace-nowrap"
|
||||
}`}
|
||||
key={index}
|
||||
onClick={() => router.push(`/${workspaceSlug}${item.href}`)}
|
||||
|
|
|
|||
|
|
@ -87,7 +87,7 @@ function WebhookDetailsPage({ params }: Route.ComponentProps) {
|
|||
<>
|
||||
<PageHead title={pageTitle} />
|
||||
<div className="mt-10 flex h-full w-full justify-center p-4">
|
||||
<p className="text-sm text-custom-text-300">You are not authorized to access this page.</p>
|
||||
<p className="text-13 text-tertiary">You are not authorized to access this page.</p>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ import { DetailedEmptyState } from "@/components/empty-state/detailed-empty-stat
|
|||
import { ProfileActivityListPage } from "@/components/profile/activity/profile-activity-list";
|
||||
// hooks
|
||||
import { SettingsHeading } from "@/components/settings/heading";
|
||||
import { ChevronDown } from "lucide-react";
|
||||
|
||||
const PER_PAGE = 100;
|
||||
|
||||
|
|
@ -63,8 +64,8 @@ function ProfileActivityPage() {
|
|||
title={""}
|
||||
description={""}
|
||||
assetPath={resolvedPath}
|
||||
className="w-full !p-0 justify-center mx-auto min-h-fit"
|
||||
size="md"
|
||||
className="w-full p-0! justify-center mx-auto min-h-fit"
|
||||
size="base"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -79,8 +80,8 @@ function ProfileActivityPage() {
|
|||
/>
|
||||
<div className="w-full">{activityPages}</div>
|
||||
{isLoadMoreVisible && (
|
||||
<div className="flex w-full items-center justify-center text-xs">
|
||||
<Button variant="accent-primary" size="sm" onClick={handleLoadMore}>
|
||||
<div className="flex w-full items-center justify-center mt-4">
|
||||
<Button variant="ghost" onClick={handleLoadMore} appendIcon={<ChevronDown />}>
|
||||
{t("load_more")}
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -127,7 +127,7 @@ function SecurityPage() {
|
|||
<div className="flex flex-col gap-10 w-full">
|
||||
{oldPasswordRequired && (
|
||||
<div className="space-y-1">
|
||||
<h4 className="text-sm">{t("auth.common.password.current_password.label")}</h4>
|
||||
<h4 className="text-13">{t("auth.common.password.current_password.label")}</h4>
|
||||
<div className="relative flex items-center rounded-md">
|
||||
<Controller
|
||||
control={control}
|
||||
|
|
@ -159,11 +159,11 @@ function SecurityPage() {
|
|||
/>
|
||||
)}
|
||||
</div>
|
||||
{errors.old_password && <span className="text-xs text-red-500">{errors.old_password.message}</span>}
|
||||
{errors.old_password && <span className="text-11 text-red-500">{errors.old_password.message}</span>}
|
||||
</div>
|
||||
)}
|
||||
<div className="space-y-1">
|
||||
<h4 className="text-sm">{t("auth.common.password.new_password.label")}</h4>
|
||||
<h4 className="text-13">{t("auth.common.password.new_password.label")}</h4>
|
||||
<div className="relative flex items-center rounded-md">
|
||||
<Controller
|
||||
control={control}
|
||||
|
|
@ -199,11 +199,11 @@ function SecurityPage() {
|
|||
</div>
|
||||
{passwordSupport}
|
||||
{isNewPasswordSameAsOldPassword && !isPasswordInputFocused && (
|
||||
<span className="text-xs text-red-500">{t("new_password_must_be_different_from_old_password")}</span>
|
||||
<span className="text-11 text-red-500">{t("new_password_must_be_different_from_old_password")}</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<h4 className="text-sm">{t("auth.common.password.confirm_password.label")}</h4>
|
||||
<h4 className="text-13">{t("auth.common.password.confirm_password.label")}</h4>
|
||||
<div className="relative flex items-center rounded-md">
|
||||
<Controller
|
||||
control={control}
|
||||
|
|
@ -238,7 +238,7 @@ function SecurityPage() {
|
|||
)}
|
||||
</div>
|
||||
{!!confirmPassword && password !== confirmPassword && renderPasswordMatchError && (
|
||||
<span className="text-sm text-red-500">{t("auth.common.password.errors.match")}</span>
|
||||
<span className="text-13 text-red-500">{t("auth.common.password.errors.match")}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ export const ProfileSidebar = observer(function ProfileSidebar(props: TProfileSi
|
|||
<div className="flex-shrink-0">
|
||||
{!currentUser?.avatar_url || currentUser?.avatar_url === "" ? (
|
||||
<div className="h-8 w-8 rounded-full">
|
||||
<CircleUserRound className="h-full w-full text-custom-text-200" />
|
||||
<CircleUserRound className="h-full w-full text-secondary" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="relative h-8 w-8 overflow-hidden">
|
||||
|
|
@ -63,8 +63,8 @@ export const ProfileSidebar = observer(function ProfileSidebar(props: TProfileSi
|
|||
)}
|
||||
</div>
|
||||
<div className="w-full overflow-hidden">
|
||||
<div className="text-base font-medium text-custom-text-200 truncate">{currentUser?.display_name}</div>
|
||||
<div className="text-sm text-custom-text-300 truncate">{currentUser?.email}</div>
|
||||
<div className="text-14 font-medium text-secondary truncate">{currentUser?.display_name}</div>
|
||||
<div className="text-13 text-tertiary truncate">{currentUser?.email}</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,17 +20,16 @@ function ProjectSettingsPage() {
|
|||
return (
|
||||
<div className="flex flex-col gap-4 items-center justify-center h-full max-w-[480px] mx-auto">
|
||||
<img src={resolvedPath} alt="No projects yet" />
|
||||
<div className="text-lg font-semibold text-custom-text-350">No projects yet</div>
|
||||
<div className="text-sm text-custom-text-350 text-center">
|
||||
<div className="text-16 font-semibold text-tertiary">No projects yet</div>
|
||||
<div className="text-13 text-tertiary text-center">
|
||||
Projects act as the foundation for goal-driven work. They let you manage your teams, tasks, and everything you
|
||||
need to get things done.
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Link href="https://plane.so/" target="_blank" className={cn(getButtonStyling("neutral-primary", "sm"))}>
|
||||
<Link href="https://plane.so/" target="_blank" className={cn(getButtonStyling("secondary", "base"))}>
|
||||
Learn more about projects
|
||||
</Link>
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={() => toggleCreateProjectModal(true)}
|
||||
data-ph-element={PROJECT_TRACKER_ELEMENTS.EMPTY_STATE_CREATE_PROJECT_BUTTON}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -54,43 +54,43 @@ const CreateWorkspacePage = observer(function CreateWorkspacePage() {
|
|||
<AuthenticationWrapper>
|
||||
<div className="flex h-full flex-col gap-y-2 overflow-hidden sm:flex-row sm:gap-y-0">
|
||||
<div className="relative h-1/6 flex-shrink-0 sm:w-2/12 md:w-3/12 lg:w-1/5">
|
||||
<div className="absolute left-0 top-1/2 h-[0.5px] w-full -translate-y-1/2 border-b-[0.5px] border-custom-border-200 sm:left-1/2 sm:top-0 sm:h-screen sm:w-[0.5px] sm:-translate-x-1/2 sm:translate-y-0 sm:border-r-[0.5px] md:left-1/3" />
|
||||
<div className="absolute left-0 top-1/2 h-[0.5px] w-full -translate-y-1/2 border-b-[0.5px] border-subtle sm:left-1/2 sm:top-0 sm:h-screen sm:w-[0.5px] sm:-translate-x-1/2 sm:translate-y-0 sm:border-r-[0.5px] md:left-1/3" />
|
||||
<Link
|
||||
className="absolute left-5 top-1/2 grid -translate-y-1/2 place-items-center bg-custom-background-100 px-3 sm:left-1/2 sm:top-12 sm:-translate-x-[15px] sm:translate-y-0 sm:px-0 sm:py-5 md:left-1/3"
|
||||
className="absolute left-5 top-1/2 grid -translate-y-1/2 place-items-center bg-surface-1 px-3 sm:left-1/2 sm:top-12 sm:-translate-x-[15px] sm:translate-y-0 sm:px-0 sm:py-5 md:left-1/3"
|
||||
href="/"
|
||||
>
|
||||
<PlaneLogo className="h-9 w-auto text-custom-text-100" />
|
||||
<PlaneLogo className="h-9 w-auto text-primary" />
|
||||
</Link>
|
||||
<div className="absolute right-4 top-1/4 -translate-y-1/2 text-sm text-custom-text-100 sm:fixed sm:right-16 sm:top-12 sm:translate-y-0 sm:py-5">
|
||||
<div className="absolute right-4 top-1/4 -translate-y-1/2 text-13 text-primary sm:fixed sm:right-16 sm:top-12 sm:translate-y-0 sm:py-5">
|
||||
{currentUser?.email}
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative flex h-full justify-center px-8 pb-8 sm:w-10/12 sm:items-center sm:justify-start sm:p-0 sm:pr-[8.33%] md:w-9/12 lg:w-4/5">
|
||||
{isWorkspaceCreationDisabled ? (
|
||||
<div className="w-4/5 h-full flex flex-col items-center justify-center text-lg font-medium gap-1">
|
||||
<div className="w-4/5 h-full flex flex-col items-center justify-center text-16 font-medium gap-1">
|
||||
<img
|
||||
src={WorkspaceCreationDisabled}
|
||||
className="w-full h-full object-contain mb-4"
|
||||
alt="Workspace creation disabled"
|
||||
/>
|
||||
<div className="text-lg font-medium text-center">
|
||||
<div className="text-16 font-medium text-center">
|
||||
{t("workspace_creation.errors.creation_disabled.title")}
|
||||
</div>
|
||||
<p className="text-sm text-custom-text-300 break-words text-center">
|
||||
<p className="text-13 text-tertiary break-words text-center">
|
||||
{t("workspace_creation.errors.creation_disabled.description")}
|
||||
</p>
|
||||
<div className="flex gap-4 mt-6">
|
||||
<Button variant="primary" onClick={() => router.back()}>
|
||||
{t("common.go_back")}
|
||||
</Button>
|
||||
<a href={getMailtoHref()} className={getButtonStyling("outline-primary", "md")}>
|
||||
<a href={getMailtoHref()} className={getButtonStyling("secondary", "base")}>
|
||||
{t("workspace_creation.errors.creation_disabled.request_button")}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="w-full space-y-7 sm:space-y-10">
|
||||
<h4 className="text-2xl font-semibold">{t("workspace_creation.heading")}</h4>
|
||||
<h4 className="text-20 font-semibold">{t("workspace_creation.heading")}</h4>
|
||||
<div className="sm:w-3/4 md:w-2/5">
|
||||
<CreateWorkspaceForm
|
||||
onSubmit={onSubmit}
|
||||
|
|
|
|||
|
|
@ -128,14 +128,14 @@ function UserInvitationsPage() {
|
|||
<AuthenticationWrapper>
|
||||
<div className="flex h-full flex-col gap-y-2 overflow-hidden sm:flex-row sm:gap-y-0">
|
||||
<div className="relative h-1/6 flex-shrink-0 sm:w-2/12 md:w-3/12 lg:w-1/5">
|
||||
<div className="absolute left-0 top-1/2 h-[0.5px] w-full -translate-y-1/2 border-b-[0.5px] border-custom-border-200 sm:left-1/2 sm:top-0 sm:h-screen sm:w-[0.5px] sm:-translate-x-1/2 sm:translate-y-0 sm:border-r-[0.5px] md:left-1/3" />
|
||||
<div className="absolute left-0 top-1/2 h-[0.5px] w-full -translate-y-1/2 border-b-[0.5px] border-subtle sm:left-1/2 sm:top-0 sm:h-screen sm:w-[0.5px] sm:-translate-x-1/2 sm:translate-y-0 sm:border-r-[0.5px] md:left-1/3" />
|
||||
<Link
|
||||
href="/"
|
||||
className="absolute left-5 top-1/2 grid -translate-y-1/2 place-items-center bg-custom-background-100 px-3 sm:left-1/2 sm:top-12 sm:-translate-x-[15px] sm:translate-y-0 sm:px-0 sm:py-5 md:left-1/3 z-10"
|
||||
className="absolute left-5 top-1/2 grid -translate-y-1/2 place-items-center bg-surface-1 px-3 sm:left-1/2 sm:top-12 sm:-translate-x-[15px] sm:translate-y-0 sm:px-0 sm:py-5 md:left-1/3 z-10"
|
||||
>
|
||||
<PlaneLogo className="h-9 w-auto text-custom-text-100" />
|
||||
<PlaneLogo className="h-9 w-auto text-primary" />
|
||||
</Link>
|
||||
<div className="absolute right-4 top-1/4 -translate-y-1/2 text-sm text-custom-text-100 sm:fixed sm:right-16 sm:top-12 sm:translate-y-0 sm:py-5">
|
||||
<div className="absolute right-4 top-1/4 -translate-y-1/2 text-13 text-primary sm:fixed sm:right-16 sm:top-12 sm:translate-y-0 sm:py-5">
|
||||
{currentUser?.email}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -143,8 +143,8 @@ function UserInvitationsPage() {
|
|||
invitations.length > 0 ? (
|
||||
<div className="relative flex h-full justify-center px-8 pb-8 sm:w-10/12 sm:items-center sm:justify-start sm:p-0 sm:pr-[8.33%] md:w-9/12 lg:w-4/5">
|
||||
<div className="w-full space-y-10">
|
||||
<h5 className="text-lg">{t("we_see_that_someone_has_invited_you_to_join_a_workspace")}</h5>
|
||||
<h4 className="text-2xl font-semibold">{t("join_a_workspace")}</h4>
|
||||
<h5 className="text-16">{t("we_see_that_someone_has_invited_you_to_join_a_workspace")}</h5>
|
||||
<h4 className="text-20 font-semibold">{t("join_a_workspace")}</h4>
|
||||
<div className="max-h-[37vh] space-y-4 overflow-y-auto md:w-3/5">
|
||||
{invitations.map((invitation) => {
|
||||
const isSelected = invitationsRespond.includes(invitation.id);
|
||||
|
|
@ -152,10 +152,8 @@ function UserInvitationsPage() {
|
|||
return (
|
||||
<div
|
||||
key={invitation.id}
|
||||
className={`flex cursor-pointer items-center gap-2 rounded border px-3.5 py-5 ${
|
||||
isSelected
|
||||
? "border-custom-primary-100"
|
||||
: "border-custom-border-200 hover:bg-custom-background-80"
|
||||
className={`flex cursor-pointer items-center gap-2 rounded-sm border px-3.5 py-5 ${
|
||||
isSelected ? "border-accent-strong" : "border-subtle hover:bg-layer-1"
|
||||
}`}
|
||||
onClick={() => handleInvitation(invitation, isSelected ? "withdraw" : "accepted")}
|
||||
>
|
||||
|
|
@ -167,12 +165,10 @@ function UserInvitationsPage() {
|
|||
/>
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="text-sm font-medium">{truncateText(invitation.workspace.name, 30)}</div>
|
||||
<p className="text-xs text-custom-text-200">{ROLE[invitation.role]}</p>
|
||||
<div className="text-13 font-medium">{truncateText(invitation.workspace.name, 30)}</div>
|
||||
<p className="text-11 text-secondary">{ROLE[invitation.role]}</p>
|
||||
</div>
|
||||
<span
|
||||
className={`flex-shrink-0 ${isSelected ? "text-custom-primary-100" : "text-custom-text-200"}`}
|
||||
>
|
||||
<span className={`flex-shrink-0 ${isSelected ? "text-accent-primary" : "text-secondary"}`}>
|
||||
<CheckCircle2 className="h-5 w-5" />
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -183,7 +179,7 @@ function UserInvitationsPage() {
|
|||
<Button
|
||||
variant="primary"
|
||||
type="submit"
|
||||
size="md"
|
||||
size="lg"
|
||||
onClick={submitInvitations}
|
||||
disabled={isJoiningWorkspaces || invitationsRespond.length === 0}
|
||||
loading={isJoiningWorkspaces}
|
||||
|
|
@ -193,7 +189,7 @@ function UserInvitationsPage() {
|
|||
</Button>
|
||||
<Link href={`/${redirectWorkspaceSlug}`}>
|
||||
<span>
|
||||
<Button variant="neutral-primary" size="md">
|
||||
<Button variant="secondary" size="lg">
|
||||
{t("go_home")}
|
||||
</Button>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,6 @@
|
|||
import { Outlet } from "react-router";
|
||||
import type { Route } from "./+types/layout";
|
||||
import { PreloadResources } from "./layout.preload";
|
||||
// types
|
||||
|
||||
// styles
|
||||
import "@/styles/power-k.css";
|
||||
import "@/styles/emoji.css";
|
||||
import "@plane/propel/styles/react-day-picker.css";
|
||||
|
||||
export const meta: Route.MetaFunction = () => [
|
||||
{ name: "robots", content: "noindex, nofollow" },
|
||||
|
|
|
|||
|
|
@ -40,9 +40,9 @@ function OnboardingPage() {
|
|||
|
||||
return (
|
||||
<AuthenticationWrapper pageType={EPageTypes.ONBOARDING}>
|
||||
<div className="flex relative size-full overflow-hidden bg-custom-background-90 rounded-lg transition-all ease-in-out duration-300">
|
||||
<div className="flex relative size-full overflow-hidden bg-canvas rounded-lg transition-all ease-in-out duration-300">
|
||||
<div className="size-full p-2 flex-grow transition-all ease-in-out duration-300 overflow-hidden">
|
||||
<div className="relative flex flex-col h-full w-full overflow-hidden rounded-lg bg-custom-background-100 shadow-md border border-custom-border-200">
|
||||
<div className="relative flex flex-col h-full w-full overflow-hidden rounded-lg bg-surface-1 shadow-md border border-subtle">
|
||||
{user && !invitationsLoader ? (
|
||||
<OnboardingRoot invitations={invitations ?? []} />
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -69,8 +69,8 @@ function ProfileActivityPage() {
|
|||
<ProfileSettingContentHeader title={t("activity")} />
|
||||
{activityPages}
|
||||
{isLoadMoreVisible && (
|
||||
<div className="flex w-full items-center justify-center text-xs">
|
||||
<Button variant="accent-primary" size="sm" onClick={handleLoadMore}>
|
||||
<div className="flex w-full items-center justify-center text-11">
|
||||
<Button variant="secondary" onClick={handleLoadMore}>
|
||||
{t("load_more")}
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -68,8 +68,8 @@ function ProfileAppearancePage() {
|
|||
<ProfileSettingContentHeader title={t("appearance")} />
|
||||
<div className="grid grid-cols-12 gap-4 py-6 sm:gap-16">
|
||||
<div className="col-span-12 sm:col-span-6">
|
||||
<h4 className="text-lg font-semibold text-custom-text-100">{t("theme")}</h4>
|
||||
<p className="text-sm text-custom-text-200">{t("select_or_customize_your_interface_color_scheme")}</p>
|
||||
<h4 className="text-16 font-semibold text-primary">{t("theme")}</h4>
|
||||
<p className="text-13 text-secondary">{t("select_or_customize_your_interface_color_scheme")}</p>
|
||||
</div>
|
||||
<div className="col-span-12 sm:col-span-6">
|
||||
<ThemeSwitch value={currentTheme} onChange={handleThemeChange} />
|
||||
|
|
|
|||
|
|
@ -11,9 +11,9 @@ export default function ProfileSettingsLayout() {
|
|||
<>
|
||||
<ProjectsAppPowerKProvider />
|
||||
<AuthenticationWrapper>
|
||||
<div className="relative flex h-full w-full overflow-hidden rounded-lg border border-custom-border-200">
|
||||
<div className="relative flex h-full w-full overflow-hidden rounded-lg border border-subtle">
|
||||
<ProfileLayoutSidebar />
|
||||
<main className="relative flex h-full w-full flex-col overflow-hidden bg-custom-background-100">
|
||||
<main className="relative flex h-full w-full flex-col overflow-hidden bg-surface-1">
|
||||
<div className="h-full w-full overflow-hidden">
|
||||
<Outlet />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -125,7 +125,7 @@ function SecurityPage() {
|
|||
<div className="flex flex-col gap-10 w-full max-w-96">
|
||||
{oldPasswordRequired && (
|
||||
<div className="space-y-1">
|
||||
<h4 className="text-sm">{t("auth.common.password.current_password.label")}</h4>
|
||||
<h4 className="text-13">{t("auth.common.password.current_password.label")}</h4>
|
||||
<div className="relative flex items-center rounded-md">
|
||||
<Controller
|
||||
control={control}
|
||||
|
|
@ -157,11 +157,11 @@ function SecurityPage() {
|
|||
/>
|
||||
)}
|
||||
</div>
|
||||
{errors.old_password && <span className="text-xs text-red-500">{errors.old_password.message}</span>}
|
||||
{errors.old_password && <span className="text-11 text-red-500">{errors.old_password.message}</span>}
|
||||
</div>
|
||||
)}
|
||||
<div className="space-y-1">
|
||||
<h4 className="text-sm">{t("auth.common.password.new_password.label")}</h4>
|
||||
<h4 className="text-13">{t("auth.common.password.new_password.label")}</h4>
|
||||
<div className="relative flex items-center rounded-md">
|
||||
<Controller
|
||||
control={control}
|
||||
|
|
@ -197,11 +197,11 @@ function SecurityPage() {
|
|||
</div>
|
||||
{passwordSupport}
|
||||
{isNewPasswordSameAsOldPassword && !isPasswordInputFocused && (
|
||||
<span className="text-xs text-red-500">{t("new_password_must_be_different_from_old_password")}</span>
|
||||
<span className="text-11 text-red-500">{t("new_password_must_be_different_from_old_password")}</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<h4 className="text-sm">{t("auth.common.password.confirm_password.label")}</h4>
|
||||
<h4 className="text-13">{t("auth.common.password.confirm_password.label")}</h4>
|
||||
<div className="relative flex items-center rounded-md">
|
||||
<Controller
|
||||
control={control}
|
||||
|
|
@ -236,7 +236,7 @@ function SecurityPage() {
|
|||
)}
|
||||
</div>
|
||||
{!!confirmPassword && password !== confirmPassword && renderPasswordMatchError && (
|
||||
<span className="text-sm text-red-500">{t("auth.common.password.errors.match")}</span>
|
||||
<span className="text-13 text-red-500">{t("auth.common.password.errors.match")}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -116,7 +116,7 @@ export const ProfileLayoutSidebar = observer(function ProfileLayoutSidebar() {
|
|||
|
||||
return (
|
||||
<div
|
||||
className={`fixed inset-y-0 z-20 flex h-full flex-shrink-0 flex-grow-0 flex-col border-r border-custom-sidebar-border-200 bg-custom-sidebar-background-100 duration-300 md:relative
|
||||
className={`fixed inset-y-0 z-20 flex h-full flex-shrink-0 flex-grow-0 flex-col border-r border-subtle bg-surface-1 duration-300 md:relative
|
||||
${sidebarCollapsed ? "-ml-[250px]" : ""}
|
||||
sm:${sidebarCollapsed ? "-ml-[250px]" : ""}
|
||||
md:ml-0 ${sidebarCollapsed ? "w-[70px]" : "w-[250px]"}
|
||||
|
|
@ -133,13 +133,13 @@ export const ProfileLayoutSidebar = observer(function ProfileLayoutSidebar() {
|
|||
<ChevronLeftIcon className="h-5 w-5" strokeWidth={1} />
|
||||
</span>
|
||||
{!sidebarCollapsed && (
|
||||
<h4 className="truncate text-lg font-semibold text-custom-text-200">{t("profile_settings")}</h4>
|
||||
<h4 className="truncate text-16 font-semibold text-secondary">{t("profile_settings")}</h4>
|
||||
)}
|
||||
</div>
|
||||
</Link>
|
||||
<div className="flex flex-shrink-0 flex-col overflow-x-hidden">
|
||||
{!sidebarCollapsed && (
|
||||
<h6 className="rounded px-6 text-sm font-semibold text-custom-sidebar-text-400">{t("your_account")}</h6>
|
||||
<h6 className="rounded-sm px-6 text-13 font-semibold text-placeholder">{t("your_account")}</h6>
|
||||
)}
|
||||
<div className="vertical-scrollbar scrollbar-sm mt-2 px-4 h-full space-y-1 overflow-y-auto">
|
||||
{PROFILE_ACTION_LINKS.map((link) => {
|
||||
|
|
@ -162,7 +162,7 @@ export const ProfileLayoutSidebar = observer(function ProfileLayoutSidebar() {
|
|||
<div className="flex items-center gap-1.5 py-[1px]">
|
||||
<ProjectActionIcons type={link.key} size={16} />
|
||||
|
||||
{!sidebarCollapsed && <p className="text-sm leading-5 font-medium">{t(link.i18n_label)}</p>}
|
||||
{!sidebarCollapsed && <p className="text-13 leading-5 font-medium">{t(link.i18n_label)}</p>}
|
||||
</div>
|
||||
</SidebarNavItem>
|
||||
</Tooltip>
|
||||
|
|
@ -173,7 +173,7 @@ export const ProfileLayoutSidebar = observer(function ProfileLayoutSidebar() {
|
|||
</div>
|
||||
<div className="flex flex-col overflow-x-hidden">
|
||||
{!sidebarCollapsed && (
|
||||
<h6 className="rounded px-6 text-sm font-semibold text-custom-sidebar-text-400">{t("workspaces")}</h6>
|
||||
<h6 className="rounded-sm px-6 text-13 font-semibold text-placeholder">{t("workspaces")}</h6>
|
||||
)}
|
||||
{workspacesList && workspacesList.length > 0 && (
|
||||
<div
|
||||
|
|
@ -186,34 +186,32 @@ export const ProfileLayoutSidebar = observer(function ProfileLayoutSidebar() {
|
|||
<Link
|
||||
key={workspace.id}
|
||||
href={`/${workspace.slug}`}
|
||||
className={`flex flex-grow cursor-pointer select-none items-center truncate text-left text-sm font-medium ${
|
||||
className={`flex flex-grow cursor-pointer select-none items-center truncate text-left text-13 font-medium ${
|
||||
sidebarCollapsed ? "justify-center" : `justify-between`
|
||||
}`}
|
||||
onClick={handleItemClick}
|
||||
>
|
||||
<span
|
||||
className={`flex w-full flex-grow items-center gap-x-2 truncate rounded-md px-3 py-1 hover:bg-custom-sidebar-background-80 ${
|
||||
className={`flex w-full flex-grow items-center gap-x-2 truncate rounded-md px-3 py-1 hover:bg-layer-1 ${
|
||||
sidebarCollapsed ? "justify-center" : ""
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`relative flex h-6 w-6 flex-shrink-0 items-center justify-center p-2 text-xs uppercase ${
|
||||
!workspace?.logo_url && "rounded bg-custom-primary-500 text-white"
|
||||
className={`relative flex h-6 w-6 flex-shrink-0 items-center justify-center p-2 text-11 uppercase ${
|
||||
!workspace?.logo_url && "rounded-sm bg-accent-primary text-on-color"
|
||||
}`}
|
||||
>
|
||||
{workspace?.logo_url && workspace.logo_url !== "" ? (
|
||||
<img
|
||||
src={getFileURL(workspace.logo_url)}
|
||||
className="absolute left-0 top-0 h-full w-full rounded object-cover"
|
||||
className="absolute left-0 top-0 h-full w-full rounded-sm object-cover"
|
||||
alt="Workspace Logo"
|
||||
/>
|
||||
) : (
|
||||
(workspace?.name?.charAt(0) ?? "...")
|
||||
)}
|
||||
</span>
|
||||
{!sidebarCollapsed && (
|
||||
<p className="truncate text-sm text-custom-sidebar-text-200">{workspace.name}</p>
|
||||
)}
|
||||
{!sidebarCollapsed && <p className="truncate text-13 text-secondary">{workspace.name}</p>}
|
||||
</span>
|
||||
</Link>
|
||||
))}
|
||||
|
|
@ -230,7 +228,7 @@ export const ProfileLayoutSidebar = observer(function ProfileLayoutSidebar() {
|
|||
isMobile={isMobile}
|
||||
>
|
||||
<div
|
||||
className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium text-custom-sidebar-text-200 outline-none hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80 ${
|
||||
className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-13 font-medium text-secondary outline-none hover:bg-layer-1 focus:bg-layer-1 ${
|
||||
sidebarCollapsed ? "justify-center" : ""
|
||||
}`}
|
||||
>
|
||||
|
|
@ -251,7 +249,7 @@ export const ProfileLayoutSidebar = observer(function ProfileLayoutSidebar() {
|
|||
<button
|
||||
type="button"
|
||||
onClick={handleSignOut}
|
||||
className="flex items-center justify-center gap-2 text-sm font-medium text-red-500"
|
||||
className="flex items-center justify-center gap-2 text-13 font-medium text-red-500"
|
||||
disabled={isSigningOut}
|
||||
>
|
||||
<LogOut className="h-3.5 w-3.5" />
|
||||
|
|
@ -259,14 +257,14 @@ export const ProfileLayoutSidebar = observer(function ProfileLayoutSidebar() {
|
|||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 md:hidden"
|
||||
className="grid place-items-center rounded-md p-1.5 text-secondary outline-none hover:bg-surface-2 hover:text-primary md:hidden"
|
||||
onClick={() => toggleSidebar()}
|
||||
>
|
||||
<MoveLeft className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`ml-auto hidden place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 md:grid ${
|
||||
className={`ml-auto hidden place-items-center rounded-md p-1.5 text-secondary outline-none hover:bg-surface-2 hover:text-primary md:grid ${
|
||||
sidebarCollapsed ? "w-full" : ""
|
||||
}`}
|
||||
onClick={() => toggleSidebar()}
|
||||
|
|
|
|||
|
|
@ -75,8 +75,8 @@ function WorkspaceInvitationPage() {
|
|||
<div className="flex h-full w-full flex-col items-center justify-center px-3">
|
||||
{invitationDetail && !invitationDetail.responded_at ? (
|
||||
error ? (
|
||||
<div className="flex w-full flex-col space-y-4 rounded border border-custom-border-200 bg-custom-background-100 px-4 py-8 text-center shadow-2xl md:w-1/3">
|
||||
<h2 className="text-xl uppercase">INVITATION NOT FOUND</h2>
|
||||
<div className="flex w-full flex-col space-y-4 rounded-sm border border-subtle bg-surface-1 px-4 py-8 text-center shadow-2xl md:w-1/3">
|
||||
<h2 className="text-18 uppercase">INVITATION NOT FOUND</h2>
|
||||
</div>
|
||||
) : (
|
||||
<EmptySpace
|
||||
|
|
|
|||
|
|
@ -13,11 +13,11 @@ interface ErrorActionsProps {
|
|||
function ErrorActions({ onGoHome, onReload }: ErrorActionsProps) {
|
||||
return (
|
||||
<div className="flex gap-3 pt-2">
|
||||
<Button variant="primary" size="md" onClick={onGoHome}>
|
||||
<Button variant="primary" size="lg" onClick={onGoHome}>
|
||||
Go to home
|
||||
</Button>
|
||||
{onReload && (
|
||||
<Button variant="outline-primary" size="md" onClick={onReload}>
|
||||
<Button variant="secondary" size="lg" onClick={onReload}>
|
||||
Reload page
|
||||
</Button>
|
||||
)}
|
||||
|
|
@ -34,7 +34,7 @@ interface DevErrorComponentProps {
|
|||
export function DevErrorComponent({ error, onGoHome, onReload }: DevErrorComponentProps) {
|
||||
if (isRouteErrorResponse(error)) {
|
||||
return (
|
||||
<div className="min-h-screen bg-custom-background-90 p-6 flex items-start justify-center transition-none">
|
||||
<div className="min-h-screen bg-surface-2 p-6 flex items-start justify-center transition-none">
|
||||
<div className="w-full max-w-4xl mt-12 space-y-4 transition-none">
|
||||
<Banner
|
||||
variant="error"
|
||||
|
|
@ -46,16 +46,16 @@ export function DevErrorComponent({ error, onGoHome, onReload }: DevErrorCompone
|
|||
<Card variant={ECardVariant.WITH_SHADOW} className="!p-6 transition-none">
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h2 className="text-2xl font-semibold text-red-500 mb-2">
|
||||
<h2 className="text-20 font-semibold text-red-500 mb-2">
|
||||
{error.status} {error.statusText}
|
||||
</h2>
|
||||
<div className="h-px w-full bg-custom-border-200" />
|
||||
<div className="h-px w-full bg-subtle-1" />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-sm font-medium text-custom-text-300 uppercase tracking-wide">Error Data</h3>
|
||||
<div className="bg-custom-background-80 rounded-md p-4">
|
||||
<p className="text-sm text-custom-text-200 font-mono">{error.data}</p>
|
||||
<h3 className="text-13 font-medium text-tertiary uppercase tracking-wide">Error Data</h3>
|
||||
<div className="bg-layer-1 rounded-md p-4">
|
||||
<p className="text-13 text-secondary font-mono">{error.data}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -69,7 +69,7 @@ export function DevErrorComponent({ error, onGoHome, onReload }: DevErrorCompone
|
|||
|
||||
if (error instanceof Error) {
|
||||
return (
|
||||
<div className="min-h-screen bg-custom-background-90 p-6 flex items-start justify-center transition-none">
|
||||
<div className="min-h-screen bg-surface-2 p-6 flex items-start justify-center transition-none">
|
||||
<div className="w-full max-w-4xl mt-12 space-y-4 transition-none">
|
||||
<Banner
|
||||
variant="error"
|
||||
|
|
@ -80,22 +80,22 @@ export function DevErrorComponent({ error, onGoHome, onReload }: DevErrorCompone
|
|||
<Card variant={ECardVariant.WITH_SHADOW} className="!p-6 transition-none">
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h2 className="text-2xl font-semibold text-red-500 mb-2">Error</h2>
|
||||
<div className="h-px w-full bg-custom-border-200" />
|
||||
<h2 className="text-20 font-semibold text-red-500 mb-2">Error</h2>
|
||||
<div className="h-px w-full bg-subtle-1" />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-sm font-medium text-custom-text-300 uppercase tracking-wide">Message</h3>
|
||||
<div className="bg-custom-background-80 rounded-md p-4">
|
||||
<p className="text-sm text-custom-text-100 font-medium">{error.message}</p>
|
||||
<h3 className="text-13 font-medium text-tertiary uppercase tracking-wide">Message</h3>
|
||||
<div className="bg-layer-1 rounded-md p-4">
|
||||
<p className="text-13 text-primary font-medium">{error.message}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error.stack && (
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-sm font-medium text-custom-text-300 uppercase tracking-wide">Stack Trace</h3>
|
||||
<div className="bg-custom-background-80 rounded-md border border-custom-border-200 max-h-96 overflow-auto">
|
||||
<pre className="p-4 text-xs text-custom-text-200 font-mono whitespace-pre-wrap break-words">
|
||||
<h3 className="text-13 font-medium text-tertiary uppercase tracking-wide">Stack Trace</h3>
|
||||
<div className="bg-layer-1 rounded-md border border-subtle max-h-96 overflow-auto">
|
||||
<pre className="p-4 text-11 text-secondary font-mono whitespace-pre-wrap break-words">
|
||||
{error.stack}
|
||||
</pre>
|
||||
</div>
|
||||
|
|
@ -106,12 +106,12 @@ export function DevErrorComponent({ error, onGoHome, onReload }: DevErrorCompone
|
|||
</div>
|
||||
</Card>
|
||||
|
||||
<Card variant={ECardVariant.WITHOUT_SHADOW} className="!p-4 bg-custom-background-80 transition-none">
|
||||
<Card variant={ECardVariant.WITHOUT_SHADOW} className="!p-4 bg-layer-1 transition-none">
|
||||
<div className="flex items-start gap-3">
|
||||
<InfoFillIcon className="size-5 text-custom-text-300 flex-shrink-0 mt-0.5" />
|
||||
<InfoFillIcon className="size-5 text-tertiary flex-shrink-0 mt-0.5" />
|
||||
<div className="space-y-1">
|
||||
<p className="text-sm font-medium text-custom-text-200">Development Mode</p>
|
||||
<p className="text-xs text-custom-text-300">
|
||||
<p className="text-13 font-medium text-secondary">Development Mode</p>
|
||||
<p className="text-11 text-tertiary">
|
||||
This detailed error view is only visible in development. In production, users will see a friendly
|
||||
error page.
|
||||
</p>
|
||||
|
|
@ -124,7 +124,7 @@ export function DevErrorComponent({ error, onGoHome, onReload }: DevErrorCompone
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-custom-background-90 p-6 flex items-start justify-center transition-none">
|
||||
<div className="min-h-screen bg-surface-2 p-6 flex items-start justify-center transition-none">
|
||||
<div className="w-full max-w-4xl mt-12 space-y-4 transition-none">
|
||||
<Banner
|
||||
variant="error"
|
||||
|
|
@ -136,12 +136,12 @@ export function DevErrorComponent({ error, onGoHome, onReload }: DevErrorCompone
|
|||
<Card variant={ECardVariant.WITH_SHADOW} className="!p-6">
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h2 className="text-2xl font-semibold text-custom-text-100 mb-2">Unknown Error</h2>
|
||||
<div className="h-px w-full bg-custom-border-200" />
|
||||
<h2 className="text-20 font-semibold text-primary mb-2">Unknown Error</h2>
|
||||
<div className="h-px w-full bg-subtle-1" />
|
||||
</div>
|
||||
|
||||
<div className="bg-custom-background-80 rounded-md p-4">
|
||||
<p className="text-sm text-custom-text-200">
|
||||
<div className="bg-layer-1 rounded-md p-4">
|
||||
<p className="text-13 text-secondary">
|
||||
An unknown error occurred. Please try refreshing the page or contact support if the problem persists.
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ export function ProdErrorComponent({ onGoHome }: ProdErrorComponentProps) {
|
|||
|
||||
return (
|
||||
<DefaultLayout>
|
||||
<div className="relative container mx-auto h-full w-full max-w-xl flex flex-col gap-2 items-center justify-center gap-y-6 bg-custom-background-100 text-center px-6">
|
||||
<div className="relative container mx-auto h-full w-full max-w-xl flex flex-col gap-2 items-center justify-center gap-y-6 bg-surface-1 text-center px-6">
|
||||
<div className="relative w-full">
|
||||
<img
|
||||
src={maintenanceModeImage}
|
||||
|
|
@ -51,10 +51,8 @@ export function ProdErrorComponent({ onGoHome }: ProdErrorComponentProps) {
|
|||
</div>
|
||||
<div className="w-full relative flex flex-col gap-4 mt-4">
|
||||
<div className="flex flex-col gap-2.5">
|
||||
<h1 className="text-xl font-semibold text-custom-text-100 text-left">
|
||||
🚧 Looks like something went wrong!
|
||||
</h1>
|
||||
<span className="text-base font-medium text-custom-text-200 text-left">
|
||||
<h1 className="text-18 font-semibold text-primary text-left">🚧 Looks like something went wrong!</h1>
|
||||
<span className="text-14 font-medium text-secondary text-left">
|
||||
We track these errors automatically and working on getting things back up and running. If the problem
|
||||
persists feel free to contact us. In the meantime, try refreshing.
|
||||
</span>
|
||||
|
|
@ -67,7 +65,7 @@ export function ProdErrorComponent({ onGoHome }: ProdErrorComponentProps) {
|
|||
href={link.value}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-custom-primary-100 hover:underline text-sm"
|
||||
className="text-accent-primary hover:underline text-13"
|
||||
>
|
||||
{link.label}
|
||||
</a>
|
||||
|
|
@ -76,7 +74,7 @@ export function ProdErrorComponent({ onGoHome }: ProdErrorComponentProps) {
|
|||
</div>
|
||||
|
||||
<div className="flex items-center justify-start gap-6">
|
||||
<Button variant="primary" size="md" onClick={onGoHome}>
|
||||
<Button variant="primary" size="lg" onClick={onGoHome}>
|
||||
Go to home
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,8 @@ import Script from "next/script";
|
|||
|
||||
// styles
|
||||
import "@/styles/globals.css";
|
||||
import "@/styles/power-k.css";
|
||||
import "@/styles/emoji.css";
|
||||
|
||||
import { SITE_DESCRIPTION, SITE_NAME } from "@plane/constants";
|
||||
|
||||
|
|
@ -76,12 +78,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
|
|||
<div id="context-menu-portal" />
|
||||
<div id="editor-portal" />
|
||||
<AppProvider>
|
||||
<div
|
||||
className={cn(
|
||||
"h-screen w-full overflow-hidden bg-custom-background-100 relative flex flex-col",
|
||||
"app-container"
|
||||
)}
|
||||
>
|
||||
<div className={cn("h-screen w-full overflow-hidden bg-canvas relative flex flex-col", "app-container")}>
|
||||
<main className="w-full h-full overflow-hidden relative">{children}</main>
|
||||
</div>
|
||||
</AppProvider>
|
||||
|
|
|
|||
|
|
@ -13,22 +13,22 @@ export const meta: Route.MetaFunction = () => [
|
|||
|
||||
function PageNotFound() {
|
||||
return (
|
||||
<div className={`h-screen w-full overflow-hidden bg-custom-background-100`}>
|
||||
<div className={`h-screen w-full overflow-hidden bg-surface-1`}>
|
||||
<div className="grid h-full place-items-center p-4">
|
||||
<div className="space-y-8 text-center">
|
||||
<div className="relative mx-auto h-60 w-60 lg:h-80 lg:w-80">
|
||||
<img src={Image404} className="h-full w-full object-contain" alt="404- Page not found" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-lg font-semibold">Oops! Something went wrong.</h3>
|
||||
<p className="text-sm text-custom-text-200">
|
||||
<h3 className="text-16 font-semibold">Oops! Something went wrong.</h3>
|
||||
<p className="text-13 text-secondary">
|
||||
Sorry, the page you are looking for cannot be found. It may have been removed, had its name changed, or is
|
||||
temporarily unavailable.
|
||||
</p>
|
||||
</div>
|
||||
<Link href="/">
|
||||
<span className="flex justify-center">
|
||||
<Button variant="neutral-primary" size="md">
|
||||
<Button variant="secondary" size="lg">
|
||||
Go to Home
|
||||
</Button>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -58,12 +58,7 @@ export function Layout({ children }: { children: ReactNode }) {
|
|||
<div id="context-menu-portal" />
|
||||
<div id="editor-portal" />
|
||||
<AppProvider>
|
||||
<div
|
||||
className={cn(
|
||||
"h-screen w-full overflow-hidden bg-custom-background-100 relative flex flex-col",
|
||||
"app-container"
|
||||
)}
|
||||
>
|
||||
<div className={cn("h-screen w-full overflow-hidden bg-canvas relative flex flex-col", "app-container")}>
|
||||
<main className="w-full h-full overflow-hidden relative">{children}</main>
|
||||
</div>
|
||||
</AppProvider>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue