From 389c2f5d55c832361133e605f51f0a1e1b51baf0 Mon Sep 17 00:00:00 2001
From: Moritz Heckmann <moritz.heckmann@datavisyn.io>
Date: Tue, 10 Oct 2023 14:01:56 +0200
Subject: [PATCH] added import

---
 src/app/VisynApp.tsx   |  2 ++
 src/demo/MainApp.tsx   | 18 +++++++++++++-----
 src/vis/Vis.module.css |  2 +-
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/app/VisynApp.tsx b/src/app/VisynApp.tsx
index 6ee2bd689..6dbb11143 100644
--- a/src/app/VisynApp.tsx
+++ b/src/app/VisynApp.tsx
@@ -5,6 +5,8 @@ import { useVisynAppContext } from './VisynAppContext';
 import { VisynHeader } from './header/VisynHeader';
 import { VisynLoginMenu } from './login/VisynLoginMenu';
 
+import '@mantine/core/styles.css';
+
 /**
  *
  * @param header Optional custom header to be passed to the AppShell. If not provided, will use an empty VisynHeader.
diff --git a/src/demo/MainApp.tsx b/src/demo/MainApp.tsx
index 5caaea12a..bb5e29225 100644
--- a/src/demo/MainApp.tsx
+++ b/src/demo/MainApp.tsx
@@ -1,19 +1,16 @@
-import { Box, Button, Loader, Select, SimpleGrid, Stack, Text } from '@mantine/core';
-import '@mantine/core/styles.css';
+import { Box, Loader, Select, SimpleGrid, Stack, Text } from '@mantine/core';
 import * as React from 'react';
 import { VisynApp, VisynHeader, useVisynAppContext } from '../app';
 import { VisynRanking } from '../ranking';
 import { IBuiltVisynRanking } from '../ranking/EagerVisynRanking';
 import { BaseVisConfig, ENumericalColorScaleType, EScatterSelectSettings, ESupportedPlotlyVis, Vis } from '../vis';
+import classes from '../vis/Vis.module.css';
 import { IScatterConfig } from '../vis/scatter/interfaces';
 import { fetchIrisData } from '../vis/stories/Iris.stories';
 import { iris } from '../vis/stories/irisData';
 import { MyNumberScore, MyStringScore } from './scoresUtils';
-import classes from '../vis/Vis.module.css';
 
 export function MainApp() {
-  
-  
   const { user } = useVisynAppContext();
   const [visConfig, setVisConfig] = React.useState<BaseVisConfig>({
     type: ESupportedPlotlyVis.SCATTER,
@@ -88,6 +85,17 @@ export function MainApp() {
             />
           </Stack>
 
+          <Box
+            style={
+              {
+                '--my-hover': 'red',
+              } as React.CSSProperties
+            }
+            className={classes.test}
+          >
+            Test
+          </Box>
+
           <Vis
             columns={columns}
             showSidebarDefault
diff --git a/src/vis/Vis.module.css b/src/vis/Vis.module.css
index 8b3eb7c4e..29115e59e 100644
--- a/src/vis/Vis.module.css
+++ b/src/vis/Vis.module.css
@@ -25,7 +25,7 @@
     }
 
     &:hover {
-        background: black;
+        background: var(--my-hover);
     }
 }