From 2519f762672270aa57b4c9ed34b278708588e18a Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Tue, 17 May 2022 12:48:35 +0300
Subject: [PATCH] Using accent color directly from active theme

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../update-button/styles.module.scss          | 39 +++++++++++--------
 1 file changed, 22 insertions(+), 17 deletions(-)

diff --git a/src/renderer/components/update-button/styles.module.scss b/src/renderer/components/update-button/styles.module.scss
index e2b3041b52..ad4d39a7dd 100644
--- a/src/renderer/components/update-button/styles.module.scss
+++ b/src/renderer/components/update-button/styles.module.scss
@@ -4,28 +4,38 @@
  */
 
 .updateButton {
-  --active-color-hsl: 122deg 39% 49%;
-  --active-color: hsl(var(--active-color-hsl));
+  --accent-color: var(--colorOk);
 
-  border: 1px solid var(--active-color);
+  border: 1px solid var(--accent-color);
   border-radius: 4px;
-  background: hsl(var(--active-color-hsl) / 15%);
-  color: var(--active-color);
+  color: var(--accent-color);
   display: flex;
   align-items: center;
   padding: 4px 8px;
-  gap: 8px;
+  gap: 6px;
   cursor: default;
-  transition: background-color 0.1s;
+  position: relative;
 
-  &:hover {
-    background: hsl(var(--active-color-hsl) / 5%);
+  &:hover::before{
+    opacity: 0.25;
   }
 
   &:focus-visible {
     box-shadow: 0 0 0 2px var(--blue);
     border-color: transparent;
   }
+
+  &::before {
+    content: " ";
+    position: absolute;
+    background: var(--accent-color);
+    width: 100%;
+    height: 100%;
+    left: 0;
+    opacity: 0.15;
+    z-index: -1;
+    transition: opacity 0.1s;
+  }
 }
 
 .icon {
@@ -33,15 +43,10 @@
   height: 16px;
 }
 
-.warningHigh {
-  --active-color-hsl: 0deg 76% 62%;
-}
-
 .warningMedium {
-  --active-color-hsl: 36deg 100% 50%;
+  --accent-color: var(--colorWarning);
 }
 
-:global(.theme-light) .warningMedium {
-  // Making medium color a bit darker for light theme
-  --active-color-hsl: 36deg 100% 46%;
+.warningHigh {
+  --accent-color: var(--colorSoftError);
 }