From 18c54a41054a65da8731b3c1961953449535bd6c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= <c.pronzola@live.fr>
Date: Sat, 26 Jun 2021 12:34:19 +0200
Subject: [PATCH] Add tooltips to eksplisit teks

---
 components/teks/teks-drawer.js | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/components/teks/teks-drawer.js b/components/teks/teks-drawer.js
index dddb227..92f7da7 100644
--- a/components/teks/teks-drawer.js
+++ b/components/teks/teks-drawer.js
@@ -15,7 +15,10 @@ import {
   IconButton,
   Box,
   useMediaQuery,
-  Snackbar
+  Snackbar,
+  Tooltip,
+  Zoom,
+  withStyles
 } from '@material-ui/core'
 
 import KeyboardBackspaceIcon from '@material-ui/icons/KeyboardBackspace'
@@ -165,6 +168,14 @@ const alignTeks = (langArray, isMobile) => {
   }
 }
 
+const ExplicitTooltip = withStyles(() => ({
+  tooltip: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    backgroundColor: 'rgba(245, 0, 87, 0.8)'
+  }
+}))(Tooltip)
+
 export default function TeksDrawer({teks, anTeks, komante}) {
   const [session] = useSession()
   const router = useRouter()
@@ -279,7 +290,9 @@ export default function TeksDrawer({teks, anTeks, komante}) {
               <Typography style={{marginTop: '0.8em'}} variant='h4'>
                 {anTeks.tit}
                 {anTeks.eksplisit && (
-                  <ExplicitIcon style={{marginLeft: 10}} color='secondary' />
+                  <ExplicitTooltip title='Explicit Lyrics' placement='bottom' TransitionComponent={Zoom}>
+                    <ExplicitIcon style={{marginLeft: 10}} color='secondary' />
+                  </ExplicitTooltip>
                 )}
                 {komante && (
                   <VweKomante komante={komante} teks={anTeks} />