thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

style: design (#430)

Browse Source 
* style: shortcut modal

* style: feature setting module icon

* style: delete issue modal

* style: delete project modal

* style: sidebar prompt for chart and other info

* fix: create issue modal state icon

* fix: workspace dropdown
This commit is contained in:
Anmol Singh Bhatia 2023-03-13 23:38:43 +05:30 committed by GitHub
parent 7d7683ae6f
commit d5d64e09d4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 246 additions and 180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
apps/app/components/command-palette/shortcuts-modal.tsx
View File

@ -3,6 +3,8 @@ import React, { useEffect, useState } from "react";
import { Dialog, Transition } from "@headlessui/react"; import { Dialog, Transition } from "@headlessui/react";
// icons // icons
import { XMarkIcon } from "@heroicons/react/20/solid"; import { XMarkIcon } from "@heroicons/react/20/solid";
import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
import { MacCommandIcon } from "components/icons";
// ui // ui
import { Input } from "components/ui"; import { Input } from "components/ui";
@ -15,7 +17,7 @@ const shortcuts = [
{ {
title: "Navigation", title: "Navigation",
shortcuts: [ shortcuts: [
{ keys: "Ctrl,/,Cmd,K", description: "To open navigator" }, { keys: "Ctrl,K", description: "To open navigator" },
{ keys: "↑", description: "Move up" }, { keys: "↑", description: "Move up" },
{ keys: "↓", description: "Move down" }, { keys: "↓", description: "Move down" },
{ keys: "←", description: "Move left" }, { keys: "←", description: "Move left" },
@ -34,8 +36,8 @@ const shortcuts = [
{ keys: "Delete", description: "To bulk delete issues" }, { keys: "Delete", description: "To bulk delete issues" },
{ keys: "H", description: "To open shortcuts guide" }, { keys: "H", description: "To open shortcuts guide" },
{ {
keys: "Ctrl,/,Cmd,Alt,C", keys: "Ctrl,Alt,C",
description: "To copy issue url when on issue detail page.", description: "To copy issue url when on issue detail page",
}, },
], ],
}, },
@ -100,13 +102,17 @@ export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
</span> </span>
</Dialog.Title> </Dialog.Title>
<div> <div>
<Input <div className="flex w-full items-center justify-start gap-1 rounded border-[0.6px] border-gray-200 bg-gray-100 px-3 py-2">
id="search" <MagnifyingGlassIcon className="h-3.5 w-3.5 text-gray-500" />
name="search" <Input
type="text" className="w-full border-none bg-transparent py-1 px-2 text-xs text-gray-500 focus:outline-none"
placeholder="Search for shortcuts" id="search"
onChange={(e) => setQuery(e.target.value)} name="search"
/> type="text"
placeholder="Search for shortcuts"
onChange={(e) => setQuery(e.target.value)}
/>
</div>
</div> </div>
<div className="flex w-full flex-col gap-y-3"> <div className="flex w-full flex-col gap-y-3">
{query.trim().length > 0 ? ( {query.trim().length > 0 ? (
@ -114,14 +120,20 @@ export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
filteredShortcuts.map((shortcut) => ( filteredShortcuts.map((shortcut) => (
<div key={shortcut.keys} className="flex w-full flex-col"> <div key={shortcut.keys} className="flex w-full flex-col">
<div className="flex flex-col gap-y-3"> <div className="flex flex-col gap-y-3">
<div className="flex justify-between"> <div className="flex items-center justify-between">
<p className="text-sm text-gray-500">{shortcut.description}</p> <p className="text-sm text-gray-500">{shortcut.description}</p>
<div className="flex items-center gap-x-1"> <div className="flex items-center gap-x-2.5">
{shortcut.keys.split(",").map((key, index) => ( {shortcut.keys.split(",").map((key, index) => (
<span key={index} className="flex items-center gap-1"> <span key={index} className="flex items-center gap-1">
<kbd className="rounded bg-gray-200 px-1 text-sm"> {key === "Ctrl" ? (
{key} <span className="flex h-full items-center rounded-sm border border-gray-200 bg-gray-100 p-2">
</kbd> <MacCommandIcon />
</span>
) : (
<kbd className="rounded-sm border border-gray-200 bg-gray-100 px-2 py-1 text-sm font-medium text-gray-800">
{key === "Ctrl" ? <MacCommandIcon /> : key}
</kbd>
)}
</span> </span>
))} ))}
</div> </div>
@ -147,14 +159,20 @@ export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
<p className="mb-4 font-medium">{title}</p> <p className="mb-4 font-medium">{title}</p>
<div className="flex flex-col gap-y-3"> <div className="flex flex-col gap-y-3">
{shortcuts.map(({ keys, description }, index) => ( {shortcuts.map(({ keys, description }, index) => (
<div key={index} className="flex justify-between"> <div key={index} className="flex items-center justify-between">
<p className="text-sm text-gray-500">{description}</p> <p className="text-sm text-gray-500">{description}</p>
<div className="flex items-center gap-x-1"> <div className="flex items-center gap-x-2.5">
{keys.split(",").map((key, index) => ( {keys.split(",").map((key, index) => (
<span key={index} className="flex items-center gap-1"> <span key={index} className="flex items-center gap-1">
<kbd className="rounded bg-gray-200 px-1 text-sm"> {key === "Ctrl" ? (
{key} <span className="flex h-full items-center rounded-sm border border-gray-200 bg-gray-100 p-2">
</kbd> <MacCommandIcon />
</span>
) : (
<kbd className="rounded-sm border border-gray-200 bg-gray-100 px-2 py-1 text-sm font-medium text-gray-800">
{key === "Ctrl" ? <MacCommandIcon /> : key}
</kbd>
)}
</span> </span>
))} ))}
</div> </div>

50
apps/app/components/cycles/sidebar.tsx
View File

@ -19,6 +19,7 @@ import {
UserCircleIcon, UserCircleIcon,
ChevronDownIcon, ChevronDownIcon,
DocumentIcon, DocumentIcon,
ExclamationCircleIcon,
} from "@heroicons/react/24/outline"; } from "@heroicons/react/24/outline";
// ui // ui
import { CustomMenu, Loader, ProgressBar } from "components/ui"; import { CustomMenu, Loader, ProgressBar } from "components/ui";
@ -144,7 +145,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
{cycle ? ( {cycle ? (
<> <>
<div className="flex flex-col items-start justify-center"> <div className="flex flex-col items-start justify-center">
<div className="flex gap-2.5 px-7 text-sm"> <div className="flex gap-2.5 px-6 text-sm">
<div className="flex items-center "> <div className="flex items-center ">
<span <span
className={`flex items-center rounded border-[0.5px] border-gray-200 bg-gray-100 px-2.5 py-1.5 text-center text-sm capitalize text-gray-800 `} className={`flex items-center rounded border-[0.5px] border-gray-200 bg-gray-100 px-2.5 py-1.5 text-center text-sm capitalize text-gray-800 `}
@ -244,7 +245,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
</div> </div>
</div> </div>
<div className="flex flex-col gap-6 px-7 py-6"> <div className="flex flex-col gap-6 px-6 py-6">
<div className="flex flex-col items-start justify-start gap-2 "> <div className="flex flex-col items-start justify-start gap-2 ">
<div className="flex items-start justify-start gap-2 "> <div className="flex items-start justify-start gap-2 ">
<h4 className="text-xl font-semibold text-gray-900">{cycle.name}</h4> <h4 className="text-xl font-semibold text-gray-900">{cycle.name}</h4>
@ -314,7 +315,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
</div> </div>
</div> </div>
<div className="flex w-full flex-col items-center justify-start gap-2 border-t border-gray-300 px-7 py-6 "> <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-gray-300 px-6 py-6 ">
<Disclosure> <Disclosure>
{({ open }) => ( {({ open }) => (
<div <div
@ -331,13 +332,21 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
"" ""
)} )}
</div> </div>
{isStartValid && isEndValid ? (
<Disclosure.Button> <Disclosure.Button>
<ChevronDownIcon <ChevronDownIcon
className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`} className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`}
aria-hidden="true" aria-hidden="true"
/> />
</Disclosure.Button> </Disclosure.Button>
) : (
<div className="flex items-center gap-1">
<ExclamationCircleIcon className="h-3 w-3" />
<span className="text-xs italic">
Invalid date. Please enter valid date.
</span>
</div>
)}
</div> </div>
<Transition show={open}> <Transition show={open}>
<Disclosure.Panel> <Disclosure.Panel>
@ -383,7 +392,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
</Disclosure> </Disclosure>
</div> </div>
<div className="flex w-full flex-col items-center justify-start gap-2 border-t border-gray-300 px-7 py-6 "> <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-gray-300 px-6 py-6 ">
<Disclosure> <Disclosure>
{({ open }) => ( {({ open }) => (
<div <div
@ -394,12 +403,19 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
<span className="font-medium text-gray-500">Other Information</span> <span className="font-medium text-gray-500">Other Information</span>
</div> </div>
<Disclosure.Button> {issues.length > 0 ? (
<ChevronDownIcon <Disclosure.Button>
className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`} <ChevronDownIcon
aria-hidden="true" className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`}
/> aria-hidden="true"
</Disclosure.Button> />
</Disclosure.Button>
) : (
<div className="flex items-center gap-1">
<ExclamationCircleIcon className="h-3 w-3" />
<span className="text-xs italic">No issues found. Please add issue.</span>
</div>
)}
</div> </div>
<Transition show={open}> <Transition show={open}>
<Disclosure.Panel> <Disclosure.Panel>

11
apps/app/components/icons/cmd-icon.tsx Normal file
View File

@ -0,0 +1,11 @@
import React from "react";
import Image from "next/image";
import type { Props } from "./types";
import CMDIcon from "public/mac-command.svg";
export const MacCommandIcon: React.FC<Props> = ({ width = "14", height = "14" }) => (
<Image src={CMDIcon} height={height} width={width} alt="CMDIcon" />
);
export default MacCommandIcon;

1
apps/app/components/icons/index.ts
View File

@ -41,3 +41,4 @@ export * from "./assignment-clipboard-icon";
export * from "./tick-mark-icon"; export * from "./tick-mark-icon";
export * from "./contrast-icon"; export * from "./contrast-icon";
export * from "./people-group-icon"; export * from "./people-group-icon";
export * from "./cmd-icon";

86
apps/app/components/issues/delete-issue-modal.tsx
View File

@ -122,51 +122,49 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data })
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg"> <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
<div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> <div className="flex flex-col gap-6 p-6">
<div className="sm:flex sm:items-start"> <div className="flex w-full items-center justify-start gap-6">
<div> <span className="place-items-center rounded-full bg-red-100 p-4">
<div className="mx-auto grid h-16 w-16 place-items-center rounded-full bg-red-100"> <ExclamationTriangleIcon
<ExclamationTriangleIcon className="h-6 w-6 text-red-600"
className="h-8 w-8 text-red-600" aria-hidden="true"
aria-hidden="true" />
/> </span>
</div> <span className="flex items-center justify-start">
<Dialog.Title <h3 className="text-xl font-medium 2xl:text-2xl">Delete Issue</h3>
as="h3" </span>
className="mt-3 text-lg font-medium leading-6 text-gray-900" </div>
> <span>
Are you sure you want to delete {`"`} <p className="text-sm leading-7 text-gray-500 break-all">
{data?.project_detail.identifier}-{data?.sequence_id} - {data?.name}?{`"`} Are you sure you want to delete issue{" "}
</Dialog.Title> <span className="font-semibold break-all">
<div className="mt-2"> {data?.project_detail.identifier}-{data?.sequence_id}
<p className="text-sm text-gray-500"> </span>{" "}
All of the data related to the issue will be permanently removed. This ? All of the data related to the issue will be permanently removed. This
action cannot be undone. action cannot be undone.
</p> </p>
</div> </span>
</div> <div className="flex flex-row-reverse items-center gap-3">
<Button
type="button"
onClick={handleDeletion}
theme="danger"
disabled={isDeleteLoading}
className="rounded-lg border-none px-5 py-2 "
>
{isDeleteLoading ? "Deleting..." : "Delete Issue"}
</Button>
<Button
type="button"
theme="secondary"
className="rounded-lg border-none px-5 py-2 "
onClick={onClose}
ref={cancelButtonRef}
>
Cancel
</Button>
</div> </div>
</div>
<div className="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
<Button
type="button"
onClick={handleDeletion}
theme="danger"
disabled={isDeleteLoading}
className="inline-flex sm:ml-3"
>
{isDeleteLoading ? "Deleting..." : "Delete"}
</Button>
<Button
type="button"
theme="secondary"
className="inline-flex sm:ml-3"
onClick={onClose}
ref={cancelButtonRef}
>
Cancel
</Button>
</div> </div>
</Dialog.Panel> </Dialog.Panel>
</Transition.Child> </Transition.Child>

9
apps/app/components/issues/select/state.tsx
View File

@ -56,9 +56,12 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
options={options} options={options}
label={ label={
<div className="flex items-center gap-2 text-gray-500"> <div className="flex items-center gap-2 text-gray-500">
<Squares2X2Icon className="h-4 w-4" /> {selectedOption ? (
{selectedOption && getStateGroupIcon(selectedOption.group, "16", "16", selectedOption.color)
getStateGroupIcon(selectedOption.group, "16", "16", selectedOption.color)} ) : (
<Squares2X2Icon className="h-4 w-4" />
)}
{selectedOption?.name ?? "State"} {selectedOption?.name ?? "State"}
</div> </div>
} }

49
apps/app/components/modules/sidebar.tsx
View File

@ -14,6 +14,7 @@ import {
ChevronDownIcon, ChevronDownIcon,
DocumentDuplicateIcon, DocumentDuplicateIcon,
DocumentIcon, DocumentIcon,
ExclamationCircleIcon,
TrashIcon, TrashIcon,
} from "@heroicons/react/24/outline"; } from "@heroicons/react/24/outline";
@ -205,7 +206,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
{module ? ( {module ? (
<> <>
<div className="flex flex-col items-start justify-center"> <div className="flex flex-col items-start justify-center">
<div className="flex gap-2.5 px-7 text-sm"> <div className="flex gap-2.5 px-6 text-sm">
<div className="flex items-center "> <div className="flex items-center ">
<Controller <Controller
control={control} control={control}
@ -325,7 +326,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
</div> </div>
</div> </div>
<div className="flex flex-col gap-6 px-7 py-6"> <div className="flex flex-col gap-6 px-6 py-6">
<div className="flex flex-col items-start justify-start gap-2 "> <div className="flex flex-col items-start justify-start gap-2 ">
<div className="flex items-start justify-start gap-2 "> <div className="flex items-start justify-start gap-2 ">
<h4 className="text-xl font-semibold text-gray-900">{module.name}</h4> <h4 className="text-xl font-semibold text-gray-900">{module.name}</h4>
@ -396,7 +397,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
</div> </div>
</div> </div>
<div className="flex w-full flex-col items-center justify-start gap-2 border-t border-gray-300 px-7 py-6 "> <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-gray-300 px-6 py-6 ">
<Disclosure> <Disclosure>
{({ open }) => ( {({ open }) => (
<div <div
@ -414,12 +415,21 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
)} )}
</div> </div>
<Disclosure.Button> {isStartValid && isEndValid ? (
<ChevronDownIcon <Disclosure.Button>
className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`} <ChevronDownIcon
aria-hidden="true" className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`}
/> aria-hidden="true"
</Disclosure.Button> />
</Disclosure.Button>
) : (
<div className="flex items-center gap-1">
<ExclamationCircleIcon className="h-3 w-3" />
<span className="text-xs italic">
Invalid date. Please enter valid date.
</span>
</div>
)}
</div> </div>
<Transition show={open}> <Transition show={open}>
<Disclosure.Panel> <Disclosure.Panel>
@ -465,7 +475,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
</Disclosure> </Disclosure>
</div> </div>
<div className="flex w-full flex-col items-center justify-start gap-2 border-t border-gray-300 px-7 py-6 "> <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-gray-300 px-6 py-6 ">
<Disclosure> <Disclosure>
{({ open }) => ( {({ open }) => (
<div <div
@ -476,12 +486,19 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
<span className="font-medium text-gray-500">Other Information</span> <span className="font-medium text-gray-500">Other Information</span>
</div> </div>
<Disclosure.Button> {issues.length > 0 ? (
<ChevronDownIcon <Disclosure.Button>
className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`} <ChevronDownIcon
aria-hidden="true" className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`}
/> aria-hidden="true"
</Disclosure.Button> />
</Disclosure.Button>
) : (
<div className="flex items-center gap-1">
<ExclamationCircleIcon className="h-3 w-3" />
<span className="text-xs italic">No issues found. Please add issue.</span>
</div>
)}
</div> </div>
<Transition show={open}> <Transition show={open}>
<Disclosure.Panel> <Disclosure.Panel>

145
apps/app/components/project/delete-project-modal.tsx
View File

@ -113,86 +113,81 @@ export const DeleteProjectModal: React.FC<TConfirmProjectDeletionProps> = (props
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg"> <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
<div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> <div className="flex flex-col gap-6 p-6">
<div className="sm:flex sm:items-start"> <div className="flex w-full items-center justify-start gap-6">
<div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10"> <span className="place-items-center rounded-full bg-red-100 p-4">
<ExclamationTriangleIcon <ExclamationTriangleIcon
className="h-6 w-6 text-red-600" className="h-6 w-6 text-red-600"
aria-hidden="true" aria-hidden="true"
/> />
</div> </span>
<div className="mt-3 w-full text-center sm:mt-0 sm:ml-4 sm:text-left"> <span className="flex items-center justify-start">
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900"> <h3 className="text-xl font-medium 2xl:text-2xl">Delete Project</h3>
Delete Project </span>
</Dialog.Title> </div>
<div className="mt-2"> <span>
<p className="break-all text-sm text-gray-500"> <p className="text-sm leading-7 text-gray-500">
Are you sure you want to delete project - {`"`} Are you sure you want to delete project{" "}
<span className="italic">{selectedProject?.name}</span> <span className="break-all font-semibold">{selectedProject?.name}</span>? All
{`"`} ? All of the data related to the project will be permanently of the data related to the project will be permanently removed. This action
removed. This action cannot be undone. cannot be undone
</p> </p>
</div> </span>
<div className="my-3 h-0.5 bg-gray-200" /> <div className="text-gray-600">
<div className="mt-3"> <p className="break-all text-sm ">
<p className="break-all text-sm"> Enter the project name{" "}
Enter the project name{" "} <span className="font-medium">{selectedProject?.name}</span> to continue:
<span className="font-semibold">{selectedProject?.name}</span> to </p>
continue: <Input
</p> type="text"
<Input placeholder="Project name"
type="text" className="mt-2"
placeholder="Project name" value={confirmProjectName}
className="mt-2" onChange={(e) => {
value={confirmProjectName} setConfirmProjectName(e.target.value);
onChange={(e) => { }}
setConfirmProjectName(e.target.value); name="projectName"
}} />
name="projectName" </div>
/> <div className="text-gray-600">
</div> <p className="text-sm">
<div className="mt-3"> To confirm, type <span className="font-medium">delete my project</span> below:
<p className="text-sm"> </p>
To confirm, type <span className="font-semibold">delete my project</span>{" "} <Input
below: type="text"
</p> placeholder="Enter 'delete my project'"
<Input className="mt-2"
type="text" onChange={(e) => {
placeholder="Enter 'delete my project'" if (e.target.value === "delete my project") {
className="mt-2" setConfirmDeleteMyProject(true);
onChange={(e) => { } else {
if (e.target.value === "delete my project") { setConfirmDeleteMyProject(false);
setConfirmDeleteMyProject(true); }
} else { }}
setConfirmDeleteMyProject(false); name="typeDelete"
} />
}} </div>
name="typeDelete" <div className="flex flex-row-reverse items-center gap-3">
/> <Button
</div> type="button"
</div> onClick={handleDeletion}
theme="danger"
disabled={isDeleteLoading || !canDelete}
className="rounded-lg border-none px-5 py-2"
>
{isDeleteLoading ? "Deleting..." : "Delete Project"}
</Button>
<Button
type="button"
theme="secondary"
className="rounded-lg border-none px-5 py-2"
onClick={handleClose}
ref={cancelButtonRef}
>
Cancel
</Button>
</div> </div>
</div>
<div className="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
<Button
type="button"
onClick={handleDeletion}
theme="danger"
disabled={isDeleteLoading || !canDelete}
className="inline-flex sm:ml-3"
>
{isDeleteLoading ? "Deleting..." : "Delete"}
</Button>
<Button
type="button"
theme="secondary"
className="inline-flex sm:ml-3"
onClick={handleClose}
ref={cancelButtonRef}
>
Cancel
</Button>
</div> </div>
</Dialog.Panel> </Dialog.Panel>
</Transition.Child> </Transition.Child>

11
apps/app/components/workspace/sidebar-dropdown.tsx
View File

@ -12,7 +12,9 @@ import useWorkspaces from "hooks/use-workspaces";
import userService from "services/user.service"; import userService from "services/user.service";
import authenticationService from "services/authentication.service"; import authenticationService from "services/authentication.service";
// components // components
import { Avatar, Loader } from "components/ui"; import { Avatar, Loader, Tooltip } from "components/ui";
// helper
import { truncateText } from "helpers/string.helper";
// types // types
import { IWorkspace } from "types"; import { IWorkspace } from "types";
@ -96,7 +98,7 @@ export const WorkspaceSidebarDropdown = () => {
<p className="text-base"> <p className="text-base">
{activeWorkspace?.name {activeWorkspace?.name
? activeWorkspace.name.length > 17 ? activeWorkspace.name.length > 17
? `${activeWorkspace.name.substring(0, 17)}...` ? `${activeWorkspace.name.substring(0, 15)}...`
: activeWorkspace.name : activeWorkspace.name
: "Loading..."} : "Loading..."}
</p> </p>
@ -159,7 +161,10 @@ export const WorkspaceSidebarDropdown = () => {
activeWorkspace?.name?.charAt(0) ?? "N" activeWorkspace?.name?.charAt(0) ?? "N"
)} )}
</span> </span>
<h5 className="text-sm">{workspace.name}</h5>
<h5 className="text-sm">
{truncateText(workspace.name, 18)}
</h5>
</div> </div>
<span className="p-1"> <span className="p-1">
<CheckIcon <CheckIcon

4
apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
View File

@ -20,7 +20,7 @@ import { IProject, UserAuth } from "types";
import type { NextPage, GetServerSidePropsContext } from "next"; import type { NextPage, GetServerSidePropsContext } from "next";
// fetch-keys // fetch-keys
import { PROJECTS_LIST, PROJECT_DETAILS } from "constants/fetch-keys"; import { PROJECTS_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
import { ContrastIcon, GridViewIcon } from "components/icons"; import { ContrastIcon, PeopleGroupIcon } from "components/icons";
const FeaturesSettings: NextPage<UserAuth> = (props) => { const FeaturesSettings: NextPage<UserAuth> = (props) => {
const router = useRouter(); const router = useRouter();
@ -124,7 +124,7 @@ const FeaturesSettings: NextPage<UserAuth> = (props) => {
</div> </div>
<div className="flex items-center justify-between gap-x-8 gap-y-2 rounded-[10px] border bg-white p-6"> <div className="flex items-center justify-between gap-x-8 gap-y-2 rounded-[10px] border bg-white p-6">
<div className="flex items-start gap-3"> <div className="flex items-start gap-3">
<GridViewIcon color="#ff6b00" width={28} height={28} className="flex-shrink-0" /> <PeopleGroupIcon color="#ff6b00" width={28} height={28} className="flex-shrink-0" />
<div> <div>
<h4 className="-mt-1.5 text-xl font-semibold">Modules</h4> <h4 className="-mt-1.5 text-xl font-semibold">Modules</h4>
<p className="text-gray-500"> <p className="text-gray-500">

2
apps/app/public/mac-command.svg Normal file
View File

@ -0,0 +1,2 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg fill="#000000" width="800px" height="800px" viewBox="0 0 32 32" id="icon" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:none;}</style></defs><title>mac-command</title><path d="M24,13a4,4,0,0,0,4-4V8a4,4,0,0,0-4-4H23a4,4,0,0,0-4,4v3H13V8A4,4,0,0,0,9,4H8A4,4,0,0,0,4,8V9a4,4,0,0,0,4,4h3v6H8a4,4,0,0,0-4,4v1a4,4,0,0,0,4,4H9a4,4,0,0,0,4-4V21h6v3a4,4,0,0,0,4,4h1a4,4,0,0,0,4-4V23a4,4,0,0,0-4-4H21V13ZM21,8a2,2,0,0,1,2-2h1a2,2,0,0,1,2,2V9a2,2,0,0,1-2,2H21ZM8,11A2,2,0,0,1,6,9V8A2,2,0,0,1,8,6H9a2,2,0,0,1,2,2v3H8Zm3,13a2,2,0,0,1-2,2H8a2,2,0,0,1-2-2V23a2,2,0,0,1,2-2h3Zm8-5H13V13h6Zm2,2h3a2,2,0,0,1,2,2v1a2,2,0,0,1-2,2H23a2,2,0,0,1-2-2Z"/><rect id="_Transparent_Rectangle_" data-name="&lt;Transparent Rectangle&gt;" class="cls-1" width="32" height="32"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 890 B