style: design (#430)

* 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

apps/app/components/command-palette/shortcuts-modal.tsx

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

apps/app/components/cycles/sidebar.tsx

@@ -19,6 +19,7 @@ import {
   UserCircleIcon,
   ChevronDownIcon,
   DocumentIcon,
+  ExclamationCircleIcon,
 } from "@heroicons/react/24/outline";
 // ui
 import { CustomMenu, Loader, ProgressBar } from "components/ui";
@@ -144,7 +145,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
         {cycle ? (
           <>
             <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 ">
                   <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 `}
@@ -244,7 +245,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                 </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 items-start justify-start gap-2  ">
                     <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 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>
                 {({ open }) => (
                   <div
@@ -331,13 +332,21 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                           ""
                         )}
                       </div>
-
-                      <Disclosure.Button>
-                        <ChevronDownIcon
-                          className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`}
-                          aria-hidden="true"
-                        />
-                      </Disclosure.Button>
+                      {isStartValid && isEndValid ? (
+                        <Disclosure.Button>
+                          <ChevronDownIcon
+                            className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`}
+                            aria-hidden="true"
+                          />
+                        </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>
                     <Transition show={open}>
                       <Disclosure.Panel>
@@ -383,7 +392,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
               </Disclosure>
             </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>
                 {({ open }) => (
                   <div
@@ -394,12 +403,19 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                         <span className="font-medium text-gray-500">Other Information</span>
                       </div>
 
-                      <Disclosure.Button>
-                        <ChevronDownIcon
-                          className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`}
-                          aria-hidden="true"
-                        />
-                      </Disclosure.Button>
+                      {issues.length > 0 ? (
+                        <Disclosure.Button>
+                          <ChevronDownIcon
+                            className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`}
+                            aria-hidden="true"
+                          />
+                        </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>
                     <Transition show={open}>
                       <Disclosure.Panel>

apps/app/components/icons/cmd-icon.tsx

@@ -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;

apps/app/components/icons/index.ts

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

apps/app/components/issues/delete-issue-modal.tsx

@@ -122,51 +122,49 @@ export const DeleteIssueModal: React.FC<Props> = ({ 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"
             >
-              <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">
-                <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
-                  <div className="sm:flex sm:items-start">
-                    <div>
-                      <div className="mx-auto grid h-16 w-16 place-items-center rounded-full bg-red-100">
-                        <ExclamationTriangleIcon
-                          className="h-8 w-8 text-red-600"
-                          aria-hidden="true"
-                        />
-                      </div>
-                      <Dialog.Title
-                        as="h3"
-                        className="mt-3 text-lg font-medium leading-6 text-gray-900"
-                      >
-                        Are you sure you want to delete {`"`}
-                        {data?.project_detail.identifier}-{data?.sequence_id} - {data?.name}?{`"`}
-                      </Dialog.Title>
-                      <div className="mt-2">
-                        <p className="text-sm text-gray-500">
-                          All of the data related to the issue will be permanently removed. This
-                          action cannot be undone.
-                        </p>
-                      </div>
-                    </div>
+              <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="flex flex-col gap-6 p-6">
+                  <div className="flex w-full items-center justify-start gap-6">
+                    <span className="place-items-center rounded-full bg-red-100 p-4">
+                      <ExclamationTriangleIcon
+                        className="h-6 w-6 text-red-600"
+                        aria-hidden="true"
+                      />
+                    </span>
+                    <span className="flex items-center justify-start">
+                      <h3 className="text-xl font-medium 2xl:text-2xl">Delete Issue</h3>
+                    </span>
+                  </div>
+                  <span>
+                    <p className="text-sm leading-7 text-gray-500 break-all">
+                      Are you sure you want to delete issue{" "}
+                      <span className="font-semibold break-all">
+                        {data?.project_detail.identifier}-{data?.sequence_id}
+                      </span>{" "}
+                      ? All of the data related to the issue will be permanently removed. This
+                      action cannot be undone.
+                    </p>
+                  </span>
+                  <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 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>
               </Dialog.Panel>
             </Transition.Child>

apps/app/components/issues/select/state.tsx

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

apps/app/components/modules/sidebar.tsx

@@ -14,6 +14,7 @@ import {
   ChevronDownIcon,
   DocumentDuplicateIcon,
   DocumentIcon,
+  ExclamationCircleIcon,
   TrashIcon,
 } from "@heroicons/react/24/outline";
 
@@ -205,7 +206,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
         {module ? (
           <>
             <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 ">
                   <Controller
                     control={control}
@@ -325,7 +326,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
                 </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 items-start justify-start gap-2  ">
                     <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 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>
                 {({ open }) => (
                   <div
@@ -414,12 +415,21 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
                         )}
                       </div>
 
-                      <Disclosure.Button>
-                        <ChevronDownIcon
-                          className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`}
-                          aria-hidden="true"
-                        />
-                      </Disclosure.Button>
+                      {isStartValid && isEndValid ? (
+                        <Disclosure.Button>
+                          <ChevronDownIcon
+                            className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`}
+                            aria-hidden="true"
+                          />
+                        </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>
                     <Transition show={open}>
                       <Disclosure.Panel>
@@ -465,7 +475,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
               </Disclosure>
             </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>
                 {({ open }) => (
                   <div
@@ -476,12 +486,19 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
                         <span className="font-medium text-gray-500">Other Information</span>
                       </div>
 
-                      <Disclosure.Button>
-                        <ChevronDownIcon
-                          className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`}
-                          aria-hidden="true"
-                        />
-                      </Disclosure.Button>
+                      {issues.length > 0 ? (
+                        <Disclosure.Button>
+                          <ChevronDownIcon
+                            className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`}
+                            aria-hidden="true"
+                          />
+                        </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>
                     <Transition show={open}>
                       <Disclosure.Panel>

apps/app/components/project/delete-project-modal.tsx

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

apps/app/components/workspace/sidebar-dropdown.tsx

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

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

@@ -20,7 +20,7 @@ import { IProject, UserAuth } from "types";
 import type { NextPage, GetServerSidePropsContext } from "next";
 // 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 router = useRouter();
@@ -124,7 +124,7 @@ const FeaturesSettings: NextPage<UserAuth> = (props) => {
           </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-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>
                 <h4 className="-mt-1.5 text-xl font-semibold">Modules</h4>
                 <p className="text-gray-500">

apps/app/public/mac-command.svg

@@ -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>