binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

promote: develop to stage-release v0.10-patch (#1783)

Browse source 
* chore: show message if dragging unjoined project (#1763)

* fix: invalid project selection in create issue modal (#1766)

* style: sidebar project list improvement (#1767)

* fix: comment reaction mutation (#1768)

* fix: user profiles n plus 1 (#1765)

* fix: bulk issue import (#1773)

* style: profile activity (#1771)

* style: profile activity comment log styling

* chore: profile feed activity refactor

* style: sidebar project list

* chore: add non existing states for project entities (#1770)

* fix: notification read status being toggled when click on link (#1769)

* fix: custom theme persisting after signing out (#1780)

* fix: custom theme persistence

* chore: remove console logs

* fix: build error

* fix: change theme from command k

---------

Co-authored-by: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Co-authored-by: Dakshesh Jain <65905942+dakshesh14@users.noreply.github.com>
Co-authored-by: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
This commit is contained in:
Nikhil 2023-08-03 15:28:22 +05:30 • committed by GitHub
parent 9828d2332a
commit 9b4aebc385
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
35 changed files with 738 additions and 785 deletions
Download patch file Download diff file Expand all files Collapse all files

207
apps/app/pages/[workspaceSlug]/me/profile/activity.tsx
View file

@ -1,21 +1,43 @@
import useSWR from "swr";
import { useRouter } from "next/router";
import Link from "next/link";
// services
import userService from "services/user.service";
// layouts
import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
import SettingsNavbar from "layouts/settings-navbar";
// components
import { Feeds } from "components/core";
import { ActivityIcon, ActivityMessage } from "components/core";
import RemirrorRichTextEditor from "components/rich-text-editor";
// icons
import { ArrowTopRightOnSquareIcon, ChatBubbleLeftEllipsisIcon } from "@heroicons/react/24/outline";
// ui
import { Loader } from "components/ui";
import { Icon, Loader } from "components/ui";
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
// fetch-keys
import { USER_ACTIVITY } from "constants/fetch-keys";
// helper
import { timeAgo } from "helpers/date-time.helper";
const ProfileActivity = () => {
const router = useRouter();
const { workspaceSlug } = router.query;
const { data: userActivity } = useSWR(USER_ACTIVITY, () => userService.getUserActivity());
if (!userActivity) {
return (
<Loader className="space-y-5">
<Loader.Item height="40px" />
<Loader.Item height="40px" />
<Loader.Item height="40px" />
<Loader.Item height="40px" />
</Loader>
);
}
return (
<WorkspaceAuthorizationLayout
breadcrumbs={
@ -34,17 +56,176 @@ const ProfileActivity = () => {
</div>
<SettingsNavbar profilePage />
</div>
{userActivity ? (
userActivity.results.length > 0 ? (
<Feeds activities={userActivity.results} />
) : null
) : (
<Loader className="space-y-5">
<Loader.Item height="40px" />
<Loader.Item height="40px" />
<Loader.Item height="40px" />
<Loader.Item height="40px" />
</Loader>
{userActivity && userActivity.results.length > 0 && (
<div>
<ul role="list" className="-mb-4">
{userActivity.results.map((activityItem: any, activityIdx: number) => {
if (activityItem.field === "comment") {
return (
<div key={activityItem.id} className="mt-2">
<div className="relative flex items-start space-x-3">
<div className="relative px-1">
{activityItem.field ? (
activityItem.new_value === "restore" && (
<Icon iconName="history" className="text-sm text-custom-text-200" />
)
) : activityItem.actor_detail.avatar &&
activityItem.actor_detail.avatar !== "" ? (
<img
src={activityItem.actor_detail.avatar}
alt={activityItem.actor_detail.first_name}
height={30}
width={30}
className="grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-500 text-white"
/>
) : (
<div
className={`grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-500 text-white`}
>
{activityItem.actor_detail.first_name.charAt(0)}
</div>
)}
<span className="ring-6 flex h-7 w-7 items-center justify-center rounded-full bg-custom-background-80 text-custom-text-200 ring-white">
<ChatBubbleLeftEllipsisIcon
className="h-3.5 w-3.5 text-custom-text-200"
aria-hidden="true"
/>
</span>
</div>
<div className="min-w-0 flex-1">
<div>
<div className="text-xs">
{activityItem.actor_detail.first_name}
{activityItem.actor_detail.is_bot
? "Bot"
: " " + activityItem.actor_detail.last_name}
</div>
<p className="mt-0.5 text-xs text-custom-text-200">
Commented {timeAgo(activityItem.created_at)}
</p>
</div>
<div className="issue-comments-section p-0">
<RemirrorRichTextEditor
value={
activityItem.new_value && activityItem.new_value !== ""
? activityItem.new_value
: activityItem.old_value
}
editable={false}
noBorder
customClassName="text-xs border border-custom-border-200 bg-custom-background-100"
/>
</div>
</div>
</div>
</div>
);
}
const message =
activityItem.verb === "created" &&
activityItem.field !== "cycles" &&
activityItem.field !== "modules" &&
activityItem.field !== "attachment" &&
activityItem.field !== "link" &&
activityItem.field !== "estimate" ? (
<span className="text-custom-text-200">
created{" "}
<Link
href={`/${workspaceSlug}/projects/${activityItem.project}/issues/${activityItem.issue}`}
>
<a className="inline-flex items-center hover:underline">
this issue. <ArrowTopRightOnSquareIcon className="ml-1 h-3.5 w-3.5" />
</a>
</Link>
</span>
) : activityItem.field ? (
<ActivityMessage activity={activityItem} showIssue />
) : (
"created the issue."
);
if ("field" in activityItem && activityItem.field !== "updated_by") {
return (
<li key={activityItem.id}>
<div className="relative pb-1">
{userActivity.results.length > 1 &&
activityIdx !== userActivity.results.length - 1 ? (
<span
className="absolute top-5 left-5 -ml-px h-full w-0.5 bg-custom-background-80"
aria-hidden="true"
/>
) : null}
<div className="relative flex items-start space-x-2">
<>
<div>
<div className="relative px-1.5">
<div className="mt-1.5">
<div className="ring-6 flex h-7 w-7 items-center justify-center rounded-full bg-custom-background-80 text-custom-text-200 ring-white">
{activityItem.field ? (
activityItem.new_value === "restore" ? (
<Icon
iconName="history"
className="text-sm text-custom-text-200"
/>
) : (
<ActivityIcon activity={activityItem} />
)
) : activityItem.actor_detail.avatar &&
activityItem.actor_detail.avatar !== "" ? (
<img
src={activityItem.actor_detail.avatar}
alt={activityItem.actor_detail.first_name}
height={24}
width={24}
className="rounded-full"
/>
) : (
<div
className={`grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-700 text-xs text-white`}
>
{activityItem.actor_detail.first_name.charAt(0)}
</div>
)}
</div>
</div>
</div>
</div>
<div className="min-w-0 flex-1 py-3">
<div className="text-xs text-custom-text-200 break-words">
{activityItem.field === "archived_at" &&
activityItem.new_value !== "restore" ? (
<span className="text-gray font-medium">Plane</span>
) : activityItem.actor_detail.is_bot ? (
<span className="text-gray font-medium">
{activityItem.actor_detail.first_name} Bot
</span>
) : (
<Link
href={`/${workspaceSlug}/profile/${activityItem.actor_detail.id}`}
>
<a className="text-gray font-medium">
{activityItem.actor_detail.first_name}{" "}
{activityItem.actor_detail.last_name}
</a>
</Link>
)}{" "}
{message}{" "}
<span className="whitespace-nowrap">
{timeAgo(activityItem.created_at)}
</span>
</div>
</div>
</>
</div>
</div>
</li>
);
}
})}
</ul>
</div>
)}
</div>
</WorkspaceAuthorizationLayout>

11
apps/app/pages/[workspaceSlug]/me/profile/preferences.tsx
View file

@ -1,6 +1,7 @@
import { useEffect, useState } from "react";
import { useTheme } from "next-themes";
// next-themes
import { useTheme } from "next-themes";
// hooks
import useUserAuth from "hooks/use-user-auth";
// layouts
@ -15,11 +16,13 @@ import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
import { ICustomTheme } from "types";
const ProfilePreferences = () => {
const { user: myProfile } = useUserAuth();
const { theme } = useTheme();
const [customThemeSelectorOptions, setCustomThemeSelectorOptions] = useState(false);
const [preLoadedData, setPreLoadedData] = useState<ICustomTheme | null>(null);
const { theme } = useTheme();
const { user: myProfile } = useUserAuth();
useEffect(() => {
if (theme === "custom") {
if (myProfile?.theme.palette)
@ -37,6 +40,7 @@ const ProfilePreferences = () => {
myProfile.theme.palette !== ",,,,"
? myProfile.theme.palette
: "#0d101b,#c5c5c5,#3f76ff,#0d101b,#c5c5c5",
theme: "custom",
});
if (!customThemeSelectorOptions) setCustomThemeSelectorOptions(true);
}
@ -71,7 +75,6 @@ const ProfilePreferences = () => {
</div>
<div className="col-span-12 sm:col-span-6">
<ThemeSwitch
user={myProfile}
setPreLoadedData={setPreLoadedData}
customThemeSelectorOptions={customThemeSelectorOptions}
setCustomThemeSelectorOptions={setCustomThemeSelectorOptions}

79
apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
View file

@ -22,8 +22,10 @@ import useUserAuth from "hooks/use-user-auth";
// components
import { AnalyticsProjectModal } from "components/analytics";
// ui
import { CustomMenu, SecondaryButton } from "components/ui";
import { CustomMenu, EmptyState, SecondaryButton } from "components/ui";
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
// images
import emptyCycle from "public/empty-state/cycle.svg";
// helpers
import { truncateText } from "helpers/string.helper";
import { getDateRangeStatus } from "helpers/date-time.helper";
@ -52,14 +54,14 @@ const SingleCycle: React.FC = () => {
: null
);
const { data: cycleDetails } = useSWR(
cycleId ? CYCLE_DETAILS(cycleId as string) : null,
const { data: cycleDetails, error } = useSWR(
workspaceSlug && projectId && cycleId ? CYCLE_DETAILS(cycleId.toString()) : null,
workspaceSlug && projectId && cycleId
? () =>
cycleServices.getCycleDetails(
workspaceSlug as string,
projectId as string,
cycleId as string
workspaceSlug.toString(),
projectId.toString(),
cycleId.toString()
)
: null
);
@ -159,31 +161,48 @@ const SingleCycle: React.FC = () => {
</div>
}
>
<TransferIssuesModal
handleClose={() => setTransferIssuesModal(false)}
isOpen={transferIssuesModal}
/>
<AnalyticsProjectModal isOpen={analyticsModal} onClose={() => setAnalyticsModal(false)} />
<div
className={`h-full flex flex-col ${cycleSidebar ? "mr-[24rem]" : ""} ${
analyticsModal ? "mr-[50%]" : ""
} duration-300`}
>
{cycleStatus === "completed" && (
<TransferIssues handleClick={() => setTransferIssuesModal(true)} />
)}
<IssuesView
openIssuesListModal={openIssuesListModal}
disableUserActions={cycleStatus === "completed" ?? false}
{error ? (
<EmptyState
image={emptyCycle}
title="Cycle does not exist"
description="The cycle you are looking for does not exist or has been deleted."
primaryButton={{
text: "View other cycles",
onClick: () => router.push(`/${workspaceSlug}/projects/${projectId}/cycles`),
}}
/>
</div>
<CycleDetailsSidebar
cycleStatus={cycleStatus}
cycle={cycleDetails}
isOpen={cycleSidebar}
isCompleted={cycleStatus === "completed" ?? false}
user={user}
/>
) : (
<>
<TransferIssuesModal
handleClose={() => setTransferIssuesModal(false)}
isOpen={transferIssuesModal}
/>
<AnalyticsProjectModal
isOpen={analyticsModal}
onClose={() => setAnalyticsModal(false)}
/>
<div
className={`h-full flex flex-col ${cycleSidebar ? "mr-[24rem]" : ""} ${
analyticsModal ? "mr-[50%]" : ""
} duration-300`}
>
{cycleStatus === "completed" && (
<TransferIssues handleClick={() => setTransferIssuesModal(true)} />
)}
<IssuesView
openIssuesListModal={openIssuesListModal}
disableUserActions={cycleStatus === "completed" ?? false}
/>
</div>
<CycleDetailsSidebar
cycleStatus={cycleStatus}
cycle={cycleDetails}
isOpen={cycleSidebar}
isCompleted={cycleStatus === "completed" ?? false}
user={user}
/>
</>
)}
</ProjectAuthorizationWrapper>
</IssueViewContextProvider>
);

22
apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
View file

@ -15,8 +15,10 @@ import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
// components
import { IssueDetailsSidebar, IssueMainContent } from "components/issues";
// ui
import { Loader } from "components/ui";
import { EmptyState, Loader } from "components/ui";
import { Breadcrumbs } from "components/breadcrumbs";
// images
import emptyIssue from "public/empty-state/issue.svg";
// types
import { IIssue } from "types";
import type { NextPage } from "next";
@ -45,7 +47,11 @@ const IssueDetailsPage: NextPage = () => {
const { user } = useUserAuth();
const { data: issueDetails, mutate: mutateIssueDetails } = useSWR<IIssue | undefined>(
const {
data: issueDetails,
mutate: mutateIssueDetails,
error,
} = useSWR(
workspaceSlug && projectId && issueId ? ISSUE_DETAILS(issueId as string) : null,
workspaceSlug && projectId && issueId
? () =>
@ -125,7 +131,17 @@ const IssueDetailsPage: NextPage = () => {
</Breadcrumbs>
}
>
{issueDetails && projectId ? (
{error ? (
<EmptyState
image={emptyIssue}
title="Issue does not exist"
description="The issue you are looking for does not exist, has been archived, or has been deleted."
primaryButton={{
text: "View other issues",
onClick: () => router.push(`/${workspaceSlug}/projects/${projectId}/issues`),
}}
/>
) : issueDetails && projectId ? (
<div className="flex h-full overflow-hidden">
<div className="w-2/3 h-full overflow-y-auto space-y-5 divide-y-2 divide-custom-border-300 p-5">
<IssueMainContent issueDetails={issueDetails} submitChanges={submitChanges} />

53
apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
View file

@ -20,8 +20,10 @@ import { ExistingIssuesListModal, IssuesFilterView, IssuesView } from "component
import { ModuleDetailsSidebar } from "components/modules";
import { AnalyticsProjectModal } from "components/analytics";
// ui
import { CustomMenu, SecondaryButton } from "components/ui";
import { CustomMenu, EmptyState, SecondaryButton } from "components/ui";
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
// images
import emptyModule from "public/empty-state/module.svg";
// helpers
import { truncateText } from "helpers/string.helper";
// types
@ -60,7 +62,7 @@ const SingleModule: React.FC = () => {
: null
);
const { data: moduleDetails } = useSWR(
const { data: moduleDetails, error } = useSWR(
moduleId ? MODULE_DETAILS(moduleId as string) : null,
workspaceSlug && projectId
? () =>
@ -162,22 +164,37 @@ const SingleModule: React.FC = () => {
</div>
}
>
<AnalyticsProjectModal isOpen={analyticsModal} onClose={() => setAnalyticsModal(false)} />
<div
className={`h-full flex flex-col ${moduleSidebar ? "mr-[24rem]" : ""} ${
analyticsModal ? "mr-[50%]" : ""
} duration-300`}
>
<IssuesView openIssuesListModal={openIssuesListModal} />
</div>
<ModuleDetailsSidebar
module={moduleDetails}
isOpen={moduleSidebar}
moduleIssues={moduleIssues}
user={user}
/>
{error ? (
<EmptyState
image={emptyModule}
title="Module does not exist"
description="The module you are looking for does not exist or has been deleted."
primaryButton={{
text: "View other modules",
onClick: () => router.push(`/${workspaceSlug}/projects/${projectId}/modules`),
}}
/>
) : (
<>
<AnalyticsProjectModal
isOpen={analyticsModal}
onClose={() => setAnalyticsModal(false)}
/>
<div
className={`h-full flex flex-col ${moduleSidebar ? "mr-[24rem]" : ""} ${
analyticsModal ? "mr-[50%]" : ""
} duration-300`}
>
<IssuesView openIssuesListModal={openIssuesListModal} />
</div>
<ModuleDetailsSidebar
module={moduleDetails}
isOpen={moduleSidebar}
moduleIssues={moduleIssues}
user={user}
/>
</>
)}
</ProjectAuthorizationWrapper>
</IssueViewContextProvider>
);

69
apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
View file

@ -1,4 +1,4 @@
import React, { useCallback, useEffect, useRef, useState } from "react";
import React, { useEffect, useRef, useState } from "react";
import { useRouter } from "next/router";
@ -28,7 +28,16 @@ import { CreateLabelModal } from "components/labels";
import { CreateBlock } from "components/pages/create-block";
// ui
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
import { CustomSearchSelect, Loader, TextArea, ToggleSwitch, Tooltip } from "components/ui";
import {
CustomSearchSelect,
EmptyState,
Loader,
TextArea,
ToggleSwitch,
Tooltip,
} from "components/ui";
// images
import emptyPage from "public/empty-state/page.svg";
// icons
import {
ArrowLeftIcon,
@ -40,7 +49,7 @@ import {
XMarkIcon,
ChevronDownIcon,
} from "@heroicons/react/24/outline";
import { ColorPalletteIcon, ClipboardIcon } from "components/icons";
import { ColorPalletteIcon } from "components/icons";
// helpers
import { render24HourFormatTime, renderShortDate } from "helpers/date-time.helper";
import { copyTextToClipboard, truncateText } from "helpers/string.helper";
@ -82,7 +91,7 @@ const SinglePage: NextPage = () => {
: null
);
const { data: pageDetails } = useSWR(
const { data: pageDetails, error } = useSWR(
workspaceSlug && projectId && pageId ? PAGE_DETAILS(pageId as string) : null,
workspaceSlug && projectId
? () =>
@ -267,13 +276,6 @@ const SinglePage: NextPage = () => {
);
};
const handleNewBlock = useCallback(() => {
setCreateBlockForm(true);
scrollToRef.current?.scrollIntoView({
behavior: "smooth",
});
}, [setCreateBlockForm, scrollToRef]);
const handleShowBlockToggle = async () => {
if (!workspaceSlug || !projectId) return;
@ -311,22 +313,21 @@ const SinglePage: NextPage = () => {
});
};
const options =
labels?.map((label) => ({
value: label.id,
query: label.name,
content: (
<div className="flex items-center gap-2">
<span
className="h-2 w-2 flex-shrink-0 rounded-full"
style={{
backgroundColor: label.color && label.color !== "" ? label.color : "#000000",
}}
/>
{label.name}
</div>
),
})) ?? [];
const options = labels?.map((label) => ({
value: label.id,
query: label.name,
content: (
<div className="flex items-center gap-2">
<span
className="h-2 w-2 flex-shrink-0 rounded-full"
style={{
backgroundColor: label.color && label.color !== "" ? label.color : "#000000",
}}
/>
{label.name}
</div>
),
}));
useEffect(() => {
if (!pageDetails) return;
@ -346,11 +347,21 @@ const SinglePage: NextPage = () => {
breadcrumbs={
<Breadcrumbs>
<BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
<BreadcrumbItem title={`${truncateText(projectDetails?.name ?? "Project",32)} Pages`} />
<BreadcrumbItem title={`${truncateText(projectDetails?.name ?? "Project", 32)} Pages`} />
</Breadcrumbs>
}
>
{pageDetails ? (
{error ? (
<EmptyState
image={emptyPage}
title="Page does not exist"
description="The page you are looking for does not exist or has been deleted."
primaryButton={{
text: "View other pages",
onClick: () => router.push(`/${workspaceSlug}/projects/${projectId}/pages`),
}}
/>
) : pageDetails ? (
<div className="flex h-full flex-col justify-between space-y-4 overflow-hidden p-4">
<div className="h-full w-full overflow-y-auto">
<div className="flex items-start justify-between gap-2">

24
apps/app/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx
View file

@ -12,11 +12,13 @@ import { IssueViewContextProvider } from "contexts/issue-view.context";
// components
import { IssuesFilterView, IssuesView } from "components/core";
// ui
import { CustomMenu, PrimaryButton } from "components/ui";
import { CustomMenu, EmptyState, PrimaryButton } from "components/ui";
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
// icons
import { PlusIcon } from "@heroicons/react/24/outline";
import { StackedLayersIcon } from "components/icons";
// images
import emptyView from "public/empty-state/view.svg";
// helpers
import { truncateText } from "helpers/string.helper";
// fetch-keys
@ -40,7 +42,7 @@ const SingleView: React.FC = () => {
: null
);
const { data: viewDetails } = useSWR(
const { data: viewDetails, error } = useSWR(
workspaceSlug && projectId && viewId ? VIEW_DETAILS(viewId as string) : null,
workspaceSlug && projectId && viewId
? () =>
@ -101,9 +103,21 @@ const SingleView: React.FC = () => {
</div>
}
>
<div className="h-full w-full flex flex-col">
<IssuesView />
</div>
{error ? (
<EmptyState
image={emptyView}
title="View does not exist"
description="The view you are looking for does not exist or has been deleted."
primaryButton={{
text: "View other views",
onClick: () => router.push(`/${workspaceSlug}/projects/${projectId}/views`),
}}
/>
) : (
<div className="h-full w-full flex flex-col">
<IssuesView />
</div>
)}
</ProjectAuthorizationWrapper>
</IssueViewContextProvider>
);

2
apps/app/pages/_app.tsx
View file

@ -45,7 +45,7 @@ Router.events.on("routeChangeComplete", NProgress.done);
function MyApp({ Component, pageProps }: AppProps) {
return (
// <UserProvider>
<ThemeProvider themes={THEMES} defaultTheme="dark">
<ThemeProvider themes={THEMES} defaultTheme="system">
<ToastContextProvider>
<ThemeContextProvider>
<CrispWithNoSSR />

143
apps/app/pages/colors.tsx
View file

@ -1,143 +0,0 @@
import React from "react";
// layouts
import DefaultLayout from "layouts/default-layout";
import { UserAuthorizationLayout } from "layouts/auth-layout/user-authorization-wrapper";
// types
import type { NextPage } from "next";
const Colors: NextPage = () => (
<UserAuthorizationLayout>
<DefaultLayout>
<div className="space-y-8 p-8">
<div>
Primary:
<div className="flex flex-wrap">
<div className="h-12 w-12 bg-custom-primary-0" />
<div className="h-12 w-12 bg-custom-primary-10" />
<div className="h-12 w-12 bg-custom-primary-20" />
<div className="h-12 w-12 bg-custom-primary-30" />
<div className="h-12 w-12 bg-custom-primary-40" />
<div className="h-12 w-12 bg-custom-primary-50" />
<div className="h-12 w-12 bg-custom-primary-60" />
<div className="h-12 w-12 bg-custom-primary-70" />
<div className="h-12 w-12 bg-custom-primary-80" />
<div className="h-12 w-12 bg-custom-primary-90" />
<div className="h-12 w-12 bg-custom-primary-100" />
<div className="h-12 w-12 bg-custom-primary-200" />
<div className="h-12 w-12 bg-custom-primary-300" />
<div className="h-12 w-12 bg-custom-primary-400" />
<div className="h-12 w-12 bg-custom-primary-500" />
<div className="h-12 w-12 bg-custom-primary-600" />
<div className="h-12 w-12 bg-custom-primary-700" />
<div className="h-12 w-12 bg-custom-primary-800" />
<div className="h-12 w-12 bg-custom-primary-900" />
<div className="h-12 w-12 bg-custom-primary-1000" />
</div>
</div>
<div>
Background:
<div className="flex flex-wrap">
<div className="h-12 w-12 bg-custom-background-0" />
<div className="h-12 w-12 bg-custom-background-10" />
<div className="h-12 w-12 bg-custom-background-20" />
<div className="h-12 w-12 bg-custom-background-30" />
<div className="h-12 w-12 bg-custom-background-40" />
<div className="h-12 w-12 bg-custom-background-50" />
<div className="h-12 w-12 bg-custom-background-60" />
<div className="h-12 w-12 bg-custom-background-70" />
<div className="h-12 w-12 bg-custom-background-80" />
<div className="h-12 w-12 bg-custom-background-90" />
<div className="h-12 w-12 bg-custom-background-100" />
<div className="h-12 w-12 bg-custom-background-200" />
<div className="h-12 w-12 bg-custom-background-300" />
<div className="h-12 w-12 bg-custom-background-400" />
<div className="h-12 w-12 bg-custom-background-500" />
<div className="h-12 w-12 bg-custom-background-600" />
<div className="h-12 w-12 bg-custom-background-700" />
<div className="h-12 w-12 bg-custom-background-800" />
<div className="h-12 w-12 bg-custom-background-900" />
<div className="h-12 w-12 bg-custom-background-1000" />
</div>
</div>
<div>
Text:
<div className="flex flex-wrap">
<div className="h-12 w-12 bg-custom-text-0" />
<div className="h-12 w-12 bg-custom-text-10" />
<div className="h-12 w-12 bg-custom-text-20" />
<div className="h-12 w-12 bg-custom-text-30" />
<div className="h-12 w-12 bg-custom-text-40" />
<div className="h-12 w-12 bg-custom-text-50" />
<div className="h-12 w-12 bg-custom-text-60" />
<div className="h-12 w-12 bg-custom-text-70" />
<div className="h-12 w-12 bg-custom-text-80" />
<div className="h-12 w-12 bg-custom-text-90" />
<div className="h-12 w-12 bg-custom-text-100" />
<div className="h-12 w-12 bg-custom-text-200" />
<div className="h-12 w-12 bg-custom-text-300" />
<div className="h-12 w-12 bg-custom-text-400" />
<div className="h-12 w-12 bg-custom-text-500" />
<div className="h-12 w-12 bg-custom-text-600" />
<div className="h-12 w-12 bg-custom-text-700" />
<div className="h-12 w-12 bg-custom-text-800" />
<div className="h-12 w-12 bg-custom-text-900" />
<div className="h-12 w-12 bg-custom-text-1000" />
</div>
</div>
<div>
Sidebar Background:
<div className="flex flex-wrap">
<div className="h-12 w-12 bg-custom-sidebar-background-0" />
<div className="h-12 w-12 bg-custom-sidebar-background-10" />
<div className="h-12 w-12 bg-custom-sidebar-background-20" />
<div className="h-12 w-12 bg-custom-sidebar-background-30" />
<div className="h-12 w-12 bg-custom-sidebar-background-40" />
<div className="h-12 w-12 bg-custom-sidebar-background-50" />
<div className="h-12 w-12 bg-custom-sidebar-background-60" />
<div className="h-12 w-12 bg-custom-sidebar-background-70" />
<div className="h-12 w-12 bg-custom-sidebar-background-80" />
<div className="h-12 w-12 bg-custom-sidebar-background-90" />
<div className="h-12 w-12 bg-custom-sidebar-background-100" />
<div className="h-12 w-12 bg-custom-sidebar-background-200" />
<div className="h-12 w-12 bg-custom-sidebar-background-300" />
<div className="h-12 w-12 bg-custom-sidebar-background-400" />
<div className="h-12 w-12 bg-custom-sidebar-background-500" />
<div className="h-12 w-12 bg-custom-sidebar-background-600" />
<div className="h-12 w-12 bg-custom-sidebar-background-700" />
<div className="h-12 w-12 bg-custom-sidebar-background-800" />
<div className="h-12 w-12 bg-custom-sidebar-background-900" />
<div className="h-12 w-12 bg-custom-sidebar-background-1000" />
</div>
</div>
<div>
Sidebar Text:
<div className="flex flex-wrap">
<div className="h-12 w-12 bg-custom-sidebar-text-0" />
<div className="h-12 w-12 bg-custom-sidebar-text-10" />
<div className="h-12 w-12 bg-custom-sidebar-text-20" />
<div className="h-12 w-12 bg-custom-sidebar-text-30" />
<div className="h-12 w-12 bg-custom-sidebar-text-40" />
<div className="h-12 w-12 bg-custom-sidebar-text-50" />
<div className="h-12 w-12 bg-custom-sidebar-text-60" />
<div className="h-12 w-12 bg-custom-sidebar-text-70" />
<div className="h-12 w-12 bg-custom-sidebar-text-80" />
<div className="h-12 w-12 bg-custom-sidebar-text-90" />
<div className="h-12 w-12 bg-custom-sidebar-text-100" />
<div className="h-12 w-12 bg-custom-sidebar-text-200" />
<div className="h-12 w-12 bg-custom-sidebar-text-300" />
<div className="h-12 w-12 bg-custom-sidebar-text-400" />
<div className="h-12 w-12 bg-custom-sidebar-text-500" />
<div className="h-12 w-12 bg-custom-sidebar-text-600" />
<div className="h-12 w-12 bg-custom-sidebar-text-700" />
<div className="h-12 w-12 bg-custom-sidebar-text-800" />
<div className="h-12 w-12 bg-custom-sidebar-text-900" />
<div className="h-12 w-12 bg-custom-sidebar-text-1000" />
</div>
</div>
</div>
</DefaultLayout>
</UserAuthorizationLayout>
);
export default Colors;

34
apps/app/pages/index.tsx
View file

@ -1,4 +1,4 @@
import React from "react";
import React, { useEffect } from "react";
import Image from "next/image";
@ -22,6 +22,8 @@ import {
import { Spinner } from "components/ui";
// images
import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
import { useTheme } from "next-themes";
import { ICurrentUserResponse, IUser } from "types";
// types
type EmailPasswordFormValues = {
email: string;
@ -34,6 +36,12 @@ const HomePage: NextPage = () => {
const { setToastAlert } = useToast();
const { setTheme } = useTheme();
const changeTheme = (user: IUser) => {
setTheme(user.theme.theme ?? "system");
};
const handleGoogleSignIn = async ({ clientId, credential }: any) => {
try {
if (clientId && credential) {
@ -43,7 +51,10 @@ const HomePage: NextPage = () => {
clientId,
};
const response = await authenticationService.socialAuth(socialAuthPayload);
if (response && response?.user) mutateUser();
if (response && response?.user) {
mutateUser();
changeTheme(response.user);
}
} else {
throw Error("Cant find credentials");
}
@ -66,7 +77,10 @@ const HomePage: NextPage = () => {
clientId: process.env.NEXT_PUBLIC_GITHUB_ID,
};
const response = await authenticationService.socialAuth(socialAuthPayload);
if (response && response?.user) mutateUser();
if (response && response?.user) {
mutateUser();
changeTheme(response.user);
}
} else {
throw Error("Cant find credentials");
}
@ -85,7 +99,10 @@ const HomePage: NextPage = () => {
.emailLogin(formData)
.then((response) => {
try {
if (response) mutateUser();
if (response) {
mutateUser();
changeTheme(response.user);
}
} catch (err: any) {
setToastAlert({
type: "error",
@ -109,7 +126,10 @@ const HomePage: NextPage = () => {
const handleEmailCodeSignIn = async (response: any) => {
try {
if (response) mutateUser();
if (response) {
mutateUser();
changeTheme(response.user);
}
} catch (err: any) {
setToastAlert({
type: "error",
@ -120,6 +140,10 @@ const HomePage: NextPage = () => {
}
};
useEffect(() => {
setTheme("system");
}, [setTheme]);
return (
<DefaultLayout>
{isLoading ? (

13
apps/app/pages/magic-sign-in.tsx
View file

@ -1,6 +1,9 @@
import React, { useState, useEffect } from "react";
// next imports
import { useRouter } from "next/router";
// next-themes
import { useTheme } from "next-themes";
// layouts
import DefaultLayout from "layouts/default-layout";
// services
@ -17,11 +20,17 @@ const MagicSignIn: NextPage = () => {
const { setToastAlert } = useToast();
const { user, isLoading, mutateUser } = useUserAuth("sign-in");
const { setTheme } = useTheme();
const { mutateUser } = useUserAuth("sign-in");
const [isSigningIn, setIsSigningIn] = useState(false);
const [errorSigningIn, setErrorSignIn] = useState<string | undefined>();
useEffect(() => {
setTheme("system");
}, [setTheme]);
useEffect(() => {
setIsSigningIn(() => false);
setErrorSignIn(() => undefined);

7
apps/app/pages/onboarding.tsx
View file

@ -1,6 +1,5 @@
import { useEffect, useState } from "react";
import Router from "next/router";
import Image from "next/image";
import useSWR, { mutate } from "swr";
@ -32,7 +31,7 @@ import { CURRENT_USER, USER_WORKSPACE_INVITATIONS } from "constants/fetch-keys";
const Onboarding: NextPage = () => {
const [step, setStep] = useState<number | null>(null);
const { theme } = useTheme();
const { theme, setTheme } = useTheme();
const { user, isLoading: userLoading } = useUserAuth("onboarding");
@ -117,6 +116,10 @@ const Onboarding: NextPage = () => {
await userService.updateUserOnBoard({ userRole: user.role }, user);
};
useEffect(() => {
setTheme("system");
}, [setTheme]);
useEffect(() => {
const handleStepChange = async () => {
if (!user || !invitations) return;

8
apps/app/pages/reset-password.tsx
View file

@ -3,6 +3,8 @@ import React, { useEffect, useState } from "react";
import { useRouter } from "next/router";
import Image from "next/image";
// next-themes
import { useTheme } from "next-themes";
// react-hook-form
import { useForm } from "react-hook-form";
// hooks
@ -31,6 +33,8 @@ const ResetPasswordPage: NextPage = () => {
const { setToastAlert } = useToast();
const { setTheme } = useTheme();
const {
register,
handleSubmit,
@ -76,6 +80,10 @@ const ResetPasswordPage: NextPage = () => {
);
};
useEffect(() => {
setTheme("system");
}, [setTheme]);
useEffect(() => {
if (parseInt(process.env.NEXT_PUBLIC_ENABLE_OAUTH || "0")) router.push("/");
else setIsLoading(false);

8
apps/app/pages/sign-up.tsx
View file

@ -3,6 +3,8 @@ import React, { useEffect, useState } from "react";
import Image from "next/image";
import { useRouter } from "next/router";
// next-themes
import { useTheme } from "next-themes";
// services
import authenticationService from "services/authentication.service";
// hooks
@ -31,6 +33,8 @@ const SignUp: NextPage = () => {
const { setToastAlert } = useToast();
const { setTheme } = useTheme();
const { mutateUser } = useUserAuth("sign-in");
const handleSignUp = async (formData: EmailPasswordFormValues) => {
@ -62,6 +66,10 @@ const SignUp: NextPage = () => {
);
};
useEffect(() => {
setTheme("system");
}, [setTheme]);
useEffect(() => {
if (parseInt(process.env.NEXT_PUBLIC_ENABLE_OAUTH || "0")) router.push("/");
else setIsLoading(false);