Merge pull request #505 from MauriceNino/feature/dashdot-visual-changes

data/constants.ts

@@ -1,2 +1,2 @@
 export const REPO_URL = 'ajnart/homarr';
-export const CURRENT_VERSION = 'v0.10.4';
+export const CURRENT_VERSION = 'v0.10.5';

package.json

@@ -1,6 +1,6 @@
 {
   "name": "homarr",
-  "version": "0.10.4",
+  "version": "0.10.5",
   "description": "Homarr - A homepage for your server.",
   "license": "MIT",
   "repository": {

src/modules/dashdot/DashdotModule.tsx

@@ -38,7 +38,7 @@ export const DashdotModule = asModule({
   id: 'dashdot',
 });
 
-const useStyles = createStyles((theme, _params) => ({
+const useStyles = createStyles((theme, _params, getRef) => ({
   heading: {
     marginTop: 0,
     marginBottom: 10,
@@ -73,6 +73,19 @@ const useStyles = createStyles((theme, _params) => ({
     border: 'none',
     colorScheme: 'none',
   },
+  graphTitle: {
+    ref: getRef('graphTitle'),
+    position: 'absolute',
+    right: 0,
+    opacity: 0,
+    transition: 'opacity .1s ease-in-out',
+    pointerEvents: 'none',
+  },
+  graphStack: {
+    [`&:hover .${getRef('graphTitle')}`]: {
+      opacity: 0.5,
+    },
+  },
 }));
 
 const bpsPrettyPrint = (bits?: number) =>
@@ -223,6 +236,7 @@ export function DashdotComponent() {
 
           {graphs.map((graph) => (
             <Stack
+              className={classes.graphStack}
               style={
                 isCompact
                   ? {
@@ -232,7 +246,7 @@ export function DashdotComponent() {
                   : undefined
               }
             >
-              <Title style={{ position: 'absolute', right: 0 }} order={4} mt={10} mr={25}>
+              <Title className={classes.graphTitle} order={4} mt={10} mr={25}>
                 {graph.name}
               </Title>
               <iframe
@@ -250,6 +264,7 @@ export function DashdotComponent() {
                         .join('&')}`
                     : ''
                 }`}
+                allowTransparency
               />
             </Stack>
           ))}