From 7ba98e4359854adb2658207be8c8e64bbeeda730 Mon Sep 17 00:00:00 2001
From: Nickii Miaro <miaronkirote@gmail.com>
Date: Sat, 8 Jul 2023 02:26:05 +0300
Subject: [PATCH] fix: add login custom styles, removes style not in use
 (#2587)

* remove style not in use, add custom styling tokens

* fix account-item hover

---------

Co-authored-by: Gavin Barron <gavinbarron@microsoft.com>
---
 .../src/components/mgt-login/mgt-login.scss               | 8 ++++++--
 .../mgt-components/src/components/mgt-login/mgt-login.ts  | 3 ++-
 stories/components/login/login.styles.js                  | 3 ++-
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/mgt-components/src/components/mgt-login/mgt-login.scss b/packages/mgt-components/src/components/mgt-login/mgt-login.scss
index b8e2c95cdb..69a756437c 100644
--- a/packages/mgt-components/src/components/mgt-login/mgt-login.scss
+++ b/packages/mgt-components/src/components/mgt-login/mgt-login.scss
@@ -14,7 +14,9 @@ $signed-out-bg: padding-box linear-gradient(var(--neutral-fill-rest), var(--neut
 $signed-out-background: #{var(--login-signed-out-button-background, $signed-out-bg)};
 $signed-out-hover-background: #{var(--login-signed-out-button-hover-background, var(--neutral-fill-stealth-hover))};
 $login-popup-background-color: #{var(--login-popup-background-color, var(--neutral-layer-1))};
+$login-account-item-hover-bg-color: #{var(--login-account-item-hover-bg-color, var(--neutral-fill-stealth-hover))};
 $button-padding: var(--login-button-padding, 0);
+$login-flyout-command-text-color: #{var(--login-flyout-command-text-color, var(--accent-foreground-rest))};
 
 :host {
   .signed-in-person {
@@ -108,13 +110,15 @@ $button-padding: var(--login-button-padding, 0);
       list-style-type: none;
 
       &:hover {
-        background: var(--neutral-fill-stealth-hover);
+        background: $login-account-item-hover-bg-color;
+
+        --person-background-color: $login-account-item-hover-bg-color;
       }
     }
 
     .flyout {
       .flyout-command {
-        color: var(--accent-foreground-rest);
+        color: $login-flyout-command-text-color;
       }
 
       .popup {
diff --git a/packages/mgt-components/src/components/mgt-login/mgt-login.ts b/packages/mgt-components/src/components/mgt-login/mgt-login.ts
index 8055570145..51881e1ced 100644
--- a/packages/mgt-components/src/components/mgt-login/mgt-login.ts
+++ b/packages/mgt-components/src/components/mgt-login/mgt-login.ts
@@ -71,7 +71,6 @@ type PersonViewConfig = {
  * @cssprop --login-signed-out-button-text-color - {Color} the background color of the component when signed out.
  * @cssprop --login-button-padding - {Length} the padding of the button. Default is 0px.
  * @cssprop --login-popup-background-color - {Color} the background color of the popup.
- * @cssprop --login-popup-text-color - {Color} the color of the text in the popup.
  * @cssprop --login-popup-command-button-background-color - {Color} the color of the background to the popup command button.
  * @cssprop --login-popup-padding - {Length} the padding applied to the popup card. Default is 16px.
  * @cssprop --login-add-account-button-text-color - {Color} the color for the text and icon of the add account button.
@@ -80,6 +79,8 @@ type PersonViewConfig = {
  * @cssprop --login-command-button-text-color - {Color} the color for the text of the command button.
  * @cssprop --login-command-button-background-color - {Color} the color for the background of the command button.
  * @cssprop --login-command-button-hover-background-color - {Color} the color for the background of the command button on hovering.
+ * @cssprop --login-account-item-hover-bg-color - {Color} the background color of the account item on hover.
+ * @cssprop --login-flyout-command-text-color - {Color} the color for the text of the flyout command button.
  */
 @customElement('login')
 export class MgtLogin extends MgtTemplatedComponent {
diff --git a/stories/components/login/login.styles.js b/stories/components/login/login.styles.js
index dae56107f3..f9622cc39b 100644
--- a/stories/components/login/login.styles.js
+++ b/stories/components/login/login.styles.js
@@ -25,7 +25,6 @@ export const customCSSProperties = () => html`
     --login-signed-in-hover-background: green;
     --login-button-padding:5px;
     --login-popup-background-color: blue;
-    --login-popup-text-color: brown;
     --login-popup-command-button-background-color: orange;
     --login-popup-padding: 8px;
     --login-add-account-button-text-color: yellow;
@@ -34,6 +33,8 @@ export const customCSSProperties = () => html`
     --login-command-button-background-color: orange;
     --login-command-button-hover-background-color: purple;
     --login-command-button-text-color: black;
+    --login-account-item-hover-bg-color: black;
+    --login-flyout-command-text-color: maroon;
 
     /** person component tokens **/
     --person-line1-text-color: whitesmoke;