From b941ea2cd859108712eeba0826278f87b27e9ee3 Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Wed, 30 Oct 2024 11:44:31 +0100
Subject: [PATCH] ui: start redesign for live search/list

---
 .../Spots/SpotsList/SpotsListHeader.tsx           |  2 +-
 .../shared/LiveSessionList/LiveSessionList.tsx    |  4 ++--
 .../LiveSessionReloadButton.tsx                   |  2 +-
 .../shared/ReloadButton/ReloadButton.tsx          | 15 +++++++++------
 4 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/frontend/app/components/Spots/SpotsList/SpotsListHeader.tsx b/frontend/app/components/Spots/SpotsList/SpotsListHeader.tsx
index b2368469f..781893575 100644
--- a/frontend/app/components/Spots/SpotsList/SpotsListHeader.tsx
+++ b/frontend/app/components/Spots/SpotsList/SpotsListHeader.tsx
@@ -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 ? (
diff --git a/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx b/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx
index aa043a42a..9ed3c9fd6 100644
--- a/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx
+++ b/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx
@@ -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>
diff --git a/frontend/app/components/shared/LiveSessionReloadButton/LiveSessionReloadButton.tsx b/frontend/app/components/shared/LiveSessionReloadButton/LiveSessionReloadButton.tsx
index 56be39a16..44301a9de 100644
--- a/frontend/app/components/shared/LiveSessionReloadButton/LiveSessionReloadButton.tsx
+++ b/frontend/app/components/shared/LiveSessionReloadButton/LiveSessionReloadButton.tsx
@@ -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" />
   );
 }
 
diff --git a/frontend/app/components/shared/ReloadButton/ReloadButton.tsx b/frontend/app/components/shared/ReloadButton/ReloadButton.tsx
index e4480c0fc..495a80f47 100644
--- a/frontend/app/components/shared/ReloadButton/ReloadButton.tsx
+++ b/frontend/app/components/shared/ReloadButton/ReloadButton.tsx
@@ -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>
   );
 }