From 3b4f8779b753d8b0026fb2f7e1ac148153ee9ade Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Thu, 12 May 2022 13:48:37 +0300
Subject: [PATCH] Default button styles

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../__snapshots__/update-button.test.tsx.snap | 27 ++++++++++++-------
 .../update-button/styles.module.scss          | 25 ++++++++++++++++-
 .../update-button/update-button.tsx           |  7 +++--
 3 files changed, 47 insertions(+), 12 deletions(-)

diff --git a/src/renderer/components/update-button/__tests__/__snapshots__/update-button.test.tsx.snap b/src/renderer/components/update-button/__tests__/__snapshots__/update-button.test.tsx.snap
index 8984ddd30e..a8528a7693 100644
--- a/src/renderer/components/update-button/__tests__/__snapshots__/update-button.test.tsx.snap
+++ b/src/renderer/components/update-button/__tests__/__snapshots__/update-button.test.tsx.snap
@@ -7,15 +7,24 @@ exports[`<UpdateButton/> should render if warning level prop passed 1`] = `
   id="update_button_2"
 >
   Update
-  <i
-    class="Icon material focusable"
+  <svg
+    height="12"
+    shape-rendering="crispEdges"
+    viewBox="0 0 12 12"
+    width="12"
   >
-    <span
-      class="icon"
-      data-icon-name="update"
-    >
-      update
-    </span>
-  </i>
+    <path
+      d="M0,8.5h12v1H0V8.5z"
+      fill="currentColor"
+    />
+    <path
+      d="M0,5.5h12v1H0V5.5z"
+      fill="currentColor"
+    />
+    <path
+      d="M0,2.5h12v1H0V2.5z"
+      fill="currentColor"
+    />
+  </svg>
 </button>
 `;
diff --git a/src/renderer/components/update-button/styles.module.scss b/src/renderer/components/update-button/styles.module.scss
index 70602aa0e2..8ef7732866 100644
--- a/src/renderer/components/update-button/styles.module.scss
+++ b/src/renderer/components/update-button/styles.module.scss
@@ -3,7 +3,30 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-.updateButton {}
+.updateButton {
+  --active-color-hsl: 122deg 39% 49%;
+  --active-color: hsl(var(--active-color-hsl));
+
+  border: 1px solid var(--active-color);
+  border-radius: 4px;
+  background: hsl(var(--active-color-hsl) / 15%);
+  color: var(--active-color);
+  display: flex;
+  align-items: center;
+  padding: 4px 8px;
+  gap: 8px;
+  cursor: default;
+  transition: background-color 0.1s;
+
+  &:hover {
+    background: hsl(var(--active-color-hsl) / 5%);
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 2px var(--blue);
+    border-color: transparent;
+  }
+}
 
 .warningHigh {}
 
diff --git a/src/renderer/components/update-button/update-button.tsx b/src/renderer/components/update-button/update-button.tsx
index b2042b2576..960695df46 100644
--- a/src/renderer/components/update-button/update-button.tsx
+++ b/src/renderer/components/update-button/update-button.tsx
@@ -6,7 +6,6 @@
 import styles from "./styles.module.scss";
 
 import React, { useState } from "react";
-import { Icon } from "../icon";
 import { Menu, MenuItem } from "../menu";
 import uniqueId from "lodash/uniqueId";
 import { noop } from "lodash";
@@ -48,7 +47,11 @@ export function UpdateButton({ warningLevel, update }: UpdateButtonProps) {
         onKeyDown={onKeyDown}
       >
         Update
-        <Icon material="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>
       </button>
       <Menu
         usePortal