github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: updated page and component backgrounds

Browse Source
This commit is contained in:
Aaryan Khandelwal 2024-02-09 13:01:46 +05:30
parent 2e444c1426
commit 146d4e72a4
82 changed files with 200 additions and 207 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/editor/core/src/styles/editor.css
View File

@ -197,7 +197,7 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
th { th {
font-weight: bold; font-weight: bold;
text-align: left; text-align: left;
background-color: rgb(var(--color-primary-100)); background-color: var(--color-primary-90);
} }
td:hover { td:hover {

8
packages/editor/core/src/styles/table.css
View File

@ -43,7 +43,7 @@
.tableWrapper table th { .tableWrapper table th {
font-weight: bold; font-weight: bold;
text-align: left; text-align: left;
background-color: rgba(var(--color-primary-100)); background-color: var(--color-primary-90);
} }
.tableWrapper table th * { .tableWrapper table th * {
@ -112,7 +112,7 @@
} }
.tableWrapper .tableControls .rowsControlDiv { .tableWrapper .tableControls .rowsControlDiv {
background-color: rgba(var(--color-primary-100)); background-color: var(--color-primary-90);
border: 1px solid var(--color-neutral-70); border: 1px solid var(--color-neutral-70);
border-radius: 2px; border-radius: 2px;
background-size: 1.25rem; background-size: 1.25rem;
@ -127,7 +127,7 @@
} }
.tableWrapper .tableControls .columnsControlDiv { .tableWrapper .tableControls .columnsControlDiv {
background-color: rgba(var(--color-primary-100)); background-color: var(--color-primary-90);
border: 1px solid var(--color-neutral-70); border: 1px solid var(--color-neutral-70);
border-radius: 2px; border-radius: 2px;
background-size: 1.25rem; background-size: 1.25rem;
@ -166,7 +166,7 @@
.tableWrapper .tableControls .tableToolbox .toolboxItem:hover, .tableWrapper .tableControls .tableToolbox .toolboxItem:hover,
.tableWrapper .tableControls .tableColorPickerToolbox .toolboxItem:hover { .tableWrapper .tableControls .tableColorPickerToolbox .toolboxItem:hover {
background-color: rgba(var(--color-background-100), 0.5); background-color: var(--color-neutral-30);
} }
.tableWrapper .tableControls .tableToolbox .toolboxItem .iconContainer, .tableWrapper .tableControls .tableToolbox .toolboxItem .iconContainer,

2
packages/editor/core/src/ui/extensions/table/table-header/table-header.ts
View File

@ -33,7 +33,7 @@ export const TableHeader = Node.create<TableHeaderOptions>({
}, },
}, },
background: { background: {
default: "rgb(var(--color-primary-100))", default: "var(--color-primary-90)",
}, },
}; };
}, },

23
packages/editor/core/src/ui/extensions/table/table/table-view.tsx
View File

@ -224,7 +224,7 @@ function createColorPickerToolbox({
onSelectColor?: (color: string) => void; onSelectColor?: (color: string) => void;
}) { }) {
const items = { const items = {
Default: "rgb(var(--color-primary-100))", Default: "var(--color-primary-90)",
Orange: "#FFE5D1", Orange: "#FFE5D1",
Grey: "#F1F1F1", Grey: "#F1F1F1",
Yellow: "#FEF3C7", Yellow: "#FEF3C7",
@ -437,16 +437,19 @@ export class TableView implements NodeView {
} }
updateControls() { updateControls() {
const { hoveredTable: table, hoveredCell: cell } = Object.values(this.decorations).reduce((acc, curr) => { const { hoveredTable: table, hoveredCell: cell } = Object.values(this.decorations).reduce(
if (curr.spec.hoveredCell !== undefined) { (acc, curr) => {
acc["hoveredCell"] = curr.spec.hoveredCell; if (curr.spec.hoveredCell !== undefined) {
} acc["hoveredCell"] = curr.spec.hoveredCell;
}
if (curr.spec.hoveredTable !== undefined) { if (curr.spec.hoveredTable !== undefined) {
acc["hoveredTable"] = curr.spec.hoveredTable; acc["hoveredTable"] = curr.spec.hoveredTable;
} }
return acc; return acc;
}, {} as Record<string, HTMLElement>) as any; },
{} as Record<string, HTMLElement>
) as any;
if (table === undefined || cell === undefined) { if (table === undefined || cell === undefined) {
return this.root.classList.add("controls--disabled"); return this.root.classList.add("controls--disabled");

2
packages/editor/document-editor/src/ui/components/editor-header.tsx
View File

@ -83,7 +83,7 @@ export const EditorHeader = (props: IEditorHeader) => {
}`} }`}
> >
{isSubmitting !== "submitted" && isSubmitting !== "saved" && ( {isSubmitting !== "submitted" && isSubmitting !== "saved" && (
<RefreshCw className="h-4 w-4 stroke-custom-text-300" /> <RefreshCw className="h-4 w-4 stroke-neutral-text-medium" />
)} )}
<span className="text-sm text-neutral-text-medium"> <span className="text-sm text-neutral-text-medium">
{isSubmitting === "submitting" ? "Saving..." : "Saved"} {isSubmitting === "submitting" ? "Saving..." : "Saved"}

4
packages/editor/document-editor/src/ui/components/page-renderer.tsx
View File

@ -156,13 +156,13 @@ export const PageRenderer = (props: IPageRenderer) => {
{!readonly ? ( {!readonly ? (
<input <input
onChange={(e) => handlePageTitleChange(e.target.value)} onChange={(e) => handlePageTitleChange(e.target.value)}
className="-mt-2 w-full break-words border-none bg-custom-background pr-5 text-4xl font-bold outline-none" className="-mt-2 w-full break-words border-none pr-5 text-4xl font-bold outline-none bg-transparent"
value={pageTitle} value={pageTitle}
/> />
) : ( ) : (
<input <input
onChange={(e) => handlePageTitleChange(e.target.value)} onChange={(e) => handlePageTitleChange(e.target.value)}
className="-mt-2 w-full overflow-x-clip break-words border-none bg-custom-background pr-5 text-4xl font-bold outline-none" className="-mt-2 w-full overflow-x-clip break-words border-none pr-5 text-4xl font-bold outline-none"
value={pageTitle} value={pageTitle}
disabled disabled
/> />

8
packages/tailwind-config-custom/tailwind.config.js
View File

@ -310,14 +310,6 @@ export const theme = {
}, },
extend: { extend: {
keyframes: { keyframes: {
leftToaster: {
"0%": { left: "-20rem" },
"100%": { left: "0" },
},
rightToaster: {
"0%": { right: "-20rem" },
"100%": { right: "0" },
},
"bar-loader": { "bar-loader": {
from: { left: "-100%" }, from: { left: "-100%" },
to: { left: "100%" }, to: { left: "100%" },

8
packages/ui/src/progress/linear-progress-indicator.tsx
View File

@ -45,9 +45,13 @@ export const LinearProgressIndicator: React.FC<Props> = ({
})} })}
> >
{total === 0 ? ( {total === 0 ? (
<div className="flex h-full w-full gap-[1.5px] p-[2px] bg-custom-background-90 rounded-sm">{bars}</div> <div className="flex h-full w-full gap-[1.5px] p-[2px] bg-neutral-component-surface-medium rounded-sm">
{bars}
</div>
) : ( ) : (
<div className="flex h-full w-full gap-[1.5px] p-[2px] bg-custom-background-90 rounded-sm">{bars}</div> <div className="flex h-full w-full gap-[1.5px] p-[2px] bg-neutral-component-surface-medium rounded-sm">
{bars}
</div>
)} )}
</div> </div>
); );

2
space/components/accounts/sign-in-forms/email-form.tsx
View File

@ -105,7 +105,7 @@ export const EmailForm: React.FC<Props> = (props) => {
/> />
{value.length > 0 && ( {value.length > 0 && (
<XCircle <XCircle
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer" className="absolute right-3 h-5 w-5 stroke-neutral-text-subtle hover:cursor-pointer"
onClick={() => onChange("")} onClick={() => onChange("")}
/> />
)} )}

2
space/components/accounts/sign-in-forms/password.tsx
View File

@ -160,7 +160,7 @@ export const PasswordForm: React.FC<Props> = (props) => {
/> />
{value.length > 0 && ( {value.length > 0 && (
<XCircle <XCircle
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer" className="absolute right-3 h-5 w-5 stroke-neutral-text-subtle hover:cursor-pointer"
onClick={() => onChange("")} onClick={() => onChange("")}
/> />
)} )}

2
space/components/accounts/sign-in-forms/self-hosted-sign-in.tsx
View File

@ -102,7 +102,7 @@ export const SelfHostedSignInForm: React.FC<Props> = (props) => {
/> />
{value.length > 0 && ( {value.length > 0 && (
<XCircle <XCircle
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer" className="absolute right-3 h-5 w-5 stroke-neutral-text-subtle hover:cursor-pointer"
onClick={() => onChange("")} onClick={() => onChange("")}
/> />
)} )}

2
space/components/accounts/sign-in-forms/unique-code.tsx
View File

@ -187,7 +187,7 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
/> />
{value.length > 0 && ( {value.length > 0 && (
<XCircle <XCircle
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer" className="absolute right-3 h-5 w-5 stroke-neutral-text-subtle hover:cursor-pointer"
onClick={() => onChange("")} onClick={() => onChange("")}
/> />
)} )}

2
space/components/issues/peek-overview/issue-reaction.tsx
View File

@ -11,7 +11,7 @@ export const IssueReactions: React.FC = () => {
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<IssueVotes /> <IssueVotes />
</div> </div>
<div className="h-8 w-0.5 bg-custom-background-200" /> <div className="h-8 w-0.5" />
</> </>
)} )}
{projectStore?.deploySettings?.reactions && ( {projectStore?.deploySettings?.reactions && (

2
web/components/account/sign-in-forms/email.tsx
View File

@ -93,7 +93,7 @@ export const SignInEmailForm: React.FC<Props> = observer((props) => {
/> />
{value.length > 0 && ( {value.length > 0 && (
<XCircle <XCircle
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer" className="absolute right-3 h-5 w-5 stroke-neutral-text-subtle hover:cursor-pointer"
onClick={() => onChange("")} onClick={() => onChange("")}
/> />
)} )}

4
web/components/account/sign-in-forms/optional-set-password.tsx
View File

@ -131,12 +131,12 @@ export const SignInOptionalSetPasswordForm: React.FC<Props> = (props) => {
/> />
{showPassword ? ( {showPassword ? (
<EyeOff <EyeOff
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer" className="absolute right-3 h-5 w-5 stroke-neutral-text-subtle hover:cursor-pointer"
onClick={() => setShowPassword(false)} onClick={() => setShowPassword(false)}
/> />
) : ( ) : (
<Eye <Eye
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer" className="absolute right-3 h-5 w-5 stroke-neutral-text-subtle hover:cursor-pointer"
onClick={() => setShowPassword(true)} onClick={() => setShowPassword(true)}
/> />
)} )}

6
web/components/account/sign-in-forms/password.tsx
View File

@ -139,7 +139,7 @@ export const SignInPasswordForm: React.FC<Props> = observer((props) => {
/> />
{value.length > 0 && ( {value.length > 0 && (
<XCircle <XCircle
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer" className="absolute right-3 h-5 w-5 stroke-neutral-text-subtle hover:cursor-pointer"
onClick={() => { onClick={() => {
if (isSmtpConfigured) handleEmailClear(); if (isSmtpConfigured) handleEmailClear();
else onChange(""); else onChange("");
@ -170,12 +170,12 @@ export const SignInPasswordForm: React.FC<Props> = observer((props) => {
/> />
{showPassword ? ( {showPassword ? (
<EyeOff <EyeOff
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer" className="absolute right-3 h-5 w-5 stroke-neutral-text-subtle hover:cursor-pointer"
onClick={() => setShowPassword(false)} onClick={() => setShowPassword(false)}
/> />
) : ( ) : (
<Eye <Eye
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer" className="absolute right-3 h-5 w-5 stroke-neutral-text-subtle hover:cursor-pointer"
onClick={() => setShowPassword(true)} onClick={() => setShowPassword(true)}
/> />
)} )}

2
web/components/account/sign-in-forms/unique-code.tsx
View File

@ -154,7 +154,7 @@ export const SignInUniqueCodeForm: React.FC<Props> = (props) => {
/> />
{value.length > 0 && ( {value.length > 0 && (
<XCircle <XCircle
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer" className="absolute right-3 h-5 w-5 stroke-neutral-text-subtle hover:cursor-pointer"
onClick={handleEmailClear} onClick={handleEmailClear}
/> />
)} )}

2
web/components/account/sign-up-forms/email.tsx
View File

@ -93,7 +93,7 @@ export const SignUpEmailForm: React.FC<Props> = observer((props) => {
/> />
{value.length > 0 && ( {value.length > 0 && (
<XCircle <XCircle
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer" className="absolute right-3 h-5 w-5 stroke-neutral-text-subtle hover:cursor-pointer"
onClick={() => onChange("")} onClick={() => onChange("")}
/> />
)} )}

4
web/components/account/sign-up-forms/optional-set-password.tsx
View File

@ -135,12 +135,12 @@ export const SignUpOptionalSetPasswordForm: React.FC<Props> = (props) => {
/> />
{showPassword ? ( {showPassword ? (
<EyeOff <EyeOff
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer" className="absolute right-3 h-5 w-5 stroke-neutral-text-subtle hover:cursor-pointer"
onClick={() => setShowPassword(false)} onClick={() => setShowPassword(false)}
/> />
) : ( ) : (
<Eye <Eye
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer" className="absolute right-3 h-5 w-5 stroke-neutral-text-subtle hover:cursor-pointer"
onClick={() => setShowPassword(true)} onClick={() => setShowPassword(true)}
/> />
)} )}

6
web/components/account/sign-up-forms/password.tsx
View File

@ -98,7 +98,7 @@ export const SignUpPasswordForm: React.FC<Props> = observer((props) => {
/> />
{value.length > 0 && ( {value.length > 0 && (
<XCircle <XCircle
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer" className="absolute right-3 h-5 w-5 stroke-neutral-text-subtle hover:cursor-pointer"
onClick={() => onChange("")} onClick={() => onChange("")}
/> />
)} )}
@ -126,12 +126,12 @@ export const SignUpPasswordForm: React.FC<Props> = observer((props) => {
/> />
{showPassword ? ( {showPassword ? (
<EyeOff <EyeOff
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer" className="absolute right-3 h-5 w-5 stroke-neutral-text-subtle hover:cursor-pointer"
onClick={() => setShowPassword(false)} onClick={() => setShowPassword(false)}
/> />
) : ( ) : (
<Eye <Eye
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer" className="absolute right-3 h-5 w-5 stroke-neutral-text-subtle hover:cursor-pointer"
onClick={() => setShowPassword(true)} onClick={() => setShowPassword(true)}
/> />
)} )}

2
web/components/account/sign-up-forms/unique-code.tsx
View File

@ -155,7 +155,7 @@ export const SignUpUniqueCodeForm: React.FC<Props> = (props) => {
/> />
{value.length > 0 && ( {value.length > 0 && (
<XCircle <XCircle
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer" className="absolute right-3 h-5 w-5 stroke-neutral-text-subtle hover:cursor-pointer"
onClick={handleEmailClear} onClick={handleEmailClear}
/> />
)} )}

5
web/components/analytics/scope-and-demand/year-wise-issues.tsx
View File

@ -19,7 +19,7 @@ export const AnalyticsYearWiseIssues: React.FC<Props> = ({ defaultAnalytics }) =
data={[ data={[
{ {
id: "issues_closed", id: "issues_closed",
color: "rgb(var(--color-primary-100))", color: "var(--color-primary-90)",
data: Object.entries(MONTHS_LIST).map(([index, month]) => ({ data: Object.entries(MONTHS_LIST).map(([index, month]) => ({
x: month.shortTitle, x: month.shortTitle,
y: y:
@ -41,9 +41,6 @@ export const AnalyticsYearWiseIssues: React.FC<Props> = ({ defaultAnalytics }) =
{datum.slice.points[0].data.xFormatted} {datum.slice.points[0].data.xFormatted}
</div> </div>
)} )}
theme={{
background: "var(--color-neutral-30)",
}}
enableArea enableArea
/> />
) : ( ) : (

2
web/components/core/sidebar/progress-chart.tsx
View File

@ -140,7 +140,7 @@ const ProgressChart: React.FC<Props> = ({ distribution, startDate, endDate, tota
axis: { axis: {
domain: { domain: {
line: { line: {
stroke: "rgb(var(--color-border))", stroke: "var(--color-neutral-70)",
strokeWidth: 1, strokeWidth: 1,
}, },
}, },

2
web/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx
View File

@ -7,7 +7,7 @@ export const SidebarHamburgerToggle: FC = observer(() => {
const { theme: themStore } = useApplication(); const { theme: themStore } = useApplication();
return ( return (
<div <div
className="w-7 h-7 rounded flex justify-center items-center bg-neutral-component-surface-dark transition-all hover:bg-custom-background-90 cursor-pointer group md:hidden" className="w-7 h-7 rounded flex justify-center items-center bg-neutral-component-surface-dark transition-all hover:bg-neutral-component-surface-medium cursor-pointer group md:hidden"
onClick={() => themStore.toggleSidebar()} onClick={() => themStore.toggleSidebar()}
> >
<Menu size={14} className="text-neutral-text-medium group-hover:text-neutral-text-strong transition-all" /> <Menu size={14} className="text-neutral-text-medium group-hover:text-neutral-text-strong transition-all" />

2
web/components/cycles/cycles-list-item.tsx
View File

@ -159,7 +159,7 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
projectId={projectId} projectId={projectId}
/> />
<Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycleDetails.id}`}> <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycleDetails.id}`}>
<div className="group flex flex-col md:flex-row w-full items-center justify-between gap-5 border-b border-neutral-border-subtle bg-custom-background-100 px-5 py-6 text-sm hover:bg-custom-background-90"> <div className="group flex flex-col md:flex-row w-full items-center justify-between gap-5 border-b border-neutral-border-subtle bg-neutral-component-surface-light px-5 py-6 text-sm hover:bg-neutral-component-surface-medium">
<div className="relative w-full flex items-center justify-between gap-3 overflow-hidden"> <div className="relative w-full flex items-center justify-between gap-3 overflow-hidden">
<div className="relative w-full flex items-center gap-3 overflow-hidden"> <div className="relative w-full flex items-center gap-3 overflow-hidden">
<div className="flex-shrink-0"> <div className="flex-shrink-0">

2
web/components/dashboard/widgets/assigned-issues.tsx
View File

@ -71,7 +71,7 @@ export const AssignedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
if (!widgetDetails || !widgetStats) return <WidgetLoader widgetKey={WIDGET_KEY} />; if (!widgetDetails || !widgetStats) return <WidgetLoader widgetKey={WIDGET_KEY} />;
return ( return (
<div className="bg-custom-background-100 rounded-xl border-[0.5px] border-neutral-border-medium w-full hover:shadow-custom-shadow-4xl duration-300 flex flex-col min-h-96"> <div className="bg-neutral-component-surface-light rounded-xl border-[0.5px] border-neutral-border-medium w-full hover:shadow-custom-shadow-4xl duration-300 flex flex-col min-h-96">
<div className="flex items-center justify-between gap-2 p-6 pl-7"> <div className="flex items-center justify-between gap-2 p-6 pl-7">
<Link <Link
href={`/${workspaceSlug}/workspace-views/assigned/${filterParams}`} href={`/${workspaceSlug}/workspace-views/assigned/${filterParams}`}

2
web/components/dashboard/widgets/created-issues.tsx
View File

@ -68,7 +68,7 @@ export const CreatedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
if (!widgetDetails || !widgetStats) return <WidgetLoader widgetKey={WIDGET_KEY} />; if (!widgetDetails || !widgetStats) return <WidgetLoader widgetKey={WIDGET_KEY} />;
return ( return (
<div className="bg-custom-background-100 rounded-xl border-[0.5px] border-neutral-border-medium w-full hover:shadow-custom-shadow-4xl duration-300 flex flex-col min-h-96"> <div className="bg-neutral-component-surface-light rounded-xl border-[0.5px] border-neutral-border-medium w-full hover:shadow-custom-shadow-4xl duration-300 flex flex-col min-h-96">
<div className="flex items-center justify-between gap-2 p-6 pl-7"> <div className="flex items-center justify-between gap-2 p-6 pl-7">
<Link <Link
href={`/${workspaceSlug}/workspace-views/created/${filterParams}`} href={`/${workspaceSlug}/workspace-views/created/${filterParams}`}

4
web/components/dashboard/widgets/issue-panels/tabs-list.tsx
View File

@ -28,7 +28,7 @@ export const TabsList: React.FC<Props> = observer((props) => {
> >
<div <div
className={cn( className={cn(
"absolute top-1/2 left-[1px] bg-custom-background-100 rounded-[3px] transition-all duration-500 ease-in-out", "absolute top-1/2 left-[1px] bg-neutral-component-surface-light rounded-[3px] transition-all duration-500 ease-in-out",
{ {
// right shadow // right shadow
"shadow-[2px_0_8px_rgba(167,169,174,0.15)]": selectedTabIndex !== tabsList.length - 1, "shadow-[2px_0_8px_rgba(167,169,174,0.15)]": selectedTabIndex !== tabsList.length - 1,
@ -48,7 +48,7 @@ export const TabsList: React.FC<Props> = observer((props) => {
className={cn( className={cn(
"relative z-[1] font-semibold text-xs rounded-[3px] py-1.5 text-neutral-text-subtle focus:outline-none transition duration-500", "relative z-[1] font-semibold text-xs rounded-[3px] py-1.5 text-neutral-text-subtle focus:outline-none transition duration-500",
{ {
"text-neutral-text-strong bg-custom-background-100": selectedTab === tab.key, "text-neutral-text-strong bg-neutral-component-surface-light": selectedTab === tab.key,
"hover:text-neutral-text-medium": selectedTab !== tab.key, "hover:text-neutral-text-medium": selectedTab !== tab.key,
} }
)} )}

2
web/components/dashboard/widgets/issues-by-priority.tsx
View File

@ -132,7 +132,7 @@ export const IssuesByPriorityWidget: React.FC<WidgetProps> = observer((props) =>
}; };
return ( return (
<div className="bg-custom-background-100 rounded-xl border-[0.5px] border-neutral-border-medium w-full py-6 hover:shadow-custom-shadow-4xl duration-300 overflow-hidden min-h-96 flex flex-col"> <div className="bg-neutral-component-surface-light rounded-xl border-[0.5px] border-neutral-border-medium w-full py-6 hover:shadow-custom-shadow-4xl duration-300 overflow-hidden min-h-96 flex flex-col">
<div className="flex items-center justify-between gap-2 pl-7 pr-6"> <div className="flex items-center justify-between gap-2 pl-7 pr-6">
<Link <Link
href={`/${workspaceSlug}/workspace-views/assigned`} href={`/${workspaceSlug}/workspace-views/assigned`}

2
web/components/dashboard/widgets/issues-by-state-group.tsx
View File

@ -130,7 +130,7 @@ export const IssuesByStateGroupWidget: React.FC<WidgetProps> = observer((props)
}; };
return ( return (
<div className="bg-custom-background-100 rounded-xl border-[0.5px] border-neutral-border-medium w-full py-6 hover:shadow-custom-shadow-4xl duration-300 overflow-hidden min-h-96 flex flex-col"> <div className="bg-neutral-component-surface-light rounded-xl border-[0.5px] border-neutral-border-medium w-full py-6 hover:shadow-custom-shadow-4xl duration-300 overflow-hidden min-h-96 flex flex-col">
<div className="flex items-center justify-between gap-2 pl-7 pr-6"> <div className="flex items-center justify-between gap-2 pl-7 pr-6">
<Link <Link
href={`/${workspaceSlug}/workspace-views/assigned`} href={`/${workspaceSlug}/workspace-views/assigned`}

2
web/components/dashboard/widgets/overview-stats.tsx
View File

@ -64,7 +64,7 @@ export const OverviewStatsWidget: React.FC<WidgetProps> = observer((props) => {
return ( return (
<div <div
className="bg-custom-background-100 rounded-xl border-[0.5px] border-neutral-border-medium w-full grid lg:grid-cols-4 md:grid-cols-2 sm:grid-cols-2 grid-cols-2 p-0.5 hover:shadow-custom-shadow-4xl duration-300 className="bg-neutral-component-surface-light rounded-xl border-[0.5px] border-neutral-border-medium w-full grid lg:grid-cols-4 md:grid-cols-2 sm:grid-cols-2 grid-cols-2 p-0.5 hover:shadow-custom-shadow-4xl duration-300
[&>div>a>div]:border-r [&>div>a>div]:border-r
[&>div:last-child>a>div]:border-0 [&>div:last-child>a>div]:border-0
[&>div>a>div]:border-neutral-border-medium [&>div>a>div]:border-neutral-border-medium

4
web/components/dropdowns/member/workspace-member.tsx
View File

@ -184,12 +184,12 @@ export const WorkspaceMemberDropdown: React.FC<MemberDropdownProps> = observer((
{isOpen && ( {isOpen && (
<Combobox.Options className="fixed z-10" static> <Combobox.Options className="fixed z-10" static>
<div <div
className="my-1 w-48 rounded border-[0.5px] border-neutral-border-medium bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none" className="my-1 w-48 rounded border-[0.5px] border-neutral-border-medium bg-neutral-component-surface-light px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none"
ref={setPopperElement} ref={setPopperElement}
style={styles.popper} style={styles.popper}
{...attributes.popper} {...attributes.popper}
> >
<div className="flex items-center gap-1.5 rounded border border-neutral-border-subtle bg-custom-background-90 px-2"> <div className="flex items-center gap-1.5 rounded border border-neutral-border-subtle bg-neutral-component-surface-medium px-2">
<Search className="h-3.5 w-3.5 text-neutral-text-subtle" strokeWidth={1.5} /> <Search className="h-3.5 w-3.5 text-neutral-text-subtle" strokeWidth={1.5} />
<Combobox.Input <Combobox.Input
className="w-full bg-transparent py-1 text-xs text-neutral-text-medium placeholder:text-neutral-text-subtle focus:outline-none" className="w-full bg-transparent py-1 text-xs text-neutral-text-medium placeholder:text-neutral-text-subtle focus:outline-none"

2
web/components/estimates/estimates-list.tsx
View File

@ -97,7 +97,7 @@ export const EstimatesList: React.FC = observer(() => {
{projectEstimates ? ( {projectEstimates ? (
projectEstimates.length > 0 ? ( projectEstimates.length > 0 ? (
<section className="h-full overflow-y-auto bg-neutral-component-surface-light"> <section className="h-full overflow-y-auto">
{projectEstimates.map((estimate) => ( {projectEstimates.map((estimate) => (
<EstimateListItem <EstimateListItem
key={estimate.id} key={estimate.id}

2
web/components/headers/projects.tsx
View File

@ -38,7 +38,7 @@ export const ProjectsHeader = observer(() => {
</div> </div>
<div className="flex w-full justify-end items-center gap-3"> <div className="flex w-full justify-end items-center gap-3">
{workspaceProjectIds && workspaceProjectIds?.length > 0 && ( {workspaceProjectIds && workspaceProjectIds?.length > 0 && (
<div className=" flex items-center justify-start gap-1 rounded-md border border-neutral-border-medium bg-custom-background-100 px-2.5 py-1.5 text-neutral-text-subtle"> <div className=" flex items-center justify-start gap-1 rounded-md border border-neutral-border-medium bg-neutral-component-surface-light px-2.5 py-1.5 text-neutral-text-subtle">
<Search className="h-3.5" /> <Search className="h-3.5" />
<input <input
className="border-none w-full bg-transparent text-sm focus:outline-none" className="border-none w-full bg-transparent text-sm focus:outline-none"

8
web/components/headers/user-profile.tsx
View File

@ -47,15 +47,15 @@ export const UserProfileHeader: FC<TUserProfileHeader> = observer((props) => {
<div className="flex gap-4 md:hidden"> <div className="flex gap-4 md:hidden">
<CustomMenu <CustomMenu
maxHeight={"md"} maxHeight={"md"}
className="flex flex-grow justify-center text-custom-text-200 text-sm" className="flex flex-grow justify-center text-neutral-text-medium text-sm"
placement="bottom-start" placement="bottom-start"
customButton={ customButton={
<div className="flex gap-2 items-center px-2 py-1.5 border border-custom-border-400 rounded-md"> <div className="flex gap-2 items-center px-2 py-1.5 border border-custom-border-400 rounded-md">
<span className="flex flex-grow justify-center text-custom-text-200 text-sm">{type}</span> <span className="flex flex-grow justify-center text-neutral-text-medium text-sm">{type}</span>
<ChevronDown className="w-4 h-4 text-custom-text-400" /> <ChevronDown className="w-4 h-4 text-custom-text-400" />
</div> </div>
} }
customButtonClassName="flex flex-grow justify-center text-custom-text-200 text-sm" customButtonClassName="flex flex-grow justify-center text-neutral-text-medium text-sm"
closeOnSelect closeOnSelect
> >
<></> <></>
@ -81,7 +81,7 @@ export const UserProfileHeader: FC<TUserProfileHeader> = observer((props) => {
<PanelRight <PanelRight
className={cn( className={cn(
"w-4 h-4 block md:hidden", "w-4 h-4 block md:hidden",
!themStore.profileSidebarCollapsed ? "text-[#3E63DD]" : "text-custom-text-200" !themStore.profileSidebarCollapsed ? "text-[#3E63DD]" : "text-neutral-text-medium"
)} )}
/> />
</button> </button>

6
web/components/instance/setup-form/sign-in-form.tsx
View File

@ -95,7 +95,7 @@ export const InstanceSetupSignInForm: FC<IInstanceSetupEmailForm> = (props) => {
/> />
{value.length > 0 && ( {value.length > 0 && (
<XCircle <XCircle
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer" className="absolute right-3 h-5 w-5 stroke-neutral-text-subtle hover:cursor-pointer"
onClick={() => setValue("email", "")} onClick={() => setValue("email", "")}
/> />
)} )}
@ -120,12 +120,12 @@ export const InstanceSetupSignInForm: FC<IInstanceSetupEmailForm> = (props) => {
/> />
{showPassword ? ( {showPassword ? (
<EyeOff <EyeOff
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer" className="absolute right-3 h-5 w-5 stroke-neutral-text-subtle hover:cursor-pointer"
onClick={() => setShowPassword(false)} onClick={() => setShowPassword(false)}
/> />
) : ( ) : (
<Eye <Eye
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer" className="absolute right-3 h-5 w-5 stroke-neutral-text-subtle hover:cursor-pointer"
onClick={() => setShowPassword(true)} onClick={() => setShowPassword(true)}
/> />
)} )}

2
web/components/instance/sidebar-dropdown.tsx
View File

@ -143,7 +143,7 @@ export const InstanceSidebarDropdown = observer(() => {
<div className="p-2 pb-0"> <div className="p-2 pb-0">
<Menu.Item as="button" type="button" className="w-full"> <Menu.Item as="button" type="button" className="w-full">
<Link href={`/${redirectWorkspaceSlug}`}> <Link href={`/${redirectWorkspaceSlug}`}>
<span className="flex w-full items-center justify-center rounded bg-custom-primary-100/20 px-2 py-1 text-sm font-medium text-primary-text-subtle hover:bg-custom-primary-100/30 hover:text-custom-primary-200"> <span className="flex w-full items-center justify-center rounded bg-primary-component-surface-light px-2 py-1 text-sm font-medium text-primary-text-subtle hover:bg-primary-component-surface-medium">
Exit God Mode Exit God Mode
</span> </span>
</Link> </Link>

2
web/components/instance/sidebar-menu.tsx
View File

@ -59,7 +59,7 @@ export const InstanceAdminSidebarMenu = () => {
<div <div
className={`group flex w-full items-center gap-3 rounded-md px-3 py-2 outline-none ${ className={`group flex w-full items-center gap-3 rounded-md px-3 py-2 outline-none ${
isActive isActive
? "bg-custom-primary-100/10 text-primary-text-subtle" ? "bg-primary-component-surface-light text-primary-text-subtle"
: "text-sidebar-neutral-text-medium hover:bg-sidebar-neutral-component-surface-dark focus:bg-sidebar-neutral-component-surface-dark" : "text-sidebar-neutral-text-medium hover:bg-sidebar-neutral-component-surface-dark focus:bg-sidebar-neutral-component-surface-dark"
} ${sidebarCollapsed ? "justify-center" : ""}`} } ${sidebarCollapsed ? "justify-center" : ""}`}
> >

2
web/components/issues/issue-detail/relation-select.tsx
View File

@ -125,7 +125,7 @@ export const IssueRelationSelect: React.FC<TIssueRelationSelect> = observer((pro
return ( return (
<div <div
key={relationIssueId} key={relationIssueId}
className={`group flex items-center gap-1 rounded px-1.5 pt-1 pb-1 leading-3 hover:bg-custom-background-90 ${issueRelationObject[relationKey].className}`} className={`group flex items-center gap-1 rounded px-1.5 pt-1 pb-1 leading-3 hover:bg-neutral-component-surface-medium ${issueRelationObject[relationKey].className}`}
> >
<Tooltip tooltipHeading="Title" tooltipContent={currentIssue.name}> <Tooltip tooltipHeading="Title" tooltipContent={currentIssue.name}>
<Link <Link

2
web/components/issues/issue-layouts/calendar/base-calendar-root.tsx
View File

@ -91,7 +91,7 @@ export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => {
return ( return (
<> <>
<div className="h-full w-full overflow-hidden bg-neutral-component-surface-light pt-4"> <div className="h-full w-full overflow-hidden pt-4">
<DragDropContext onDragEnd={onDragEnd}> <DragDropContext onDragEnd={onDragEnd}>
<CalendarChart <CalendarChart
issuesFilterStore={issuesFilterStore} issuesFilterStore={issuesFilterStore}

14
web/components/issues/issue-layouts/calendar/day-tile.tsx
View File

@ -54,7 +54,7 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
const totalIssues = issueIdList?.length ?? 0; const totalIssues = issueIdList?.length ?? 0;
return ( return (
<> <>
<div className="group relative flex h-full w-full flex-col bg-neutral-component-surface-medium"> <div className="group relative flex h-full w-full flex-col">
{/* header */} {/* header */}
<div <div
className={`flex-shrink-0 px-2 py-1 text-right text-xs ${ className={`flex-shrink-0 px-2 py-1 text-right text-xs ${
@ -63,11 +63,7 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
? "font-medium" ? "font-medium"
: "text-neutral-text-medium" : "text-neutral-text-medium"
: "font-medium" // if week layout, highlight all days : "font-medium" // if week layout, highlight all days
} ${ } ${[0, 6].includes(date.date.getDay()) ? "bg-neutral-component-surface-light" : ""}`}
date.date.getDay() === 0 || date.date.getDay() === 6
? "bg-neutral-component-surface-medium"
: "bg-neutral-component-surface-light"
}`}
> >
{date.date.getDate() === 1 && MONTHS_LIST[date.date.getMonth() + 1].shortTitle + " "} {date.date.getDate() === 1 && MONTHS_LIST[date.date.getMonth() + 1].shortTitle + " "}
{date.date.getDate()} {date.date.getDate()}
@ -79,9 +75,9 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
{(provided, snapshot) => ( {(provided, snapshot) => (
<div <div
className={`h-full w-full select-none overflow-y-auto ${ className={`h-full w-full select-none overflow-y-auto ${
snapshot.isDraggingOver || date.date.getDay() === 0 || date.date.getDay() === 6 snapshot.isDraggingOver || [0, 6].includes(date.date.getDay())
? "bg-neutral-component-surface-medium" ? "bg-neutral-component-surface-light"
: "bg-neutral-component-surface-light" : ""
} ${calendarLayout === "month" ? "min-h-[9rem]" : ""}`} } ${calendarLayout === "month" ? "min-h-[9rem]" : ""}`}
{...provided.droppableProps} {...provided.droppableProps}
ref={provided.innerRef} ref={provided.innerRef}

7
web/components/issues/issue-layouts/calendar/issue-blocks.tsx
View File

@ -89,10 +89,13 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
className={cn( className={cn(
"group/calendar-block flex h-8 w-full items-center justify-between gap-1.5 rounded border-[0.5px] border-neutral-border-medium hover:border-neutral-border-strong px-1 py-1.5 ", "group/calendar-block flex h-8 w-full items-center justify-between gap-1.5 rounded border-[0.5px] border-neutral-border-medium hover:border-neutral-border-strong px-1 py-1.5 ",
{ {
"bg-custom-background-90 shadow-custom-shadow-rg border-custom-primary-100": "bg-neutral-component-surface-medium shadow-custom-shadow-rg border-custom-primary-100":
snapshot.isDragging, snapshot.isDragging,
}, },
{ "bg-custom-background-100 hover:bg-custom-background-90": !snapshot.isDragging }, {
"bg-neutral-component-surface-light hover:bg-neutral-component-surface-medium":
!snapshot.isDragging,
},
{ {
"border border-custom-primary-70 hover:border-custom-primary-70": "border border-custom-primary-70 hover:border-custom-primary-70":
peekIssue?.issueId === issue.id, peekIssue?.issueId === issue.id,

4
web/components/issues/issue-layouts/calendar/week-header.tsx
View File

@ -21,10 +21,10 @@ export const CalendarWeekHeader: React.FC<Props> = observer((props) => {
<div className="absolute h-[1.5px] w-3/4 animate-[bar-loader_2s_linear_infinite] bg-custom-primary-100" /> <div className="absolute h-[1.5px] w-3/4 animate-[bar-loader_2s_linear_infinite] bg-custom-primary-100" />
)} )}
{Object.values(DAYS_LIST).map((day) => { {Object.values(DAYS_LIST).map((day) => {
if (!showWeekends && (day.shortTitle === "Sat" || day.shortTitle === "Sun")) return null; if (!showWeekends && ["Sat", "Sun"].includes(day.shortTitle)) return null;
return ( return (
<div key={day.shortTitle} className="flex h-11 items-center bg-neutral-component-surface-medium px-4"> <div key={day.shortTitle} className="flex h-11 items-center bg-neutral-component-surface-light px-4">
{day.shortTitle} {day.shortTitle}
</div> </div>
); );

6
web/components/issues/issue-layouts/kanban/base-kanban-root.tsx
View File

@ -240,13 +240,13 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
/> />
{showLoader && issues?.loader === "init-loader" && ( {showLoader && issues?.loader === "init-loader" && (
<div className="fixed right-2 top-16 z-30 flex h-10 w-10 items-center justify-center rounded bg-neutral-component-surface-dark shadow-custom-shadow-sm"> <div className="fixed right-2 top-16 z-30 flex h-10 w-10 items-center justify-center bg-neutral-component-surface-dark rounded shadow-custom-shadow-sm">
<Spinner className="h-5 w-5" /> <Spinner className="h-5 w-5" />
</div> </div>
)} )}
<div className="horizontal-scroll-enable relative h-full w-full overflow-auto bg-custom-background-90"> <div className="horizontal-scroll-enable relative h-full w-full overflow-auto">
<div className="relative h-max w-max min-w-full bg-custom-background-90 px-2"> <div className="relative h-max w-max min-w-full px-2">
<DragDropContext onDragStart={onDragStart} onDragEnd={onDragEnd}> <DragDropContext onDragStart={onDragStart} onDragEnd={onDragEnd}>
{/* drag and delete component */} {/* drag and delete component */}
<div <div

4
web/components/issues/issue-layouts/kanban/block.tsx
View File

@ -130,11 +130,11 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = memo((props) => {
ref={provided.innerRef} ref={provided.innerRef}
> >
{issue.tempId !== undefined && ( {issue.tempId !== undefined && (
<div className="absolute left-0 top-0 z-[99999] h-full w-full animate-pulse bg-custom-background-100/20" /> <div className="absolute left-0 top-0 z-[99999] h-full w-full animate-pulse bg-neutral-component-surface-light/20" />
)} )}
<div <div
className={cn( className={cn(
"space-y-2 rounded border-[0.5px] border-neutral-border-medium bg-custom-background-100 px-3 py-2 text-sm transition-all hover:border-neutral-border-strong", "space-y-2 rounded border-[0.5px] border-neutral-border-medium bg-neutral-component-surface-light px-3 py-2 text-sm transition-all hover:border-neutral-border-strong",
{ "hover:cursor-grab": !isDragDisabled }, { "hover:cursor-grab": !isDragDisabled },
{ "border-custom-primary-100": snapshot.isDragging }, { "border-custom-primary-100": snapshot.isDragging },
{ "border border-custom-primary-70 hover:border-custom-primary-70": peekIssueId === issue.id } { "border border-custom-primary-70 hover:border-custom-primary-70": peekIssueId === issue.id }

2
web/components/issues/issue-layouts/list/block.tsx
View File

@ -51,7 +51,7 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
<> <>
<div <div
className={cn( className={cn(
"relative flex items-center gap-3 bg-custom-background-100 p-3 text-sm border border-transparent border-b-custom-border-200", "relative flex items-center gap-3 bg-neutral-component-surface-light p-3 text-sm border border-transparent border-b-custom-border-200",
{ {
"border border-custom-primary-70 hover:border-custom-primary-70": "border border-custom-primary-70 hover:border-custom-primary-70":
peekIssue && peekIssue.issueId === issue.id, peekIssue && peekIssue.issueId === issue.id,

2
web/components/issues/issue-layouts/spreadsheet/issue-column.tsx
View File

@ -38,7 +38,7 @@ export const IssueColumn = observer((props: Props) => {
> >
<td <td
tabIndex={0} tabIndex={0}
className="h-11 w-full min-w-[8rem] bg-custom-background-100 text-sm after:absolute after:w-full after:bottom-[-1px] after:border after:border-neutral-border-subtle border-r-[1px] border-neutral-border-subtle focus:border-custom-primary-70" className="h-11 w-full min-w-[8rem] bg-neutral-component-surface-light text-sm after:absolute after:w-full after:bottom-[-1px] after:border after:border-neutral-border-subtle border-r-[1px] border-neutral-border-subtle focus:border-custom-primary-70"
ref={tableCellRef} ref={tableCellRef}
> >
<Column <Column

2
web/components/issues/issue-layouts/spreadsheet/issue-row.tsx
View File

@ -106,7 +106,7 @@ export const SpreadsheetIssueRow = observer((props: Props) => {
{/* first column/ issue name and key column */} {/* first column/ issue name and key column */}
<td <td
className={cn( className={cn(
"sticky group left-0 h-11 w-[28rem] flex items-center bg-custom-background-100 text-sm after:absolute border-r-[0.5px] border-neutral-border-medium focus:border-custom-primary-70", "sticky group left-0 h-11 w-[28rem] flex items-center bg-neutral-component-surface-light text-sm after:absolute border-r-[0.5px] border-neutral-border-medium focus:border-custom-primary-70",
{ {
"border-b-[0.5px]": peekIssue?.issueId !== issueDetail.id, "border-b-[0.5px]": peekIssue?.issueId !== issueDetail.id,
} }

2
web/components/issues/issue-layouts/spreadsheet/spreadsheet-header-column.tsx
View File

@ -28,7 +28,7 @@ export const SpreadsheetHeaderColumn = observer((props: Props) => {
shouldRenderProperty={shouldRenderProperty} shouldRenderProperty={shouldRenderProperty}
> >
<th <th
className="h-11 w-full min-w-[8rem] items-center bg-custom-background-90 text-sm font-medium px-4 py-1 border border-b-0 border-t-0 border-neutral-border-subtle focus:border-custom-primary-70" className="h-11 w-full min-w-[8rem] items-center bg-neutral-component-surface-medium text-sm font-medium px-4 py-1 border border-b-0 border-t-0 border-neutral-border-subtle focus:border-custom-primary-70"
ref={tableHeaderCellRef} ref={tableHeaderCellRef}
tabIndex={0} tabIndex={0}
> >

2
web/components/issues/issue-layouts/spreadsheet/spreadsheet-header.tsx
View File

@ -22,7 +22,7 @@ export const SpreadsheetHeader = (props: Props) => {
<thead className="sticky top-0 left-0 z-[1] border-b-[0.5px] border-neutral-border-subtle"> <thead className="sticky top-0 left-0 z-[1] border-b-[0.5px] border-neutral-border-subtle">
<tr> <tr>
<th <th
className="sticky left-0 z-[1] h-11 w-[28rem] flex items-center bg-custom-background-90 text-sm font-medium before:absolute before:h-full before:right-0 before:border-[0.5px] before:border-neutral-border-subtle" className="sticky left-0 z-[1] h-11 w-[28rem] flex items-center bg-neutral-component-surface-light text-sm font-medium before:absolute before:h-full before:right-0 before:border-[0.5px] before:border-neutral-border-subtle"
tabIndex={-1} tabIndex={-1}
> >
<WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="key"> <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="key">

2
web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
View File

@ -99,7 +99,7 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
); );
return ( return (
<div className="relative flex flex-col h-full w-full overflow-x-hidden whitespace-nowrap rounded-lg bg-custom-background-200 text-neutral-text-medium"> <div className="relative flex flex-col h-full w-full overflow-x-hidden whitespace-nowrap rounded-lg text-neutral-text-medium">
<div ref={portalRef} className="spreadsheet-menu-portal" /> <div ref={portalRef} className="spreadsheet-menu-portal" />
<div ref={containerRef} className="horizontal-scroll-enable h-full w-full"> <div ref={containerRef} className="horizontal-scroll-enable h-full w-full">
<SpreadsheetTable <SpreadsheetTable

2
web/components/issues/issue-update-status.tsx
View File

@ -27,7 +27,7 @@ export const IssueUpdateStatus: React.FC<Props> = (props) => {
}`} }`}
> >
{isSubmitting !== "submitted" && isSubmitting !== "saved" && ( {isSubmitting !== "submitted" && isSubmitting !== "saved" && (
<RefreshCw className="h-4 w-4 stroke-custom-text-300" /> <RefreshCw className="h-4 w-4 stroke-neutral-text-medium" />
)} )}
<span className="text-sm text-neutral-text-medium"> <span className="text-sm text-neutral-text-medium">
{isSubmitting === "submitting" ? "Saving..." : "Saved"} {isSubmitting === "submitting" ? "Saving..." : "Saved"}

4
web/components/labels/label-block/drag-handle.tsx
View File

@ -17,8 +17,8 @@ export const DragHandle = (props: IDragHandle) => {
}`} }`}
{...dragHandleProps} {...dragHandleProps}
> >
<MoreVertical className="h-3.5 w-3.5 stroke-custom-text-400" /> <MoreVertical className="h-3.5 w-3.5 stroke-neutral-text-subtle" />
<MoreVertical className="-ml-5 h-3.5 w-3.5 stroke-custom-text-400" /> <MoreVertical className="-ml-5 h-3.5 w-3.5 stroke-neutral-text-subtle" />
</button> </button>
); );
}; };

2
web/components/page-views/workspace-dashboard.tsx
View File

@ -64,7 +64,7 @@ export const WorkspaceDashboardView = observer(() => {
{joinedProjectIds.length > 0 ? ( {joinedProjectIds.length > 0 ? (
<> <>
<IssuePeekOverview /> <IssuePeekOverview />
<div className="space-y-7 p-7 bg-custom-background-90 h-full w-full flex flex-col overflow-y-auto"> <div className="space-y-7 p-7 bg-neutral-page-surface-default h-full w-full flex flex-col overflow-y-auto">
{currentUser && <UserGreetingsView user={currentUser} />} {currentUser && <UserGreetingsView user={currentUser} />}
{currentUser && !currentUser.is_tour_completed && ( {currentUser && !currentUser.is_tour_completed && (
<div className="fixed left-0 top-0 z-20 grid h-full w-full place-items-center bg-custom-backdrop bg-opacity-50 transition-opacity"> <div className="fixed left-0 top-0 z-20 grid h-full w-full place-items-center bg-custom-backdrop bg-opacity-50 transition-opacity">

2
web/components/pages/pages-list/recent-pages-list.tsx
View File

@ -52,7 +52,7 @@ export const RecentPagesList: FC = observer(() => {
return ( return (
<div key={key}> <div key={key}>
<h2 className="sticky top-0 z-[1] mb-2 bg-neutral-component-surface-light text-xl font-semibold capitalize"> <h2 className="sticky top-0 z-[1] mb-2 text-xl font-semibold capitalize">
{replaceUnderscoreIfSnakeCase(key)} {replaceUnderscoreIfSnakeCase(key)}
</h2> </h2>
<PagesListView pageIds={recentProjectPages[key]} /> <PagesListView pageIds={recentProjectPages[key]} />

2
web/components/project/integration-card.tsx
View File

@ -90,7 +90,7 @@ export const IntegrationCard: React.FC<Props> = ({ integration }) => {
return ( return (
<> <>
{integration && ( {integration && (
<div className="flex items-center justify-between gap-2 border-b border-neutral-border-subtle bg-neutral-component-surface-light px-4 py-6"> <div className="flex items-center justify-between gap-2 border-b border-neutral-border-subtle px-4 py-6">
<div className="flex items-start gap-4"> <div className="flex items-start gap-4">
<div className="h-10 w-10 flex-shrink-0"> <div className="h-10 w-10 flex-shrink-0">
<Image <Image

2
web/components/project/settings/features-list.tsx
View File

@ -79,7 +79,7 @@ export const ProjectFeaturesList: FC<Props> = observer(() => {
{PROJECT_FEATURES_LIST.map((feature) => ( {PROJECT_FEATURES_LIST.map((feature) => (
<div <div
key={feature.property} key={feature.property}
className="flex items-center justify-between gap-x-8 gap-y-2 border-b border-neutral-border-subtle bg-neutral-component-surface-light p-4" className="flex items-center justify-between gap-x-8 gap-y-2 border-b border-neutral-border-subtle p-4"
> >
<div className="flex items-start gap-3"> <div className="flex items-start gap-3">
<div className="flex items-center justify-center rounded bg-neutral-component-surface-medium p-3"> <div className="flex items-center justify-center rounded bg-neutral-component-surface-medium p-3">

5
web/components/states/create-update-state-inline.tsx
View File

@ -151,10 +151,7 @@ export const CreateUpdateStateInline: React.FC<Props> = observer((props) => {
}; };
return ( return (
<form <form onSubmit={handleSubmit(onSubmit)} className="flex items-center gap-x-2 rounded-[10px] py-5">
onSubmit={handleSubmit(onSubmit)}
className="flex items-center gap-x-2 rounded-[10px] bg-neutral-component-surface-light py-5"
>
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<Popover className="relative flex h-full w-full items-center justify-center"> <Popover className="relative flex h-full w-full items-center justify-center">
{({ open }) => ( {({ open }) => (

2
web/components/states/project-setting-state-list-item.tsx
View File

@ -48,7 +48,7 @@ export const StatesListItem: React.FC<Props> = observer((props) => {
}; };
return ( return (
<div className="group flex items-center justify-between gap-2 rounded border-[0.5px] border-neutral-border-medium bg-neutral-component-surface-light px-4 py-3"> <div className="group flex items-center justify-between gap-2 rounded border-[0.5px] border-neutral-border-medium px-4 py-3">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<StateGroupIcon stateGroup={state.group} color={state.color} height="16px" width="16px" /> <StateGroupIcon stateGroup={state.group} color={state.color} height="16px" width="16px" />
<div> <div>

6
web/components/workspace/sidebar-dropdown.tsx
View File

@ -290,8 +290,8 @@ export const WorkspaceSidebarDropdown = observer(() => {
leaveTo="transform opacity-0 scale-95" leaveTo="transform opacity-0 scale-95"
> >
<Menu.Items <Menu.Items
className="absolute left-0 z-20 mt-1 flex w-52 origin-top-left flex-col divide-y className="absolute left-0 z-20 mt-1 flex w-52 origin-top-left flex-col divide-y
divide-sidebar-neutral-border-medium rounded-md border border-sidebar-neutral-border-medium bg-custom-sidebar-background-100 px-1 py-2 text-xs shadow-lg outline-none" divide-sidebar-neutral-border-medium rounded-md border border-sidebar-neutral-border-medium bg-sidebar-neutral-component-surface-light px-1 py-2 text-xs shadow-lg outline-none"
ref={setPopperElement} ref={setPopperElement}
style={styles.popper} style={styles.popper}
{...attributes.popper} {...attributes.popper}
@ -330,7 +330,7 @@ export const WorkspaceSidebarDropdown = observer(() => {
<div className="p-2 pb-0"> <div className="p-2 pb-0">
<Link href="/god-mode"> <Link href="/god-mode">
<Menu.Item as="button" type="button" className="w-full"> <Menu.Item as="button" type="button" className="w-full">
<span className="flex w-full items-center justify-center rounded bg-custom-primary-100/20 px-2 py-1 text-sm font-medium text-primary-text-subtle hover:bg-custom-primary-100/30 hover:text-custom-primary-200"> <span className="flex w-full items-center justify-center rounded bg-primary-component-surface-light px-2 py-1 text-sm font-medium text-primary-text-subtle hover:bg-primary-component-surface-medium">
Enter God Mode Enter God Mode
</span> </span>
</Menu.Item> </Menu.Item>

20
web/components/workspace/workspace-active-cycles-upgrade.tsx
View File

@ -1,8 +1,6 @@
import React from "react"; import React from "react";
import Image from "next/image"; import Image from "next/image";
import { observer } from "mobx-react"; import { useTheme } from "next-themes";
// hooks
import { useUser } from "hooks/store";
// ui // ui
import { getButtonStyling } from "@plane/ui"; import { getButtonStyling } from "@plane/ui";
// icons // icons
@ -12,18 +10,18 @@ import { cn } from "helpers/common.helper";
// constants // constants
import { WORKSPACE_ACTIVE_CYCLES_DETAILS } from "constants/cycle"; import { WORKSPACE_ACTIVE_CYCLES_DETAILS } from "constants/cycle";
export const WorkspaceActiveCyclesUpgrade = observer(() => { export const WorkspaceActiveCyclesUpgrade = () => {
// store hooks // next-themes
const { currentUser } = useUser(); const { resolvedTheme } = useTheme();
// derived values
const isDarkMode = currentUser?.theme.theme === "dark"; const isDarkMode = resolvedTheme === "dark";
return ( return (
<div className="flex flex-col gap-10 pt-8 px-8 rounded-xl h-full"> <div className="flex flex-col gap-10 pt-8 px-8 rounded-xl h-full">
<div <div
className={cn("flex item-center justify-between rounded-xl min-h-[25rem]", { className={cn("flex item-center justify-between rounded-xl min-h-[25rem]", {
"bg-gradient-to-l from-[#CFCFCF] to-[#212121]": currentUser?.theme.theme === "dark", "bg-gradient-to-l from-[#CFCFCF] to-[#212121]": resolvedTheme === "dark",
"bg-gradient-to-l from-[#3b5ec6] to-[#f5f7fe]": currentUser?.theme.theme === "light", "bg-gradient-to-l from-[#3b5ec6] to-[#f5f7fe]": resolvedTheme === "light",
})} })}
> >
<div className="relative px-14 flex flex-col gap-7 justify-center lg:w-1/2"> <div className="relative px-14 flex flex-col gap-7 justify-center lg:w-1/2">
@ -86,4 +84,4 @@ export const WorkspaceActiveCyclesUpgrade = observer(() => {
</div> </div>
</div> </div>
); );
}); };

10
web/helpers/string.helper.ts
View File

@ -76,7 +76,7 @@ export const copyUrlToClipboard = async (path: string) => {
}; };
export const generateRandomColor = (string: string): string => { export const generateRandomColor = (string: string): string => {
if (!string) return "rgb(var(--color-primary-100))"; if (!string) return "var(--color-primary-90)";
string = `${string}`; string = `${string}`;
@ -171,10 +171,10 @@ export const getFetchKeysForIssueMutation = (options: {
const ganttFetchKey = cycleId const ganttFetchKey = cycleId
? { ganttFetchKey: CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), ganttParams) } ? { ganttFetchKey: CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), ganttParams) }
: moduleId : moduleId
? { ganttFetchKey: MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), ganttParams) } ? { ganttFetchKey: MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), ganttParams) }
: viewId : viewId
? { ganttFetchKey: VIEW_ISSUES(viewId.toString(), viewGanttParams) } ? { ganttFetchKey: VIEW_ISSUES(viewId.toString(), viewGanttParams) }
: { ganttFetchKey: PROJECT_ISSUES_LIST_WITH_PARAMS(projectId?.toString() ?? "", ganttParams) }; : { ganttFetchKey: PROJECT_ISSUES_LIST_WITH_PARAMS(projectId?.toString() ?? "", ganttParams) };
return { return {
...ganttFetchKey, ...ganttFetchKey,

2
web/layouts/admin-layout/layout.tsx
View File

@ -28,7 +28,7 @@ export const InstanceAdminLayout: FC<IInstanceAdminLayout> = observer((props) =>
<AdminAuthWrapper> <AdminAuthWrapper>
<div className="relative flex h-screen w-full overflow-hidden"> <div className="relative flex h-screen w-full overflow-hidden">
<InstanceAdminSidebar /> <InstanceAdminSidebar />
<main className="relative flex h-full w-full flex-col overflow-hidden bg-neutral-component-surface-light"> <main className="relative flex h-full w-full flex-col overflow-hidden bg-neutral-page-surface-default">
<InstanceAdminHeader /> <InstanceAdminHeader />
<div className="h-full w-full overflow-hidden px-10 py-12"> <div className="h-full w-full overflow-hidden px-10 py-12">
<div className="relative h-full w-full overflow-x-hidden overflow-y-scroll"> <div className="relative h-full w-full overflow-x-hidden overflow-y-scroll">

2
web/layouts/admin-layout/sidebar.tsx
View File

@ -15,7 +15,7 @@ export const InstanceAdminSidebar: FC<IInstanceAdminSidebar> = observer(() => {
return ( return (
<div <div
className={`fixed inset-y-0 z-20 flex h-full flex-shrink-0 flex-grow-0 flex-col border-r border-sidebar-neutral-border-medium bg-sidebar-neutral-component-surface-light 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-sidebar-neutral-border-medium bg-sidebar-neutral-page-surface-default duration-300 md:relative ${
sidebarCollapsed ? "" : "md:w-[280px]" sidebarCollapsed ? "" : "md:w-[280px]"
} ${sidebarCollapsed ? "left-0" : "-left-full md:left-0"}`} } ${sidebarCollapsed ? "left-0" : "-left-full md:left-0"}`}
> >

2
web/layouts/app-layout/layout.tsx
View File

@ -43,7 +43,7 @@ export const AppLayout: FC<IAppLayout> = observer((props) => {
<WorkspaceAuthWrapper> <WorkspaceAuthWrapper>
<div className="relative flex h-screen w-full overflow-hidden"> <div className="relative flex h-screen w-full overflow-hidden">
<AppSidebar /> <AppSidebar />
<main className="relative flex h-full w-full flex-col overflow-hidden bg-neutral-component-surface-light"> <main className="relative flex h-full w-full flex-col overflow-hidden bg-neutral-page-surface-default">
{header} {header}
<div className="h-full w-full overflow-hidden"> <div className="h-full w-full overflow-hidden">
<div className="relative h-full w-full overflow-x-hidden overflow-y-scroll"> <div className="relative h-full w-full overflow-x-hidden overflow-y-scroll">

2
web/layouts/app-layout/sidebar.tsx
View File

@ -42,7 +42,7 @@ export const AppSidebar: FC<IAppSidebar> = observer(() => {
return ( return (
<div <div
className={`inset-y-0 z-20 flex h-full flex-shrink-0 flex-grow-0 flex-col border-r border-sidebar-neutral-border-medium bg-custom-sidebar-background-100 duration-300 className={`inset-y-0 z-20 flex h-full flex-shrink-0 flex-grow-0 flex-col border-r border-sidebar-neutral-border-medium bg-sidebar-neutral-page-surface-default duration-300
fixed md:relative fixed md:relative
${themStore.sidebarCollapsed ? "-ml-[280px]" : ""} ${themStore.sidebarCollapsed ? "-ml-[280px]" : ""}
sm:${themStore.sidebarCollapsed ? "-ml-[280px]" : ""} sm:${themStore.sidebarCollapsed ? "-ml-[280px]" : ""}

3
web/layouts/auth-layout/admin-wrapper.tsx
View File

@ -23,9 +23,8 @@ export const AdminAuthWrapper: FC<IAdminAuthWrapper> = observer(({ children }) =
""; "";
// if user does not have admin access to the instance // if user does not have admin access to the instance
if (isUserInstanceAdmin !== undefined && isUserInstanceAdmin === false) { if (isUserInstanceAdmin !== undefined && isUserInstanceAdmin === false)
return <InstanceAdminRestriction redirectWorkspaceSlug={redirectWorkspaceSlug} />; return <InstanceAdminRestriction redirectWorkspaceSlug={redirectWorkspaceSlug} />;
}
return <>{children}</>; return <>{children}</>;
}); });

4
web/layouts/auth-layout/project-wrapper.tsx
View File

@ -117,7 +117,7 @@ export const ProjectAuthWrapper: FC<IProjectAuthWrapper> = observer((props) => {
// check if the project member apis is loading // check if the project member apis is loading
if (!projectMemberInfo && projectId && hasPermissionToProject[projectId.toString()] === null) if (!projectMemberInfo && projectId && hasPermissionToProject[projectId.toString()] === null)
return ( return (
<div className="grid h-screen place-items-center bg-neutral-component-surface-light p-4"> <div className="grid h-screen place-items-center bg-neutral-page-surface-default p-4">
<div className="flex flex-col items-center gap-3 text-center"> <div className="flex flex-col items-center gap-3 text-center">
<Spinner /> <Spinner />
</div> </div>
@ -130,7 +130,7 @@ export const ProjectAuthWrapper: FC<IProjectAuthWrapper> = observer((props) => {
// check if the project info is not found. // check if the project info is not found.
if (!projectExists && projectId && hasPermissionToProject[projectId.toString()] === false) if (!projectExists && projectId && hasPermissionToProject[projectId.toString()] === false)
return ( return (
<div className="container grid h-screen place-items-center bg-neutral-component-surface-light"> <div className="container grid h-screen place-items-center bg-neutral-page-surface-default">
<EmptyState <EmptyState
title="No such project exists" title="No such project exists"
description="Try creating a new project" description="Try creating a new project"

5
web/layouts/auth-layout/user-wrapper.tsx
View File

@ -42,15 +42,14 @@ export const UserAuthWrapper: FC<IUserAuthWrapper> = observer((props) => {
shouldRetryOnError: false, shouldRetryOnError: false,
}); });
if (!currentUser && !currentUserError) { if (!currentUser && !currentUserError)
return ( return (
<div className="grid h-screen place-items-center bg-neutral-component-surface-light p-4"> <div className="grid h-screen place-items-center bg-neutral-page-surface-default p-4">
<div className="flex flex-col items-center gap-3 text-center"> <div className="flex flex-col items-center gap-3 text-center">
<Spinner /> <Spinner />
</div> </div>
</div> </div>
); );
}
if (currentUserError) { if (currentUserError) {
const redirectTo = router.asPath; const redirectTo = router.asPath;

4
web/layouts/auth-layout/workspace-wrapper.tsx
View File

@ -4,7 +4,7 @@ import Link from "next/link";
import useSWR from "swr"; import useSWR from "swr";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
// hooks // hooks
import { useLabel, useMember, useProject, useUser } from "hooks/store"; import { useMember, useProject, useUser } from "hooks/store";
// icons // icons
import { Button, Spinner } from "@plane/ui"; import { Button, Spinner } from "@plane/ui";
@ -60,7 +60,7 @@ export const WorkspaceAuthWrapper: FC<IWorkspaceAuthWrapper> = observer((props)
membership.hasPermissionToCurrentWorkspace === false membership.hasPermissionToCurrentWorkspace === false
) { ) {
return ( return (
<div className={`h-screen w-full overflow-hidden bg-neutral-component-surface-light`}> <div className="h-screen w-full overflow-hidden bg-neutral-page-surface-default">
<div className="grid h-full place-items-center p-4"> <div className="grid h-full place-items-center p-4">
<div className="space-y-8 text-center"> <div className="space-y-8 text-center">
<div className="space-y-2"> <div className="space-y-2">

2
web/layouts/settings-layout/profile/layout.tsx
View File

@ -19,7 +19,7 @@ export const ProfileSettingsLayout: FC<IProfileSettingsLayout> = (props) => {
<UserAuthWrapper> <UserAuthWrapper>
<div className="relative flex h-screen w-full overflow-hidden"> <div className="relative flex h-screen w-full overflow-hidden">
<ProfileLayoutSidebar /> <ProfileLayoutSidebar />
<main className="relative flex h-full w-full flex-col overflow-hidden bg-neutral-component-surface-light"> <main className="relative flex h-full w-full flex-col overflow-hidden bg-neutral-page-surface-default">
{header} {header}
<div className="h-full w-full overflow-x-hidden overflow-y-scroll">{children}</div> <div className="h-full w-full overflow-x-hidden overflow-y-scroll">{children}</div>
</main> </main>

78
web/layouts/settings-layout/profile/preferences/layout.tsx
View File

@ -18,57 +18,59 @@ export const ProfilePreferenceSettingsLayout: FC<IProfilePreferenceSettingsLayou
const router = useRouter(); const router = useRouter();
const showMenuItem = () => { const showMenuItem = () => {
const item = router.asPath.split('/'); const item = router.asPath.split("/");
let splittedItem = item[item.length - 1]; let splittedItem = item[item.length - 1];
splittedItem = splittedItem.replace(splittedItem[0], splittedItem[0].toUpperCase()); splittedItem = splittedItem.replace(splittedItem[0], splittedItem[0].toUpperCase());
console.log(splittedItem); console.log(splittedItem);
return splittedItem; return splittedItem;
} };
const profilePreferenceLinks: Array<{ const profilePreferenceLinks: Array<{
label: string; label: string;
href: string; href: string;
}> = [ }> = [
{ {
label: "Theme", label: "Theme",
href: `/profile/preferences/theme`, href: `/profile/preferences/theme`,
}, },
{ {
label: "Email", label: "Email",
href: `/profile/preferences/email`, href: `/profile/preferences/email`,
}, },
]; ];
return ( return (
<ProfileSettingsLayout header={ <ProfileSettingsLayout
<div className="md:hidden flex flex-shrink-0 gap-4 items-center justify-start border-b border-custom-border-200 p-4"> header={
<SidebarHamburgerToggle /> <div className="md:hidden flex flex-shrink-0 gap-4 items-center justify-start border-b border-custom-border-200 p-4">
<CustomMenu <SidebarHamburgerToggle />
maxHeight={"md"} <CustomMenu
className="flex flex-grow justify-center text-custom-text-200 text-sm" maxHeight={"md"}
placement="bottom-start" className="flex flex-grow justify-center text-neutral-text-medium text-sm"
customButton={ placement="bottom-start"
<div className="flex gap-2 items-center px-2 py-1.5 border rounded-md border-custom-border-400"> customButton={
<span className="flex flex-grow justify-center text-custom-text-200 text-sm">{showMenuItem()}</span> <div className="flex gap-2 items-center px-2 py-1.5 border rounded-md border-custom-border-400">
<ChevronDown className="w-4 h-4 text-custom-text-400" /> <span className="flex flex-grow justify-center text-neutral-text-medium text-sm">{showMenuItem()}</span>
</div> <ChevronDown className="w-4 h-4 text-custom-text-400" />
} </div>
customButtonClassName="flex flex-grow justify-start text-custom-text-200 text-sm" }
> customButtonClassName="flex flex-grow justify-start text-neutral-text-medium text-sm"
<></> >
{profilePreferenceLinks.map((link) => ( <></>
<CustomMenu.MenuItem {profilePreferenceLinks.map((link) => (
className="flex items-center gap-2" <CustomMenu.MenuItem className="flex items-center gap-2">
> <Link key={link.href} href={link.href} className="text-custom-text-300 w-full">
<Link key={link.href} href={link.href} className="text-custom-text-300 w-full">{link.label}</Link> {link.label}
</CustomMenu.MenuItem> </Link>
))} </CustomMenu.MenuItem>
</CustomMenu> ))}
</div> </CustomMenu>
}> </div>
}
>
<div className="relative flex h-screen w-full overflow-hidden"> <div className="relative flex h-screen w-full overflow-hidden">
<ProfilePreferenceSettingsSidebar /> <ProfilePreferenceSettingsSidebar />
<main className="relative flex h-full w-full flex-col overflow-hidden bg-neutral-component-surface-light"> <main className="relative flex h-full w-full flex-col overflow-hidden bg-neutral-page-surface-default">
{header} {header}
<div className="h-full w-full overflow-x-hidden overflow-y-scroll">{children}</div> <div className="h-full w-full overflow-x-hidden overflow-y-scroll">{children}</div>
</main> </main>

2
web/layouts/settings-layout/profile/preferences/sidebar.tsx
View File

@ -28,7 +28,7 @@ export const ProfilePreferenceSettingsSidebar = () => {
<div <div
className={`rounded-md px-4 py-2 text-sm font-medium ${ className={`rounded-md px-4 py-2 text-sm font-medium ${
(link.label === "Import" ? router.asPath.includes(link.href) : router.asPath === link.href) (link.label === "Import" ? router.asPath.includes(link.href) : router.asPath === link.href)
? "bg-custom-primary-100/10 text-primary-text-subtle" ? "bg-primary-component-surface-light text-primary-text-subtle"
: "text-sidebar-neutral-text-medium hover:bg-sidebar-neutral-component-surface-dark focus:bg-sidebar-neutral-component-surface-dark" : "text-sidebar-neutral-text-medium hover:bg-sidebar-neutral-component-surface-dark focus:bg-sidebar-neutral-component-surface-dark"
}`} }`}
> >

4
web/layouts/settings-layout/profile/sidebar.tsx
View File

@ -103,7 +103,7 @@ export const ProfileLayoutSidebar = observer(() => {
return ( return (
<div <div
className={`fixed inset-y-0 z-20 flex h-full flex-shrink-0 flex-grow-0 flex-col border-r border-sidebar-neutral-border-medium bg-sidebar-neutral-component-surface-light 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-sidebar-neutral-border-medium bg-sidebar-neutral-page-surface-default duration-300 md:relative
${sidebarCollapsed ? "-ml-[280px]" : ""} ${sidebarCollapsed ? "-ml-[280px]" : ""}
sm:${sidebarCollapsed ? "-ml-[280px]" : ""} sm:${sidebarCollapsed ? "-ml-[280px]" : ""}
md:ml-0 ${sidebarCollapsed ? "w-[80px]" : "w-[280px]"} md:ml-0 ${sidebarCollapsed ? "w-[80px]" : "w-[280px]"}
@ -139,7 +139,7 @@ export const ProfileLayoutSidebar = observer(() => {
<div <div
className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none ${ className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none ${
link.highlight(router.pathname) link.highlight(router.pathname)
? "bg-custom-primary-100/10 text-primary-text-subtle" ? "bg-primary-component-surface-light text-primary-text-subtle"
: "text-sidebar-neutral-text-medium hover:bg-sidebar-neutral-component-surface-dark" : "text-sidebar-neutral-text-medium hover:bg-sidebar-neutral-component-surface-dark"
} ${sidebarCollapsed ? "justify-center" : ""}`} } ${sidebarCollapsed ? "justify-center" : ""}`}
> >

2
web/layouts/settings-layout/project/sidebar.tsx
View File

@ -28,7 +28,7 @@ export const ProjectSettingsSidebar = () => {
<div <div
className={`rounded-md px-4 py-2 text-sm font-medium ${ className={`rounded-md px-4 py-2 text-sm font-medium ${
link.highlight(router.asPath, `/${workspaceSlug}/projects/${projectId}`) link.highlight(router.asPath, `/${workspaceSlug}/projects/${projectId}`)
? "bg-custom-primary-100/10 text-primary-text-subtle" ? "bg-primary-component-surface-light text-primary-text-subtle"
: "text-sidebar-neutral-text-medium hover:bg-sidebar-neutral-component-surface-dark focus:bg-sidebar-neutral-component-surface-dark" : "text-sidebar-neutral-text-medium hover:bg-sidebar-neutral-component-surface-dark focus:bg-sidebar-neutral-component-surface-dark"
}`} }`}
> >

2
web/pages/[workspaceSlug]/analytics.tsx
View File

@ -37,7 +37,7 @@ const AnalyticsPage: NextPageWithLayout = observer(() => {
return ( return (
<> <>
{workspaceProjectIds && workspaceProjectIds.length > 0 ? ( {workspaceProjectIds && workspaceProjectIds.length > 0 ? (
<div className="flex h-full flex-col overflow-hidden bg-neutral-component-surface-light"> <div className="flex h-full flex-col overflow-hidden">
<Tab.Group as={Fragment}> <Tab.Group as={Fragment}>
<Tab.List as="div" className="space-x-2 border-b border-neutral-border-medium px-5 py-3"> <Tab.List as="div" className="space-x-2 border-b border-neutral-border-medium px-5 py-3">
{ANALYTICS_TABS.map((tab) => ( {ANALYTICS_TABS.map((tab) => (

6
web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
View File

@ -133,8 +133,10 @@ const ProjectCyclesPage: NextPageWithLayout = observer(() => {
<Tooltip key={layout.key} tooltipContent={layout.title}> <Tooltip key={layout.key} tooltipContent={layout.title}>
<button <button
type="button" type="button"
className={`group grid h-[22px] w-7 place-items-center overflow-hidden rounded transition-all hover:bg-custom-background-100 ${ className={`group grid h-[22px] w-7 place-items-center overflow-hidden rounded transition-all hover:bg-neutral-component-surface-light ${
cycleLayout == layout.key ? "bg-custom-background-100 shadow-custom-shadow-2xs" : "" cycleLayout == layout.key
? "bg-neutral-component-surface-light shadow-custom-shadow-2xs"
: ""
}`} }`}
onClick={() => handleCurrentLayout(layout.key as TCycleLayout)} onClick={() => handleCurrentLayout(layout.key as TCycleLayout)}
> >

2
web/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx
View File

@ -8,7 +8,7 @@ import { NextPageWithLayout } from "lib/types";
import { AppLayout } from "layouts/app-layout"; import { AppLayout } from "layouts/app-layout";
const ProjectIssuesPage: NextPageWithLayout = () => ( const ProjectIssuesPage: NextPageWithLayout = () => (
<div className="h-full w-full bg-neutral-page-surface-default"> <div className="h-full w-full">
<ProjectLayoutRoot /> <ProjectLayoutRoot />
</div> </div>
); );

2
web/pages/[workspaceSlug]/workspace-views/[globalViewId].tsx
View File

@ -9,7 +9,7 @@ import { GlobalIssuesHeader } from "components/headers";
import { NextPageWithLayout } from "lib/types"; import { NextPageWithLayout } from "lib/types";
const GlobalViewIssuesPage: NextPageWithLayout = () => ( const GlobalViewIssuesPage: NextPageWithLayout = () => (
<div className="h-full overflow-hidden bg-neutral-component-surface-light"> <div className="h-full overflow-hidden">
<div className="flex h-full w-full flex-col border-b border-neutral-border-medium"> <div className="flex h-full w-full flex-col border-b border-neutral-border-medium">
<GlobalViewsHeader /> <GlobalViewsHeader />
<AllIssueLayoutRoot /> <AllIssueLayoutRoot />

4
web/pages/accounts/reset-password.tsx
View File

@ -133,12 +133,12 @@ const ResetPasswordPage: NextPageWithLayout = () => {
/> />
{showPassword ? ( {showPassword ? (
<EyeOff <EyeOff
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer" className="absolute right-3 h-5 w-5 stroke-neutral-text-subtle hover:cursor-pointer"
onClick={() => setShowPassword(false)} onClick={() => setShowPassword(false)}
/> />
) : ( ) : (
<Eye <Eye
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer" className="absolute right-3 h-5 w-5 stroke-neutral-text-subtle hover:cursor-pointer"
onClick={() => setShowPassword(true)} onClick={() => setShowPassword(true)}
/> />
)} )}

2
web/styles/command-pallette.css
View File

@ -3,7 +3,7 @@
} }
[cmdk-group-heading] { [cmdk-group-heading] {
color: rgb(var(--color-text-secondary)); color: var(--color-neutral-110);
font-size: 0.75rem; font-size: 0.75rem;
margin: 0 0 0.25rem 0.25rem; margin: 0 0 0.25rem 0.25rem;
} }

23
web/styles/globals.css
View File

@ -295,18 +295,18 @@
--color-info-120: #c2e6ff; --color-info-120: #c2e6ff;
/* saturated colors */ /* saturated colors */
--color-orange-10: #fefcfb; --color-orange-10: #17120e;
--color-orange-20: #fff7ed; --color-orange-20: #1e160f;
--color-orange-30: #ffefd6; --color-orange-30: #331e0b;
--color-orange-40: #ffdfb5; --color-orange-40: #462100;
--color-orange-50: #ffd19a; --color-orange-50: #562800;
--color-orange-60: #ffc182; --color-orange-60: #66350c;
--color-orange-70: #f5ae73; --color-orange-70: #7e451d;
--color-orange-80: #ec9455; --color-orange-80: #a35829;
--color-orange-90: #f76b15; --color-orange-90: #f76b15;
--color-orange-100: #ef5f00; --color-orange-100: #ff801f;
--color-orange-110: #cc4e00; --color-orange-110: #ffa057;
--color-orange-120: #582d1d; --color-orange-120: #ffe0c2;
} }
[data-theme="dark-contrast"] { [data-theme="dark-contrast"] {
@ -329,6 +329,7 @@
body { body {
color: var(--color-neutral-120); color: var(--color-neutral-120);
background-color: var(--color-neutral-0);
} }
/* scrollbar style */ /* scrollbar style */