From d26d01ace4858fd5d17f07845d61c75babed20f5 Mon Sep 17 00:00:00 2001
From: Kunal Vishwakarma <116634168+kunalv17@users.noreply.github.com>
Date: Mon, 17 Apr 2023 17:42:02 +0530
Subject: [PATCH] chore: filters spacing (#856)

---
 apps/app/components/core/issues-view.tsx      | 59 ++++++++++---------
 .../components/issues/my-issues-list-item.tsx |  4 +-
 .../pages/[workspaceSlug]/me/my-issues.tsx    |  5 +-
 3 files changed, 35 insertions(+), 33 deletions(-)

diff --git a/apps/app/components/core/issues-view.tsx b/apps/app/components/core/issues-view.tsx
index 520b5be17..a964181cd 100644
--- a/apps/app/components/core/issues-view.tsx
+++ b/apps/app/components/core/issues-view.tsx
@@ -359,6 +359,9 @@ export const IssuesView: React.FC<Props> = ({
     (key) => filters[key as keyof IIssueFilterOptions] === null
   );
 
+  const areFiltersApplied =
+    Object.keys(filters).length > 0 && nullFilters.length !== Object.keys(filters).length;
+
   return (
     <>
       <CreateUpdateViewModal
@@ -389,41 +392,39 @@ export const IssuesView: React.FC<Props> = ({
         isOpen={transferIssuesModal}
       />
       {issueView !== "calendar" && (
-        <div>
+        <>
           <div
             className={`flex items-center justify-between gap-2 ${
-              issueView === "list" ? "px-8 mt-6" : "-mt-2"
+              issueView === "list" && areFiltersApplied ? "px-8 mt-6" : "-mt-2"
             }`}
           >
             <FilterList filters={filters} setFilters={setFilters} />
-            {Object.keys(filters).length > 0 &&
-              nullFilters.length !== Object.keys(filters).length && (
-                <PrimaryButton
-                  onClick={() => {
-                    if (viewId) {
-                      setFilters({}, true);
-                      setToastAlert({
-                        title: "View updated",
-                        message: "Your view has been updated",
-                        type: "success",
-                      });
-                    } else
-                      setCreateViewModal({
-                        query: filters,
-                      });
-                  }}
-                  className="flex items-center gap-2 text-sm"
-                >
-                  {!viewId && <PlusIcon className="h-4 w-4" />}
-                  {viewId ? "Update" : "Save"} view
-                </PrimaryButton>
-              )}
-          </div>
-          {Object.keys(filters).length > 0 &&
-            nullFilters.length !== Object.keys(filters).length && (
-              <div className={` ${issueView === "list" ? "mt-4" : "my-4"} border-t`} />
+            {areFiltersApplied && (
+              <PrimaryButton
+                onClick={() => {
+                  if (viewId) {
+                    setFilters({}, true);
+                    setToastAlert({
+                      title: "View updated",
+                      message: "Your view has been updated",
+                      type: "success",
+                    });
+                  } else
+                    setCreateViewModal({
+                      query: filters,
+                    });
+                }}
+                className="flex items-center gap-2 text-sm"
+              >
+                {!viewId && <PlusIcon className="h-4 w-4" />}
+                {viewId ? "Update" : "Save"} view
+              </PrimaryButton>
             )}
-        </div>
+          </div>
+          {areFiltersApplied && (
+            <div className={` ${issueView === "list" ? "mt-4" : "my-4"} border-t`} />
+          )}
+        </>
       )}
       <DragDropContext onDragEnd={handleOnDragEnd}>
         <StrictModeDroppable droppableId="trashBox">
diff --git a/apps/app/components/issues/my-issues-list-item.tsx b/apps/app/components/issues/my-issues-list-item.tsx
index 9e3e85c22..bf8f1d39c 100644
--- a/apps/app/components/issues/my-issues-list-item.tsx
+++ b/apps/app/components/issues/my-issues-list-item.tsx
@@ -82,8 +82,8 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
   const isNotAllowed = false;
 
   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-3">
+    <div className="border-b border-gray-300 last:border-b-0 mx-6">
+      <div key={issue.id} className="flex items-center justify-between gap-2 py-3">
         <Link href={`/${workspaceSlug}/projects/${issue?.project_detail?.id}/issues/${issue.id}`}>
           <a className="group relative flex items-center gap-2">
             {properties?.key && (
diff --git a/apps/app/pages/[workspaceSlug]/me/my-issues.tsx b/apps/app/pages/[workspaceSlug]/me/my-issues.tsx
index ce75ca9dd..9e2e9732e 100644
--- a/apps/app/pages/[workspaceSlug]/me/my-issues.tsx
+++ b/apps/app/pages/[workspaceSlug]/me/my-issues.tsx
@@ -43,6 +43,7 @@ const MyIssuesPage: NextPage = () => {
           <BreadcrumbItem title="My Issues" />
         </Breadcrumbs>
       }
+      noPadding
       right={
         <div className="flex items-center gap-2">
           {myIssues && myIssues.length > 0 && (
@@ -119,10 +120,10 @@ const MyIssuesPage: NextPage = () => {
               <div className="flex flex-col space-y-5">
                 <Disclosure as="div" defaultOpen>
                   {({ open }) => (
-                    <div className="rounded-[10px] border border-gray-300 bg-white">
+                    <div className="bg-white">
                       <div
                         className={`flex items-center justify-start bg-gray-100 px-5 py-3 ${
-                          open ? "rounded-t-[10px]" : "rounded-[10px]"
+                          open ? "" : "rounded-[10px]"
                         }`}
                       >
                         <Disclosure.Button>