diff --git a/src/datasource/components/Logs/styles.ts b/src/datasource/components/Logs/styles.ts index ff34949..d523b10 100644 --- a/src/datasource/components/Logs/styles.ts +++ b/src/datasource/components/Logs/styles.ts @@ -1,7 +1,7 @@ -export const DARK_THEME_BACKGROUND = ''; +export const DARK_THEME_BACKGROUND = '##181b1f'; export const DARK_THEME_HIGHLIGHTED_BACKGROUND = '#343741' -export const LIGHT_THEME_BACKGROUND = '' +export const LIGHT_THEME_BACKGROUND = '#FFFFFF' export const LIGHT_THEME_HIGHLIGHTED_BACKGROUND = '#E6F1FA' export const LIGHT_THEME_OUTLINE = '1px solid rgba(36, 41, 46, 0.12)'; export const DARK_THEME_OUTLINE = '1px solid rgba(204, 204, 220, 0.07)'; diff --git a/src/pages/explore.tsx b/src/pages/explore.tsx index c53268e..492ab61 100644 --- a/src/pages/explore.tsx +++ b/src/pages/explore.tsx @@ -41,7 +41,7 @@ import { Field, Log } from 'datasource/types'; import FieldValueFrequency from '../datasource/components/FieldValueFrequency'; import LogsView from 'datasource/components/Logs/LogsView'; import { FixedSizeList as List } from 'react-window' -import { DARK_THEME_HIGHLIGHTED_BACKGROUND, LIGHT_THEME_HIGHLIGHTED_BACKGROUND } from 'datasource/components/Logs/styles'; +import { DARK_THEME_BACKGROUND, DARK_THEME_HIGHLIGHTED_BACKGROUND, LIGHT_THEME_BACKGROUND, LIGHT_THEME_HIGHLIGHTED_BACKGROUND } from 'datasource/components/Logs/styles'; import AutoSizer from 'react-virtualized-auto-sizer' /** @@ -261,9 +261,9 @@ const KalDBFieldsList = (fields: Field[], topTenMostPopularFields: Field[]) => { const isTopTenMostPopularField = index <= data.topTenMostPopularFieldsLength; const isDarkTheme = useTheme2().isDark; - let fieldBackgroundColor = isDarkTheme ? '#181b1f' : '#FFFFFF'; + let fieldBackgroundColor = isDarkTheme ? DARK_THEME_BACKGROUND : LIGHT_THEME_BACKGROUND; if (isTopTenMostPopularField) { - fieldBackgroundColor= isDarkTheme ? '#343741' : '#e6f1fa'; + fieldBackgroundColor= isDarkTheme ? DARK_THEME_HIGHLIGHTED_BACKGROUND : LIGHT_THEME_HIGHLIGHTED_BACKGROUND; }