From 81e60413c4986fe025f5d4fa9f4396048532dd0b Mon Sep 17 00:00:00 2001 From: sime2408 Date: Sat, 3 Feb 2024 20:09:21 +0100 Subject: [PATCH] dark theme support --- web/src/app/ThemeContext.js | 31 ++++++++++++ web/src/app/admin/add-connector/page.tsx | 4 +- .../app/admin/assistants/AssistantEditor.tsx | 6 +-- web/src/app/admin/assistants/PersonaTable.tsx | 4 +- web/src/app/admin/assistants/page.tsx | 2 +- .../admin/bot/SlackBotConfigCreationForm.tsx | 8 ++-- web/src/app/admin/bot/SlackBotTokensForm.tsx | 2 +- web/src/app/admin/bot/page.tsx | 4 +- .../connector/[ccPairId]/ConfigDisplay.tsx | 2 +- .../app/admin/connector/[ccPairId]/page.tsx | 4 +- .../app/admin/connectors/bookstack/page.tsx | 6 +-- .../app/admin/connectors/confluence/page.tsx | 10 ++-- .../app/admin/connectors/document360/page.tsx | 8 ++-- web/src/app/admin/connectors/file/page.tsx | 8 ++-- web/src/app/admin/connectors/github/page.tsx | 8 ++-- web/src/app/admin/connectors/gitlab/page.tsx | 8 ++-- .../app/admin/connectors/gmail/Credential.tsx | 8 ++-- web/src/app/admin/connectors/gmail/page.tsx | 4 +- web/src/app/admin/connectors/gong/page.tsx | 8 ++-- .../google-drive/ConnectorEditPopup.tsx | 4 +- .../connectors/google-drive/Credential.tsx | 8 ++-- .../admin/connectors/google-drive/page.tsx | 6 +-- .../admin/connectors/google-sites/page.tsx | 6 +-- web/src/app/admin/connectors/guru/page.tsx | 6 +-- web/src/app/admin/connectors/hubspot/page.tsx | 4 +- web/src/app/admin/connectors/jira/page.tsx | 10 ++-- web/src/app/admin/connectors/linear/page.tsx | 8 ++-- web/src/app/admin/connectors/loopio/page.tsx | 8 ++-- web/src/app/admin/connectors/notion/page.tsx | 4 +- .../admin/connectors/productboard/page.tsx | 6 +-- .../admin/connectors/request-tracker/page.tsx | 6 +-- .../app/admin/connectors/sharepoint/page.tsx | 6 +-- web/src/app/admin/connectors/slab/page.tsx | 8 ++-- web/src/app/admin/connectors/slack/page.tsx | 6 +-- web/src/app/admin/connectors/web/page.tsx | 6 +-- web/src/app/admin/connectors/zendesk/page.tsx | 4 +- web/src/app/admin/connectors/zulip/page.tsx | 8 ++-- .../app/admin/documents/explorer/Explorer.tsx | 10 ++-- .../feedback/DocumentFeedbackTable.tsx | 4 +- .../sets/DocumentSetCreationForm.tsx | 6 +-- web/src/app/admin/documents/sets/page.tsx | 6 +-- .../status/CCPairIndexingStatusTable.tsx | 2 +- web/src/app/admin/indexing/status/page.tsx | 2 +- .../admin/models/embedding/ModelSelector.tsx | 13 +++-- .../embedding/ReindexingProgressTable.tsx | 2 +- web/src/app/admin/systeminfo/page.tsx | 2 +- web/src/app/auth/login/page.tsx | 4 +- web/src/app/auth/signup/page.tsx | 2 +- web/src/app/auth/verify-email/Verify.tsx | 2 +- .../RequestNewVerificationEmail.tsx | 2 +- web/src/app/chat/ChatIntro.tsx | 18 +++---- web/src/app/chat/ChatPage.tsx | 2 +- web/src/app/chat/ChatPersonaSelector.tsx | 12 ++--- .../documentSidebar/ChatDocumentDisplay.tsx | 10 ++-- .../chat/documentSidebar/DocumentSelector.tsx | 2 +- .../chat/documentSidebar/DocumentSidebar.tsx | 10 ++-- web/src/app/chat/message/Messages.tsx | 20 ++++---- web/src/app/chat/message/SearchSummary.tsx | 2 +- web/src/app/chat/modal/DeleteChatModal.tsx | 2 +- web/src/app/chat/modal/FeedbackModal.tsx | 6 +-- web/src/app/chat/modal/ModalWrapper.tsx | 2 +- web/src/app/chat/modifiers/ChatFilters.tsx | 8 ++-- .../sessionSidebar/ChatSessionDisplay.tsx | 2 +- .../app/chat/sessionSidebar/ChatSidebar.tsx | 21 ++++---- web/src/app/globals.css | 13 +++++ web/src/app/layout.tsx | 27 ++++++----- web/src/components/BackButton.tsx | 2 +- web/src/components/BasicClickable.tsx | 20 ++++---- web/src/components/Bubble.tsx | 4 +- web/src/components/Button.tsx | 2 +- web/src/components/CustomCheckbox.tsx | 4 +- web/src/components/DeleteButton.tsx | 4 +- web/src/components/Dropdown.tsx | 24 +++++----- web/src/components/EditButton.tsx | 4 +- web/src/components/EditableValue.tsx | 4 +- web/src/components/HoverPopup.tsx | 2 +- web/src/components/MetadataBadge.tsx | 4 +- web/src/components/Modal.tsx | 4 +- web/src/components/PageSelector.tsx | 6 +-- web/src/components/Spinner.tsx | 2 +- web/src/components/SwitchModelModal.tsx | 2 +- web/src/components/admin/Layout.tsx | 2 +- web/src/components/admin/Title.tsx | 2 +- .../admin/connectors/AdminSidebar.tsx | 4 +- .../admin/connectors/BasicTable.tsx | 4 +- .../admin/connectors/ConnectorTitle.tsx | 2 +- web/src/components/admin/connectors/Field.tsx | 12 ++--- .../admin/connectors/FileUpload.tsx | 4 +- .../connectors/table/ConnectorsTable.tsx | 2 +- .../admin/connectors/table/DeleteColumn.tsx | 2 +- web/src/components/header/Header.tsx | 48 +++++++++++-------- web/src/components/icons/icons.tsx | 4 +- .../components/resizable/ResizableSection.tsx | 8 ++-- .../components/search/DateRangeSelector.tsx | 17 ++++--- web/src/components/search/DocumentDisplay.tsx | 20 ++++---- web/src/components/search/PersonaSelector.tsx | 7 ++- web/src/components/search/QAFeedback.tsx | 4 +- web/src/components/search/SearchBar.tsx | 6 +-- web/src/components/search/SearchHelper.tsx | 6 +-- .../search/SearchResultsDisplay.tsx | 12 ++--- .../components/search/SearchTypeSelector.tsx | 6 +-- .../search/filtering/FilterDropdown.tsx | 14 +++--- .../components/search/filtering/Filters.tsx | 16 +++---- .../components/search/filtering/TagFilter.tsx | 14 +++--- .../search/results/AnswerSection.tsx | 6 +-- .../search/results/QuotesSection.tsx | 12 ++--- web/src/components/table/DraggableRow.tsx | 2 +- web/src/components/table/StaticRow.tsx | 2 +- web/tailwind.config.js | 26 ++++++---- 109 files changed, 437 insertions(+), 378 deletions(-) create mode 100644 web/src/app/ThemeContext.js diff --git a/web/src/app/ThemeContext.js b/web/src/app/ThemeContext.js new file mode 100644 index 00000000000..f93f6298afb --- /dev/null +++ b/web/src/app/ThemeContext.js @@ -0,0 +1,31 @@ +"use client"; + +import React, { createContext, useContext, useState, useEffect } from 'react'; + +const ThemeContext = createContext({ theme: 'dark', toggleTheme: () => {} }); +export const useTheme = () => useContext(ThemeContext); + +export const ThemeProvider = ({ children }) => { + const [theme, setTheme] = useState('light'); + + useEffect(() => { + const storedTheme = localStorage.getItem('darkMode'); + const isDarkMode = storedTheme === 'true'; + setTheme(isDarkMode ? 'dark' : 'light'); + document.documentElement.classList.toggle('dark', isDarkMode); + }, []); + + const toggleTheme = () => { + const isDarkMode = theme === 'dark'; + const newTheme = isDarkMode ? 'light' : 'dark'; + setTheme(newTheme); + localStorage.setItem('darkMode', !isDarkMode ? 'true' : 'false'); + document.documentElement.classList.toggle('dark', !isDarkMode); + }; + + return ( + + {children} + + ); +}; diff --git a/web/src/app/admin/add-connector/page.tsx b/web/src/app/admin/add-connector/page.tsx index d6ad8324ef3..b5d36e97926 100644 --- a/web/src/app/admin/add-connector/page.tsx +++ b/web/src/app/admin/add-connector/page.tsx @@ -17,9 +17,9 @@ function SourceTile({ sourceMetadata }: { sourceMetadata: SourceMetadata }) { rounded-lg w-40 cursor-pointer - bg-hover-light + bg-hover-light dark:bg-neutral-600 shadow-md - hover:bg-hover + hover:bg-hover dark:hover:bg-neutral-800 `} href={sourceMetadata.adminUrl} > diff --git a/web/src/app/admin/assistants/AssistantEditor.tsx b/web/src/app/admin/assistants/AssistantEditor.tsx index 8c1f01973b2..33de1e26350 100644 --- a/web/src/app/admin/assistants/AssistantEditor.tsx +++ b/web/src/app/admin/assistants/AssistantEditor.tsx @@ -51,12 +51,12 @@ function checkLLMSupportsImageGeneration(provider: string, model: string) { function Label({ children }: { children: string | JSX.Element }) { return ( -
{children}
+
{children}
); } function SubLabel({ children }: { children: string | JSX.Element }) { - return
{children}
; + return
{children}
; } export function AssistantEditor({ @@ -586,7 +586,7 @@ export function AssistantEditor({ OpenAI docs diff --git a/web/src/app/admin/assistants/PersonaTable.tsx b/web/src/app/admin/assistants/PersonaTable.tsx index 87873611559..9dea8220df6 100644 --- a/web/src/app/admin/assistants/PersonaTable.tsx +++ b/web/src/app/admin/assistants/PersonaTable.tsx @@ -133,7 +133,7 @@ export function PersonasTable({ personas }: { personas: Persona[] }) { }); } }} - className="px-1 py-0.5 hover:bg-hover-light rounded flex cursor-pointer select-none w-fit" + className="px-1 py-0.5 hover:bg-neutral-200 dark:hover:bg-neutral-600 rounded flex cursor-pointer select-none w-fit" >
{!persona.is_visible ? ( @@ -150,7 +150,7 @@ export function PersonasTable({ personas }: { personas: Persona[] }) {
{!persona.default_persona ? (
{ const response = await deletePersona(persona.id); if (response.ok) { diff --git a/web/src/app/admin/assistants/page.tsx b/web/src/app/admin/assistants/page.tsx index 55b89045e23..aae95294586 100644 --- a/web/src/app/admin/assistants/page.tsx +++ b/web/src/app/admin/assistants/page.tsx @@ -46,7 +46,7 @@ export default async function Page() { Create an Assistant
diff --git a/web/src/app/admin/bot/SlackBotConfigCreationForm.tsx b/web/src/app/admin/bot/SlackBotConfigCreationForm.tsx index 6a598412541..a12b2fc2a78 100644 --- a/web/src/app/admin/bot/SlackBotConfigCreationForm.tsx +++ b/web/src/app/admin/bot/SlackBotConfigCreationForm.tsx @@ -54,7 +54,7 @@ export const SlackBotCreationForm = ({ return (
- + {popup} { if (isSelected) { diff --git a/web/src/app/admin/bot/SlackBotTokensForm.tsx b/web/src/app/admin/bot/SlackBotTokensForm.tsx index 37bba487754..db2c98fa1a6 100644 --- a/web/src/app/admin/bot/SlackBotTokensForm.tsx +++ b/web/src/app/admin/bot/SlackBotTokensForm.tsx @@ -25,7 +25,7 @@ export const SlackBotTokensForm = ({ existingTokens, }: SlackBotTokensFormProps) => { return ( - + {slackBotConfig.persona.name} @@ -211,7 +211,7 @@ const Main = () => { Follow the{" "} diff --git a/web/src/app/admin/connector/[ccPairId]/ConfigDisplay.tsx b/web/src/app/admin/connector/[ccPairId]/ConfigDisplay.tsx index c959b903754..6f8f464ba71 100644 --- a/web/src/app/admin/connector/[ccPairId]/ConfigDisplay.tsx +++ b/web/src/app/admin/connector/[ccPairId]/ConfigDisplay.tsx @@ -55,7 +55,7 @@ export function ConfigDisplay({ return ( <> Configuration - + {configEntries.map(([key, value]) => ( diff --git a/web/src/app/admin/connector/[ccPairId]/page.tsx b/web/src/app/admin/connector/[ccPairId]/page.tsx index 7e613461bfc..ed19a868dff 100644 --- a/web/src/app/admin/connector/[ccPairId]/page.tsx +++ b/web/src/app/admin/connector/[ccPairId]/page.tsx @@ -65,7 +65,7 @@ function Main({ ccPairId }: { ccPairId: number }) { <>
-

{ccPair.name}

+

{ccPair.name}

@@ -80,7 +80,7 @@ function Main({ ccPairId }: { ccPairId: number }) {
Total Documents Indexed:{" "} - {totalDocsIndexed} + {totalDocsIndexed}
diff --git a/web/src/app/admin/connectors/bookstack/page.tsx b/web/src/app/admin/connectors/bookstack/page.tsx index f1e8e787402..b54e02813e1 100644 --- a/web/src/app/admin/connectors/bookstack/page.tsx +++ b/web/src/app/admin/connectors/bookstack/page.tsx @@ -83,7 +83,7 @@ const Main = () => { {bookstackCredential.credential_json?.bookstack_api_token_id}
) : ( - +

Create Connector

Press connect below to start the connection Linear. We pull the diff --git a/web/src/app/admin/connectors/loopio/page.tsx b/web/src/app/admin/connectors/loopio/page.tsx index 8a9b3c67702..4edb4231356 100644 --- a/web/src/app/admin/connectors/loopio/page.tsx +++ b/web/src/app/admin/connectors/loopio/page.tsx @@ -89,7 +89,7 @@ const Main = () => { {loopioCredential.credential_json?.loopio_client_token}