From 6a1892ab729560b277b39a3e6b3cf778ccb952f8 Mon Sep 17 00:00:00 2001
From: Francesco Spissu <f.spissu@arduino.cc>
Date: Wed, 6 Jul 2022 11:11:25 +0200
Subject: [PATCH 1/5] update button style

---
 src/index.scss | 56 ++++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 47 insertions(+), 9 deletions(-)

diff --git a/src/index.scss b/src/index.scss
index bd86253..dba19e9 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -104,7 +104,7 @@ body {
     }
 
     .message-to-board-send-button {
-      width: 45px;
+      margin-left: 6px;
     }
   }
 
@@ -224,7 +224,6 @@ body {
       }
 
       .pause-button {
-        width: 47px;
         text-align: center;
       }
 
@@ -362,17 +361,56 @@ input[type="text"]{
   color: #7F8C8D !important;
 }
 
+.dark {
+  button {
+    background-color: $teal1;
+    color: $onyx;
+
+    &:hover {
+      background-color: $teal0;
+    }
+    
+    &:active {
+      box-shadow: 0 0 0 2px $fog;
+    }
+  }
+}
+
 button {
-  background: #B9C7C9;
-  border: 1px solid #E1E1E1;
-  box-sizing: border-box;
-  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
-  border-radius: 1px;
+  background-color: $teal3;
   color: $white;
-  padding: 6px 5px;
+  align-items: center;
+  display: flex;
+  font-family: 'Open Sans',sans-serif;
+  font-style: normal;
+  font-weight: 700;  
+  font-size: 14px;
+  justify-content: center;
   cursor: pointer;
+  letter-spacing: .01em;
+  line-height: 23.8px;
+  outline: none;
+  padding: 0 16px;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  border-width: 2px;
+  border-radius: 32px;
+  text-transform: uppercase;
+  transition: none;
+  box-shadow: none;
+  border-color: transparent;
 
   &[disabled] {
     opacity: 0.5;
+    pointer-events: none;
   }
-}
\ No newline at end of file
+
+  &:hover {
+    background-color: $teal5;
+  }
+
+  &:active {
+     box-shadow: 0 0 0 2px $teal0;
+  }
+}

From 4e4112d984b9511bac21d2b01734a9c4fa0f20c4 Mon Sep 17 00:00:00 2001
From: Francesco Spissu <f.spissu@arduino.cc>
Date: Wed, 6 Jul 2022 11:51:58 +0200
Subject: [PATCH 2/5] restore pause button width

---
 src/index.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/index.scss b/src/index.scss
index dba19e9..ae54141 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -104,6 +104,7 @@ body {
     }
 
     .message-to-board-send-button {
+      width: 47px;
       margin-left: 6px;
     }
   }

From e05e381ea71b6202f08138c4e140066ae97e2f72 Mon Sep 17 00:00:00 2001
From: Francesco Spissu <f.spissu@arduino.cc>
Date: Wed, 6 Jul 2022 12:06:21 +0200
Subject: [PATCH 3/5] restore buttons width

---
 src/index.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/index.scss b/src/index.scss
index ae54141..ce9a6e7 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -104,7 +104,6 @@ body {
     }
 
     .message-to-board-send-button {
-      width: 47px;
       margin-left: 6px;
     }
   }
@@ -225,6 +224,7 @@ body {
       }
 
       .pause-button {
+        width: 75px;
         text-align: center;
       }
 

From 7273d521e54e1831842da99304a61a24534c4a5e Mon Sep 17 00:00:00 2001
From: Francesco Spissu <f.spissu@arduino.cc>
Date: Wed, 6 Jul 2022 12:32:29 +0200
Subject: [PATCH 4/5] stop button red bg

---
 src/Legend.tsx | 2 +-
 src/index.scss | 8 ++++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/Legend.tsx b/src/Legend.tsx
index 5893c36..5308ac1 100644
--- a/src/Legend.tsx
+++ b/src/Legend.tsx
@@ -158,7 +158,7 @@ export function Legend({
         </label>
         <button
           disabled={!config?.monitorUISettings?.connected}
-          className="pause-button"
+          className={`pause-button ${pause ? "paused" : ""}`}
           title={
             config?.monitorUISettings?.connected
               ? undefined
diff --git a/src/index.scss b/src/index.scss
index ce9a6e7..8df623d 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -228,6 +228,14 @@ body {
         text-align: center;
       }
 
+      .pause-button:not(.paused) {
+        background-color: $notifyerror;
+
+        &:hover {
+          background-color: darken($notifyerror, 10);
+        }
+      }
+
       .clear-button {
         border: none;
         background: none;

From 2e175f8fa7ec8e62e4180a47148b837882f73dc2 Mon Sep 17 00:00:00 2001
From: Francesco Spissu <f.spissu@arduino.cc>
Date: Wed, 6 Jul 2022 13:03:33 +0200
Subject: [PATCH 5/5] using classnames

---
 src/Legend.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/Legend.tsx b/src/Legend.tsx
index 5308ac1..c5a1769 100644
--- a/src/Legend.tsx
+++ b/src/Legend.tsx
@@ -4,6 +4,7 @@ import { LegendItem } from "./LegendItem";
 import { MonitorSettings, PluggableMonitor } from "./utils";
 import { Scrollbars } from "react-custom-scrollbars";
 import Switch from "react-switch";
+import classNames from "classnames";
 
 export function Legend({
   chartRef,
@@ -158,7 +159,7 @@ export function Legend({
         </label>
         <button
           disabled={!config?.monitorUISettings?.connected}
-          className={`pause-button ${pause ? "paused" : ""}`}
+          className={classNames("pause-button", { paused: pause })}
           title={
             config?.monitorUISettings?.connected
               ? undefined