UI Improvements

frontend/app/components/Dashboard/components/DashboardHeader/DashboardHeader.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import Breadcrumb from 'Shared/Breadcrumb';
+//import {Breadcrumb} from 'Shared/Breadcrumb';
+import BackButton from '../../../shared/Breadcrumb/BackButton';
 import {withSiteId} from 'App/routes';
 import {withRouter, RouteComponentProps} from 'react-router-dom';
 import {Button, PageTitle, confirm, Tooltip} from 'UI';
@@ -61,17 +62,24 @@ function DashboardHeader(props: Props) {
                 closeHandler={() => setShowEditModal(false)}
                 focusTitle={focusTitle}
             />
+            
+            <div className="flex items-center mb-2 justify-between">
+                <div className="flex items-center" style={{flex: 3}}>
+
+                    <BackButton siteId={siteId} />
+                    
                     {/* <Breadcrumb
                     items={[
                             {
-                        label: 'Dashboards',
+                                label: 'Back',
                                 to: withSiteId('/dashboard', siteId),
                             },
                             {label: (dashboard && dashboard.name) || ''},
                         ]}
                     /> */}
-            <div className="flex items-center mb-2 justify-between">
-                <div className="flex items-center" style={{flex: 3}}>
+
+
+
                     <PageTitle
                         title={
                             // @ts-ignore

frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx

@@ -13,6 +13,7 @@ import { dashboardSelected, withSiteId } from 'App/routes';
 import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
 import CreateDashboardButton from "Components/Dashboard/components/CreateDashboardButton";
 import { useHistory } from "react-router";
+import classNames from 'classnames';
 
 function DashboardList({ siteId }: { siteId: string }) {
     const { dashboardStore } = useStore();
@@ -20,6 +21,10 @@ function DashboardList({ siteId }: { siteId: string }) {
     const dashboardsSearch = dashboardStore.filter.query;
     const history = useHistory();
 
+    // Define custom width and height for each scenario
+    const searchImageDimensions = { width: 200, height: 'auto' };
+    const defaultImageDimensions = { width: 600, height: 'auto' };
+
     const tableConfig: TableColumnsType<Dashboard> = [
         {
             title: 'Title',
@@ -93,14 +98,22 @@ function DashboardList({ siteId }: { siteId: string }) {
     );
 
     const emptyImage = dashboardsSearch !== '' ? ICONS.NO_RESULTS : ICONS.NO_DASHBOARDS;
+    const imageDimensions = dashboardsSearch !== '' ? searchImageDimensions : defaultImageDimensions;
 
     return (
         list.length === 0 && !dashboardStore.filter.showMine ? (
+            <div className='flex justify-center text-center'>
             <Empty
-                image={<AnimatedSVG name={emptyImage} size={600} />}
-                imageStyle={{ height: 300 }}
+                image={<AnimatedSVG name={emptyImage} size={imageDimensions.width} />} 
+                imageStyle={{ 
+                    width: imageDimensions.width, 
+                    height: imageDimensions.height,
+                    margin: 'auto',
+                    padding: '2rem 0'
+                }} 
                 description={emptyDescription}
             />
+            </div>
         ) : (
             <Table
                 dataSource={list}

frontend/app/components/Dashboard/components/FilterSeries/AddStepButton.tsx

@@ -23,7 +23,7 @@ function AddStepButton({series, excludeFilterKeys}: Props) {
             onFilterClick={onAddFilter}
             excludeFilterKeys={excludeFilterKeys}
         >
-            <Button type="text" className='border-none text-indigo-600 hover:text-indigo-600 align-bottom' icon={<PlusIcon size={16}/>} size="small">
+            <Button type="text" className='border-none text-indigo-600 hover:text-indigo-600 align-bottom ms-2' icon={<PlusIcon size={16}/>} size="small">
                 <span className='font-medium'>Add Step</span>
             </Button>
         </FilterSelection>

frontend/app/components/shared/Breadcrumb/BackButton.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Button } from 'antd';
+import { useHistory } from 'react-router-dom';
+import { LeftOutlined } from '@ant-design/icons';
+
+function BackButton({ siteId }) {
+    const history = useHistory();
+
+    const handleBackClick = () => {
+        history.goBack();
+    };
+
+    return (
+        <Button type="text" onClick={handleBackClick} icon={<LeftOutlined />} className='px-1 pe-2 me-2 gap-1' >
+            Back
+        </Button>
+    );
+}
+
+export default BackButton;

frontend/app/components/ui/PageTitle/PageTitle.tsx

@@ -14,7 +14,7 @@ function PageTitle({ title, actionButton = null, subTitle = '', className = '',
     return (
         <div>
             <div className='flex items-center'>
-                <h1 className={cn("text-2xl capitalize-first", className)} onDoubleClick={onDoubleClick} onClick={onClick}>
+                <h1 className={cn("text-2xl capitalize-first mt-.5 cursor-pointer")} onDoubleClick={onDoubleClick} onClick={onClick}>
                     {title}
                 </h1>
                 { actionButton && <div className="ml-2">{actionButton}</div> }