allow toggle color customisation

Chainlit · Oct 17, 2023 · 40b63f6 · 40b63f6
1 parent 82d4c16
commit 40b63f6
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 5 deletions.
diff --git a/frontend/src/components/molecules/chatProfiles.tsx b/frontend/src/components/molecules/chatProfiles.tsx
@@ -7,7 +7,6 @@ import { Box, Popover, Tab, Tabs } from '@mui/material';
 import {
   InputStateHandler,
   grey,
-  primary,
   useChat,
   useIsDarkMode
 } from '@chainlit/components';
@@ -101,7 +100,9 @@ export default function ChatProfiles() {
               },
               '& .MuiTabs-indicator': {
                 background: (theme) =>
-                  isDarkMode ? theme.palette.divider : primary[600],
+                  isDarkMode
+                    ? theme.palette.divider
+                    : theme.palette.primary.main,
                 height: '100%',
                 borderRadius: '5px'
               }

diff --git a/frontend/src/components/organisms/conversationsHistory/sidebar/index.tsx b/frontend/src/components/organisms/conversationsHistory/sidebar/index.tsx
@@ -150,7 +150,7 @@ const _ConversationsHistorySidebar = () => {
           onScroll: handleScroll
         }}
         sx={{
-          width: settings.isChatHistoryOpen ? DRAWER_WIDTH : 0,
+          width: settings.isChatHistoryOpen ? 'auto' : 0,
           '& .MuiDrawer-paper': {
             width: settings.isChatHistoryOpen ? DRAWER_WIDTH : 0,
             position: 'inherit',

diff --git a/libs/components/src/buttons/Toggle.tsx b/libs/components/src/buttons/Toggle.tsx
@@ -1,7 +1,7 @@
 import { useIsDarkMode } from 'hooks';
 import React from 'react';
 import { InputStateHandler } from 'src/inputs';
-import { grey, primary } from 'theme';
+import { grey } from 'theme';
 
 import Box from '@mui/material/Box';
 import Tab from '@mui/material/Tab';
@@ -59,7 +59,7 @@ const Toggle = (props: ToggleProps): JSX.Element => {
             },
             '& .MuiTabs-indicator': {
               background: (theme) =>
-                isDarkMode ? theme.palette.divider : primary[600],
+                isDarkMode ? theme.palette.divider : theme.palette.primary.main,
               height: '100%',
               borderRadius: '5px'
             }