From 453f9926c8c6237c6de1944d6777eb50d5b96d2e Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Tue, 17 May 2022 11:51:16 +0300
Subject: [PATCH] Using dropdown icon instead of sandwich

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../components/update-button/styles.module.scss       |  5 +++++
 .../components/update-button/update-button.tsx        | 11 +++++------
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/renderer/components/update-button/styles.module.scss b/src/renderer/components/update-button/styles.module.scss
index 1716b4fe31..e2b3041b52 100644
--- a/src/renderer/components/update-button/styles.module.scss
+++ b/src/renderer/components/update-button/styles.module.scss
@@ -28,6 +28,11 @@
   }
 }
 
+.icon {
+  width: 16px;
+  height: 16px;
+}
+
 .warningHigh {
   --active-color-hsl: 0deg 76% 62%;
 }
diff --git a/src/renderer/components/update-button/update-button.tsx b/src/renderer/components/update-button/update-button.tsx
index 7ac86194eb..646cc20f9b 100644
--- a/src/renderer/components/update-button/update-button.tsx
+++ b/src/renderer/components/update-button/update-button.tsx
@@ -10,6 +10,8 @@ import { Menu, MenuItem } from "../menu";
 import uniqueId from "lodash/uniqueId";
 import { noop } from "lodash";
 import { cssNames } from "../../utils";
+import type { IconProps } from "../icon";
+import { Icon } from "../icon";
 
 interface UpdateButtonProps {
   warningLevel?: "light" | "medium" | "high";
@@ -18,6 +20,7 @@ interface UpdateButtonProps {
 
 export function UpdateButton({ warningLevel, update }: UpdateButtonProps) {
   const id = uniqueId("update_button_");
+  const menuIconProps: IconProps = { material: "update", small: true };
   const [opened, setOpened] = useState(false);
 
   const onKeyDown = (evt: React.KeyboardEvent<HTMLButtonElement>) => {
@@ -48,11 +51,7 @@ export function UpdateButton({ warningLevel, update }: UpdateButtonProps) {
         onKeyDown={onKeyDown}
       >
         Update
-        <svg width="12" height="12" viewBox="0 0 12 12" shapeRendering="crispEdges">
-          <path fill="currentColor" d="M0,8.5h12v1H0V8.5z"/>
-          <path fill="currentColor" d="M0,5.5h12v1H0V5.5z"/>
-          <path fill="currentColor" d="M0,2.5h12v1H0V2.5z"/>
-        </svg>
+        <Icon material="arrow_drop_down" className={styles.icon}/>
       </button>
       <Menu
         usePortal
@@ -61,7 +60,7 @@ export function UpdateButton({ warningLevel, update }: UpdateButtonProps) {
         close={toggle}
         open={noop}
       >
-        <MenuItem icon="update" onClick={update} data-testid="update-lens-menu-item">
+        <MenuItem icon={menuIconProps} onClick={update} data-testid="update-lens-menu-item">
           Relaunch to Update Lens
         </MenuItem>
       </Menu>