fix: ui and bug fix (#1043)

* style: calendar border added

* fix: calendar issue ellipsis position fix

* fix: help section overflow fix

* fix: module card date overflow fix

* style: page detail padding and position fix

* fix: cycle and module sidebar fix

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

@@ -120,11 +120,11 @@ export const SingleCalendarIssue: React.FC<Props> = ({
       ref={provided.innerRef}
       {...provided.draggableProps}
       {...provided.dragHandleProps}
-      className={`w-full cursor-pointer rounded border border-brand-base px-1.5 py-1.5 text-xs duration-300 hover:cursor-move hover:bg-brand-surface-2 ${
+      className={`w-full relative cursor-pointer rounded border border-brand-base px-1.5 py-1.5 text-xs duration-300 hover:cursor-move hover:bg-brand-surface-2 ${
         snapshot.isDragging ? "bg-brand-surface-2 shadow-lg" : ""
       }`}
     >
-      <div className="group/card relative flex w-full flex-col items-start justify-center gap-1.5 text-xs sm:w-auto ">
+      <div className="group/card flex w-full flex-col items-start justify-center gap-1.5 text-xs sm:w-auto ">
         {!isNotAllowed && (
           <div className="z-1 absolute top-1.5 right-1.5 opacity-0 group-hover/card:opacity-100">
             <CustomMenu width="auto" ellipsis>

apps/app/components/cycles/sidebar.tsx

@@ -133,9 +133,9 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
     <>
       <DeleteCycleModal isOpen={cycleDeleteModal} setIsOpen={setCycleDeleteModal} data={cycle} />
       <div
-        className={`fixed top-0 ${
+        className={`fixed top-[66px] ${
           isOpen ? "right-0" : "-right-[24rem]"
-        } z-20 h-full w-[24rem] overflow-y-auto border-l border-brand-base bg-brand-sidebar py-5 duration-300`}
+        } h-full w-[24rem] overflow-y-auto border-l border-brand-base bg-brand-sidebar py-5 duration-300`}
       >
         {cycle ? (
           <>

apps/app/components/modules/sidebar.tsx

@@ -183,9 +183,9 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
         data={module}
       />
       <div
-        className={`fixed top-0 ${
+        className={`fixed top-[66px] ${
           isOpen ? "right-0" : "-right-[24rem]"
-        } z-20 h-full w-[24rem] overflow-y-auto border-l border-brand-base bg-brand-sidebar py-5 duration-300`}
+        } h-full w-[24rem] overflow-y-auto border-l border-brand-base bg-brand-sidebar py-5 duration-300`}
       >
         {module ? (
           <>

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

@@ -179,7 +179,7 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule })
                 </CustomMenu>
               </div>
             </div>
-            <div className="grid grid-cols-2 gap-4 text-brand-secondary">
+            <div className="grid grid-cols-2 gap-2 text-brand-secondary">
               <div className="flex items-start gap-1">
                 <CalendarDaysIcon className="h-4 w-4" />
                 <span>Start:</span>

apps/app/components/pages/single-page-block.tsx

@@ -293,11 +293,11 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
             >
               <button
                 type="button"
-                className="absolute top-4 -left-0 hidden rounded p-0.5 hover:bg-brand-surface-2 group-hover:!flex"
+                className="absolute top-4 -left-0 hidden rounded p-0.5 group-hover:!flex"
                 {...provided.dragHandleProps}
               >
                 <EllipsisVerticalIcon className="h-[18px]" />
-                <EllipsisVerticalIcon className="-ml-3 h-[18px]" />
+                <EllipsisVerticalIcon className="-ml-2.5 h-[18px]" />
               </button>
               <div
                 ref={actionSectionRef}

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

@@ -26,7 +26,7 @@ const Sidebar: React.FC<SidebarProps> = ({
 
   return (
     <div
-      className={`z-20 h-full flex-shrink-0 border-r border-brand-base ${
+      className={`z-30 h-full flex-shrink-0 border-r border-brand-base ${
         sidebarCollapse ? "" : "w-auto md:w-[17rem]"
       } fixed inset-y-0 top-0 ${
         toggleSidebar ? "left-0" : "-left-full md:left-0"

apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx

@@ -147,9 +147,7 @@ const SingleCycle: React.FC = () => {
           </CustomMenu>
         }
         right={
-          <div
+          <div className={`flex items-center gap-2 duration-300`}>
-            className={`flex items-center gap-2 ${cycleSidebar ? "mr-[24rem]" : ""} duration-300`}
-          >
             <IssuesFilterView />
             <SecondaryButton
               onClick={() => setAnalyticsModal(true)}

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

@@ -150,9 +150,7 @@ const SingleModule: React.FC = () => {
           </CustomMenu>
         }
         right={
-          <div
+          <div className={`flex items-center gap-2 duration-300`}>
-            className={`flex items-center gap-2 ${moduleSidebar ? "mr-[24rem]" : ""} duration-300`}
-          >
             <IssuesFilterView />
             <SecondaryButton
               onClick={() => setAnalyticsModal(true)}

apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx

@@ -303,7 +303,7 @@ const SinglePage: NextPage = () => {
       {pageDetails ? (
         <div className="flex h-full flex-col justify-between space-y-4 overflow-hidden p-4">
           <div className="h-full w-full overflow-y-auto">
-            <div className="flex items-center justify-between gap-2">
+            <div className="flex items-start justify-between gap-2">
               <div className="flex w-full flex-col gap-2">
                 <div className="flex w-full items-center gap-2">
                   <button
@@ -324,6 +324,7 @@ const SinglePage: NextPage = () => {
                     required={true}
                     className="min-h-10 block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-2 text-xl font-semibold outline-none ring-0 placeholder:text-[#858E96]"
                     role="textbox"
+                    noPadding
                   />
                 </div>
 
@@ -502,7 +503,7 @@ const SinglePage: NextPage = () => {
               </div>
             </div>
 
-            <div className="mt-4 h-full w-full">
+            <div className="mt-5 h-full w-full">
               {pageBlocks ? (
                 <>
                   <DragDropContext onDragEnd={handleOnDragEnd}>

apps/app/styles/react-datepicker.css

@@ -23,8 +23,8 @@
 
 .react-datepicker {
   font-family: "Inter" !important;
-  border: none !important;
   background-color: rgba(var(--color-bg-base)) !important;
+  border: 1px solid rgba(var(--color-border)) !important;
 }
 
 .react-datepicker__month-container {
@@ -116,3 +116,7 @@
   background-color: #216ba5 !important;
   color: white !important;
 }
+
+.react-datepicker__day--in-range {
+  color: white !important;
+}