jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): fix item lists paddings

Browse source
This commit is contained in:
sylenien 2022-08-22 12:36:05 +02:00
parent 5887ab5ddb
commit 43f669e1f7
12 changed files with 22 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/app/components/Dashboard/components/Alerts/AlertListItem.tsx
View file

@ -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">

4
frontend/app/components/Dashboard/components/Alerts/AlertsList.tsx
View file

@ -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

6
frontend/app/components/Dashboard/components/Alerts/AlertsView.tsx
View file

@ -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>

4
frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx
View file

@ -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>{' '}

2
frontend/app/components/Dashboard/components/DashboardList/DashboardListItem.tsx
View file

@ -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">

6
frontend/app/components/Dashboard/components/DashboardList/DashboardsView.tsx
View file

@ -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>

2
frontend/app/components/Dashboard/components/MetricListItem/MetricListItem.tsx
View file

@ -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} />

4
frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx
View file

@ -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

6
frontend/app/components/Dashboard/components/MetricsView/MetricsView.tsx
View file

@ -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>

4
frontend/app/components/shared/SessionItem/SessionItem.tsx
View file

@ -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>

4
frontend/app/components/shared/SessionListContainer/SessionListContainer.tsx
View file

@ -7,9 +7,7 @@ function SessionListContainer() {
<div className="widget-wrapper">
<SessionHeader />
<div className="border-b" />
<div className="px-4">
<SessionList />
</div>
<SessionList />
</div>
);
}

2
frontend/app/components/shared/SessionListContainer/components/SessionList/SessionList.tsx
View file

@ -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)}