SDA-3959: Fixing some UI css bugs

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]}
     >

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}

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) {

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;