From a29eec52bf41161d5a131f7424426ee5a4f1b8f5 Mon Sep 17 00:00:00 2001
From: NguyenTranHoangSym <nguyen.tranhoang@symphony.com>
Date: Fri, 18 Nov 2022 14:05:09 +0700
Subject: [PATCH] SDA-3959: Fixing some UI css bugs

---
 spec/__snapshots__/menu-button.spec.tsx.snap |  2 +-
 src/renderer/components/menu-button.tsx      |  4 +--
 src/renderer/styles/snipping-tool.less       | 28 ++++++++++++++++----
 src/renderer/styles/theme.less               |  2 ++
 4 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/spec/__snapshots__/menu-button.spec.tsx.snap b/spec/__snapshots__/menu-button.spec.tsx.snap
index 14d45d47..f838706d 100644
--- a/spec/__snapshots__/menu-button.spec.tsx.snap
+++ b/spec/__snapshots__/menu-button.spec.tsx.snap
@@ -6,7 +6,7 @@ exports[`Menu Button should show all elements 1`] = `
     className="menu-button-wrapper"
   >
     <button
-      className="menu-button "
+      className="menu-button"
       data-testid="undefined_MENU_BUTTON"
       onClick={[Function]}
     >
diff --git a/src/renderer/components/menu-button.tsx b/src/renderer/components/menu-button.tsx
index eb8f20a8..065476aa 100644
--- a/src/renderer/components/menu-button.tsx
+++ b/src/renderer/components/menu-button.tsx
@@ -88,15 +88,13 @@ const MenuButton: React.FunctionComponent<IMenuButtonProps> = ({
     });
   };
 
-  const focusCls = isDisplay ? 'menu-button-focus' : '';
-
   //#endregion
 
   return (
     <>
       <div className='menu-button-wrapper'>
         <button
-          className={`menu-button ${focusCls}`}
+          className={`menu-button`}
           onClick={onClickMenuButton}
           data-testid={testId.menu}
           ref={menuButtonRef}
diff --git a/src/renderer/styles/snipping-tool.less b/src/renderer/styles/snipping-tool.less
index 282c54fa..391b9a2b 100644
--- a/src/renderer/styles/snipping-tool.less
+++ b/src/renderer/styles/snipping-tool.less
@@ -139,6 +139,10 @@ body.using-mouse :focus {
     }
 
     .add-to-chat-button:hover {
+      background-color: @electricity-ui-40;
+    }
+
+    .add-to-chat-button:focus {
       background-color: @electricity-ui-60;
     }
 
@@ -212,11 +216,11 @@ body.using-mouse :focus {
   cursor: pointer;
 }
 
-.menu-button:focus {
-  background: @electricity-ui-60;
+.menu-button:hover {
+  background: @electricity-ui-40;
 }
 
-.menu-button-focus {
+.menu-button:focus {
   background: @electricity-ui-60;
 }
 
@@ -231,9 +235,9 @@ body.using-mouse :focus {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  justify-content: space-between;
-  padding: 14px 16px;
+  justify-content: center;
   position: absolute;
+  padding-left: 0px;
   width: 143px;
   min-height: 80px;
   background: @vanilla-white;
@@ -261,6 +265,20 @@ body.using-mouse :focus {
   align-items: center;
   list-style-type: none;
   width: 100%;
+  box-sizing: border-box;
+  padding: 12px 14px;
+}
+
+.list-item:hover {
+  color: @vanilla-white;
+  background-color: @graphite-60;
+  border-radius: 8px;
+}
+
+.list-item:focus {
+  color: @vanilla-white;
+  background-color: @graphite-60;
+  border-radius: 8px;
 }
 
 .general-font:lang(ja-JP) {
diff --git a/src/renderer/styles/theme.less b/src/renderer/styles/theme.less
index 46ccf9a8..95a385e9 100644
--- a/src/renderer/styles/theme.less
+++ b/src/renderer/styles/theme.less
@@ -8,6 +8,7 @@
 // Color palette
 @electricity-ui-05: #e9f2f9;
 @electricity-ui-50: #0277d6;
+@electricity-ui-40: #2996fd;
 @electricity-ui-30: #6eb9fd;
 @electricity-ui-60: #27588e;
 
@@ -18,5 +19,6 @@
 @graphite-40: #8f959e;
 @graphite-90: #141618;
 @graphite-50: #717681;
+@graphite-60: #52565e;
 
 @vanilla-white: #fff;