From 7e1fa3c8edf389f0e1379ea018c7fa114bef929c Mon Sep 17 00:00:00 2001
From: Marco van Dijk <marco@stronk.rocks>
Date: Fri, 22 Apr 2022 21:35:30 +0200
Subject: [PATCH] color changes

---
 src/components/MonthlyGraphs.js |  2 ++
 src/pages/MonthlyStats.js       |  2 ++
 src/pages/stats.js              | 25 +++++++++++++++++++------
 3 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/src/components/MonthlyGraphs.js b/src/components/MonthlyGraphs.js
index 47e1283..f0b6b88 100644
--- a/src/components/MonthlyGraphs.js
+++ b/src/components/MonthlyGraphs.js
@@ -404,6 +404,7 @@ const MonthlyGraphs = (obj) => {
                 border: 'none',
                 '&:hover': {
                   color: 'black',
+                  backgroundColor: 'rgba(56, 56, 56, 0.2)',
                   border: 'none'
                 },
                 '&': {
@@ -416,6 +417,7 @@ const MonthlyGraphs = (obj) => {
                 border: 'none',
                 '&:hover': {
                   color: 'black',
+                  backgroundColor: 'rgba(56, 56, 56, 0.2)',
                   border: 'none'
                 },
                 '&': {
diff --git a/src/pages/MonthlyStats.js b/src/pages/MonthlyStats.js
index c3bbebd..17e4a61 100644
--- a/src/pages/MonthlyStats.js
+++ b/src/pages/MonthlyStats.js
@@ -27,6 +27,7 @@ const MonthlyStats = (obj) => {
               border: 'none',
               '&:hover': {
                 color: 'black',
+                backgroundColor: 'rgba(56, 56, 56, 0.2)',
                 border: 'none'
               },
               '&': {
@@ -39,6 +40,7 @@ const MonthlyStats = (obj) => {
               border: 'none',
               '&:hover': {
                 color: 'black',
+                backgroundColor: 'rgba(56, 56, 56, 0.2)',
                 border: 'none'
               },
               '&': {
diff --git a/src/pages/stats.js b/src/pages/stats.js
index 5c20322..2be569e 100644
--- a/src/pages/stats.js
+++ b/src/pages/stats.js
@@ -37,19 +37,21 @@ const Stats = (obj) => {
                     <div className="overflow-content" style={{ padding: 0 }}>
                       <div className="flexContainer forceWrap" >
                         <Accordion initialItem={0} className="stroke"
-                          style={{ width: '100%', alignItems: 'stretch' }}
+                          style={{
+                            width: '100%', alignItems: 'stretch'
+                          }}
                           styles={{
                             item: {
                               padding: 0, width: '100%', alignItems: 'stretch',
                               color: 'black',
-                              border: 'none',
+                              border: '1px solid rgba(56, 56, 56, 0.9)',
                               '&:hover': {
                                 color: 'black',
-                                border: 'none'
+                                border: '1px solid rgba(56, 56, 56, 0.9)',
                               },
                               '&': {
                                 color: 'black',
-                                border: 'none'
+                                border: '1px solid rgba(56, 56, 56, 0.9)',
                               }
                             },
                             itemOpened: { padding: 0, width: '100%', alignItems: 'stretch' },
@@ -61,7 +63,18 @@ const Stats = (obj) => {
                               color: 'rgba(218, 218, 218, 0.9)',
                               padding: 0, margin: 0, height: '100%',
                               backgroundColor: 'rgba(56, 56, 56, 0.8)',
-                              boxShadow: 'inset 3px 3px 12px 2px rgba(62, 62, 104, 0.05)'
+                              boxShadow: 'inset 3px 3px 12px 2px rgba(62, 62, 104, 0.05)',
+                              color: 'black',
+                              border: 'none',
+                              '&:hover': {
+                                color: 'black',
+                                backgroundColor: 'rgba(56, 56, 56, 0.9)',
+                              },
+                              '&': {
+                                color: 'black',
+                                backgroundColor: 'rgba(56, 56, 56, 0.8)',
+                                border: 'none',
+                              }
                             },
                             label: {
                               color: 'rgba(218, 218, 218, 0.9)',
@@ -70,7 +83,7 @@ const Stats = (obj) => {
                               boxShadow: 'inset 3px 3px 12px 2px rgba(62, 62, 104, 0.05)'
                             },
                             icon: {
-                              padding: 0, margin: 0,
+                              padding: '0.2em', margin: '0.2em',
                             },
                             content: {
                               padding: 0, alignItems: 'stretch', width: '100%', height: '100%',