style: made the paddings and text sizes smaller (#433)

apps/app/components/core/board-view/all-boards.tsx

@@ -40,7 +40,7 @@ export const AllBoards: React.FC<Props> = ({
     <>
       {groupedByIssues ? (
         <div className="h-[calc(100vh-140px)] w-full">
-          <div className="horizontal-scroll-enable flex h-full gap-x-4 overflow-x-auto overflow-y-hidden">
+          <div className="horizontal-scroll-enable flex h-full gap-x-3.5 overflow-x-auto overflow-y-hidden">
             {Object.keys(groupedByIssues).map((singleGroup, index) => {
               const currentState =
                 selectedGroup === "state_detail.name"

apps/app/components/core/board-view/board-header.tsx

@@ -56,13 +56,13 @@ export const BoardHeader: React.FC<Props> = ({
     >
       <div className={`flex items-center ${!isCollapsed ? "flex-col gap-2" : "gap-1"}`}>
         <div
-          className={`flex cursor-pointer items-center gap-x-3.5 ${
+          className={`flex cursor-pointer items-center gap-x-3 ${
             !isCollapsed ? "mb-2 flex-col gap-y-2 py-2" : ""
           }`}
         >
-          {currentState && getStateGroupIcon(currentState.group, "20", "20", bgColor)}
+          {currentState && getStateGroupIcon(currentState.group, "18", "18", bgColor)}
           <h2
-            className={`text-xl font-semibold capitalize`}
+            className="text-lg font-semibold capitalize"
             style={{
               writingMode: !isCollapsed ? "vertical-rl" : "horizontal-tb",
             }}
@@ -73,7 +73,7 @@ export const BoardHeader: React.FC<Props> = ({
               ? assignees
               : addSpaceIfCamelCase(groupTitle)}
           </h2>
-          <span className="ml-0.5 text-sm bg-gray-100 py-1 px-3 rounded-full">
+          <span className="ml-0.5 rounded-full bg-gray-100 py-1 px-3 text-sm">
             {groupedByIssues[groupTitle].length}
           </span>
         </div>

apps/app/components/core/board-view/single-issue.tsx

@@ -24,7 +24,7 @@ import {
   ViewStateSelect,
 } from "components/issues/view-select";
 // ui
-import { ContextMenu, CustomMenu, Tooltip } from "components/ui";
+import { ContextMenu, CustomMenu } from "components/ui";
 // icons
 import {
   ClipboardDocumentCheckIcon,
@@ -233,7 +233,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
           setContextMenuPosition({ x: e.pageX, y: e.pageY });
         }}
       >
-        <div className="group/card relative select-none p-4">
+        <div className="group/card relative select-none p-3.5">
           {!isNotAllowed && (
             <div className="absolute top-1.5 right-1.5 z-10 opacity-0 group-hover/card:opacity-100">
               {type && !isNotAllowed && (

apps/app/components/core/list-view/single-issue.tsx

@@ -178,7 +178,7 @@ export const SingleListIssue: React.FC<Props> = ({
       </ContextMenu>
       <div className="border-b border-gray-300 last:border-b-0">
         <div
-          className="flex items-center justify-between gap-2 px-4 py-4"
+          className="flex items-center justify-between gap-2 px-4 py-3"
           onContextMenu={(e) => {
             e.preventDefault();
             setContextMenu(true);
@@ -189,21 +189,21 @@ export const SingleListIssue: React.FC<Props> = ({
             <a className="group relative flex items-center gap-2">
               {properties.key && (
                 <Tooltip
-                  tooltipHeading="ID"
+                  tooltipHeading="Issue ID"
                   tooltipContent={`${issue.project_detail?.identifier}-${issue.sequence_id}`}
                 >
-                  <span className="flex-shrink-0 text-sm text-gray-400">
+                  <span className="flex-shrink-0 text-xs text-gray-400">
                     {issue.project_detail?.identifier}-{issue.sequence_id}
                   </span>
                 </Tooltip>
               )}
               <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
-                <span className="text-base text-gray-800">{truncateText(issue.name, 50)}</span>
+                <span className="text-sm text-gray-800">{truncateText(issue.name, 50)}</span>
               </Tooltip>
             </a>
           </Link>
 
-          <div className="flex  flex-wrap items-center gap-3 text-xs">
+          <div className="flex flex-wrap items-center gap-2 text-xs">
             {properties.priority && (
               <ViewPrioritySelect
                 issue={issue}

apps/app/components/cycles/cycles-list.tsx

@@ -56,11 +56,11 @@ export const CyclesList: React.FC<TCycleStatsViewProps> = ({
             ))}
           </div>
         ) : (
-          <EmptyCycle/>
+          <EmptyCycle />
         )
       ) : (
         <Loader className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
-          <Loader.Item height="300px" />
+          <Loader.Item height="200px" />
         </Loader>
       )}
     </>

apps/app/components/cycles/single-cycle-card.tsx

@@ -40,7 +40,6 @@ import {
   CYCLE_CURRENT_AND_UPCOMING_LIST,
   CYCLE_DRAFT_LIST,
   CYCLE_ISSUES,
-  CYCLE_LIST,
 } from "constants/fetch-keys";
 
 type TSingleStatProps = {
@@ -49,7 +48,7 @@ type TSingleStatProps = {
   handleDeleteCycle: () => void;
 };
 
-const stateGroupColours: {
+const stateGroupColors: {
   [key: string]: string;
 } = {
   backlog: "#DEE2E6",
@@ -231,23 +230,23 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = (props) => {
       cycleIssues && cycleIssues.length > 0
         ? (groupedIssues[group].length / cycleIssues.length) * 100
         : 0,
-    color: stateGroupColours[group],
+    color: stateGroupColors[group],
   }));
 
   return (
-    <div className="h-full w-full">
+    <div>
       <div className="flex flex-col rounded-[10px] bg-white text-xs shadow">
-        <div className="flex h-full flex-col gap-4 rounded-b-[10px] px-5  py-5">
+        <div className="flex h-full flex-col gap-4 rounded-b-[10px] p-4">
           <div className="flex items-start justify-between gap-1">
-            <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}>
+            <Tooltip tooltipContent={cycle.name} position="top-left">
-              <a className="w-full">
+              <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}>
-                <Tooltip tooltipContent={cycle.name} position="top-left">
+                <a className="w-full">
-                  <h3 className="text-xl font-semibold leading-5 ">
+                  <h3 className="break-all text-lg font-semibold">
                     {truncateText(cycle.name, 75)}
                   </h3>
-                </Tooltip>
+                </a>
-              </a>
+              </Link>
-            </Link>
+            </Tooltip>
             {cycle.is_favorite ? (
               <button onClick={handleRemoveFromFavorites}>
                 <StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
@@ -273,8 +272,8 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = (props) => {
           </div>
         </div>
 
-        <div className="flex h-full  flex-col rounded-b-[10px]">
+        <div className="flex h-full flex-col rounded-b-[10px]">
-          <div className="flex items-center justify-between px-5 py-4">
+          <div className="flex items-center justify-between p-4">
             <div className="flex items-center gap-2.5">
               {cycle.owned_by.avatar && cycle.owned_by.avatar !== "" ? (
                 <Image
@@ -291,7 +290,7 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = (props) => {
               )}
               <span className="text-gray-900">{cycle.owned_by.first_name}</span>
             </div>
-            <div className="flex items-center ">
+            <div className="flex items-center">
               <button
                 onClick={handleEditCycle}
                 className="flex cursor-pointer items-center rounded p-1 duration-300 hover:bg-gray-100"
@@ -321,11 +320,11 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = (props) => {
           <Disclosure>
             {({ open }) => (
               <div
-                className={`flex  h-full  w-full flex-col border-t border-gray-200 bg-gray-100 ${
+                className={`flex h-full w-full flex-col border-t border-gray-200 bg-gray-100 ${
                   open ? "" : "flex-row"
                 }`}
               >
-                <div className="flex  w-full items-center gap-2 px-5 py-4 ">
+                <div className="flex w-full items-center gap-2 px-4 py-1">
                   <span> Progress </span>
                   <LinearProgressIndicator data={progressIndicatorData} />
                   <Disclosure.Button>
@@ -339,8 +338,8 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = (props) => {
                 </div>
                 <Transition show={open}>
                   <Disclosure.Panel>
-                    <div className="overflow-hidden rounded-b-md bg-white p-3 shadow">
+                    <div className="overflow-hidden rounded-b-md bg-white py-3 shadow">
-                      <div className="col-span-2 space-y-3  px-5">
+                      <div className="col-span-2 space-y-3 px-4">
                         <div className="space-y-3 text-xs">
                           {Object.keys(groupedIssues).map((group) => (
                             <div key={group} className="flex items-center justify-between gap-2">
@@ -348,7 +347,7 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = (props) => {
                                 <span
                                   className="block h-2 w-2 rounded-full"
                                   style={{
-                                    backgroundColor: stateGroupColours[group],
+                                    backgroundColor: stateGroupColors[group],
                                   }}
                                 />
                                 <h6 className="text-xs capitalize">{group}</h6>

apps/app/components/issues/my-issues-list-item.tsx

@@ -79,26 +79,28 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
 
   return (
     <div className="border-b border-gray-300 last:border-b-0">
-      <div key={issue.id} className="flex items-center justify-between gap-2 px-4 py-4">
+      <div key={issue.id} className="flex items-center justify-between gap-2 px-4 py-3">
         <Link href={`/${workspaceSlug}/projects/${issue?.project_detail?.id}/issues/${issue.id}`}>
           <a className="group relative flex items-center gap-2">
             {properties?.key && (
               <Tooltip
-                tooltipHeading="ID"
+                tooltipHeading="Issue ID"
                 tooltipContent={`${issue.project_detail?.identifier}-${issue.sequence_id}`}
               >
-                <span className="flex-shrink-0 text-sm text-gray-400">
+                <span className="flex-shrink-0 text-xs text-gray-400">
                   {issue.project_detail?.identifier}-{issue.sequence_id}
                 </span>
               </Tooltip>
             )}
             <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
-              <span className="text-base text-gray-800">{truncateText(issue.name, 50)}</span>
+              <span className="break-all text-sm text-gray-800">
+                {truncateText(issue.name, 50)}
+              </span>
             </Tooltip>
           </a>
         </Link>
 
-        <div className="flex flex-wrap items-center gap-3 text-xs">
+        <div className="flex flex-wrap items-center gap-2 text-xs">
           {properties.priority && (
             <ViewPrioritySelect
               issue={issue}

apps/app/components/modules/single-module-card.tsx

@@ -3,7 +3,8 @@ import React, { useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import Image from "next/image";
-import useSWR, { mutate } from "swr";
+
+import { mutate } from "swr";
 
 // toast
 import useToast from "hooks/use-toast";
@@ -23,36 +24,23 @@ import {
   UserGroupIcon,
 } from "@heroicons/react/24/outline";
 // helpers
-import {
+import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
-  renderShortDateWithYearFormat,
-  renderShortNumericDateFormat,
-} from "helpers/date-time.helper";
 // services
-import stateService from "services/state.service";
 import modulesService from "services/modules.service";
 // types
 import { IModule } from "types";
 // fetch-key
-import { MODULE_LIST, STATE_LIST } from "constants/fetch-keys";
+import { MODULE_LIST } from "constants/fetch-keys";
-// helper
+// helpers
 import { copyTextToClipboard, truncateText } from "helpers/string.helper";
-import { getStatesList } from "helpers/state.helper";
+// constants
+import { MODULE_STATUS } from "constants/module";
 
 type Props = {
   module: IModule;
   handleEditModule: () => void;
 };
 
-const stateGroupColours: {
-  [key: string]: string;
-} = {
-  backlog: "#3f76ff",
-  unstarted: "#ff9e9e",
-  started: "#d687ff",
-  cancelled: "#ff5353",
-  completed: "#096e8d",
-};
-
 export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule }) => {
   const [moduleDeleteModal, setModuleDeleteModal] = useState(false);
 
@@ -65,17 +53,6 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule })
 
     setModuleDeleteModal(true);
   };
-  const { data: stateGroups } = useSWR(
-    workspaceSlug && module.project_detail.id ? STATE_LIST(module.project_detail.id) : null,
-    workspaceSlug && module.project_detail.id
-      ? () => stateService.getStates(workspaceSlug as string, module.project_detail.id)
-      : null
-  );
-
-  const states = getStatesList(stateGroups ?? {});
-  const selectedOption = states?.find(
-    (s) => s.name.replace(" ", "-").toLowerCase() === module.status?.replace(" ", "-").toLowerCase()
-  );
 
   const handleAddToFavorites = () => {
     if (!workspaceSlug && !projectId && !module) return;
@@ -166,23 +143,22 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule })
         data={module}
       />
       <div className="h-full w-full min-w-[360px]">
-        <div className="flex h-full w-full flex-row rounded-[10px] bg-white text-xs shadow">
+        <div
-          <span
+          className="flex h-full w-full flex-row rounded-[10px] border-l-[10px] bg-white text-xs shadow"
-            className={`h-full w-2.5 rounded-l-[10px] `}
+          style={{
-            style={{
+            borderColor: MODULE_STATUS.find((s) => s.value === module.status)?.color ?? "#6b7280",
-              backgroundColor: `${
+          }}
-                selectedOption ? stateGroupColours[selectedOption.group] : "#6b7280"
+        >
-              }`,
+          <div className="flex h-full w-full flex-col items-start justify-between gap-6 p-4">
-            }}
-          />
-          <div className="flex h-full w-full flex-col items-start justify-between gap-6 p-5">
             <div className="flex w-full flex-col gap-5">
               <Tooltip tooltipContent={module.name} position="top-left">
-                <span className="break-all text-xl font-semibold text-black">
+                <Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}>
-                  <Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}>
+                  <a className="w-full">
-                    <a className="w-full">{truncateText(module.name, 75)}</a>
+                    <h3 className="break-all text-lg font-semibold text-black">
-                  </Link>
+                      {truncateText(module.name, 75)}
-                </span>
+                    </h3>
+                  </a>
+                </Link>
               </Tooltip>
               <div className="flex items-center gap-4">
                 <div className="flex items-start gap-1 ">

apps/app/components/ui/custom-menu.tsx

@@ -54,7 +54,7 @@ const CustomMenu = ({
         ) : (
           <Menu.Button
             type="button"
-            className={`flex cursor-pointer items-center justify-between gap-1 px-2 py-1 text-xs duration-300 hover:bg-gray-100 ${
+            className={`flex cursor-pointer items-center justify-between gap-1 px-2.5 py-1 text-xs duration-300 hover:bg-gray-100 ${
               textAlignment === "right"
                 ? "text-right"
                 : textAlignment === "center"

apps/app/components/ui/custom-search-select.tsx

@@ -69,7 +69,7 @@ export const CustomSearchSelect = ({
                 <Combobox.Button
                   className={`flex w-full ${
                     disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-gray-100"
-                  } items-center justify-between gap-1 rounded-md border px-3 py-1.5 text-xs shadow-sm duration-300 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
+                  } items-center justify-between gap-1 rounded-md border px-2.5 py-1 text-xs shadow-sm duration-300 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
                     textAlignment === "right"
                       ? "text-right"
                       : textAlignment === "center"
@@ -178,7 +178,7 @@ export const CustomSearchSelect = ({
                 <Combobox.Button
                   className={`flex w-full ${
                     disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-gray-100"
-                  } items-center justify-between gap-1 rounded-md border px-3 py-1.5 text-xs shadow-sm duration-300 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
+                  } items-center justify-between gap-1 rounded-md border px-2.5 py-1 text-xs shadow-sm duration-300 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
                     textAlignment === "right"
                       ? "text-right"
                       : textAlignment === "center"

apps/app/components/ui/custom-select.tsx

@@ -53,7 +53,7 @@ const CustomSelect = ({
           className={`flex w-full ${
             disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-gray-100"
           } items-center justify-between gap-1 rounded-md border shadow-sm duration-300 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
-            input ? "border-gray-300 px-3 py-2 text-sm" : "px-3 py-1.5 text-xs"
+            input ? "border-gray-300 px-3 py-2 text-sm" : "px-2.5 py-1 text-xs"
           } ${
             textAlignment === "right"
               ? "text-right"

apps/app/components/ui/linear-progress-indicator.tsx

@@ -18,8 +18,8 @@ export const LinearProgressIndicator: React.FC<Props> = ({ data }) => {
     progress += item.value;
 
     return (
-      <Tooltip tooltipContent={`${item.name} ${Math.round(item.value)}%`}>
+      <Tooltip key={item.id} tooltipContent={`${item.name} ${Math.round(item.value)}%`}>
-        <div key={item.id} className="bar" style={style} />
+        <div className="bar" style={style} />
       </Tooltip>
     );
   });

apps/app/components/ui/tooltip.tsx

@@ -40,7 +40,7 @@ export const Tooltip: React.FC<Props> = ({
     disabled={disabled}
     content={
       <div
-        className={`${className} flex flex-col justify-center items-start gap-1 max-w-[600px] text-xs rounded-md p-2 shadow-md text-left ${
+        className={`${className} flex max-w-[600px] flex-col items-start justify-center gap-1 rounded-md p-2 text-left text-xs shadow-md ${
           theme === "light" ? "bg-white text-gray-700" : "bg-black text-white"
         }`}
       >
@@ -49,8 +49,8 @@ export const Tooltip: React.FC<Props> = ({
       </div>
     }
     position={position}
-    renderTarget={({ isOpen: isTooltipOpen, ref: eleRefernce, ...tooltipProps }) =>
+    renderTarget={({ isOpen: isTooltipOpen, ref: eleReference, ...tooltipProps }) =>
-      React.cloneElement(children, { ref: eleRefernce, ...tooltipProps, ...children.props })
+      React.cloneElement(children, { ref: eleReference, ...tooltipProps, ...children.props })
     }
   />
 );

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

@@ -74,7 +74,7 @@ export const WorkspaceSidebarDropdown = () => {
 
   return (
     <div className="relative">
-      <Menu as="div" className="col-span-4 inline-block w-full p-5 text-left">
+      <Menu as="div" className="col-span-4 inline-block w-full px-5 py-3 text-left">
         <div className="flex w-full items-center justify-between gap-2.5">
           <Menu.Button
             className={`inline-flex w-full items-center rounded-md px-1 py-2 text-sm font-semibold text-gray-700 focus:outline-none `}
@@ -162,9 +162,7 @@ export const WorkspaceSidebarDropdown = () => {
                                 )}
                               </span>
 
-                              <h5 className="text-sm">
+                              <h5 className="text-sm">{truncateText(workspace.name, 18)}</h5>
-                                {truncateText(workspace.name, 18)}
-                              </h5>
                             </div>
                             <span className="p-1">
                               <CheckIcon

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

@@ -45,7 +45,7 @@ export const WorkspaceSidebarMenu: React.FC = () => {
               link.href === router.asPath
                 ? "bg-indigo-50 text-gray-900"
                 : "text-gray-500 hover:bg-indigo-50 hover:text-gray-900 focus:bg-indigo-50"
-            } group flex w-full items-center gap-3 rounded-md p-2 text-base font-medium outline-none ${
+            } group flex w-full items-center gap-3 rounded-md p-2 text-sm font-medium outline-none ${
               sidebarCollapse ? "justify-center" : ""
             }`}
           >

apps/app/layouts/app-layout/index.tsx

@@ -136,7 +136,7 @@ const AppLayout: FC<AppLayoutProps> = ({
             ) : isMember ? (
               <div
                 className={`flex w-full flex-grow flex-col ${
-                  noPadding ? "" : settingsLayout ? "p-9 lg:px-32 lg:pt-9" : "p-9"
+                  noPadding ? "" : settingsLayout ? "p-8 lg:px-28" : "p-8"
                 } ${
                   bg === "primary"
                     ? "bg-primary"

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

@@ -82,7 +82,6 @@ const ProjectModules: NextPage = () => {
     >
       <CreateUpdateModuleModal
         isOpen={createUpdateModule}
-        // handleClose={() => setCreateUpdateModule(false)}
         setIsOpen={setCreateUpdateModule}
         data={selectedModule}
       />
@@ -90,7 +89,7 @@ const ProjectModules: NextPage = () => {
         modules.length > 0 ? (
           <div className="space-y-5">
             <div className="flex flex-col gap-5">
-              <h3 className="text-3xl font-semibold text-black">Module</h3>
+              <h3 className="text-3xl font-semibold text-black">Modules</h3>
 
               <div className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
                 {modules.map((module) => (