diff --git a/frontend/src/assets/Dashboard/TimeSeries.tsx b/frontend/src/assets/Dashboard/TimeSeries.tsx
index de50a3e512..439d99235b 100644
--- a/frontend/src/assets/Dashboard/TimeSeries.tsx
+++ b/frontend/src/assets/Dashboard/TimeSeries.tsx
@@ -1,35 +1,42 @@
import React from 'react';
-const TimeSeries = (): JSX.Element => (
-
+
+
+
);
+export interface TimeSeriesProps{
+ fillColor: React.CSSProperties['color'];
+}
+
+
export default TimeSeries;
diff --git a/frontend/src/assets/Dashboard/Value.tsx b/frontend/src/assets/Dashboard/Value.tsx
index 61bf672fa5..02a0dda6ca 100644
--- a/frontend/src/assets/Dashboard/Value.tsx
+++ b/frontend/src/assets/Dashboard/Value.tsx
@@ -1,18 +1,25 @@
import React from 'react';
-const Value = (): JSX.Element => (
-
-);
+const Value = (props: ValueProps): JSX.Element => {
+ return(
+
+
+
+)};
+
+interface ValueProps{
+ fillColor: React.CSSProperties['color'];
+}
export default Value;
diff --git a/frontend/src/container/NewDashboard/ComponentsSlider/index.tsx b/frontend/src/container/NewDashboard/ComponentsSlider/index.tsx
index 078851260e..2e1107abff 100644
--- a/frontend/src/container/NewDashboard/ComponentsSlider/index.tsx
+++ b/frontend/src/container/NewDashboard/ComponentsSlider/index.tsx
@@ -1,5 +1,8 @@
import React, { useCallback } from 'react';
+import { useSelector } from 'react-redux';
import { useHistory, useLocation } from 'react-router';
+import { AppState } from 'store/reducers';
+import AppReducer from 'types/reducer/app';
import { v4 } from 'uuid';
import menuItems, { ITEMS } from './menuItems';
@@ -22,7 +25,8 @@ const DashboardGraphSlider = (): JSX.Element => {
},
[push, pathname],
);
-
+ const { isDarkMode } = useSelector((state) => state.app);
+ const fillColor:React.CSSProperties['color'] = isDarkMode?"white" : "black";
return (
{menuItems.map(({ name, Icon, display }) => (
@@ -33,7 +37,7 @@ const DashboardGraphSlider = (): JSX.Element => {
key={name}
draggable
>
-
+
{display}
))}
diff --git a/frontend/src/container/NewDashboard/ComponentsSlider/menuItems.ts b/frontend/src/container/NewDashboard/ComponentsSlider/menuItems.ts
index ced78bb14d..458f8db062 100644
--- a/frontend/src/container/NewDashboard/ComponentsSlider/menuItems.ts
+++ b/frontend/src/container/NewDashboard/ComponentsSlider/menuItems.ts
@@ -1,5 +1,6 @@
import TimeSeries from 'assets/Dashboard/TimeSeries';
import ValueIcon from 'assets/Dashboard/Value';
+import { TimeSeriesProps as IconProps } from 'assets/Dashboard/TimeSeries';
const Items: ItemsProps[] = [
{
@@ -18,7 +19,7 @@ export type ITEMS = 'TIME_SERIES' | 'VALUE';
interface ItemsProps {
name: ITEMS;
- Icon: () => JSX.Element;
+ Icon: (props: IconProps) => JSX.Element;
display: string;
}