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

style: new empty states (#1497)

Browse source 
* fix: custom colors opacity

* chore: update text colors for dark mode

* fix: dropdown text colors, datepicker bg color

* chore: update text colors

* chore: updated primary bg color

* style: new empty states added

* refactor: empty state for issues

* style: empty state for estimates

* chore: update labels, estimates and integrations empty states

* fix: custom analytics sidebar
This commit is contained in:
Aaryan Khandelwal 2023-07-12 11:45:45 +05:30 • committed by GitHub
parent 82ff786666
commit 4a2057c0b3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
44 changed files with 757 additions and 792 deletions
Download patch file Download diff file Expand all files Collapse all files

1
apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
View file

@ -10,7 +10,6 @@ import { Tab } from "@headlessui/react";
import useLocalStorage from "hooks/use-local-storage";
import useUserAuth from "hooks/use-user-auth";
// services
import cycleService from "services/cycles.service";
import projectService from "services/project.service";
// layouts
import { ProjectAuthorizationWrapper } from "layouts/auth-layout";

19
apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
View file

@ -21,9 +21,9 @@ import {
import { EmptyState, Loader, PrimaryButton } from "components/ui";
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
// icons
import { ChartBarIcon, PlusIcon, Squares2X2Icon } from "@heroicons/react/24/outline";
import { PlusIcon, Squares2X2Icon } from "@heroicons/react/24/outline";
// images
import emptyModule from "public/empty-state/empty-module.svg";
import emptyModule from "public/empty-state/module.svg";
// types
import { IModule, SelectModuleType } from "types/modules";
import type { NextPage } from "next";
@ -141,10 +141,17 @@ const ProjectModules: NextPage = () => {
</div>
) : (
<EmptyState
type="module"
title="Create New Module"
description="Modules are smaller, focused projects that help you group and organize issues within a specific time frame."
imgURL={emptyModule}
title="Manage your project with modules"
description="Modules are smaller, focused projects that help you group and organize issues."
image={emptyModule}
buttonText="New Module"
buttonIcon={<PlusIcon className="h-4 w-4" />}
onClick={() => {
const e = new KeyboardEvent("keydown", {
key: "m",
});
document.dispatchEvent(e);
}}
/>
)
) : (

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

@ -41,7 +41,7 @@ import {
} from "@heroicons/react/24/outline";
import { ColorPalletteIcon, ClipboardIcon } from "components/icons";
// helpers
import { renderShortTime, renderShortDate } from "helpers/date-time.helper";
import { render24HourFormatTime, renderShortDate } from "helpers/date-time.helper";
import { copyTextToClipboard } from "helpers/string.helper";
import { orderArrayBy } from "helpers/array.helper";
// types
@ -397,11 +397,11 @@ const SinglePage: NextPage = () => {
<div className="flex items-center">
<div className="flex items-center gap-6 text-custom-text-200">
<Tooltip
tooltipContent={`Last updated at ${renderShortTime(
tooltipContent={`Last updated at ${render24HourFormatTime(
pageDetails.updated_at
)} on ${renderShortDate(pageDetails.updated_at)}`}
>
<p className="text-sm">{renderShortTime(pageDetails.updated_at)}</p>
<p className="text-sm">{render24HourFormatTime(pageDetails.updated_at)}</p>
</Tooltip>
<button className="flex items-center gap-2" onClick={handleCopyText}>
<LinkIcon className="h-4 w-4" />

15
apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
View file

@ -23,7 +23,7 @@ import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
// icons
import { PlusIcon } from "@heroicons/react/24/outline";
// images
import emptyEstimate from "public/empty-state/empty-estimate.svg";
import emptyEstimate from "public/empty-state/estimate.svg";
// types
import { IEstimate, IProject } from "types";
import type { NextPage } from "next";
@ -158,13 +158,14 @@ const EstimatesSettings: NextPage = () => {
))}
</section>
) : (
<div className="grid h-full w-full place-items-center">
<div className="h-full w-full overflow-y-auto">
<EmptyState
type="estimate"
title="Create New Estimate"
description="Estimates help you communicate the complexity of an issue. You can create your own estimate and communicate with your team."
imgURL={emptyEstimate}
action={() => {
title="No estimates yet"
description="Estimates help you communicate the complexity of an issue."
image={emptyEstimate}
buttonText="Add Estimate"
buttonIcon={<PlusIcon className="h-4 w-4" />}
onClick={() => {
setEstimateToUpdate(undefined);
setEstimateFormOpen(true);
}}

31
apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx
View file

@ -12,15 +12,12 @@ import projectService from "services/project.service";
// components
import { SettingsHeader, SingleIntegration } from "components/project";
// ui
import {
EmptySpace,
EmptySpaceItem,
IntegrationAndImportExportBanner,
Loader,
} from "components/ui";
import { EmptyState, IntegrationAndImportExportBanner, Loader } from "components/ui";
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
// icons
import { PlusIcon, PuzzlePieceIcon } from "@heroicons/react/24/outline";
// images
import emptyIntegration from "public/empty-state/integration.svg";
// types
import { IProject } from "types";
import type { NextPage } from "next";
@ -74,21 +71,13 @@ const ProjectIntegrations: NextPage = () => {
</div>
</section>
) : (
<div className="grid h-full w-full place-items-center">
<EmptySpace
title="You haven't added any integration yet."
description="Add GitHub and other integrations to sync your project issues."
Icon={PuzzlePieceIcon}
>
<EmptySpaceItem
title="Add new integration"
Icon={PlusIcon}
action={() => {
router.push(`/${workspaceSlug}/settings/integrations`);
}}
/>
</EmptySpace>
</div>
<EmptyState
title="You haven't configured integrations"
description="Configure GitHub and other integrations to sync your project issues."
image={emptyIntegration}
buttonText="Configure now"
onClick={() => router.push(`/${workspaceSlug}/settings/integrations`)}
/>
)
) : (
<Loader className="space-y-5">

63
apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
View file

@ -21,10 +21,12 @@ import {
} from "components/labels";
import { SettingsHeader } from "components/project";
// ui
import { Loader, PrimaryButton } from "components/ui";
import { EmptyState, Loader, PrimaryButton } from "components/ui";
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
// icons
import { PlusIcon } from "@heroicons/react/24/outline";
// images
import emptyLabel from "public/empty-state/label.svg";
// types
import { IIssueLabels } from "types";
import type { NextPage } from "next";
@ -133,16 +135,33 @@ const LabelsSettings: NextPage = () => {
)}
<>
{issueLabels ? (
issueLabels.map((label) => {
const children = issueLabels?.filter((l) => l.parent === label.id);
issueLabels.length > 0 ? (
issueLabels.map((label) => {
const children = issueLabels?.filter((l) => l.parent === label.id);
if (children && children.length === 0) {
if (!label.parent)
if (children && children.length === 0) {
if (!label.parent)
return (
<SingleLabel
key={label.id}
label={label}
addLabelToGroup={() => addLabelToGroup(label)}
editLabel={(label) => {
editLabel(label);
scrollToRef.current?.scrollIntoView({
behavior: "smooth",
});
}}
handleLabelDelete={() => setSelectDeleteLabel(label)}
/>
);
} else
return (
<SingleLabel
<SingleLabelGroup
key={label.id}
label={label}
addLabelToGroup={() => addLabelToGroup(label)}
labelChildren={children}
addLabelToGroup={addLabelToGroup}
editLabel={(label) => {
editLabel(label);
scrollToRef.current?.scrollIntoView({
@ -150,26 +169,20 @@ const LabelsSettings: NextPage = () => {
});
}}
handleLabelDelete={() => setSelectDeleteLabel(label)}
user={user}
/>
);
} else
return (
<SingleLabelGroup
key={label.id}
label={label}
labelChildren={children}
addLabelToGroup={addLabelToGroup}
editLabel={(label) => {
editLabel(label);
scrollToRef.current?.scrollIntoView({
behavior: "smooth",
});
}}
handleLabelDelete={() => setSelectDeleteLabel(label)}
user={user}
/>
);
})
})
) : (
<EmptyState
title="No labels yet"
description="Create labels to help organize and filter issues in you project"
image={emptyLabel}
buttonText="Add label"
onClick={newLabel}
isFullScreen={false}
/>
)
) : (
<Loader className="space-y-5">
<Loader.Item height="40px" />

15
apps/app/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx
View file

@ -16,7 +16,7 @@ import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
//icons
import { PlusIcon } from "components/icons";
// images
import emptyView from "public/empty-state/empty-view.svg";
import emptyView from "public/empty-state/view.svg";
// fetching keys
import { PROJECT_DETAILS, VIEWS_LIST } from "constants/fetch-keys";
// components
@ -115,10 +115,17 @@ const ProjectViews: NextPage = () => {
</div>
) : (
<EmptyState
type="view"
title="Create New View"
title="Get focused with views"
description="Views aid in saving your issues by applying various filters and grouping options."
imgURL={emptyView}
image={emptyView}
buttonText="New View"
buttonIcon={<PlusIcon className="h-4 w-4" />}
onClick={() => {
const e = new KeyboardEvent("keydown", {
key: "v",
});
document.dispatchEvent(e);
}}
/>
)
) : (