style: revamp of the issue details sidebar

apps/app/components/issues/sidebar-select/assignee.tsx

@@ -48,10 +48,10 @@ export const SidebarAssigneeSelect: React.FC<Props> = ({ value, onChange, disabl
           {value && value.length > 0 && Array.isArray(value) ? (
             <div className="-my-0.5 flex items-center gap-2">
               <AssigneesList userIds={value} length={3} showLength={false} />
-              <span className="text-custom-text-100 text-sm">{value.length} Assignees</span>
+              <span className="text-custom-text-100 text-xs">{value.length} Assignees</span>
             </div>
           ) : (
-            <button type="button" className="bg-custom-background-80 px-2.5 py-0.5 text-sm rounded">
+            <button type="button" className="bg-custom-background-80 px-2.5 py-0.5 text-xs rounded">
               No assignees
             </button>
           )}

apps/app/components/issues/sidebar-select/blocked.tsx

@@ -18,15 +18,13 @@ type Props = {
   issueId?: string;
   submitChanges: (formData: Partial<IIssue>) => void;
   watch: UseFormWatch<IIssue>;
-  userAuth: UserAuth;
   disabled?: boolean;
 };
 
 export const SidebarBlockedSelect: React.FC<Props> = ({
   issueId,
   submitChanges,
   watch,
-  userAuth,
   disabled = false,
 }) => {
   const [isBlockedModalOpen, setIsBlockedModalOpen] = useState(false);
@@ -73,8 +71,6 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
     handleClose();
   };
 
-  const isNotAllowed = userAuth.isGuest || userAuth.isViewer || disabled;
-
   return (
     <>
       <ExistingIssuesListModal
@@ -128,11 +124,11 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
           </div>
           <button
             type="button"
-            className={`flex w-full text-custom-text-200 ${
-              isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-80"
-            } items-center justify-between gap-1 rounded-md border border-custom-border-200 px-2 py-1 text-xs shadow-sm duration-300 focus:outline-none`}
+            className={`bg-custom-background-80 text-xs rounded px-2.5 py-0.5 ${
+              disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-80"
+            }`}
             onClick={() => setIsBlockedModalOpen(true)}
-            disabled={isNotAllowed}
+            disabled={disabled}
           >
             Select issues
           </button>

apps/app/components/issues/sidebar-select/blocker.tsx

@@ -18,15 +18,13 @@ type Props = {
   issueId?: string;
   submitChanges: (formData: Partial<IIssue>) => void;
   watch: UseFormWatch<IIssue>;
-  userAuth: UserAuth;
   disabled?: boolean;
 };
 
 export const SidebarBlockerSelect: React.FC<Props> = ({
   issueId,
   submitChanges,
   watch,
-  userAuth,
   disabled = false,
 }) => {
   const [isBlockerModalOpen, setIsBlockerModalOpen] = useState(false);
@@ -73,8 +71,6 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
     handleClose();
   };
 
-  const isNotAllowed = userAuth.isGuest || userAuth.isViewer || disabled;
-
   return (
     <>
       <ExistingIssuesListModal
@@ -130,11 +126,11 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
           </div>
           <button
             type="button"
-            className={`flex w-full text-custom-text-200 ${
-              isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-80"
-            } items-center justify-between gap-1 rounded-md border border-custom-border-200 px-2 py-1 text-xs shadow-sm duration-300 focus:outline-none`}
+            className={`bg-custom-background-80 text-xs rounded px-2.5 py-0.5 ${
+              disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-80"
+            }`}
             onClick={() => setIsBlockerModalOpen(true)}
-            disabled={isNotAllowed}
+            disabled={disabled}
           >
             Select issues
           </button>

apps/app/components/issues/sidebar-select/cycle.tsx

@@ -11,24 +11,20 @@ import cyclesService from "services/cycles.service";
 import { Spinner, CustomSelect, Tooltip } from "components/ui";
 // helper
 import { truncateText } from "helpers/string.helper";
-// icons
-import { ContrastIcon } from "components/icons";
 // types
-import { ICycle, IIssue, UserAuth } from "types";
+import { ICycle, IIssue } from "types";
 // fetch-keys
 import { CYCLE_ISSUES, INCOMPLETE_CYCLES_LIST, ISSUE_DETAILS } from "constants/fetch-keys";
 
 type Props = {
   issueDetail: IIssue | undefined;
   handleCycleChange: (cycle: ICycle) => void;
-  userAuth: UserAuth;
   disabled?: boolean;
 };
 
 export const SidebarCycleSelect: React.FC<Props> = ({
   issueDetail,
   handleCycleChange,
-  userAuth,
   disabled = false,
 }) => {
   const router = useRouter();
@@ -63,59 +59,56 @@ export const SidebarCycleSelect: React.FC<Props> = ({
 
   const issueCycle = issueDetail?.issue_cycle;
 
-  const isNotAllowed = userAuth.isGuest || userAuth.isViewer || disabled;
-
   return (
-    <div className="flex flex-wrap items-center py-2">
-      <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
-        <ContrastIcon className="h-4 w-4 flex-shrink-0" />
-        <p>Cycle</p>
-      </div>
-      <div className="space-y-1 sm:basis-1/2">
-        <CustomSelect
-          label={
-            <Tooltip
-              position="left"
-              tooltipContent={`${issueCycle ? issueCycle.cycle_detail.name : "No cycle"}`}
-            >
-              <span className="w-full max-w-[125px] truncate text-left sm:block">
-                <span className={`${issueCycle ? "text-custom-text-100" : "text-custom-text-200"}`}>
-                  {issueCycle ? truncateText(issueCycle.cycle_detail.name, 15) : "No cycle"}
-                </span>
-              </span>
-            </Tooltip>
-          }
-          value={issueCycle ? issueCycle.cycle_detail.id : null}
-          onChange={(value: any) => {
-            !value
-              ? removeIssueFromCycle(issueCycle?.id ?? "", issueCycle?.cycle ?? "")
-              : handleCycleChange(incompleteCycles?.find((c) => c.id === value) as ICycle);
-          }}
-          width="w-full"
-          position="right"
-          maxHeight="rg"
-          disabled={isNotAllowed}
+    <CustomSelect
+      customButton={
+        <Tooltip
+          position="left"
+          tooltipContent={`${issueCycle ? issueCycle.cycle_detail.name : "No cycle"}`}
         >
-          {incompleteCycles ? (
-            incompleteCycles.length > 0 ? (
-              <>
-                {incompleteCycles.map((option) => (
-                  <CustomSelect.Option key={option.id} value={option.id}>
-                    <Tooltip position="left-bottom" tooltipContent={option.name}>
-                      <span className="w-full truncate">{truncateText(option.name, 25)}</span>
-                    </Tooltip>
-                  </CustomSelect.Option>
-                ))}
-                <CustomSelect.Option value={null}>None</CustomSelect.Option>
-              </>
-            ) : (
-              <div className="text-center">No cycles found</div>
-            )
-          ) : (
-            <Spinner />
-          )}
-        </CustomSelect>
-      </div>
-    </div>
+          <button
+            type="button"
+            className={`bg-custom-background-80 text-xs rounded px-2.5 py-0.5 w-full flex ${
+              disabled ? "cursor-not-allowed" : ""
+            }`}
+          >
+            <span
+              className={`truncate ${issueCycle ? "text-custom-text-100" : "text-custom-text-200"}`}
+            >
+              {issueCycle ? issueCycle.cycle_detail.name : "No cycle"}
+            </span>
+          </button>
+        </Tooltip>
+      }
+      value={issueCycle ? issueCycle.cycle_detail.id : null}
+      onChange={(value: any) => {
+        !value
+          ? removeIssueFromCycle(issueCycle?.id ?? "", issueCycle?.cycle ?? "")
+          : handleCycleChange(incompleteCycles?.find((c) => c.id === value) as ICycle);
+      }}
+      width="w-full"
+      position="right"
+      maxHeight="rg"
+      disabled={disabled}
+    >
+      {incompleteCycles ? (
+        incompleteCycles.length > 0 ? (
+          <>
+            {incompleteCycles.map((option) => (
+              <CustomSelect.Option key={option.id} value={option.id}>
+                <Tooltip position="left-bottom" tooltipContent={option.name}>
+                  <span className="w-full truncate">{truncateText(option.name, 25)}</span>
+                </Tooltip>
+              </CustomSelect.Option>
+            ))}
+            <CustomSelect.Option value={null}>None</CustomSelect.Option>
+          </>
+        ) : (
+          <div className="text-center">No cycles found</div>
+        )
+      ) : (
+        <Spinner />
+      )}
+    </CustomSelect>
   );
 };

apps/app/components/issues/sidebar-select/estimate.tsx

@@ -14,9 +14,7 @@ type Props = {
 };
 
 export const SidebarEstimateSelect: React.FC<Props> = ({ value, onChange, disabled = false }) => {
-  const { isEstimateActive, estimatePoints } = useEstimateOption();
-
-  if (!isEstimateActive) return null;
+  const { estimatePoints } = useEstimateOption();
 
   return (
     <CustomSelect

apps/app/components/issues/sidebar-select/module.tsx

@@ -10,24 +10,20 @@ import modulesService from "services/modules.service";
 import { Spinner, CustomSelect, Tooltip } from "components/ui";
 // helper
 import { truncateText } from "helpers/string.helper";
-// icons
-import { RectangleGroupIcon } from "@heroicons/react/24/outline";
 // types
-import { IIssue, IModule, UserAuth } from "types";
+import { IIssue, IModule } from "types";
 // fetch-keys
 import { ISSUE_DETAILS, MODULE_ISSUES, MODULE_LIST } from "constants/fetch-keys";
 
 type Props = {
   issueDetail: IIssue | undefined;
   handleModuleChange: (module: IModule) => void;
-  userAuth: UserAuth;
   disabled?: boolean;
 };
 
 export const SidebarModuleSelect: React.FC<Props> = ({
   issueDetail,
   handleModuleChange,
-  userAuth,
   disabled = false,
 }) => {
   const router = useRouter();
@@ -57,66 +53,60 @@ export const SidebarModuleSelect: React.FC<Props> = ({
 
   const issueModule = issueDetail?.issue_module;
 
-  const isNotAllowed = userAuth.isGuest || userAuth.isViewer || disabled;
-
   return (
-    <div className="flex flex-wrap items-center py-2">
-      <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
-        <RectangleGroupIcon className="h-4 w-4 flex-shrink-0" />
-        <p>Module</p>
-      </div>
-      <div className="space-y-1 sm:basis-1/2">
-        <CustomSelect
-          label={
-            <Tooltip
-              position="left"
-              tooltipContent={`${
-                modules?.find((m) => m.id === issueModule?.module)?.name ?? "No module"
+    <CustomSelect
+      customButton={
+        <Tooltip
+          position="left"
+          tooltipContent={`${
+            modules?.find((m) => m.id === issueModule?.module)?.name ?? "No module"
+          }`}
+        >
+          <button
+            type="button"
+            className={`bg-custom-background-80 text-xs rounded px-2.5 py-0.5 w-full flex ${
+              disabled ? "cursor-not-allowed" : ""
+            }`}
+          >
+            <span
+              className={`truncate ${
+                issueModule ? "text-custom-text-100" : "text-custom-text-200"
               }`}
             >
-              <span className="w-full max-w-[125px] truncate text-left sm:block">
-                <span
-                  className={`${issueModule ? "text-custom-text-100" : "text-custom-text-200"}`}
-                >
-                  {truncateText(
-                    `${modules?.find((m) => m.id === issueModule?.module)?.name ?? "No module"}`,
-                    15
-                  )}
-                </span>
-              </span>
-            </Tooltip>
-          }
-          value={issueModule ? issueModule.module_detail?.id : null}
-          onChange={(value: any) => {
-            !value
-              ? removeIssueFromModule(issueModule?.id ?? "", issueModule?.module ?? "")
-              : handleModuleChange(modules?.find((m) => m.id === value) as IModule);
-          }}
-          width="w-full"
-          position="right"
-          maxHeight="rg"
-          disabled={isNotAllowed}
-        >
-          {modules ? (
-            modules.length > 0 ? (
-              <>
-                {modules.map((option) => (
-                  <CustomSelect.Option key={option.id} value={option.id}>
-                    <Tooltip position="left-bottom" tooltipContent={option.name}>
-                      <span className="w-full truncate">{truncateText(option.name, 25)}</span>
-                    </Tooltip>
-                  </CustomSelect.Option>
-                ))}
-                <CustomSelect.Option value={null}>None</CustomSelect.Option>
-              </>
-            ) : (
-              <div className="text-center">No modules found</div>
-            )
-          ) : (
-            <Spinner />
-          )}
-        </CustomSelect>
-      </div>
-    </div>
+              {modules?.find((m) => m.id === issueModule?.module)?.name ?? "No module"}
+            </span>
+          </button>
+        </Tooltip>
+      }
+      value={issueModule ? issueModule.module_detail?.id : null}
+      onChange={(value: any) => {
+        !value
+          ? removeIssueFromModule(issueModule?.id ?? "", issueModule?.module ?? "")
+          : handleModuleChange(modules?.find((m) => m.id === value) as IModule);
+      }}
+      width="w-full"
+      position="right"
+      maxHeight="rg"
+      disabled={disabled}
+    >
+      {modules ? (
+        modules.length > 0 ? (
+          <>
+            {modules.map((option) => (
+              <CustomSelect.Option key={option.id} value={option.id}>
+                <Tooltip position="left-bottom" tooltipContent={option.name}>
+                  <span className="w-full truncate">{truncateText(option.name, 25)}</span>
+                </Tooltip>
+              </CustomSelect.Option>
+            ))}
+            <CustomSelect.Option value={null}>None</CustomSelect.Option>
+          </>
+        ) : (
+          <div className="text-center">No modules found</div>
+        )
+      ) : (
+        <Spinner />
+      )}
+    </CustomSelect>
   );
 };