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

fix(player): add border to dashboards, fix font size and tooltip

Browse source
This commit is contained in:
sylenien 2022-08-11 13:50:07 +02:00 • committed by Delirium
parent a70058cf5d
commit 73c45dae3e
3 changed files with 17 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -21,18 +21,18 @@ function DashboardsView({ history, siteId }: { history: any, siteId: string }) {
}
return (
<div style={{ maxWidth: '1300px', margin: 'auto'}} className="bg-white rounded p-4">
<div style={{ maxWidth: '1300px', margin: 'auto'}} className="bg-white rounded p-4 border">
<div className="flex items-center mb-4 justify-between">
<div className="flex items-baseline mr-3">
<PageTitle title="Dashboards" className="" />
</div>
<Button variant="primary" onClick={onAddDashboardClick}>Create Dashboard</Button>
<div className="ml-auto w-1/4">
<div className="ml-auto w-1/4" style={{ minWidth: 300 }}>
<DashboardSearch />
</div>
</div>
<div className="text-xl text-disabled-text flex items-center">
<Icon name="info-circle-fill" className="mr-2" size={18} />
<div className="text-base text-disabled-text flex items-center">
<Icon name="info-circle-fill" className="mr-2" size={16} />
A dashboard is a custom visualization using your OpenReplay data.
</div>
<DashboardList />

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

@ -1,7 +1,7 @@
import React from 'react';
import { Icon, NoContent, Label, Link, Pagination, Popup } from 'UI';
import { checkForRecent, formatDateTimeDefault, convertTimestampToUtcTimestamp } from 'App/date';
import { getIcon } from 'react-toastify/dist/components';
import { Icon, Link, Popup } from 'UI';
import { checkForRecent } from 'App/date';
import { Tooltip } from 'react-tippy'
interface Props {
metric: any;
@ -25,19 +25,6 @@ function DashboardLink({ dashboards}: any) {
}
function MetricTypeIcon({ type }: any) {
const PopupWrapper = (props: any) => {
return (
<Popup
content={<div className="capitalize">{type}</div>}
position="top center"
on="hover"
hideOnScroll={true}
>
{props.children}
</Popup>
);
}
const getIcon = () => {
switch (type) {
case 'funnel':
@ -50,11 +37,15 @@ function MetricTypeIcon({ type }: any) {
}
return (
<PopupWrapper>
<Tooltip
html={<div className="capitalize">{type}</div>}
position="top"
arrow
>
<div className="w-9 h-9 rounded-full bg-tealx-lightest flex items-center justify-center mr-2">
<Icon name={getIcon()} size="16" color="tealx" />
</div>
</PopupWrapper>
</Tooltip>
)
}

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

@ -16,18 +16,18 @@ function MetricsView(props: Props) {
metricStore.fetchList();
}, []);
return useObserver(() => (
<div style={{ maxWidth: '1300px', margin: 'auto'}} className="bg-white rounded p-4">
<div style={{ maxWidth: '1300px', margin: 'auto'}} className="bg-white rounded p-4 border">
<div className="flex items-center mb-4 justify-between">
<div className="flex items-baseline mr-3">
<PageTitle title="Metrics" className="" />
</div>
<Link to={'/metrics/create'}><Button variant="primary">Create Metric</Button></Link>
<div className="ml-auto w-1/4">
<div className="ml-auto w-1/4" style={{ minWidth: 300 }}>
<MetricsSearch />
</div>
</div>
<div className="text-xl text-disabled-text flex items-center">
<Icon name="info-circle-fill" className="mr-2" size={18} />
<div className="text-base text-disabled-text flex items-center">
<Icon name="info-circle-fill" className="mr-2" size={16} />
Create custom Metrics to capture key interactions and track KPIs.
</div>
<MetricsList />