From 0cc68e5625529387ec879465433f297cad170fdc Mon Sep 17 00:00:00 2001
From: Henry <hzj94@hotmail.com>
Date: Thu, 16 Nov 2023 23:23:41 +0000
Subject: [PATCH] add dark mode changes

---
 .../src/ui-component/button/FlowListMenu.js   |  1 -
 .../src/ui-component/table/FlowListTable.js   |  5 +---
 packages/ui/src/views/chatflows/index.js      | 27 +++++++++++++------
 3 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/packages/ui/src/ui-component/button/FlowListMenu.js b/packages/ui/src/ui-component/button/FlowListMenu.js
index f4ffbd32..44192298 100644
--- a/packages/ui/src/ui-component/button/FlowListMenu.js
+++ b/packages/ui/src/ui-component/button/FlowListMenu.js
@@ -43,7 +43,6 @@ const StyledMenu = styled((props) => (
         borderRadius: 6,
         marginTop: theme.spacing(1),
         minWidth: 180,
-        color: theme.palette.mode === 'light' ? 'rgb(55, 65, 81)' : theme.palette.grey[300],
         boxShadow:
             'rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px',
         '& .MuiMenu-list': {
diff --git a/packages/ui/src/ui-component/table/FlowListTable.js b/packages/ui/src/ui-component/table/FlowListTable.js
index 08caed57..68641d44 100644
--- a/packages/ui/src/ui-component/table/FlowListTable.js
+++ b/packages/ui/src/ui-component/table/FlowListTable.js
@@ -52,7 +52,7 @@ export const FlowListTable = ({ data, images, filterFunction, updateFlowsApi })
                                 Category
                             </StyledTableCell>
                             <StyledTableCell sx={{ display: { xs: 'none', sm: 'table-cell' } }} style={{ width: '30%' }} key='2'>
-                                Nodes (Showing first 5)
+                                Nodes
                             </StyledTableCell>
                             <StyledTableCell sx={{ display: { xs: 'none', sm: 'table-cell' } }} style={{ width: '15%' }} key='3'>
                                 Last Modified Date
@@ -134,9 +134,6 @@ export const FlowListTable = ({ data, images, filterFunction, updateFlowsApi })
                                 </TableCell>
                                 <TableCell sx={{ display: { xs: 'none', sm: 'table-cell' } }} key='4'>
                                     <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1} justifyContent='center' alignItems='center'>
-                                        {/*<Button sx={{ marginRight: '10px' }} onClick={() => goToCanvas(row)}>*/}
-                                        {/*    OPEN*/}
-                                        {/*</Button>*/}
                                         <FlowListMenu chatflow={row} updateFlowsApi={updateFlowsApi} />
                                     </Stack>
                                 </TableCell>
diff --git a/packages/ui/src/views/chatflows/index.js b/packages/ui/src/views/chatflows/index.js
index 44c670d6..34c6523b 100644
--- a/packages/ui/src/views/chatflows/index.js
+++ b/packages/ui/src/views/chatflows/index.js
@@ -23,7 +23,7 @@ import useApi from 'hooks/useApi'
 import { baseURL } from 'store/constant'
 
 // icons
-import { IconPlus, IconSearch, IconLayoutCards, IconLayoutColumns } from '@tabler/icons'
+import { IconPlus, IconSearch, IconLayoutGrid, IconList } from '@tabler/icons'
 import * as React from 'react'
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'
 import { FlowListTable } from '../../ui-component/table/FlowListTable'
@@ -138,7 +138,7 @@ const Chatflows = () => {
                         <h1>Chatflows</h1>
                         <TextField
                             size='small'
-                            sx={{ display: { xs: 'none', sm: 'block' }, marginLeft: 3 }}
+                            sx={{ display: { xs: 'none', sm: 'block' }, ml: 3 }}
                             variant='outlined'
                             placeholder='Search name or category'
                             onChange={onSearchChange}
@@ -151,19 +151,30 @@ const Chatflows = () => {
                             }}
                         />
                         <Box sx={{ flexGrow: 1 }} />
-                        <ButtonGroup disableElevation variant='contained' aria-label='outlined primary button group'>
+                        <ButtonGroup sx={{ maxHeight: 40 }} disableElevation variant='contained' aria-label='outlined primary button group'>
                             <ButtonGroup
                                 sx={{ display: { xs: 'none', sm: 'block' } }}
                                 disableElevation
                                 variant='contained'
                                 aria-label='outlined primary button group'
                             >
-                                <ToggleButtonGroup value={view} color='primary' exclusive onChange={handleChange}>
-                                    <ToggleButton variant='contained' value='card' selectedColor='#00abc0'>
-                                        <IconLayoutCards />
+                                <ToggleButtonGroup sx={{ maxHeight: 40 }} value={view} color='primary' exclusive onChange={handleChange}>
+                                    <ToggleButton
+                                        sx={{ color: theme?.customization?.isDarkMode ? 'white' : 'inherit' }}
+                                        variant='contained'
+                                        value='card'
+                                        title='Card View'
+                                        selectedColor='#00abc0'
+                                    >
+                                        <IconLayoutGrid />
                                     </ToggleButton>
-                                    <ToggleButton variant='contained' value='list'>
-                                        <IconLayoutColumns />
+                                    <ToggleButton
+                                        sx={{ color: theme?.customization?.isDarkMode ? 'white' : 'inherit' }}
+                                        variant='contained'
+                                        value='list'
+                                        title='List View'
+                                    >
+                                        <IconList />
                                     </ToggleButton>
                                 </ToggleButtonGroup>
                             </ButtonGroup>