[WEB-2329] chore: updated UI for module and cycle detail overview (#5435)

* chore: updated UI for module and cycle detail overview

* chore: z-index issue in sheet
This commit is contained in:
guru_sainath
2024-08-27 17:45:17 +05:30
committed by GitHub
parent 88013e3b06
commit 09209694a4
6 changed files with 6 additions and 10 deletions
@@ -71,7 +71,7 @@ const CycleDetailPage = observer(() => {
{cycleId && !isSidebarCollapsed && (
<div
className={cn(
"flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 duration-300 vertical-scrollbar scrollbar-sm fixed right-0 top-0 z-10"
"flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 duration-300 vertical-scrollbar scrollbar-sm absolute right-0 top-0 z-[13]"
)}
style={{
boxShadow:
@@ -69,7 +69,7 @@ const ModuleIssuesPage = observer(() => {
{moduleId && !isSidebarCollapsed && (
<div
className={cn(
"flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 duration-300 vertical-scrollbar scrollbar-sm fixed right-0 top-0 z-10"
"flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 duration-300 vertical-scrollbar scrollbar-sm absolute right-0 top-0 z-[13]"
)}
style={{
boxShadow:
@@ -33,7 +33,6 @@ type Props = {
cycleId: string;
handleClose: () => void;
isArchived?: boolean;
isPeekMode?: boolean;
};
const defaultValues: Partial<ICycle> = {
@@ -46,7 +45,7 @@ const cycleService = new CycleService();
// TODO: refactor the whole component
export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
const { cycleId, handleClose, isArchived, isPeekMode = false } = props;
const { cycleId, handleClose, isArchived } = props;
// states
const [archiveCycleModal, setArchiveCycleModal] = useState(false);
const [cycleDeleteModal, setCycleDeleteModal] = useState(false);
@@ -262,7 +261,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
<>
<div
className={`sticky z-10 top-0 flex items-center justify-between bg-custom-sidebar-background-100 pb-5 ${isPeekMode ? "pt-5" : "pt-20"}`}
className={`sticky z-10 top-0 flex items-center justify-between bg-custom-sidebar-background-100 pb-5 pt-5`}
>
<div>
<button
@@ -51,7 +51,6 @@ export const CyclePeekOverview: React.FC<Props> = observer(({ projectId, workspa
cycleId={peekCycle?.toString() ?? ""}
handleClose={handleClose}
isArchived={isArchived}
isPeekMode
/>
</div>
)}
@@ -63,12 +63,11 @@ type Props = {
moduleId: string;
handleClose: () => void;
isArchived?: boolean;
isPeekMode?: boolean;
};
// TODO: refactor this component
export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
const { moduleId, handleClose, isArchived, isPeekMode = false } = props;
const { moduleId, handleClose, isArchived } = props;
// states
const [moduleDeleteModal, setModuleDeleteModal] = useState(false);
const [archiveModuleModal, setArchiveModuleModal] = useState(false);
@@ -311,7 +310,7 @@ export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
<DeleteModuleModal isOpen={moduleDeleteModal} onClose={() => setModuleDeleteModal(false)} data={moduleDetails} />
<>
<div
className={`sticky z-10 top-0 flex items-center justify-between bg-custom-sidebar-background-100 pb-5 ${isPeekMode ? "pt-5" : "pt-20"}`}
className={`sticky z-10 top-0 flex items-center justify-between bg-custom-sidebar-background-100 pb-5 pt-5`}
>
<div>
<button
@@ -51,7 +51,6 @@ export const ModulePeekOverview: React.FC<Props> = observer(({ projectId, worksp
moduleId={peekModule?.toString() ?? ""}
handleClose={handleClose}
isArchived={isArchived}
isPeekMode
/>
</div>
)}