Merge pull request #149 from NordicSemiconductor/style/readback-warning

style: change readback protection warning styling

Author: boundlesscalm

src/Chart/Chart.tsx

@@ -84,14 +84,13 @@ export default () => {
         <div className="d-flex flex-column h-100">
             {device && noData && readbackProtection === 'protected' && (
                 <Alert variant="warning">
-                    <div className="d-flex align-items-center">
+                    <div className="d-flex align-items-center flex-wrap readback-protection-warning">
                         No data received. Unable to verify compatible firmware
                         because the selected device has readback protection
                         enabled.
                         <Button
                             onClick={() => dispatch(recoverHex(device))}
-                            variant="secondary"
-                            className="alert-program"
+                            variant="custom"
                         >
                             Program compatible firmware
                         </Button>

src/Chart/alert.scss

@@ -4,10 +4,30 @@
  * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
  */
 
+@use 'sass:color';
 @import '~pc-nrfconnect-shared/styles';
 
-.alert-program {
-    margin-left: 8px;
-    border: 0 !important;
-    color: $nordic-blue !important;
+.readback-protection-warning {
+    gap: 8px;
+
+    button {
+        border: 1px solid #b75300;
+        color: #b75300;
+        background-color: white;
+
+        &:hover:not([disabled]) {
+            color: #b75300;
+            background-color: white;
+            border-color: #b75300;
+        }
+
+        &:focus:not([disabled]) {
+            background-color: white;
+            border-color: #b75300 !important;
+        }
+
+        &:active:not([disabled]) {
+            background-color: color.scale(white, $lightness: -10%);
+        }
+    }
 }