From fec8b9e13c9a0e7a0acb04994c965a3dd10eaa2c Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Mon, 16 May 2022 17:53:42 +0200
Subject: [PATCH] fix(ui): fix clipping bg on hover, fix side menu header

---
 .../components/Dashboard/SideMenu/SideMenuHeader.js   |  2 +-
 .../components/Dashboard/SideMenu/SideMenuSection.js  | 10 +++++-----
 .../app/components/Errors/SideMenu/SideMenuHeader.js  |  2 +-
 frontend/app/components/Modal/index.tsx               |  2 +-
 frontend/app/components/ui/ItemMenu/ItemMenu.js       |  4 ++--
 .../components/ui/SideMenuHeader/SideMenuHeader.tsx   | 11 +++++++----
 6 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/frontend/app/components/Dashboard/SideMenu/SideMenuHeader.js b/frontend/app/components/Dashboard/SideMenu/SideMenuHeader.js
index 7f237263a..7be18b006 100644
--- a/frontend/app/components/Dashboard/SideMenu/SideMenuHeader.js
+++ b/frontend/app/components/Dashboard/SideMenu/SideMenuHeader.js
@@ -10,4 +10,4 @@ function SideMenuHeader({ text, className }) {
 }
 
 SideMenuHeader.displayName = "SideMenuHeader";
-export default SideMenuHeader;
\ No newline at end of file
+export default SideMenuHeader;
diff --git a/frontend/app/components/Dashboard/SideMenu/SideMenuSection.js b/frontend/app/components/Dashboard/SideMenu/SideMenuSection.js
index 494ce7128..338094107 100644
--- a/frontend/app/components/Dashboard/SideMenu/SideMenuSection.js
+++ b/frontend/app/components/Dashboard/SideMenu/SideMenuSection.js
@@ -7,13 +7,13 @@ import { NavLink } from 'react-router-dom';
 import { withSiteId } from 'App/routes';
 import CustomMetrics from 'Shared/CustomMetrics';
 
-function SideMenuSection({ title, items, onItemClick, setShowAlerts, siteId }) {
+function SideMenuSection({ title, items, onItemClick, setShowAlerts, siteId, activeSection }) {
 	return (
 		<>
 			<SideMenuHeader className="mb-4" text={ title }/>
 		  { items.filter(i => i.section === 'metrics').map(item =>
 		      <SideMenuitem
-		      	key={ item.key }		      	
+		      	key={ item.key }
 		        active={ item.active }
 		        title={ item.label }
 		        iconName={ item.icon }
@@ -28,10 +28,10 @@ function SideMenuSection({ title, items, onItemClick, setShowAlerts, siteId }) {
 					title="Manage Alerts"
 					iconName="bell-plus"
 					onClick={() => setShowAlerts(true)}
-				/>				
+				/>
 			</div>
 			<div className={stl.divider} />
-			<div className="my-3">		
+			<div className="my-3">
 				<CustomMetrics />
 			</div>
 		</>
@@ -42,4 +42,4 @@ SideMenuSection.displayName = "SideMenuSection";
 
 export default connect(state => ({
 	siteId: state.getIn([ 'site', 'siteId' ])
-}), { setShowAlerts })(SideMenuSection);
\ No newline at end of file
+}), { setShowAlerts })(SideMenuSection);
diff --git a/frontend/app/components/Errors/SideMenu/SideMenuHeader.js b/frontend/app/components/Errors/SideMenu/SideMenuHeader.js
index 7f237263a..7be18b006 100644
--- a/frontend/app/components/Errors/SideMenu/SideMenuHeader.js
+++ b/frontend/app/components/Errors/SideMenu/SideMenuHeader.js
@@ -10,4 +10,4 @@ function SideMenuHeader({ text, className }) {
 }
 
 SideMenuHeader.displayName = "SideMenuHeader";
-export default SideMenuHeader;
\ No newline at end of file
+export default SideMenuHeader;
diff --git a/frontend/app/components/Modal/index.tsx b/frontend/app/components/Modal/index.tsx
index 339a79fbd..dba7d0c08 100644
--- a/frontend/app/components/Modal/index.tsx
+++ b/frontend/app/components/Modal/index.tsx
@@ -54,4 +54,4 @@ export class ModalProvider extends Component {
 
 export const ModalConsumer = ModalContext.Consumer;
 
-export const useModal = () => React.useContext(ModalContext);
\ No newline at end of file
+export const useModal = () => React.useContext(ModalContext);
diff --git a/frontend/app/components/ui/ItemMenu/ItemMenu.js b/frontend/app/components/ui/ItemMenu/ItemMenu.js
index 450cd7fc7..422344377 100644
--- a/frontend/app/components/ui/ItemMenu/ItemMenu.js
+++ b/frontend/app/components/ui/ItemMenu/ItemMenu.js
@@ -26,7 +26,7 @@ export default class ItemMenu extends React.PureComponent {
 
     return (
       <div className={ styles.wrapper }>
-        <OutsideClickDetectingDiv 
+        <OutsideClickDetectingDiv
           onClickOutside={ this.closeMenu }
         >
           <div
@@ -36,7 +36,7 @@ export default class ItemMenu extends React.PureComponent {
             {label && <span className="mr-1 color-gray-medium ">{label}</span>}
             <div
               ref={ (ref) => { this.menuBtnRef = ref; } }
-              className={cn("rounded-full flex items-center justify-center hover:bg-gray-light", { 'bg-gray-light' : displayed, "w-10 h-10" : !label })}
+              className={cn("rounded-full flex items-center justify-center", { 'bg-gray-light' : displayed, "w-10 h-10" : !label })}
               role="button"
             >
               <Icon name="ellipsis-v" size="16" />
diff --git a/frontend/app/components/ui/SideMenuHeader/SideMenuHeader.tsx b/frontend/app/components/ui/SideMenuHeader/SideMenuHeader.tsx
index 2a5ccd6fa..25545ba32 100644
--- a/frontend/app/components/ui/SideMenuHeader/SideMenuHeader.tsx
+++ b/frontend/app/components/ui/SideMenuHeader/SideMenuHeader.tsx
@@ -3,12 +3,15 @@ import cn from 'classnames';
 import stl from './sideMenuHeader.css';
 
 function SideMenuHeader(props) {
-  const { text, className } = props;
+  const { text, className, button } = props;
 	return (
-    <div className={ cn(className, stl.label, "uppercase color-gray") }>
-      { text }
+    <div className={cn(className, 'flex items-center')}>
+      <div className={ cn(stl.label, "uppercase color-gray") }>
+        { text }
+      </div>
+      <div>{button}</div>
     </div>
 	)
 }
 
-export default SideMenuHeader;
\ No newline at end of file
+export default SideMenuHeader;