From 3c2f5d12ed3548d63336c5f05462f0d1cc3c1648 Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com> Date: Thu, 20 Apr 2023 13:41:24 +0530 Subject: [PATCH] feat: themes (#902) * chore: add next theme and initial setup * chore: add dark mode colors to layouts * chore: user general setting page theming * chore: dashboard theming * chore: project page theming * chore: workspace setting page theming * chore: my issue page theming * chore: cmdk theming * chore: change hardcode bg and text color to theme * chore: change color name according to the design * style: fix card in the dashboard * style: fix merge conflict design issues * style: add light high contrast and dark high contrast * style: fix cmd k menu color and selection * feat: change theme from cmdk menu * chore: add multiple theme field to custom theme * chore: removed custom theming * fix: build error --------- Co-authored-by: Saheb Giri --- .../components/account/email-code-form.tsx | 2 +- .../account/email-password-form.tsx | 2 +- .../account/github-login-button.tsx | 2 +- .../auth-screens/not-authorized-view.tsx | 8 +- apps/app/components/breadcrumbs/index.tsx | 4 +- .../change-interface-theme.tsx | 45 +++ .../command-palette/command-pallette.tsx | 121 ++++---- apps/app/components/command-palette/index.ts | 1 + .../command-palette/shortcuts-modal.tsx | 30 +- .../components/core/board-view/all-boards.tsx | 4 +- .../core/board-view/board-header.tsx | 8 +- .../core/board-view/single-board.tsx | 12 +- .../core/board-view/single-issue.tsx | 10 +- .../core/bulk-delete-issues-modal.tsx | 16 +- .../core/calendar-view/calendar.tsx | 22 +- .../app/components/core/custom-theme-form.tsx | 267 ++++++++++++++++++ .../components/core/custom-theme-modal.tsx | 65 +++++ .../core/existing-issues-list-modal.tsx | 16 +- apps/app/components/core/feeds.tsx | 30 +- apps/app/components/core/filter-list.tsx | 8 +- .../components/core/gpt-assistant-modal.tsx | 2 +- .../components/core/image-picker-popover.tsx | 10 +- .../components/core/image-upload-modal.tsx | 12 +- apps/app/components/core/index.ts | 1 + .../components/core/issues-view-filter.tsx | 45 ++- apps/app/components/core/issues-view.tsx | 4 +- apps/app/components/core/link-modal.tsx | 6 +- .../core/list-view/single-issue.tsx | 2 +- .../components/core/list-view/single-list.tsx | 16 +- .../components/core/sidebar/links-list.tsx | 8 +- .../core/sidebar/sidebar-progress-stats.tsx | 16 +- .../core/sidebar/single-progress-stats.tsx | 4 +- apps/app/components/core/theme-switch.tsx | 60 ++++ .../cycles/completed-cycles-list.tsx | 2 +- apps/app/components/cycles/cycles-list.tsx | 4 +- .../components/cycles/delete-cycle-modal.tsx | 10 +- apps/app/components/cycles/empty-cycle.tsx | 22 +- apps/app/components/cycles/form.tsx | 4 +- apps/app/components/cycles/modal.tsx | 4 +- apps/app/components/cycles/select.tsx | 14 +- apps/app/components/cycles/sidebar.tsx | 42 +-- .../components/cycles/single-cycle-card.tsx | 8 +- .../cycles/transfer-issues-modal.tsx | 14 +- .../app/components/cycles/transfer-issues.tsx | 2 +- .../components/emoji-icon-picker/index.tsx | 12 +- .../integration/single-integration-card.tsx | 2 +- apps/app/components/issues/activity.tsx | 26 +- .../components/issues/comment/add-comment.tsx | 14 +- .../issues/comment/comment-card.tsx | 6 +- .../components/issues/delete-issue-modal.tsx | 6 +- .../components/issues/description-form.tsx | 4 +- apps/app/components/issues/form.tsx | 18 +- apps/app/components/issues/modal.tsx | 4 +- .../components/issues/my-issues-list-item.tsx | 8 +- .../issues/parent-issues-list-modal.tsx | 30 +- .../app/components/issues/select/assignee.tsx | 6 +- apps/app/components/issues/select/date.tsx | 6 +- apps/app/components/issues/select/label.tsx | 32 +-- .../app/components/issues/select/priority.tsx | 4 +- apps/app/components/issues/select/project.tsx | 2 +- apps/app/components/issues/select/state.tsx | 4 +- .../issues/sidebar-select/assignee.tsx | 4 +- .../issues/sidebar-select/blocked.tsx | 22 +- .../issues/sidebar-select/blocker.tsx | 22 +- .../issues/sidebar-select/cycle.tsx | 2 +- .../issues/sidebar-select/module.tsx | 2 +- .../issues/sidebar-select/parent.tsx | 4 +- .../issues/sidebar-select/priority.tsx | 2 +- .../issues/sidebar-select/state.tsx | 2 +- apps/app/components/issues/sidebar.tsx | 38 +-- .../app/components/issues/sub-issues-list.tsx | 8 +- .../issues/view-select/assignee.tsx | 8 +- .../components/issues/view-select/state.tsx | 2 +- .../components/labels/create-label-modal.tsx | 12 +- .../labels/create-update-label-inline.tsx | 8 +- .../components/labels/labels-list-modal.tsx | 14 +- .../components/labels/single-label-group.tsx | 10 +- apps/app/components/labels/single-label.tsx | 4 +- .../modules/delete-module-modal.tsx | 10 +- apps/app/components/modules/form.tsx | 4 +- apps/app/components/modules/modal.tsx | 4 +- .../components/modules/select/select-lead.tsx | 4 +- .../modules/select/select-members.tsx | 8 +- .../modules/sidebar-select/select-lead.tsx | 4 +- .../modules/sidebar-select/select-members.tsx | 4 +- .../modules/sidebar-select/select-status.tsx | 2 +- apps/app/components/modules/sidebar.tsx | 46 +-- .../components/modules/single-module-card.tsx | 16 +- .../components/onboarding/invite-members.tsx | 2 +- .../components/onboarding/user-details.tsx | 4 +- apps/app/components/onboarding/workspace.tsx | 20 +- .../pages/create-update-page-modal.tsx | 4 +- .../components/pages/delete-page-modal.tsx | 10 +- apps/app/components/pages/page-form.tsx | 2 +- apps/app/components/pages/pages-view.tsx | 4 +- .../pages/single-page-detailed-item.tsx | 2 +- .../pages/single-page-list-item.tsx | 4 +- .../project/confirm-project-member-remove.tsx | 10 +- .../project/create-project-modal.tsx | 4 +- .../project/delete-project-modal.tsx | 6 +- .../components/project/join-project-modal.tsx | 6 +- .../project/send-project-invitation-modal.tsx | 10 +- .../project/settings/single-label.tsx | 10 +- apps/app/components/project/sidebar-list.tsx | 4 +- .../project/single-integration-card.tsx | 2 +- .../project/single-project-card.tsx | 4 +- .../project/single-sidebar-project.tsx | 10 +- .../app/components/rich-text-editor/index.tsx | 12 +- .../toolbar/float-tool-tip.tsx | 8 +- .../rich-text-editor/toolbar/link.tsx | 4 +- .../toolbar/table-controls.tsx | 4 +- apps/app/components/search-listbox/index.tsx | 12 +- .../components/states/create-state-modal.tsx | 12 +- .../states/create-update-state-inline.tsx | 2 +- .../components/states/delete-state-modal.tsx | 13 +- apps/app/components/states/single-state.tsx | 10 +- apps/app/components/ui/avatar.tsx | 4 +- .../components/ui/buttons/primary-button.tsx | 6 +- .../ui/buttons/secondary-button.tsx | 8 +- apps/app/components/ui/context-menu.tsx | 6 +- apps/app/components/ui/custom-menu.tsx | 16 +- .../components/ui/custom-search-select.tsx | 22 +- apps/app/components/ui/custom-select.tsx | 12 +- apps/app/components/ui/date.tsx | 10 +- apps/app/components/ui/datepicker.tsx | 6 +- apps/app/components/ui/empty-space.tsx | 16 +- apps/app/components/ui/empty-state.tsx | 6 +- apps/app/components/ui/input/index.tsx | 6 +- apps/app/components/ui/labels-list.tsx | 2 +- apps/app/components/ui/loader.tsx | 2 +- apps/app/components/ui/multi-input.tsx | 4 +- .../components/ui/multi-level-dropdown.tsx | 14 +- apps/app/components/ui/multi-level-select.tsx | 12 +- apps/app/components/ui/outline-button.tsx | 4 +- apps/app/components/ui/text-area/index.tsx | 4 +- apps/app/components/ui/tooltip.tsx | 2 +- .../components/views/delete-view-modal.tsx | 17 +- apps/app/components/views/form.tsx | 2 +- apps/app/components/views/modal.tsx | 4 +- .../components/workspace/activity-graph.tsx | 14 +- .../workspace/completed-issues-graph.tsx | 6 +- .../confirm-workspace-member-remove.tsx | 10 +- .../workspace/create-workspace-form.tsx | 8 +- .../workspace/delete-workspace-modal.tsx | 6 +- .../app/components/workspace/help-section.tsx | 28 +- apps/app/components/workspace/issues-list.tsx | 10 +- .../components/workspace/issues-pie-chart.tsx | 2 +- .../app/components/workspace/issues-stats.tsx | 8 +- .../send-workspace-invitation-modal.tsx | 8 +- .../components/workspace/sidebar-dropdown.tsx | 24 +- .../app/components/workspace/sidebar-menu.tsx | 8 +- .../workspace/single-invitation.tsx | 6 +- apps/app/constants/themes.ts | 35 +++ apps/app/helpers/theme.helper.ts | 35 +++ apps/app/layouts/app-layout/app-header.tsx | 4 +- apps/app/layouts/app-layout/app-sidebar.tsx | 4 +- apps/app/layouts/app-layout/index.tsx | 12 +- .../project-authorization-wrapper.tsx | 2 +- .../workspace-authorization-wrapper.tsx | 6 +- apps/app/layouts/default-layout/index.tsx | 2 +- apps/app/layouts/settings-navbar.tsx | 6 +- apps/app/package.json | 1 + apps/app/pages/404.tsx | 2 +- apps/app/pages/[workspaceSlug]/index.tsx | 6 +- .../pages/[workspaceSlug]/me/my-issues.tsx | 14 +- .../[workspaceSlug]/me/profile/index.tsx | 31 +- .../projects/[projectId]/cycles/[cycleId].tsx | 2 +- .../projects/[projectId]/cycles/index.tsx | 16 +- .../projects/[projectId]/issues/[issueId].tsx | 12 +- .../[projectId]/modules/[moduleId].tsx | 2 +- .../projects/[projectId]/modules/index.tsx | 2 +- .../projects/[projectId]/pages/[pageId].tsx | 12 +- .../projects/[projectId]/pages/index.tsx | 16 +- .../projects/[projectId]/settings/control.tsx | 4 +- .../[projectId]/settings/features.tsx | 32 +-- .../projects/[projectId]/settings/index.tsx | 12 +- .../projects/[projectId]/settings/labels.tsx | 2 +- .../projects/[projectId]/settings/members.tsx | 6 +- .../projects/[projectId]/settings/states.tsx | 8 +- .../projects/[projectId]/views/index.tsx | 8 +- .../pages/[workspaceSlug]/settings/index.tsx | 10 +- .../[workspaceSlug]/settings/members.tsx | 8 +- apps/app/pages/_app.tsx | 23 +- apps/app/pages/_error.js | 6 +- .../pages/installations/[provider]/index.tsx | 4 +- apps/app/pages/signin.tsx | 6 +- .../[invitationId].tsx | 2 +- apps/app/styles/command-pallette.css | 8 +- apps/app/styles/globals.css | 79 +++++- apps/app/tailwind.config.js | 32 +++ yarn.lock | 5 + 191 files changed, 1550 insertions(+), 880 deletions(-) create mode 100644 apps/app/components/command-palette/change-interface-theme.tsx create mode 100644 apps/app/components/core/custom-theme-form.tsx create mode 100644 apps/app/components/core/custom-theme-modal.tsx create mode 100644 apps/app/components/core/theme-switch.tsx create mode 100644 apps/app/constants/themes.ts create mode 100644 apps/app/helpers/theme.helper.ts diff --git a/apps/app/components/account/email-code-form.tsx b/apps/app/components/account/email-code-form.tsx index 5e4c49b1a..389153d60 100644 --- a/apps/app/components/account/email-code-form.tsx +++ b/apps/app/components/account/email-code-form.tsx @@ -141,7 +141,7 @@ export const EmailCodeForm = ({ onSuccess }: any) => { diff --git a/apps/app/components/auth-screens/not-authorized-view.tsx b/apps/app/components/auth-screens/not-authorized-view.tsx index 37c07e8de..054e5bfa3 100644 --- a/apps/app/components/auth-screens/not-authorized-view.tsx +++ b/apps/app/components/auth-screens/not-authorized-view.tsx @@ -36,16 +36,16 @@ export const NotAuthorizedView: React.FC = ({ actionButton, type }) => { alt="ProjectSettingImg" /> -

+

Oops! You are not authorized to view this page

-
+
{user ? (

You have signed in as {user.email}.
- Sign in + Sign in {" "} with different account that has access to this page.

@@ -53,7 +53,7 @@ export const NotAuthorizedView: React.FC = ({ actionButton, type }) => {

You need to{" "} - Sign in + Sign in {" "} with an account that has access to this page.

diff --git a/apps/app/components/breadcrumbs/index.tsx b/apps/app/components/breadcrumbs/index.tsx index 0a2d36e1f..98944fe37 100644 --- a/apps/app/components/breadcrumbs/index.tsx +++ b/apps/app/components/breadcrumbs/index.tsx @@ -16,7 +16,7 @@ const Breadcrumbs = ({ children }: BreadcrumbsProps) => {
-
- +
+ = ({ isOpen, setIsOpen }) => {
-

{shortcut.description}

+

{shortcut.description}

{shortcut.keys.split(",").map((key, index) => ( {key === "Ctrl" ? ( - + ) : ( - + {key === "Ctrl" ? : key} )} @@ -145,7 +145,7 @@ export const ShortcutsModal: React.FC = ({ isOpen, setIsOpen }) => { )) ) : (
-

+

No shortcuts found for{" "} {`"`} @@ -162,16 +162,16 @@ export const ShortcutsModal: React.FC = ({ isOpen, setIsOpen }) => {

{shortcuts.map(({ keys, description }, index) => (
-

{description}

+

{description}

{keys.split(",").map((key, index) => ( {key === "Ctrl" ? ( - + ) : ( - + {key === "Ctrl" ? : key} )} diff --git a/apps/app/components/core/board-view/all-boards.tsx b/apps/app/components/core/board-view/all-boards.tsx index f476b76a5..19d0e7636 100644 --- a/apps/app/components/core/board-view/all-boards.tsx +++ b/apps/app/components/core/board-view/all-boards.tsx @@ -81,7 +81,7 @@ export const AllBoards: React.FC = ({ return (
{currentState && @@ -92,7 +92,7 @@ export const AllBoards: React.FC = ({ : addSpaceIfCamelCase(singleGroup)}
- 0 + 0
); })} diff --git a/apps/app/components/core/board-view/board-header.tsx b/apps/app/components/core/board-view/board-header.tsx index f209ba6e2..93443d99c 100644 --- a/apps/app/components/core/board-view/board-header.tsx +++ b/apps/app/components/core/board-view/board-header.tsx @@ -124,7 +124,7 @@ export const BoardHeader: React.FC = ({ return (
@@ -145,7 +145,7 @@ export const BoardHeader: React.FC = ({ {groupedByIssues?.[groupTitle].length ?? 0} @@ -155,7 +155,7 @@ export const BoardHeader: React.FC = ({
))}
-
+
{monthOptions.map((month) => (
-
+

Show weekends

+
+
+
+
+ Cancel + + {status + ? isSubmitting + ? "Updating Theme..." + : "Update Theme" + : isSubmitting + ? "Creating Theme..." + : "Set Theme"} + +
+ + ); +}; diff --git a/apps/app/components/core/custom-theme-modal.tsx b/apps/app/components/core/custom-theme-modal.tsx new file mode 100644 index 000000000..d46d17d28 --- /dev/null +++ b/apps/app/components/core/custom-theme-modal.tsx @@ -0,0 +1,65 @@ +import React from "react"; + +// headless ui +import { Dialog, Transition } from "@headlessui/react"; +// components +import { ThemeForm } from "./custom-theme-form"; +// helpers +import { applyTheme } from "helpers/theme.helper"; +// fetch-keys + +type Props = { + isOpen: boolean; + handleClose: () => void; +}; + +export const CustomThemeModal: React.FC = ({ isOpen, handleClose }) => { + const onClose = () => { + handleClose(); + }; + + const handleFormSubmit = async (formData: any) => { + applyTheme(formData.palette, formData.darkPalette); + onClose(); + }; + + return ( + + + +
+ + +
+
+ + + + + +
+
+
+ + ); +}; diff --git a/apps/app/components/core/existing-issues-list-modal.tsx b/apps/app/components/core/existing-issues-list-modal.tsx index 2e255ae19..2d5ac37dc 100644 --- a/apps/app/components/core/existing-issues-list-modal.tsx +++ b/apps/app/components/core/existing-issues-list-modal.tsx @@ -130,7 +130,7 @@ export const ExistingIssuesListModal: React.FC = ({ leaveFrom="opacity-100 scale-100" leaveTo="opacity-0 scale-95" > - +
= ({
)} - +
-

+

Commented {timeAgo(activity.created_at)}

@@ -244,7 +244,7 @@ export const Feeds: React.FC = ({ activities }) => ( editable={false} onBlur={() => ({})} noBorder - customClassName="text-xs bg-gray-100" + customClassName="text-xs bg-brand-surface-1" />
@@ -259,7 +259,7 @@ export const Feeds: React.FC = ({ activities }) => (
{activities.length > 1 && activityIdx !== activities.length - 1 ? (
-
+
{activity.field ? ( activityDetails[activity.field as keyof typeof activityDetails]?.icon ) : activity.actor_detail.avatar && @@ -292,7 +292,7 @@ export const Feeds: React.FC = ({ activities }) => (
-
+
{activity.actor_detail.first_name} {activity.actor_detail.is_bot @@ -300,7 +300,7 @@ export const Feeds: React.FC = ({ activities }) => ( : " " + activity.actor_detail.last_name} {action} - {value} + {value} {timeAgo(activity.created_at)}
diff --git a/apps/app/components/core/filter-list.tsx b/apps/app/components/core/filter-list.tsx index 08d1e8062..c42b7501b 100644 --- a/apps/app/components/core/filter-list.tsx +++ b/apps/app/components/core/filter-list.tsx @@ -57,9 +57,9 @@ export const FilterList: React.FC = ({ filters, setFilters }) => { return (
- + {replaceUnderscoreIfSnakeCase(key)}: {filters[key as keyof IIssueFilterOptions] === null || @@ -131,7 +131,7 @@ export const FilterList: React.FC = ({ filters, setFilters }) => { ? "bg-yellow-100 text-yellow-500 hover:bg-yellow-100" : priority === "low" ? "bg-green-100 text-green-500 hover:bg-green-100" - : "bg-gray-100 text-gray-700 hover:bg-gray-100" + : "bg-brand-surface-1 text-gray-700 hover:bg-brand-surface-1" }`} > {getPriorityIcon(priority)} @@ -339,7 +339,7 @@ export const FilterList: React.FC = ({ filters, setFilters }) => { created_by: null, }) } - className="flex items-center gap-x-1 rounded-full border bg-white px-3 py-1.5 text-xs" + className="flex items-center gap-x-1 rounded-full border border-brand-base bg-brand-surface-2 px-3 py-1.5 text-xs" > Clear all filters diff --git a/apps/app/components/core/gpt-assistant-modal.tsx b/apps/app/components/core/gpt-assistant-modal.tsx index b50b1e0f8..37104e30f 100644 --- a/apps/app/components/core/gpt-assistant-modal.tsx +++ b/apps/app/components/core/gpt-assistant-modal.tsx @@ -121,7 +121,7 @@ export const GptAssistantModal: React.FC = ({ return (
diff --git a/apps/app/components/core/image-picker-popover.tsx b/apps/app/components/core/image-picker-popover.tsx index a6f2efb72..9a3d5ff2f 100644 --- a/apps/app/components/core/image-picker-popover.tsx +++ b/apps/app/components/core/image-picker-popover.tsx @@ -65,7 +65,7 @@ export const ImagePickerPopover: React.FC = ({ label, value, onChange }) return ( setIsOpen((prev) => !prev)} > {label} @@ -79,16 +79,16 @@ export const ImagePickerPopover: React.FC = ({ label, value, onChange }) leaveFrom="transform opacity-100 scale-100" leaveTo="transform opacity-0 scale-95" > - -
+ +
- + {tabOptions.map((tab) => ( `rounded py-1 px-4 text-center text-sm outline-none transition-colors ${ - selected ? "bg-theme text-white" : "text-black" + selected ? "bg-brand-accent text-white" : "text-brand-base" }` } > diff --git a/apps/app/components/core/image-upload-modal.tsx b/apps/app/components/core/image-upload-modal.tsx index 28ff260d4..ba41f3efa 100644 --- a/apps/app/components/core/image-upload-modal.tsx +++ b/apps/app/components/core/image-upload-modal.tsx @@ -110,7 +110,7 @@ export const ImageUploadModal: React.FC = ({ leaveFrom="opacity-100" leaveTo="opacity-0" > -
+
@@ -124,9 +124,9 @@ export const ImageUploadModal: React.FC = ({ leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" > - +
- + Upload Image
@@ -135,7 +135,7 @@ export const ImageUploadModal: React.FC = ({ {...getRootProps()} className={`relative block h-80 w-full rounded-lg p-12 text-center focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 ${ (image === null && isDragActive) || !value - ? "border-2 border-dashed border-gray-300 hover:border-gray-400" + ? "border-2 border-dashed border-brand-base hover:border-gray-400" : "" }`} > @@ -143,7 +143,7 @@ export const ImageUploadModal: React.FC = ({ <> @@ -157,7 +157,7 @@ export const ImageUploadModal: React.FC = ({ ) : ( <> - + {isDragActive ? "Drop image here to upload" : "Drag & drop image here"} diff --git a/apps/app/components/core/index.ts b/apps/app/components/core/index.ts index 41a71d965..eb547578c 100644 --- a/apps/app/components/core/index.ts +++ b/apps/app/components/core/index.ts @@ -11,3 +11,4 @@ export * from "./link-modal"; export * from "./image-picker-popover"; export * from "./filter-list"; export * from "./feeds"; +export * from "./theme-switch"; diff --git a/apps/app/components/core/issues-view-filter.tsx b/apps/app/components/core/issues-view-filter.tsx index 4b4d15e09..0df8e8f1b 100644 --- a/apps/app/components/core/issues-view-filter.tsx +++ b/apps/app/components/core/issues-view-filter.tsx @@ -12,8 +12,7 @@ import { SelectFilters } from "components/views"; // ui import { CustomMenu } from "components/ui"; // icons -import { ChevronDownIcon, ListBulletIcon, CalendarDaysIcon } from "@heroicons/react/24/outline"; -import { Squares2X2Icon } from "@heroicons/react/20/solid"; +import { ChevronDownIcon, ListBulletIcon, Squares2X2Icon, CalendarDaysIcon } from "@heroicons/react/24/outline"; // helpers import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper"; // types @@ -53,30 +52,30 @@ export const IssuesFilterView: React.FC = () => {
{ {({ open }) => ( <> View @@ -130,11 +129,11 @@ export const IssuesFilterView: React.FC = () => { leaveFrom="opacity-100 translate-y-0" leaveTo="opacity-0 translate-y-1" > - -
+ +
-

Group by

+

Group by

option.key === groupByProperty)?.name ?? @@ -155,7 +154,7 @@ export const IssuesFilterView: React.FC = () => {
-

Order by

+

Order by

option.key === orderBy)?.name ?? @@ -178,7 +177,7 @@ export const IssuesFilterView: React.FC = () => {
-

Issue type

+

Issue type

option.key === filters.type) @@ -201,11 +200,11 @@ export const IssuesFilterView: React.FC = () => {
-

Show empty states

+

Show empty states

-

Display Properties

+

Display Properties

{Object.keys(properties).map((key) => { if (key === "estimate" && !isEstimateActive) return null; diff --git a/apps/app/components/core/issues-view.tsx b/apps/app/components/core/issues-view.tsx index 22261de06..18e685866 100644 --- a/apps/app/components/core/issues-view.tsx +++ b/apps/app/components/core/issues-view.tsx @@ -502,8 +502,8 @@ export const IssuesView: React.FC = ({ title="Create a new issue" description={ - Use 
C
shortcut to - create a new issue + Use 
C
{" "} + shortcut to create a new issue } Icon={PlusIcon} diff --git a/apps/app/components/core/link-modal.tsx b/apps/app/components/core/link-modal.tsx index 7fd19dc8a..3c22c2b1b 100644 --- a/apps/app/components/core/link-modal.tsx +++ b/apps/app/components/core/link-modal.tsx @@ -56,7 +56,7 @@ export const LinkModal: React.FC = ({ isOpen, handleClose, onFormSubmit } leaveFrom="opacity-100" leaveTo="opacity-0" > -
+
@@ -70,11 +70,11 @@ export const LinkModal: React.FC = ({ isOpen, handleClose, onFormSubmit } leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" > - +
- + Add Link
diff --git a/apps/app/components/core/list-view/single-issue.tsx b/apps/app/components/core/list-view/single-issue.tsx index 4fa518769..a728c3a75 100644 --- a/apps/app/components/core/list-view/single-issue.tsx +++ b/apps/app/components/core/list-view/single-issue.tsx @@ -217,7 +217,7 @@ export const SingleListIssue: React.FC = ({
{ e.preventDefault(); setContextMenu(true); diff --git a/apps/app/components/core/list-view/single-list.tsx b/apps/app/components/core/list-view/single-list.tsx index 32880a1a6..bfd8acdab 100644 --- a/apps/app/components/core/list-view/single-list.tsx +++ b/apps/app/components/core/list-view/single-list.tsx @@ -132,10 +132,10 @@ export const SingleList: React.FC = ({ return ( {({ open }) => ( -
+
@@ -144,21 +144,21 @@ export const SingleList: React.FC = ({
{getGroupIcon()}
)} {selectedGroup !== null ? ( -

+

{getGroupTitle()}

) : (

All Issues

)} - - {groupedByIssues?.[groupTitle].length ?? 0} + + {groupedByIssues[groupTitle as keyof IIssue].length}
{type === "issue" ? (
)} - +
{link.title}
-

+

Added {timeAgo(link.created_at)}
by{" "} diff --git a/apps/app/components/core/sidebar/sidebar-progress-stats.tsx b/apps/app/components/core/sidebar/sidebar-progress-stats.tsx index fad29ddaa..84b79e4df 100644 --- a/apps/app/components/core/sidebar/sidebar-progress-stats.tsx +++ b/apps/app/components/core/sidebar/sidebar-progress-stats.tsx @@ -100,13 +100,13 @@ export const SidebarProgressStats: React.FC = ({ > - `w-full rounded px-3 py-1 text-gray-900 ${ - selected ? " bg-theme text-white" : " hover:bg-hover-gray" + `w-full rounded px-3 py-1 text-brand-base ${ + selected ? " bg-brand-accent text-white" : " hover:bg-brand-surface-2" }` } > @@ -114,8 +114,8 @@ export const SidebarProgressStats: React.FC = ({ - `w-full rounded px-3 py-1 text-gray-900 ${ - selected ? " bg-theme text-white" : " hover:bg-hover-gray" + `w-full rounded px-3 py-1 text-brand-base ${ + selected ? " bg-brand-accent text-white" : " hover:bg-brand-surface-2" }` } > @@ -123,8 +123,8 @@ export const SidebarProgressStats: React.FC = ({ - `w-full rounded px-3 py-1 text-gray-900 ${ - selected ? " bg-theme text-white" : " hover:bg-hover-gray" + `w-full rounded px-3 py-1 text-brand-base ${ + selected ? " bg-brand-accent text-white" : " hover:bg-brand-surface-2" }` } > @@ -166,7 +166,7 @@ export const SidebarProgressStats: React.FC = ({ -

+
= ({ }) => (
{title}
diff --git a/apps/app/components/core/theme-switch.tsx b/apps/app/components/core/theme-switch.tsx new file mode 100644 index 000000000..f93b1998e --- /dev/null +++ b/apps/app/components/core/theme-switch.tsx @@ -0,0 +1,60 @@ +import { useState, useEffect, ChangeEvent } from "react"; +import { useTheme } from "next-themes"; +import { THEMES_OBJ } from "constants/themes"; +import { CustomSelect } from "components/ui"; +import { CustomThemeModal } from "./custom-theme-modal"; + +export const ThemeSwitch = () => { + const [mounted, setMounted] = useState(false); + const [customThemeModal, setCustomThemeModal] = useState(false); + const { theme, setTheme } = useTheme(); + + // useEffect only runs on the client, so now we can safely show the UI + useEffect(() => { + setMounted(true); + }, []); + + if (!mounted) { + return null; + } + + return ( + <> + t.value === theme)?.label : "Select your theme"} + onChange={({ value, type }: { value: string; type: string }) => { + if (value === "custom") { + if (!customThemeModal) setCustomThemeModal(true); + } else { + const cssVars = [ + "--color-bg-base", + "--color-bg-surface-1", + "--color-bg-surface-2", + + "--color-border", + "--color-bg-sidebar", + "--color-accent", + + "--color-text-base", + "--color-text-secondary", + ]; + cssVars.forEach((cssVar) => document.documentElement.style.removeProperty(cssVar)); + } + document.documentElement.style.setProperty("color-scheme", type); + setTheme(value); + }} + input + width="w-full" + position="right" + > + {THEMES_OBJ.map(({ value, label, type }) => ( + + {label} + + ))} + + {/* setCustomThemeModal(false)} /> */} + + ); +}; diff --git a/apps/app/components/cycles/completed-cycles-list.tsx b/apps/app/components/cycles/completed-cycles-list.tsx index cb8bb43d7..bf1971368 100644 --- a/apps/app/components/cycles/completed-cycles-list.tsx +++ b/apps/app/components/cycles/completed-cycles-list.tsx @@ -64,7 +64,7 @@ export const CompletedCyclesList: React.FC = ({ {completedCycles ? ( completedCycles.completed_cycles.length > 0 ? (
-
+
Completed cycles are not editable.
diff --git a/apps/app/components/cycles/cycles-list.tsx b/apps/app/components/cycles/cycles-list.tsx index 28cd171d0..68592b051 100644 --- a/apps/app/components/cycles/cycles-list.tsx +++ b/apps/app/components/cycles/cycles-list.tsx @@ -62,8 +62,8 @@ export const CyclesList: React.FC = ({
) : type === "current" ? ( showNoCurrentCycleMessage && ( -
-

No current cycle is present.

+
+

No current cycle is present.

diff --git a/apps/app/components/cycles/delete-cycle-modal.tsx b/apps/app/components/cycles/delete-cycle-modal.tsx index c43d34d68..b69537cdc 100644 --- a/apps/app/components/cycles/delete-cycle-modal.tsx +++ b/apps/app/components/cycles/delete-cycle-modal.tsx @@ -139,7 +139,7 @@ export const DeleteCycleModal: React.FC = ({ leaveFrom="opacity-100" leaveTo="opacity-0" > -
+
@@ -153,8 +153,8 @@ export const DeleteCycleModal: React.FC = ({ leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" > - -
+ +
= ({ />
- + Delete Cycle
-

+

Are you sure you want to delete cycle-{" "} {data?.name}? All of the data related to the cycle will be permanently removed. This action cannot be undone. diff --git a/apps/app/components/cycles/empty-cycle.tsx b/apps/app/components/cycles/empty-cycle.tsx index dfefa4011..af2f12a11 100644 --- a/apps/app/components/cycles/empty-cycle.tsx +++ b/apps/app/components/cycles/empty-cycle.tsx @@ -37,30 +37,30 @@ export const EmptyCycle = () => { return (

-
+
- Cycle Name + Cycle Name
- - + +
-
+
-
+
- Cycle Name + Cycle Name
- - + +
-
+
@@ -68,7 +68,7 @@ export const EmptyCycle = () => {

Create New Cycle

-

+

Sprint more effectively with Cycles by confining your project
to a fixed amount of time. Create new cycle now.

diff --git a/apps/app/components/cycles/form.tsx b/apps/app/components/cycles/form.tsx index 99e55ce7a..168f4f2cd 100644 --- a/apps/app/components/cycles/form.tsx +++ b/apps/app/components/cycles/form.tsx @@ -94,7 +94,7 @@ export const CycleForm: React.FC = ({ handleFormSubmit, handleClose, stat return (
-

+

{status ? "Update" : "Create"} Cycle

@@ -196,7 +196,7 @@ export const CycleForm: React.FC = ({ handleFormSubmit, handleClose, stat
-
+
Cancel = ({ leaveFrom="opacity-100" leaveTo="opacity-0" > -
+
@@ -164,7 +164,7 @@ export const CreateUpdateCycleModal: React.FC = ({ leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" > - + = ({ {({ open }) => ( <> - +
{cycles?.find((c) => c.id === value)?.name ?? "Cycles"}
@@ -75,7 +75,7 @@ export const CycleSelect: React.FC = ({ leaveTo="opacity-0" >
{options ? ( @@ -93,7 +93,7 @@ export const CycleSelect: React.FC = ({ : "" } ${ active ? "bg-indigo-50" : "" - } relative cursor-pointer select-none p-2 text-gray-900` + } relative cursor-pointer select-none p-2 text-brand-base` } value={option.value} > @@ -103,14 +103,14 @@ export const CycleSelect: React.FC = ({ )) ) : ( -

No options

+

No options

) ) : ( -

Loading...

+

Loading...

)}
-
- +
+ = ({ isOpen, handleClose }) => filteredOptions.map((option: ICycle) => (
diff --git a/apps/app/components/cycles/transfer-issues.tsx b/apps/app/components/cycles/transfer-issues.tsx index 979e87b93..59a10a4d8 100644 --- a/apps/app/components/cycles/transfer-issues.tsx +++ b/apps/app/components/cycles/transfer-issues.tsx @@ -38,7 +38,7 @@ export const TransferIssues: React.FC = ({ handleClick }) => { : 0; return (
-
+
Completed cycles are not editable.
diff --git a/apps/app/components/emoji-icon-picker/index.tsx b/apps/app/components/emoji-icon-picker/index.tsx index 6c3d3842b..6cb3b84f9 100644 --- a/apps/app/components/emoji-icon-picker/index.tsx +++ b/apps/app/components/emoji-icon-picker/index.tsx @@ -55,7 +55,7 @@ const EmojiIconPicker: React.FC = ({ return ( setIsOpen((prev) => !prev)} > {label} @@ -69,8 +69,8 @@ const EmojiIconPicker: React.FC = ({ leaveFrom="transform opacity-100 scale-100" leaveTo="transform opacity-0 scale-95" > - -
+ +
{tabOptions.map((tab) => ( @@ -100,7 +100,7 @@ const EmojiIconPicker: React.FC = ({ {recentEmojis.map((emoji) => ( +
diff --git a/apps/app/components/issues/comment/comment-card.tsx b/apps/app/components/issues/comment/comment-card.tsx index 9cab65531..4691ad705 100644 --- a/apps/app/components/issues/comment/comment-card.tsx +++ b/apps/app/components/issues/comment/comment-card.tsx @@ -67,7 +67,7 @@ export const CommentCard: React.FC = ({ comment, onSubmit, handleCommentD
)} - +
@@ -77,7 +77,7 @@ export const CommentCard: React.FC = ({ comment, onSubmit, handleCommentD {comment.actor_detail.first_name} {comment.actor_detail.is_bot ? "Bot" : " " + comment.actor_detail.last_name}
-

Commented {timeAgo(comment.created_at)}

+

Commented {timeAgo(comment.created_at)}

{isEditing ? ( @@ -117,7 +117,7 @@ export const CommentCard: React.FC = ({ comment, onSubmit, handleCommentD editable={false} onBlur={() => ({})} noBorder - customClassName="text-xs bg-gray-100" + customClassName="text-xs bg-brand-surface-1" /> )}
diff --git a/apps/app/components/issues/delete-issue-modal.tsx b/apps/app/components/issues/delete-issue-modal.tsx index e161e52a1..4fb5f92ea 100644 --- a/apps/app/components/issues/delete-issue-modal.tsx +++ b/apps/app/components/issues/delete-issue-modal.tsx @@ -88,7 +88,7 @@ export const DeleteIssueModal: React.FC = ({ isOpen, handleClose, data }) leaveFrom="opacity-100" leaveTo="opacity-0" > -
+
@@ -102,7 +102,7 @@ export const DeleteIssueModal: React.FC = ({ isOpen, handleClose, data }) leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" > - +
@@ -116,7 +116,7 @@ export const DeleteIssueModal: React.FC = ({ isOpen, handleClose, data })
-

+

Are you sure you want to delete issue{" "} {data?.project_detail.identifier}-{data?.sequence_id} diff --git a/apps/app/components/issues/description-form.tsx b/apps/app/components/issues/description-form.tsx index 95962b929..b568fb016 100644 --- a/apps/app/components/issues/description-form.tsx +++ b/apps/app/components/issues/description-form.tsx @@ -115,7 +115,7 @@ export const IssueDescriptionForm: FC = ({ issue, handleFormS role="textbox" /> {characterLimit && ( -

+
255 ? "text-red-500" : "" @@ -158,7 +158,7 @@ export const IssueDescriptionForm: FC = ({ issue, handleFormS )} />
diff --git a/apps/app/components/issues/form.tsx b/apps/app/components/issues/form.tsx index 257a6a4e1..8556c2551 100644 --- a/apps/app/components/issues/form.tsx +++ b/apps/app/components/issues/form.tsx @@ -216,12 +216,12 @@ export const IssueForm: FC = ({ /> )} /> -

+

{status ? "Update" : "Create"} Issue

{watch("parent") && watch("parent") !== "" ? ( -
+
= ({ /> {mostSimilarIssue && (
-

+

@@ -283,7 +283,7 @@ export const IssueForm: FC = ({

-
+
setCreateMore((prevData) => !prevData)} @@ -453,7 +453,7 @@ export const IssueForm: FC = ({
diff --git a/apps/app/components/issues/modal.tsx b/apps/app/components/issues/modal.tsx index 47fe6e871..1b74664b1 100644 --- a/apps/app/components/issues/modal.tsx +++ b/apps/app/components/issues/modal.tsx @@ -219,7 +219,7 @@ export const CreateUpdateIssueModal: React.FC = ({ leaveFrom="opacity-100" leaveTo="opacity-0" > -
+
@@ -233,7 +233,7 @@ export const CreateUpdateIssueModal: React.FC = ({ leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" > - + = ({ issue, properties, projectId const isNotAllowed = false; return ( -
+
@@ -97,7 +97,7 @@ export const MyIssuesListItem: React.FC = ({ issue, properties, projectId )} - + {truncateText(issue.name, 50)} @@ -127,7 +127,7 @@ export const MyIssuesListItem: React.FC = ({ issue, properties, projectId /> )} {properties.sub_issue_count && ( -
+
{issue?.sub_issues_count} {issue?.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
)} @@ -136,7 +136,7 @@ export const MyIssuesListItem: React.FC = ({ issue, properties, projectId {issue.label_details.map((label) => ( = ({ leaveFrom="opacity-100 scale-100" leaveTo="opacity-0 scale-95" > - + {multiple ? ( <> ({})} multiple>
  • {query === "" && ( -

    +

    {title}

    )} @@ -182,7 +182,7 @@ export const ParentIssuesListModal: React.FC = ({ value={issue.id} className={({ active }) => `flex cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 ${ - active ? "bg-gray-900 bg-opacity-5 text-gray-900" : "" + active ? "bg-gray-900 bg-opacity-5 text-brand-base" : "" }` } onClick={() => handleClose()} @@ -194,7 +194,7 @@ export const ParentIssuesListModal: React.FC = ({ backgroundColor: issue.state_detail.color, }} /> - + {issue.project_detail?.identifier}-{issue.sequence_id} {" "} {issue.name} @@ -206,9 +206,9 @@ export const ParentIssuesListModal: React.FC = ({ ) : (
    -

    +

    No issues found. Create a new issue with{" "} - 
    C
    . + 
    C
    .

    )} diff --git a/apps/app/components/issues/select/assignee.tsx b/apps/app/components/issues/select/assignee.tsx index 1d06f3f0e..5c1d7c1b4 100644 --- a/apps/app/components/issues/select/assignee.tsx +++ b/apps/app/components/issues/select/assignee.tsx @@ -54,15 +54,15 @@ export const IssueAssigneeSelect: React.FC = ({ projectId, value = [], on onChange={onChange} options={options} label={ -
    +
    {value && value.length > 0 && Array.isArray(value) ? (
    ) : (
    - - Assignee + + Assignee
    )}
    diff --git a/apps/app/components/issues/select/date.tsx b/apps/app/components/issues/select/date.tsx index 438291a2d..3bb8c1bed 100644 --- a/apps/app/components/issues/select/date.tsx +++ b/apps/app/components/issues/select/date.tsx @@ -18,11 +18,11 @@ export const IssueDateSelect: React.FC = ({ value, onChange }) => ( <> - `flex cursor-pointer items-center rounded-md border text-xs shadow-sm duration-200 + `flex cursor-pointer items-center rounded-md border border-brand-base text-xs shadow-sm duration-200 ${ open - ? "border-theme bg-theme/5 outline-none ring-1 ring-theme " - : "hover:bg-theme/5 " + ? "border-brand-accent bg-brand-accent/5 outline-none ring-1 ring-brand-accent " + : "hover:bg-brand-accent/5 " }` } > diff --git a/apps/app/components/issues/select/label.tsx b/apps/app/components/issues/select/label.tsx index 2adeaa222..f5b023280 100644 --- a/apps/app/components/issues/select/label.tsx +++ b/apps/app/components/issues/select/label.tsx @@ -60,11 +60,11 @@ export const IssueLabelSelect: React.FC = ({ setIsOpen, value, onChange, <> - `flex cursor-pointer items-center rounded-md border text-xs shadow-sm duration-200 + `flex cursor-pointer items-center rounded-md border border-brand-base text-xs shadow-sm duration-200 ${ open - ? "border-theme bg-theme/5 outline-none ring-1 ring-theme " - : "hover:bg-theme/5 " + ? "border-brand-accent bg-brand-accent/5 outline-none ring-1 ring-brand-accent " + : "hover:bg-brand-accent/5 " }` } > @@ -78,8 +78,8 @@ export const IssueLabelSelect: React.FC = ({ setIsOpen, value, onChange, ) : ( - - Label + + Label )} @@ -96,12 +96,12 @@ export const IssueLabelSelect: React.FC = ({ setIsOpen, value, onChange, > -
    - +
    + setQuery(event.target.value)} placeholder="Search for label..." displayValue={(assigned: any) => assigned?.name} @@ -120,7 +120,7 @@ export const IssueLabelSelect: React.FC = ({ setIsOpen, value, onChange, key={label.id} className={({ active }) => `${ - active ? "bg-gray-200" : "" + active ? "bg-brand-surface-2" : "" } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-gray-600` } value={label.id} @@ -150,8 +150,8 @@ export const IssueLabelSelect: React.FC = ({ setIsOpen, value, onChange, ); } else return ( -
    -
    +
    +
    {label.name}
    @@ -160,7 +160,7 @@ export const IssueLabelSelect: React.FC = ({ setIsOpen, value, onChange, key={child.id} className={({ active }) => `${ - active ? "bg-gray-200" : "" + active ? "bg-brand-surface-2" : "" } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-gray-600` } value={child.id} @@ -192,14 +192,14 @@ export const IssueLabelSelect: React.FC = ({ setIsOpen, value, onChange, ); }) ) : ( -

    No labels found

    +

    No labels found

    ) ) : ( -

    Loading...

    +

    Loading...

    )}
    -
    +
    = ({ issueDetail?.parent_detail ? ( ) : ( -
    +
    No parent selected
    ) @@ -395,7 +395,7 @@ export const IssueDetailsSidebar: React.FC = ({ return ( { const updatedLabels = watchIssue("labels_list")?.filter( (l) => l !== labelId @@ -435,8 +435,8 @@ export const IssueDetailsSidebar: React.FC = ({ className={`flex ${ isNotAllowed ? "cursor-not-allowed" - : "cursor-pointer hover:bg-gray-100" - } items-center gap-2 rounded-2xl border px-2 py-0.5 text-xs`} + : "cursor-pointer hover:bg-brand-surface-1" + } items-center gap-2 rounded-2xl border border-brand-base px-2 py-0.5 text-xs`} > Select Label @@ -448,7 +448,7 @@ export const IssueDetailsSidebar: React.FC = ({ leaveFrom="opacity-100" leaveTo="opacity-0" > - +
    {issueLabels ? ( issueLabels.length > 0 ? ( @@ -463,9 +463,9 @@ export const IssueDetailsSidebar: React.FC = ({ - `${active || selected ? "bg-indigo-50" : ""} ${ + `${active || selected ? "bg-brand-surface-1" : ""} ${ selected ? "font-medium" : "" - } flex cursor-pointer select-none items-center gap-2 truncate p-2 text-gray-900` + } flex cursor-pointer select-none items-center gap-2 truncate p-2 text-brand-base` } value={label.id} > @@ -483,8 +483,8 @@ export const IssueDetailsSidebar: React.FC = ({ ); } else return ( -
    -
    +
    +
    {" "} {label.name}
    @@ -495,7 +495,7 @@ export const IssueDetailsSidebar: React.FC = ({ className={({ active, selected }) => `${active || selected ? "bg-indigo-50" : ""} ${ selected ? "font-medium" : "" - } flex cursor-pointer select-none items-center gap-2 truncate p-2 text-gray-900` + } flex cursor-pointer select-none items-center gap-2 truncate p-2 text-brand-base` } value={child.id} > @@ -530,8 +530,8 @@ export const IssueDetailsSidebar: React.FC = ({ )} diff --git a/apps/app/components/issues/view-select/assignee.tsx b/apps/app/components/issues/view-select/assignee.tsx index 1429555d9..64199b901 100644 --- a/apps/app/components/issues/view-select/assignee.tsx +++ b/apps/app/components/issues/view-select/assignee.tsx @@ -103,17 +103,17 @@ export const ViewAssigneeSelect: React.FC = ({
    {issue.assignees && issue.assignees.length > 0 && Array.isArray(issue.assignees) ? (
    - {issue.assignees.length} Assignees + {issue.assignees.length} Assignees
    ) : (
    - - Assignee + + Assignee
    )}
    diff --git a/apps/app/components/issues/view-select/state.tsx b/apps/app/components/issues/view-select/state.tsx index 34ce8c82c..4a6482cde 100644 --- a/apps/app/components/issues/view-select/state.tsx +++ b/apps/app/components/issues/view-select/state.tsx @@ -97,7 +97,7 @@ export const ViewStateSelect: React.FC = ({ tooltipHeading="State" tooltipContent={addSpaceIfCamelCase(selectedOption?.name ?? "")} > -
    +
    {selectedOption && getStateGroupIcon(selectedOption.group, "16", "16", selectedOption.color)} {selectedOption?.name ?? "State"} diff --git a/apps/app/components/labels/create-label-modal.tsx b/apps/app/components/labels/create-label-modal.tsx index e07de48f5..c186cbd7c 100644 --- a/apps/app/components/labels/create-label-modal.tsx +++ b/apps/app/components/labels/create-label-modal.tsx @@ -84,7 +84,7 @@ export const CreateLabelModal: React.FC = ({ isOpen, projectId, handleClo leaveFrom="opacity-100" leaveTo="opacity-0" > -
    +
    @@ -98,10 +98,10 @@ export const CreateLabelModal: React.FC = ({ isOpen, projectId, handleClo leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" > - +
    - + Create Label
    @@ -109,8 +109,8 @@ export const CreateLabelModal: React.FC = ({ isOpen, projectId, handleClo {({ open, close }) => ( <> {watch("color") && watch("color") !== "" && ( @@ -122,7 +122,7 @@ export const CreateLabelModal: React.FC = ({ isOpen, projectId, handleClo /> )}
  • {query === "" && ( -

    +

    Labels

    )} @@ -132,7 +132,7 @@ export const LabelsListModal: React.FC = ({ isOpen, handleClose, parent } }} className={({ active }) => `flex cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 ${ - active ? "bg-gray-900 bg-opacity-5 text-gray-900" : "" + active ? "bg-gray-900 bg-opacity-5 text-brand-base" : "" }` } onClick={() => { @@ -159,10 +159,10 @@ export const LabelsListModal: React.FC = ({ isOpen, handleClose, parent } {query !== "" && filteredLabels.length === 0 && (
    diff --git a/apps/app/components/labels/single-label-group.tsx b/apps/app/components/labels/single-label-group.tsx index d41b8508e..c5e5f91db 100644 --- a/apps/app/components/labels/single-label-group.tsx +++ b/apps/app/components/labels/single-label-group.tsx @@ -66,7 +66,7 @@ export const SingleLabelGroup: React.FC = ({ }; return ( - + {({ open }) => ( <>
    @@ -74,7 +74,7 @@ export const SingleLabelGroup: React.FC = ({ -
    {label.name}
    +
    {label.name}
    @@ -100,7 +100,7 @@ export const SingleLabelGroup: React.FC = ({ @@ -120,9 +120,9 @@ export const SingleLabelGroup: React.FC = ({ {labelChildren.map((child) => (
    -
    +
    = ({ editLabel, handleLabelDelete, }) => ( -
    +
    = ({ backgroundColor: label.color && label.color !== "" ? label.color : "#000", }} /> -
    {label.name}
    +
    {label.name}
    addLabelToGroup(label)}> diff --git a/apps/app/components/modules/delete-module-modal.tsx b/apps/app/components/modules/delete-module-modal.tsx index 70fca1916..77ed8dd4c 100644 --- a/apps/app/components/modules/delete-module-modal.tsx +++ b/apps/app/components/modules/delete-module-modal.tsx @@ -77,7 +77,7 @@ export const DeleteModuleModal: React.FC = ({ isOpen, setIsOpen, data }) leaveFrom="opacity-100" leaveTo="opacity-0" > -
    +
    @@ -91,8 +91,8 @@ export const DeleteModuleModal: React.FC = ({ isOpen, setIsOpen, data }) leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" > - -
    + +
    = ({ isOpen, setIsOpen, data }) />
    - + Delete Module
    -

    +

    Are you sure you want to delete module-{" "} {data?.name}? All of the data related to the module will be permanently removed. This action cannot be undone. diff --git a/apps/app/components/modules/form.tsx b/apps/app/components/modules/form.tsx index b1e56ce90..fe1e557b7 100644 --- a/apps/app/components/modules/form.tsx +++ b/apps/app/components/modules/form.tsx @@ -66,7 +66,7 @@ export const ModuleForm: React.FC = ({ handleFormSubmit, handleClose, sta return (

    -

    +

    {status ? "Update" : "Create"} Module

    @@ -170,7 +170,7 @@ export const ModuleForm: React.FC = ({ handleFormSubmit, handleClose, sta
    -
    +
    Cancel {status diff --git a/apps/app/components/modules/modal.tsx b/apps/app/components/modules/modal.tsx index b611f415b..d42a09ee7 100644 --- a/apps/app/components/modules/modal.tsx +++ b/apps/app/components/modules/modal.tsx @@ -125,7 +125,7 @@ export const CreateUpdateModuleModal: React.FC = ({ isOpen, setIsOpen, da leaveFrom="opacity-100" leaveTo="opacity-0" > -
    +
    @@ -139,7 +139,7 @@ export const CreateUpdateModuleModal: React.FC = ({ isOpen, setIsOpen, da leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" > - + = ({ value, onChange }) => { options={options} value={value} label={ -
    +
    {selectedOption ? ( ) : ( -
    +
    No user
    )} diff --git a/apps/app/components/modules/select/select-members.tsx b/apps/app/components/modules/select/select-members.tsx index 439753a91..8d407f36a 100644 --- a/apps/app/components/modules/select/select-members.tsx +++ b/apps/app/components/modules/select/select-members.tsx @@ -51,16 +51,16 @@ export const ModuleMembersSelect: React.FC = ({ value, onChange }) => { +
    {value && value.length > 0 && Array.isArray(value) ? (
    - {value.length} Assignees + {value.length} Assignees
    ) : (
    - - Assignee + + Assignee
    )}
    diff --git a/apps/app/components/modules/sidebar-select/select-lead.tsx b/apps/app/components/modules/sidebar-select/select-lead.tsx index bf45f614e..795d0f75c 100644 --- a/apps/app/components/modules/sidebar-select/select-lead.tsx +++ b/apps/app/components/modules/sidebar-select/select-lead.tsx @@ -62,11 +62,11 @@ export const SidebarLeadSelect: React.FC = ({ value, onChange }) => { +
    {selectedOption ? ( ) : ( -
    +
    = ({ value, onChange }) => { +
    {value && value.length > 0 && Array.isArray(value) ? (
    - {value.length} Assignees + {value.length} Assignees
    ) : ( "No members" diff --git a/apps/app/components/modules/sidebar-select/select-status.tsx b/apps/app/components/modules/sidebar-select/select-status.tsx index 2156b4357..5d5ac9464 100644 --- a/apps/app/components/modules/sidebar-select/select-status.tsx +++ b/apps/app/components/modules/sidebar-select/select-status.tsx @@ -33,7 +33,7 @@ export const SidebarStatusSelect: React.FC = ({ control, submitChanges, w label={ = ({ issues, module, isOpen,
    {module ? ( <> @@ -199,7 +199,7 @@ export const ModuleDetailsSidebar: React.FC = ({ issues, module, isOpen, {capitalizeFirstLetter(`${watch("status")}`)} @@ -218,13 +218,13 @@ export const ModuleDetailsSidebar: React.FC = ({ issues, module, isOpen, )} />
    -
    +
    {({ open }) => ( <> @@ -271,8 +271,8 @@ export const ModuleDetailsSidebar: React.FC = ({ issues, module, isOpen, {({ open }) => ( <> @@ -319,7 +319,7 @@ export const ModuleDetailsSidebar: React.FC = ({ issues, module, isOpen,
    -

    {module.name}

    +

    {module.name}

    setModuleDeleteModal(true)}> @@ -336,7 +336,7 @@ export const ModuleDetailsSidebar: React.FC = ({ issues, module, isOpen,
    - + {module.description}
    @@ -373,7 +373,7 @@ export const ModuleDetailsSidebar: React.FC = ({ issues, module, isOpen, Progress
    -
    +
    = ({ issues, module, isOpen,
    -
    - +
    + {({ open }) => (
    - Progress + Progress {!open && moduleIssues && progressPercentage ? ( {progressPercentage ? `${progressPercentage}%` : ""} @@ -415,7 +415,7 @@ export const ModuleDetailsSidebar: React.FC = ({ issues, module, isOpen, ) : (
    - + Invalid date. Please enter valid date.
    @@ -428,7 +428,7 @@ export const ModuleDetailsSidebar: React.FC = ({ issues, module, isOpen,
    - + Pending Issues -{" "} @@ -437,7 +437,7 @@ export const ModuleDetailsSidebar: React.FC = ({ issues, module, isOpen,
    -
    +
    Ideal @@ -466,15 +466,15 @@ export const ModuleDetailsSidebar: React.FC = ({ issues, module, isOpen,
    -
    - +
    + {({ open }) => (
    - Other Information + Other Information
    {module.total_issues > 0 ? ( @@ -487,7 +487,7 @@ export const ModuleDetailsSidebar: React.FC = ({ issues, module, isOpen, ) : (
    - + No issues found. Please add issue.
    @@ -522,11 +522,11 @@ export const ModuleDetailsSidebar: React.FC = ({ issues, module, isOpen,
    -
    +
    -

    Links

    +

    Links

    diff --git a/apps/app/components/rich-text-editor/toolbar/link.tsx b/apps/app/components/rich-text-editor/toolbar/link.tsx index 458a50171..a47c45c1a 100644 --- a/apps/app/components/rich-text-editor/toolbar/link.tsx +++ b/apps/app/components/rich-text-editor/toolbar/link.tsx @@ -173,12 +173,12 @@ export const FloatingLinkToolbar = () => { return ( <> {!isEditing && ( - + {linkEditButtons} )} {!isEditing && empty && ( - + {linkEditButtons} )} diff --git a/apps/app/components/rich-text-editor/toolbar/table-controls.tsx b/apps/app/components/rich-text-editor/toolbar/table-controls.tsx index 3ad285245..d8f8e24e2 100644 --- a/apps/app/components/rich-text-editor/toolbar/table-controls.tsx +++ b/apps/app/components/rich-text-editor/toolbar/table-controls.tsx @@ -8,7 +8,7 @@ export const TableControls = () => {
    diff --git a/apps/app/components/states/create-state-modal.tsx b/apps/app/components/states/create-state-modal.tsx index ca19cd752..769ca6821 100644 --- a/apps/app/components/states/create-state-modal.tsx +++ b/apps/app/components/states/create-state-modal.tsx @@ -102,7 +102,7 @@ export const CreateStateModal: React.FC = ({ isOpen, projectId, handleClo leaveFrom="opacity-100" leaveTo="opacity-0" > -
    +
    @@ -116,10 +116,10 @@ export const CreateStateModal: React.FC = ({ isOpen, projectId, handleClo leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" > - +
    - + Create State
    @@ -165,8 +165,8 @@ export const CreateStateModal: React.FC = ({ isOpen, projectId, handleClo {({ open }) => ( <> Color @@ -179,7 +179,7 @@ export const CreateStateModal: React.FC = ({ isOpen, projectId, handleClo /> )}
    diff --git a/apps/app/components/states/delete-state-modal.tsx b/apps/app/components/states/delete-state-modal.tsx index d1eca3a93..362ff9353 100644 --- a/apps/app/components/states/delete-state-modal.tsx +++ b/apps/app/components/states/delete-state-modal.tsx @@ -90,7 +90,7 @@ export const DeleteStateModal: React.FC = ({ isOpen, onClose, data }) => leaveFrom="opacity-100" leaveTo="opacity-0" > -
    +
    @@ -104,8 +104,8 @@ export const DeleteStateModal: React.FC = ({ isOpen, onClose, data }) => leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" > - -
    + +
    = ({ isOpen, onClose, data }) => />
    - + Delete State
    -

    +

    Are you sure you want to delete state-{" "} {data?.name}? All of the data related to the state will be permanently removed. This action cannot be undone. diff --git a/apps/app/components/states/single-state.tsx b/apps/app/components/states/single-state.tsx index f4383b376..2a65a1674 100644 --- a/apps/app/components/states/single-state.tsx +++ b/apps/app/components/states/single-state.tsx @@ -135,12 +135,12 @@ export const SingleState: React.FC = ({ return (

    {getStateGroupIcon(state.group, "20", "20", state.color)}
    -
    {addSpaceIfCamelCase(state.name)}
    +
    {addSpaceIfCamelCase(state.name)}

    {state.description}

    @@ -148,7 +148,7 @@ export const SingleState: React.FC = ({ {index !== 0 && ( diff --git a/apps/app/components/ui/multi-level-select.tsx b/apps/app/components/ui/multi-level-select.tsx index 1662c58a8..a063ee45f 100644 --- a/apps/app/components/ui/multi-level-select.tsx +++ b/apps/app/components/ui/multi-level-select.tsx @@ -48,7 +48,7 @@ export const MultiLevelSelect: React.FC = ({
    setOpenChildFor(null)} - className="relative w-full cursor-default rounded-lg bg-white py-2 pl-3 pr-10 text-left shadow-md sm:text-sm" + className="relative w-full cursor-default rounded-lg bg-brand-surface-2 py-2 pl-3 pr-10 text-left shadow-md sm:text-sm" > {selected?.label ?? label} @@ -64,13 +64,13 @@ export const MultiLevelSelect: React.FC = ({ > {options.map((option) => ( { if (option.children !== null) { @@ -88,7 +88,7 @@ export const MultiLevelSelect: React.FC = ({ <> {openChildFor?.id === option.id && (
    = ({ = ({ ))}
    ( theme === "primary" ? `${ disabled ? "opacity-70" : "" - } border border-theme text-white shadow-sm hover:bg-theme focus:outline-none` + } border border-brand-accent text-white shadow-sm hover:bg-brand-accent focus:outline-none` : theme === "secondary" - ? "border bg-transparent hover:bg-gray-100" + ? "border bg-transparent hover:bg-brand-surface-1" : theme === "success" ? `${ disabled ? "opacity-70" : "" diff --git a/apps/app/components/ui/text-area/index.tsx b/apps/app/components/ui/text-area/index.tsx index 8cda29077..be4938699 100644 --- a/apps/app/components/ui/text-area/index.tsx +++ b/apps/app/components/ui/text-area/index.tsx @@ -44,7 +44,7 @@ export const TextArea: React.FC = ({ return ( <> {label && ( -
    -
    +

    Pending issues

    {data ? ( @@ -52,7 +52,7 @@ export const IssuesStats: React.FC = ({ data }) => ( )}
    -
    +

    Issues due by this week

    {data ? ( diff --git a/apps/app/components/workspace/send-workspace-invitation-modal.tsx b/apps/app/components/workspace/send-workspace-invitation-modal.tsx index b81023c2a..f58269b89 100644 --- a/apps/app/components/workspace/send-workspace-invitation-modal.tsx +++ b/apps/app/components/workspace/send-workspace-invitation-modal.tsx @@ -83,7 +83,7 @@ const SendWorkspaceInvitationModal: React.FC = ({ leaveFrom="opacity-100" leaveTo="opacity-0" > -
    +
    @@ -97,14 +97,14 @@ const SendWorkspaceInvitationModal: React.FC = ({ leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" > - +
    - + Members -

    +

    Invite members to work on your workspace.

    diff --git a/apps/app/components/workspace/sidebar-dropdown.tsx b/apps/app/components/workspace/sidebar-dropdown.tsx index 93be576fe..ac5ee7f7a 100644 --- a/apps/app/components/workspace/sidebar-dropdown.tsx +++ b/apps/app/components/workspace/sidebar-dropdown.tsx @@ -84,13 +84,13 @@ export const WorkspaceSidebarDropdown = () => {
    - +
    -
    +
    {activeWorkspace?.logo && activeWorkspace.logo !== "" ? ( { >
    -
    {user?.email}
    - Workspace +
    {user?.email}
    + Workspace {workspaces ? (
    {workspaces.length > 0 ? ( @@ -148,7 +148,7 @@ export const WorkspaceSidebarDropdown = () => {
    )}
    -
    +
    {userLinks(workspaceSlug as string).map((link, index) => ( {link.name} @@ -217,11 +217,11 @@ export const WorkspaceSidebarDropdown = () => { ))}
    -     diff --git a/apps/app/constants/themes.ts b/apps/app/constants/themes.ts new file mode 100644 index 000000000..8ac745b82 --- /dev/null +++ b/apps/app/constants/themes.ts @@ -0,0 +1,35 @@ +export const THEMES = [ + "light", + "dark", + "light-contrast", + "dark-contrast", + // "custom" +]; + +export const THEMES_OBJ = [ + { + value: "light", + label: "Light", + type: "light", + }, + { + value: "dark", + label: "Dark", + type: "dark", + }, + { + value: "light-contrast", + label: "Light High Contrast", + type: "light", + }, + { + value: "dark-contrast", + label: "Dark High Contrast", + type: "dark", + }, + // { + // value: "custom", + // label: "Custom", + // type: "light", + // }, +]; diff --git a/apps/app/helpers/theme.helper.ts b/apps/app/helpers/theme.helper.ts new file mode 100644 index 000000000..d3d76f3e5 --- /dev/null +++ b/apps/app/helpers/theme.helper.ts @@ -0,0 +1,35 @@ +export const hexToRgb = (hex: string) => { + hex = hex.toLowerCase(); + var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); + return result + ? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)].join(",") + : null; +}; + +export const applyTheme = (palette: string, isDarkPalette: boolean) => { + const values: string[] = []; + palette.split(",").map((color: string) => { + const cssVarColor = hexToRgb(color); + if (cssVarColor) values.push(cssVarColor); + }); + + const cssVars = [ + "--color-bg-base", + "--color-bg-surface-1", + "--color-bg-surface-2", + "--color-border", + "--color-bg-sidebar", + "--color-accent", + "--color-text-base", + "--color-text-secondary", + "color-scheme", + ]; + + values.push(isDarkPalette ? "dark" : "light"); + + cssVars.forEach((cssVar, i) => + document + .querySelector("[data-theme='custom']") + ?.style.setProperty(cssVar, values[i]) + ); +}; diff --git a/apps/app/layouts/app-layout/app-header.tsx b/apps/app/layouts/app-layout/app-header.tsx index 13106f480..81ec5dbf0 100644 --- a/apps/app/layouts/app-layout/app-header.tsx +++ b/apps/app/layouts/app-layout/app-header.tsx @@ -9,12 +9,12 @@ type Props = { }; const Header: React.FC = ({ breadcrumbs, left, right, setToggleSidebar }) => ( -
    +
    @@ -375,7 +375,7 @@ const SinglePage: NextPage = () => { customButton={ {/*
    -
    +

    Modules

    -

    +

    Modules are enabled for all the projects in this workspace. Access it from the navigation bar.

    @@ -146,7 +146,7 @@ const FeaturesSettings: NextPage = () => {
    -
    +

    Views

    -

    +

    Views are enabled for all the projects in this workspace. Access it from the navigation bar.

    @@ -187,7 +187,7 @@ const FeaturesSettings: NextPage = () => {
    -
    +

    Pages

    -

    +

    Pages are enabled for all the projects in this workspace. Access them from the navigation bar.

    @@ -228,7 +228,7 @@ const FeaturesSettings: NextPage = () => {
    -
    +
    {key === activeGroup && ( { diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx index 7c8f7ff64..e6a7eb10a 100644 --- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx +++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx @@ -79,7 +79,7 @@ const ProjectViews: NextPage = () => { document.dispatchEvent(e); }} > - + Create View
    @@ -98,8 +98,8 @@ const ProjectViews: NextPage = () => { {views ? ( views.length > 0 ? (
    -

    Views

    -
      +

      Views

      +
      {views.map((view) => ( { handleDeleteView={() => handleDeleteView(view)} /> ))} -
    +
    ) : ( {

    Logo

    -

    +

    Max file size is 5MB. Supported file types are .jpg and .png.

    @@ -228,7 +228,7 @@ const WorkspaceSettings: NextPage = () => {

    URL

    -

    Your workspace URL.

    +

    Your workspace URL.

    {

    Name

    -

    Give a name to your workspace.

    +

    Give a name to your workspace.

    {

    Company Size

    -

    How big is your company?

    +

    How big is your company?

    {

    Danger Zone

    -

    +

    The danger zone of the workspace delete page is a critical area that requires careful consideration and attention. When deleting a workspace, all of the data and resources within that workspace will be permanently removed and cannot be recovered. diff --git a/apps/app/pages/[workspaceSlug]/settings/members.tsx b/apps/app/pages/[workspaceSlug]/settings/members.tsx index a85c00cf3..f993c2ff9 100644 --- a/apps/app/pages/[workspaceSlug]/settings/members.tsx +++ b/apps/app/pages/[workspaceSlug]/settings/members.tsx @@ -142,7 +142,7 @@ const MembersSettings: NextPage = () => {

    Members