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

ui: start redesign for live search/list

Browse source
This commit is contained in:
nick-delirium 2024-10-30 11:44:31 +01:00
parent 73ade8da81
commit b941ea2cd8
No known key found for this signature in database
GPG key ID: 93ABD695DF5FDBA0
4 changed files with 13 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/app/components/Spots/SpotsList/SpotsListHeader.tsx
View file

@ -50,7 +50,7 @@ const SpotsListHeader = observer(
<div className={'flex items-center justify-between w-full'}>
<div className="flex gap-1 items-center">
<h1 className={'text-2xl capitalize mr-2'}>Spot List</h1>
<ReloadButton buttonSize={'small'} onClick={onRefresh} iconSize={16} />
<ReloadButton buttonSize={'small'} onClick={onRefresh} iconSize={14} />
</div>
{tenantHasSpots ? (

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

@ -78,8 +78,8 @@ function LiveSessionList() {
return (
<div>
<div className="bg-white p-3 rounded-lg border shadow-sm">
<div className="flex mb-6 justify-between items-center">
<div className="bg-white py-3 rounded-lg border shadow-sm">
<div className="flex mb-4 pb-2 px-3 justify-between items-center border-b border-b-gray-lighter">
<div className="flex items-center">
<h3 className="text-2xl capitalize mr-2">
<span>Co-Browse</span>

2
frontend/app/components/shared/LiveSessionReloadButton/LiveSessionReloadButton.tsx
View file

@ -12,7 +12,7 @@ function LiveSessionReloadButton(props: Props) {
const { onClick } = props;
const loading = sessionStore.loadingLiveSessions;
return (
<ReloadButton loading={loading} onClick={onClick} className="cursor-pointer" />
<ReloadButton buttonSize={'small'} iconSize={14} loading={loading} onClick={onClick} className="cursor-pointer" />
);
}

15
frontend/app/components/shared/ReloadButton/ReloadButton.tsx
View file

@ -1,6 +1,6 @@
import React from 'react';
import {Button, Tooltip} from 'antd';
import { ListRestart } from 'lucide-react';
import { Button, Tooltip } from 'antd';
import { SyncOutlined } from '@ant-design/icons';
interface Props {
loading?: boolean;
@ -11,10 +11,13 @@ interface Props {
export default function ReloadButton(props: Props) {
const { loading, onClick, iconSize = 18, buttonSize } = props;
return (
<Tooltip title="Refresh" placement='right'>
<Button type="default" size={buttonSize} onClick={onClick}>
<ListRestart size={iconSize} />
</Button>
<Tooltip title="Refresh" placement="right">
<Button
type="default"
size={buttonSize}
onClick={onClick}
icon={<SyncOutlined style={{ fontSize: iconSize }} />}
/>
</Tooltip>
);
}