diff --git a/apps/space/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx b/apps/space/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx index 9dcd66e7c..0043ed660 100644 --- a/apps/space/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx +++ b/apps/space/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx @@ -49,7 +49,7 @@ export const IssueKanbanLayoutRoot = observer(function IssueKanbanLayoutRoot(pro return (
diff --git a/apps/space/core/components/issues/issue-layouts/kanban/block.tsx b/apps/space/core/components/issues/issue-layouts/kanban/block.tsx index 334477aae..410d97b0c 100644 --- a/apps/space/core/components/issues/issue-layouts/kanban/block.tsx +++ b/apps/space/core/components/issues/issue-layouts/kanban/block.tsx @@ -50,7 +50,7 @@ const KanbanIssueDetailsBlock = observer(function KanbanIssueDetailsBlock(props:
-
+
{issue.name} diff --git a/apps/web/app/root.tsx b/apps/web/app/root.tsx index a0d8c2076..a525bf3c6 100644 --- a/apps/web/app/root.tsx +++ b/apps/web/app/root.tsx @@ -58,7 +58,9 @@ export function Layout({ children }: { children: ReactNode }) {
-
+
{children}
diff --git a/apps/web/ce/components/comments/comment-block.tsx b/apps/web/ce/components/comments/comment-block.tsx index bfbb83021..cf433297f 100644 --- a/apps/web/ce/components/comments/comment-block.tsx +++ b/apps/web/ce/components/comments/comment-block.tsx @@ -41,7 +41,7 @@ export const CommentBlock = observer(function CommentBlock(props: TCommentBlock) ref={commentBlockRef} >
-
+ +
ProjectSettingImg
diff --git a/apps/web/core/components/base-layouts/list/group.tsx b/apps/web/core/components/base-layouts/list/group.tsx index c3a612981..3112f3a55 100644 --- a/apps/web/core/components/base-layouts/list/group.tsx +++ b/apps/web/core/components/base-layouts/list/group.tsx @@ -33,12 +33,12 @@ export const BaseListGroup = observer(function BaseListGroup {/* Group Header */} - +
{renderGroupHeader ? ( renderGroupHeader({ group, itemCount: itemIds.length, isCollapsed, onToggleGroup }) ) : ( @@ -49,7 +49,7 @@ export const BaseListGroup = observer(function BaseListGroup )} - +
{/* Group Items */} {!isCollapsed && ( diff --git a/apps/web/core/components/dropdowns/date-range.tsx b/apps/web/core/components/dropdowns/date-range.tsx index d1940ca65..1ffb26431 100644 --- a/apps/web/core/components/dropdowns/date-range.tsx +++ b/apps/web/core/components/dropdowns/date-range.tsx @@ -257,13 +257,13 @@ export const DateRangeDropdown = observer(function DateRangeDropdown(props: Prop const comboOptions = (
{ diff --git a/apps/web/core/components/exporter/export-modal.tsx b/apps/web/core/components/exporter/export-modal.tsx index a9acdac6e..e2b5dd4a6 100644 --- a/apps/web/core/components/exporter/export-modal.tsx +++ b/apps/web/core/components/exporter/export-modal.tsx @@ -9,7 +9,7 @@ import { Button } from "@plane/propel/button"; import { TOAST_TYPE, setToast } from "@plane/propel/toast"; import type { IUser, IImporterService } from "@plane/types"; // ui -import { CustomSearchSelect } from "@plane/ui"; +import { Checkbox, CustomSearchSelect } from "@plane/ui"; // hooks import { useProject } from "@/hooks/store/use-project"; import { useUser } from "@/hooks/store/user"; @@ -168,7 +168,7 @@ export const Exporter = observer(function Exporter(props: Props) { onClick={() => setMultiple(!multiple)} className="flex max-w-min cursor-pointer items-center gap-2" > - setMultiple(!multiple)} /> + setMultiple(!multiple)} />
{t("workspace_settings.settings.exports.export_separate_files")}
diff --git a/apps/web/core/components/gantt-chart/chart/header.tsx b/apps/web/core/components/gantt-chart/chart/header.tsx index cca0a8f32..6ad34b600 100644 --- a/apps/web/core/components/gantt-chart/chart/header.tsx +++ b/apps/web/core/components/gantt-chart/chart/header.tsx @@ -36,7 +36,7 @@ export const GanttChartHeader = observer(function GanttChartHeader(props: Props) style={{ height: `${GANTT_BREADCRUMBS_HEIGHT}px` }} >
-
+
{blockIds ? `${blockIds.length} ${loaderTitle}` : t("common.loading")}
diff --git a/apps/web/core/components/instance/not-ready-view.tsx b/apps/web/core/components/instance/not-ready-view.tsx index 0f4bb36fe..7bedc9fb8 100644 --- a/apps/web/core/components/instance/not-ready-view.tsx +++ b/apps/web/core/components/instance/not-ready-view.tsx @@ -33,7 +33,7 @@ export function InstanceNotReady() {

Welcome aboard Plane!

- Plane Logo + Plane Logo

Get started by setting up your instance and workspace

diff --git a/apps/web/core/components/integration/single-integration-card.tsx b/apps/web/core/components/integration/single-integration-card.tsx index b3c89176b..4834217dc 100644 --- a/apps/web/core/components/integration/single-integration-card.tsx +++ b/apps/web/core/components/integration/single-integration-card.tsx @@ -111,13 +111,13 @@ export const SingleIntegrationCard = observer(function SingleIntegrationCard({ i />
-

+

{integration.title} {workspaceIntegrations ? isInstalled && : null}

-

+

{workspaceIntegrations ? isInstalled ? integrationDetails[integration.provider].installed diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/root.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/root.tsx index b6951acd7..f82391da5 100644 --- a/apps/web/core/components/issues/issue-detail/issue-activity/root.tsx +++ b/apps/web/core/components/issues/issue-detail/issue-activity/root.tsx @@ -102,7 +102,7 @@ export const IssueActivity = observer(function IssueActivity(props: TIssueActivi

{/* header */}
-
{t("common.activity")}
+
{t("common.activity")}
{isWorklogButtonEnabled && ( !!properties.sub_issue_count} > - + )}
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx index a7cc2a70c..8ac0a4770 100644 --- a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx +++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx @@ -14,7 +14,7 @@ export const SpreadsheetUpdatedOnColumn = observer(function SpreadsheetUpdatedOn const { issue } = props; return ( - + {renderFormattedDate(issue.updated_at)} ); diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/issue-row.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/issue-row.tsx index 343562b8e..b9b9ace13 100644 --- a/apps/web/core/components/issues/issue-layouts/spreadsheet/issue-row.tsx +++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/issue-row.tsx @@ -265,7 +265,7 @@ const IssueRowDetails = observer(function IssueRowDetails(props: IssueRowDetails > setIsPasswordInputFocused(true)} onBlur={() => setIsPasswordInputFocused(false)} autoComplete="on" @@ -473,7 +473,7 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) { ref={ref} hasError={Boolean(errors.confirm_password)} placeholder={t("auth.common.password.confirm_password.placeholder")} - className="w-full border-strong pr-12 placeholder:text-placeholder" + className="w-full border-subtle pr-12 placeholder:text-placeholder" /> {showPassword.retypePassword ? ( +
{!hideIcon && } {displayValue ?? placeholder ?? t("common.none")}
diff --git a/apps/web/core/components/readonly/labels.tsx b/apps/web/core/components/readonly/labels.tsx index f823a2cc8..a154b2160 100644 --- a/apps/web/core/components/readonly/labels.tsx +++ b/apps/web/core/components/readonly/labels.tsx @@ -32,7 +32,7 @@ export const ReadonlyLabels = observer(function ReadonlyLabels(props: TReadonlyL }, [projectId, workspaceSlug]); return ( -
+
{labels && ( <> -
+
{value.length} Labels diff --git a/apps/web/core/components/readonly/member.tsx b/apps/web/core/components/readonly/member.tsx index bc074740a..556b764d5 100644 --- a/apps/web/core/components/readonly/member.tsx +++ b/apps/web/core/components/readonly/member.tsx @@ -28,7 +28,7 @@ export const ReadonlyMember = observer(function ReadonlyMember(props: TReadonlyM if (members.length === 0) { return ( -
+
{} {placeholder ?? t("common.none")}
@@ -37,7 +37,7 @@ export const ReadonlyMember = observer(function ReadonlyMember(props: TReadonlyM if (multiple) { return ( -
+
{!hideIcon && Icon && }
@@ -47,7 +47,7 @@ export const ReadonlyMember = observer(function ReadonlyMember(props: TReadonlyM const member = members[0]; return ( -
+
{!hideIcon && Icon && }
diff --git a/apps/web/core/components/readonly/module.tsx b/apps/web/core/components/readonly/module.tsx index 2a8225bc6..d74fd2307 100644 --- a/apps/web/core/components/readonly/module.tsx +++ b/apps/web/core/components/readonly/module.tsx @@ -44,7 +44,7 @@ export const ReadonlyModule = observer(function ReadonlyModule(props: TReadonlyM if (modules.length === 0) { return ( -
+
{!hideIcon && } {placeholder ?? t("common.none")}
@@ -56,7 +56,7 @@ export const ReadonlyModule = observer(function ReadonlyModule(props: TReadonlyM showCount && modules.length > 1 ? `${modules[0]?.name} +${modules.length - 1}` : modules[0]?.name; return ( -
+
{!hideIcon && } {displayText}
@@ -65,7 +65,7 @@ export const ReadonlyModule = observer(function ReadonlyModule(props: TReadonlyM const moduleItem = modules[0]; return ( -
+
{!hideIcon && } {moduleItem?.name}
diff --git a/apps/web/core/components/readonly/priority.tsx b/apps/web/core/components/readonly/priority.tsx index 6e7c46f1a..e059b9367 100644 --- a/apps/web/core/components/readonly/priority.tsx +++ b/apps/web/core/components/readonly/priority.tsx @@ -20,7 +20,7 @@ export const ReadonlyPriority = observer(function ReadonlyPriority(props: TReado const priorityDetails = ISSUE_PRIORITIES.find((p) => p.key === value); return ( -
+
{!hideIcon && } {priorityDetails?.title ?? placeholder ?? t("common.none")}
diff --git a/apps/web/core/components/readonly/state.tsx b/apps/web/core/components/readonly/state.tsx index a71472ed1..7e7105ec9 100644 --- a/apps/web/core/components/readonly/state.tsx +++ b/apps/web/core/components/readonly/state.tsx @@ -46,7 +46,7 @@ export const ReadonlyState = observer(function ReadonlyState(props: TReadonlySta if (stateLoader) { return ( - + @@ -54,7 +54,7 @@ export const ReadonlyState = observer(function ReadonlyState(props: TReadonlySta } return ( -
+
{!hideIcon && ( {showButton && customButton} {button && showButton && ( - )} diff --git a/apps/web/core/components/web-hooks/form/individual-event-options.tsx b/apps/web/core/components/web-hooks/form/individual-event-options.tsx index b83f9676d..7cbbb3ee3 100644 --- a/apps/web/core/components/web-hooks/form/individual-event-options.tsx +++ b/apps/web/core/components/web-hooks/form/individual-event-options.tsx @@ -1,6 +1,7 @@ import type { Control } from "react-hook-form"; import { Controller } from "react-hook-form"; import type { IWebhook } from "@plane/types"; +import { Checkbox } from "@plane/ui"; export const INDIVIDUAL_WEBHOOK_OPTIONS: { key: keyof IWebhook; @@ -49,13 +50,7 @@ export function WebhookIndividualEventOptions({ control }: Props) { render={({ field: { onChange, value } }) => (
- onChange(!value)} - type="checkbox" - name="selectIndividualEvents" - checked={value === true} - /> + onChange(!value)} checked={value === true} /> diff --git a/apps/web/core/components/workspace/logo.tsx b/apps/web/core/components/workspace/logo.tsx index 2a06f3515..ee5a00848 100644 --- a/apps/web/core/components/workspace/logo.tsx +++ b/apps/web/core/components/workspace/logo.tsx @@ -17,7 +17,7 @@ export const WorkspaceLogo = observer(function WorkspaceLogo(props: Props) {
diff --git a/packages/propel/src/pill/pill.tsx b/packages/propel/src/pill/pill.tsx index 4a9d486b3..262e4f141 100644 --- a/packages/propel/src/pill/pill.tsx +++ b/packages/propel/src/pill/pill.tsx @@ -17,6 +17,13 @@ export enum EPillSize { XS = "xs", } +export enum ERadius { + SQUARE = "square", + CIRCLE = "circle", +} + +export type TRadius = ERadius.SQUARE | ERadius.CIRCLE; + export type TPillVariant = | EPillVariant.DEFAULT | EPillVariant.PRIMARY @@ -31,10 +38,11 @@ export interface PillProps extends React.HTMLAttributes { size?: TPillSize; className?: string; children: React.ReactNode; + radius?: TRadius; } const pillVariants = { - [EPillVariant.DEFAULT]: "bg-surface-2 text-secondary border border-subtle", + [EPillVariant.DEFAULT]: "bg-surface-2 text-secondary border border-subtle-1", [EPillVariant.PRIMARY]: "bg-accent-primary/10 text-accent-primary border border-accent-strong/20", [EPillVariant.SUCCESS]: "bg-green-50 text-green-700 border border-green-200", [EPillVariant.WARNING]: "bg-amber-50 text-amber-700 border border-amber-200", @@ -49,8 +57,20 @@ const pillSizes = { [EPillSize.LG]: "px-3 py-1.5 text-14", }; +const pillRadius = { + [ERadius.SQUARE]: "rounded", + [ERadius.CIRCLE]: "rounded-full", +}; + const Pill = React.forwardRef(function Pill( - { variant = EPillVariant.DEFAULT, size = EPillSize.MD, className, children, ...props }: PillProps, + { + variant = EPillVariant.DEFAULT, + size = EPillSize.MD, + radius = ERadius.CIRCLE, + className, + children, + ...props + }: PillProps, ref: React.ForwardedRef ) { return ( @@ -63,6 +83,8 @@ const Pill = React.forwardRef(function Pill( pillVariants[variant], // Size styles pillSizes[size], + // Radius styles + pillRadius[radius], className )} {...props} diff --git a/packages/propel/src/separator/separator.tsx b/packages/propel/src/separator/separator.tsx index 14534236a..7b6a8681e 100644 --- a/packages/propel/src/separator/separator.tsx +++ b/packages/propel/src/separator/separator.tsx @@ -11,7 +11,7 @@ interface SeparatorProps extends React.ComponentProps } const Separator = React.forwardRef(function Separator( - { orientation = "horizontal", ...props }: SeparatorProps, + { orientation = "horizontal", className, ...props }: SeparatorProps, ref: React.ForwardedRef> ) { return ( @@ -21,7 +21,7 @@ const Separator = React.forwardRef(function Separator( data-slot="separator" data-orientation={orientation} {...props} - className={cn("bg-subtle-1", "shrink-0", orientation === "horizontal" ? "h-px w-full" : "h-full w-px")} + className={cn("bg-subtle-1", "shrink-0", orientation === "horizontal" ? "h-px w-full" : "h-full w-px", className)} /> ); }); diff --git a/packages/ui/src/button/toggle-switch.tsx b/packages/ui/src/button/toggle-switch.tsx index f0deb9761..37651b9f6 100644 --- a/packages/ui/src/button/toggle-switch.tsx +++ b/packages/ui/src/button/toggle-switch.tsx @@ -20,7 +20,7 @@ function ToggleSwitch(props: IToggleSwitchProps) { disabled={disabled} onChange={onChange} className={cn( - "relative inline-flex flex-shrink-0 h-6 w-10 cursor-pointer rounded-full border-0 transition-colors duration-200 ease-in-out focus:outline-none", + "relative inline-flex flex-shrink-0 h-6 w-10 cursor-pointer rounded-full border border-subtle transition-colors duration-200 ease-in-out focus:outline-none bg-layer-1", { "h-4 w-7": size === "sm", "h-5 w-9": size === "md",