From 894b1ecdfe3fc248ba0bc44bf07e9ff1d9d7040b Mon Sep 17 00:00:00 2001
From: Aman-Maheshwari <amanmaheshwari816@gmail.com>
Date: Sun, 14 Nov 2021 21:06:41 +0530
Subject: [PATCH 1/3] added hover effect to message kebab menu

---
 .../client/imports/components/popover.css     | 17 ++++++++++
 app/ui-utils/client/lib/popover.html          | 33 ++++++++++---------
 2 files changed, 35 insertions(+), 15 deletions(-)

diff --git a/app/theme/client/imports/components/popover.css b/app/theme/client/imports/components/popover.css
index 807bdd7c88d21..733d1adbf7e6a 100644
--- a/app/theme/client/imports/components/popover.css
+++ b/app/theme/client/imports/components/popover.css
@@ -91,6 +91,22 @@
 		font-weight: 600;
 	}
 
+	&__wrapper {
+
+		padding-left: 16px ;
+				
+		&:hover {
+			border-radius: 2px;
+			background-color: #f7f8fa;
+		}
+
+	}
+
+	&__list {
+		margin-left: -16px;
+		width: 125%;
+	}
+
 	&__item {
 		display: flex;
 
@@ -109,6 +125,7 @@
 		font-size: var(--popover-item-text-size);
 		align-items: center;
 
+
 		&--alert {
 			color: var(--rc-color-error);
 
diff --git a/app/ui-utils/client/lib/popover.html b/app/ui-utils/client/lib/popover.html
index 588d9365be686..8daff7144ecff 100644
--- a/app/ui-utils/client/lib/popover.html
+++ b/app/ui-utils/client/lib/popover.html
@@ -13,21 +13,24 @@ <h3 class="rc-popover__title">{{group.title}}</h3>
 							<ul class="rc-popover__list">
 								{{#each item in group.items}}
 									{{# with item}}
-									<li data-qa="{{qa}}" class="rc-popover__item {{#if item.modifier}}rc-popover__item--{{item.modifier}}{{/if}}{{#if hasAction}} js-action{{/if}}" data-type={{item.type}} data-id={{item.id.toLowerCase}} data-href={{item.href}} data-sidenav={{item.sideNav}}>
-										{{#if item.icon}}
-											<span class="rc-popover__icon">
-												{{> icon block="rc-popover__icon-element" icon=item.icon }}
-											</span>
-										{{/if}}
-										{{#if item.name}}
-											<span class="rc-popover__item-text">{{item.name}}</span>
-										{{/if}}
-										{{#if item.select}}
-											<span class="rc-popover__input">
-												{{> selectDropdown title=item.selectTitle name=item.selectName options=item.selectOptions}}
-											</span>
-										{{/if}}
-									</li>
+									<div class="rc-popover__wrapper">
+										<li data-qa="{{qa}}" class="rc-popover__item {{#if item.modifier}}rc-popover__item--{{item.modifier}}{{/if}}{{#if hasAction}} js-action{{/if}}" data-type={{item.type}} data-id={{item.id.toLowerCase}} data-href={{item.href}} data-sidenav={{item.sideNav}}>
+											{{#if item.icon}}
+												<span class="rc-popover__icon">
+													{{> icon block="rc-popover__icon-element" icon=item.icon }}
+												</span>
+											{{/if}}
+											{{#if item.name}}
+												<span class="rc-popover__item-text">{{item.name}}</span>
+											{{/if}}
+											{{#if item.select}}
+												<span class="rc-popover__input">
+													{{> selectDropdown title=item.selectTitle name=item.selectName options=item.selectOptions}}
+												</span>
+											{{/if}}
+										</li>
+									</div>
+								
 									{{/with}}
 								{{/each}}
 							</ul>

From 5b6cee29a35e71e29fcab298e30f419c7b658bcc Mon Sep 17 00:00:00 2001
From: Aman-Maheshwari <amanmaheshwari816@gmail.com>
Date: Sun, 14 Nov 2021 21:37:03 +0530
Subject: [PATCH 2/3] fix stylelint errors

---
 app/theme/client/imports/components/popover.css | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/app/theme/client/imports/components/popover.css b/app/theme/client/imports/components/popover.css
index 733d1adbf7e6a..a110f111a1b2a 100644
--- a/app/theme/client/imports/components/popover.css
+++ b/app/theme/client/imports/components/popover.css
@@ -92,19 +92,17 @@
 	}
 
 	&__wrapper {
+		padding-left: 16px;
 
-		padding-left: 16px ;
-				
 		&:hover {
 			border-radius: 2px;
 			background-color: #f7f8fa;
 		}
-
 	}
 
 	&__list {
-		margin-left: -16px;
 		width: 125%;
+		margin-left: -16px;
 	}
 
 	&__item {
@@ -125,7 +123,6 @@
 		font-size: var(--popover-item-text-size);
 		align-items: center;
 
-
 		&--alert {
 			color: var(--rc-color-error);
 

From c15061c4a04ad9bca653935b8e17a5ae81f410d0 Mon Sep 17 00:00:00 2001
From: dougfabris <devfabris@gmail.com>
Date: Fri, 19 Nov 2021 19:54:36 -0300
Subject: [PATCH 3/3] fix: review

---
 .../client/imports/components/popover.css     | 26 +++++----------
 app/ui-utils/client/lib/popover.html          | 33 +++++++++----------
 2 files changed, 23 insertions(+), 36 deletions(-)

diff --git a/app/theme/client/imports/components/popover.css b/app/theme/client/imports/components/popover.css
index a110f111a1b2a..f1ac7ce254203 100644
--- a/app/theme/client/imports/components/popover.css
+++ b/app/theme/client/imports/components/popover.css
@@ -42,7 +42,7 @@
 
 		max-height: 70%;
 
-		padding: var(--popover-padding);
+		padding: var(--popover-padding) 0;
 
 		animation: dropdown-show 0.1s cubic-bezier(0.45, 0.05, 0.55, 0.95);
 
@@ -91,26 +91,12 @@
 		font-weight: 600;
 	}
 
-	&__wrapper {
-		padding-left: 16px;
-
-		&:hover {
-			border-radius: 2px;
-			background-color: #f7f8fa;
-		}
-	}
-
-	&__list {
-		width: 125%;
-		margin-left: -16px;
-	}
-
 	&__item {
 		display: flex;
 
 		width: 100%;
 
-		padding: 4px 0;
+		padding: 4px 12px;
 
 		cursor: pointer;
 
@@ -123,6 +109,10 @@
 		font-size: var(--popover-item-text-size);
 		align-items: center;
 
+		&:hover {
+			background-color: #f7f8fa;
+		}
+
 		&--alert {
 			color: var(--rc-color-error);
 
@@ -193,9 +183,9 @@
 	}
 
 	&__divider {
-		width: 100%;
+		width: 88%;
 		height: var(--popover-divider-height);
-		margin: 1rem 0;
+		margin: 1rem auto;
 
 		background: var(--popover-divider-color);
 
diff --git a/app/ui-utils/client/lib/popover.html b/app/ui-utils/client/lib/popover.html
index 8daff7144ecff..588d9365be686 100644
--- a/app/ui-utils/client/lib/popover.html
+++ b/app/ui-utils/client/lib/popover.html
@@ -13,24 +13,21 @@ <h3 class="rc-popover__title">{{group.title}}</h3>
 							<ul class="rc-popover__list">
 								{{#each item in group.items}}
 									{{# with item}}
-									<div class="rc-popover__wrapper">
-										<li data-qa="{{qa}}" class="rc-popover__item {{#if item.modifier}}rc-popover__item--{{item.modifier}}{{/if}}{{#if hasAction}} js-action{{/if}}" data-type={{item.type}} data-id={{item.id.toLowerCase}} data-href={{item.href}} data-sidenav={{item.sideNav}}>
-											{{#if item.icon}}
-												<span class="rc-popover__icon">
-													{{> icon block="rc-popover__icon-element" icon=item.icon }}
-												</span>
-											{{/if}}
-											{{#if item.name}}
-												<span class="rc-popover__item-text">{{item.name}}</span>
-											{{/if}}
-											{{#if item.select}}
-												<span class="rc-popover__input">
-													{{> selectDropdown title=item.selectTitle name=item.selectName options=item.selectOptions}}
-												</span>
-											{{/if}}
-										</li>
-									</div>
-								
+									<li data-qa="{{qa}}" class="rc-popover__item {{#if item.modifier}}rc-popover__item--{{item.modifier}}{{/if}}{{#if hasAction}} js-action{{/if}}" data-type={{item.type}} data-id={{item.id.toLowerCase}} data-href={{item.href}} data-sidenav={{item.sideNav}}>
+										{{#if item.icon}}
+											<span class="rc-popover__icon">
+												{{> icon block="rc-popover__icon-element" icon=item.icon }}
+											</span>
+										{{/if}}
+										{{#if item.name}}
+											<span class="rc-popover__item-text">{{item.name}}</span>
+										{{/if}}
+										{{#if item.select}}
+											<span class="rc-popover__input">
+												{{> selectDropdown title=item.selectTitle name=item.selectName options=item.selectOptions}}
+											</span>
+										{{/if}}
+									</li>
 									{{/with}}
 								{{/each}}
 							</ul>