From 43f669e1f7f20feff136462a17dae89e49909f8a Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Mon, 22 Aug 2022 12:36:05 +0200
Subject: [PATCH] fix(ui): fix item lists paddings

---
 .../Dashboard/components/Alerts/AlertListItem.tsx           | 2 +-
 .../components/Dashboard/components/Alerts/AlertsList.tsx   | 4 ++--
 .../components/Dashboard/components/Alerts/AlertsView.tsx   | 6 +++---
 .../Dashboard/components/DashboardList/DashboardList.tsx    | 4 ++--
 .../components/DashboardList/DashboardListItem.tsx          | 2 +-
 .../Dashboard/components/DashboardList/DashboardsView.tsx   | 6 +++---
 .../Dashboard/components/MetricListItem/MetricListItem.tsx  | 2 +-
 .../Dashboard/components/MetricsList/MetricsList.tsx        | 4 ++--
 .../Dashboard/components/MetricsView/MetricsView.tsx        | 6 +++---
 frontend/app/components/shared/SessionItem/SessionItem.tsx  | 4 ++--
 .../shared/SessionListContainer/SessionListContainer.tsx    | 4 +---
 .../components/SessionList/SessionList.tsx                  | 2 +-
 12 files changed, 22 insertions(+), 24 deletions(-)

diff --git a/frontend/app/components/Dashboard/components/Alerts/AlertListItem.tsx b/frontend/app/components/Dashboard/components/Alerts/AlertListItem.tsx
index 521625ef1..3c9254a7d 100644
--- a/frontend/app/components/Dashboard/components/Alerts/AlertListItem.tsx
+++ b/frontend/app/components/Dashboard/components/Alerts/AlertListItem.tsx
@@ -66,7 +66,7 @@ function AlertListItem(props: Props) {
 
   return (
     <div
-      className={cn('px-3', !demo ? 'hover:bg-active-blue cursor-pointer border-t' : '')}
+      className={cn('px-6', !demo ? 'hover:bg-active-blue cursor-pointer border-t' : '')}
       onClick={onItemClick}
     >
       <div className="grid grid-cols-12 py-4 select-none">
diff --git a/frontend/app/components/Dashboard/components/Alerts/AlertsList.tsx b/frontend/app/components/Dashboard/components/Alerts/AlertsList.tsx
index 2e544399e..e20eb8cd1 100644
--- a/frontend/app/components/Dashboard/components/Alerts/AlertsList.tsx
+++ b/frontend/app/components/Dashboard/components/Alerts/AlertsList.tsx
@@ -43,7 +43,7 @@ function AlertsList({ fetchList, list: alertsList, alertsSearch, siteId, init, f
       }
     >
       <div className="mt-3 border-b">
-        <div className="grid grid-cols-12 py-2 font-medium px-3">
+        <div className="grid grid-cols-12 py-2 font-medium px-6">
           <div className="col-span-5">Title</div>
           <div className="col-span-2">Type</div>
           <div className="col-span-5 text-right">Modified</div>
@@ -56,7 +56,7 @@ function AlertsList({ fetchList, list: alertsList, alertsSearch, siteId, init, f
         ))}
       </div>
 
-      <div className="w-full flex items-center justify-between pt-4">
+      <div className="w-full flex items-center justify-between pt-4 px-6">
         <div className="text-disabled-text">
           Showing <span className="font-semibold">{Math.min(list.length, pageSize)}</span> out of{' '}
           <span className="font-semibold">{list.length}</span> Alerts
diff --git a/frontend/app/components/Dashboard/components/Alerts/AlertsView.tsx b/frontend/app/components/Dashboard/components/Alerts/AlertsView.tsx
index 65c3f2ef8..ed5fa1769 100644
--- a/frontend/app/components/Dashboard/components/Alerts/AlertsView.tsx
+++ b/frontend/app/components/Dashboard/components/Alerts/AlertsView.tsx
@@ -15,8 +15,8 @@ interface IAlertsView {
 
 function AlertsView({ siteId, init }: IAlertsView) {
     return (
-        <div style={{ maxWidth: '1300px', margin: 'auto'}} className="bg-white rounded py-4 px-6 border">
-            <div className="flex items-center mb-4 justify-between">
+        <div style={{ maxWidth: '1300px', margin: 'auto'}} className="bg-white rounded py-4 border">
+            <div className="flex items-center mb-4 justify-between px-6">
                 <div className="flex items-baseline mr-3">
                     <PageTitle title="Alerts" />
                 </div>
@@ -25,7 +25,7 @@ function AlertsView({ siteId, init }: IAlertsView) {
                     <AlertsSearch />
                 </div>
             </div>
-            <div className="text-base text-disabled-text flex items-center">
+            <div className="text-base text-disabled-text flex items-center px-6">
                 <Icon name="info-circle-fill" className="mr-2" size={16} />
                 Alerts helps your team stay up to date with the activity on your app.
             </div>
diff --git a/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx b/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx
index fa977ed94..ecc00a594 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx
@@ -34,7 +34,7 @@ function DashboardList() {
       }
     >
       <div className="mt-3 border-b">
-        <div className="grid grid-cols-12 py-2 font-medium px-3">
+        <div className="grid grid-cols-12 py-3 font-medium px-6">
           <div className="col-span-8">Title</div>
           <div className="col-span-2">Visibility</div>
           <div className="col-span-2 text-right">Created</div>
@@ -49,7 +49,7 @@ function DashboardList() {
         )}
       </div>
 
-      <div className="w-full flex items-center justify-between pt-4">
+      <div className="w-full flex items-center justify-between pt-4 px-6">
         <div className="text-disabled-text">
           Showing{' '}
           <span className="font-semibold">{Math.min(list.length, dashboardStore.pageSize)}</span>{' '}
diff --git a/frontend/app/components/Dashboard/components/DashboardList/DashboardListItem.tsx b/frontend/app/components/Dashboard/components/DashboardList/DashboardListItem.tsx
index 0d3b76fd9..033878399 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/DashboardListItem.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/DashboardListItem.tsx
@@ -22,7 +22,7 @@ function DashboardListItem(props: Props) {
         history.push(path);
     };
     return (
-        <div className="hover:bg-active-blue cursor-pointer border-t px-3" onClick={onItemClick}>
+        <div className="hover:bg-active-blue cursor-pointer border-t px-6" onClick={onItemClick}>
             <div className="grid grid-cols-12 py-4 select-none">
                 <div className="col-span-8 flex items-start">
                     <div className="flex items-center capitalize-first">
diff --git a/frontend/app/components/Dashboard/components/DashboardList/DashboardsView.tsx b/frontend/app/components/Dashboard/components/DashboardList/DashboardsView.tsx
index c9b98a745..9acd0bc20 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/DashboardsView.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/DashboardsView.tsx
@@ -21,8 +21,8 @@ function DashboardsView({ history, siteId }: { history: any, siteId: string }) {
     }
 
     return (
-        <div style={{ maxWidth: '1300px', margin: 'auto'}} className="bg-white rounded py-4 px-6 border">
-            <div className="flex items-center mb-4 justify-between">
+        <div style={{ maxWidth: '1300px', margin: 'auto'}} className="bg-white rounded py-4 border">
+            <div className="flex items-center mb-4 justify-between px-6">
                 <div className="flex items-baseline mr-3">
                     <PageTitle title="Dashboards" />
                 </div>
@@ -31,7 +31,7 @@ function DashboardsView({ history, siteId }: { history: any, siteId: string }) {
                     <DashboardSearch />
                 </div>
             </div>
-            <div className="text-base text-disabled-text flex items-center">
+            <div className="text-base text-disabled-text flex items-center px-6">
                 <Icon name="info-circle-fill" className="mr-2" size={16} />
                 A dashboard is a custom visualization using your OpenReplay data.
             </div>
diff --git a/frontend/app/components/Dashboard/components/MetricListItem/MetricListItem.tsx b/frontend/app/components/Dashboard/components/MetricListItem/MetricListItem.tsx
index 094c7a904..72080aa3e 100644
--- a/frontend/app/components/Dashboard/components/MetricListItem/MetricListItem.tsx
+++ b/frontend/app/components/Dashboard/components/MetricListItem/MetricListItem.tsx
@@ -45,7 +45,7 @@ function MetricListItem(props: Props) {
         history.push(path);
     };
     return (
-        <div className="grid grid-cols-12 py-4 border-t select-none hover:bg-active-blue cursor-pointer px-3" onClick={onItemClick}>
+        <div className="grid grid-cols-12 py-4 border-t select-none hover:bg-active-blue cursor-pointer px-6" onClick={onItemClick}>
             <div className="col-span-3 flex items-start">
                 <div className="flex items-center">
                     <MetricTypeIcon type={metric.metricType} />
diff --git a/frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx b/frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx
index ef6f8320f..ecf3d4c2c 100644
--- a/frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx
+++ b/frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx
@@ -39,7 +39,7 @@ function MetricsList({ siteId }: { siteId: string }) {
       }
     >
       <div className="mt-3 border-b rounded bg-white">
-        <div className="grid grid-cols-12 py-2 font-medium px-3">
+        <div className="grid grid-cols-12 py-2 font-medium px-6">
           <div className="col-span-3">Title</div>
           <div className="col-span-3">Owner</div>
           <div className="col-span-4">Visibility</div>
@@ -53,7 +53,7 @@ function MetricsList({ siteId }: { siteId: string }) {
         ))}
       </div>
 
-      <div className="w-full flex items-center justify-between pt-4">
+      <div className="w-full flex items-center justify-between pt-4 px-6">
         <div className="text-disabled-text">
           Showing{' '}
           <span className="font-semibold">{Math.min(list.length, metricStore.pageSize)}</span> out
diff --git a/frontend/app/components/Dashboard/components/MetricsView/MetricsView.tsx b/frontend/app/components/Dashboard/components/MetricsView/MetricsView.tsx
index 47512629f..64d9ab0cb 100644
--- a/frontend/app/components/Dashboard/components/MetricsView/MetricsView.tsx
+++ b/frontend/app/components/Dashboard/components/MetricsView/MetricsView.tsx
@@ -16,8 +16,8 @@ function MetricsView({ siteId }: Props) {
         metricStore.fetchList();
     }, []);
     return useObserver(() => (
-        <div style={{ maxWidth: '1300px', margin: 'auto'}} className="bg-white rounded py-4 px-6 border">
-            <div className="flex items-center mb-4 justify-between">
+        <div style={{ maxWidth: '1300px', margin: 'auto'}} className="bg-white rounded py-4 border">
+            <div className="flex items-center mb-4 justify-between px-6">
                 <div className="flex items-baseline mr-3">
                     <PageTitle title="Metrics" className="" />
                 </div>
@@ -26,7 +26,7 @@ function MetricsView({ siteId }: Props) {
                     <MetricsSearch />
                 </div>
             </div>
-            <div className="text-base text-disabled-text flex items-center">
+            <div className="text-base text-disabled-text flex items-center px-6">
                 <Icon name="info-circle-fill" className="mr-2" size={16} />
                 Create custom Metrics to capture key interactions and track KPIs.
             </div>
diff --git a/frontend/app/components/shared/SessionItem/SessionItem.tsx b/frontend/app/components/shared/SessionItem/SessionItem.tsx
index e22f7e532..67e6b772b 100644
--- a/frontend/app/components/shared/SessionItem/SessionItem.tsx
+++ b/frontend/app/components/shared/SessionItem/SessionItem.tsx
@@ -108,7 +108,7 @@ function SessionItem(props: RouteComponentProps & Props) {
         });
 
     return (
-        <div className={cn(stl.sessionItem, 'flex flex-col p-2')} id="session-item" onClick={(e) => e.stopPropagation()}>
+        <div className={cn(stl.sessionItem, 'flex flex-col py-2 px-4')} id="session-item" onClick={(e) => e.stopPropagation()}>
             <div className="flex items-start">
                 <div className={cn('flex items-center w-full')}>
                     {!compact && (
@@ -123,7 +123,7 @@ function SessionItem(props: RouteComponentProps & Props) {
                                         [stl.userName]: !disableUser && hasUserId,
                                         'color-gray-medium': disableUser || !hasUserId,
                                     })}
-                                    onClick={() => !disableUser && !hasUserFilter && onUserClick(userId, userAnonymousId)}
+                                    onClick={() => !disableUser && !hasUserFilter && hasUserId ? onUserClick(userId, userAnonymousId) : null}
                                 >
                                     <TextEllipsis text={userDisplayName} maxWidth="200px" popupProps={{ inverted: true, size: 'tiny' }} />
                                 </div>
diff --git a/frontend/app/components/shared/SessionListContainer/SessionListContainer.tsx b/frontend/app/components/shared/SessionListContainer/SessionListContainer.tsx
index 0a13707c7..0b8bc35c6 100644
--- a/frontend/app/components/shared/SessionListContainer/SessionListContainer.tsx
+++ b/frontend/app/components/shared/SessionListContainer/SessionListContainer.tsx
@@ -7,9 +7,7 @@ function SessionListContainer() {
         <div className="widget-wrapper">
             <SessionHeader />
             <div className="border-b" />
-            <div className="px-4">
-                <SessionList />
-            </div>
+            <SessionList />
         </div>
     );
 }
diff --git a/frontend/app/components/shared/SessionListContainer/components/SessionList/SessionList.tsx b/frontend/app/components/shared/SessionListContainer/components/SessionList/SessionList.tsx
index f1684f230..6d7023ca0 100644
--- a/frontend/app/components/shared/SessionListContainer/components/SessionList/SessionList.tsx
+++ b/frontend/app/components/shared/SessionListContainer/components/SessionList/SessionList.tsx
@@ -114,7 +114,7 @@ function SessionList(props: Props) {
             </NoContent>
 
             {total > 0 && (
-                <div className="w-full flex items-center justify-center py-6">
+                <div className="w-full flex items-center justify-center py-6 px-4">
                     <Pagination
                         page={currentPage}
                         totalPages={Math.ceil(total / 10)}