Fix colors per Thomas' request

Author: darkwing

ui/components/ui/actionable-message/actionable-message.js

@@ -8,12 +8,14 @@ const CLASSNAME_WARNING = 'actionable-message--warning';
 const CLASSNAME_DANGER = 'actionable-message--danger';
 const CLASSNAME_INFO = 'actionable-message--info';
 const CLASSNAME_WITH_RIGHT_BUTTON = 'actionable-message--with-right-button';
+const CLASSNAME_SUCCESS = 'actionable-message--success';
 
 const typeHash = {
   warning: CLASSNAME_WARNING,
   danger: CLASSNAME_DANGER,
   info: CLASSNAME_INFO,
   default: '',
+  success: CLASSNAME_SUCCESS,
 };
 
 export default function ActionableMessage({

ui/components/ui/actionable-message/index.scss

@@ -93,6 +93,15 @@
     }
   }
 
+  &--success {
+    border-color: #c3f4cb;
+    background-color: #eaf8ed;
+
+    .actionable-message__message {
+      color: var(--Black-100);
+    }
+  }
+
   &--danger {
     background: var(--Red-000);
     border: 1px solid var(--Red-300);

ui/pages/confirm-transaction-base/hardware-connectivity/hardware-connectivity-message.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import ActionableMessage from '../../../components/ui/actionable-message/actionable-message';
-import { DEVICE_NAMES, KEYRING_NAMES } from '../../../../shared/constants/hardware-wallets';
+import { KEYRING_NAMES } from '../../../../shared/constants/hardware-wallets';
 
 export default function HardwareConnectivityMessage({
   connected = false,
@@ -14,14 +14,14 @@ export default function HardwareConnectivityMessage({
   return (
     <div className="hardware-connectivity-message">
       <ActionableMessage
-        type={connected ? '' : 'warning'}
+        type={connected ? 'success' : 'warning'}
         message={
           connected ? (
             t('hardwareWalletConnectivityConnected', [KEYRING_NAMES.LEDGER])
           ) : (
             <>
               {t('hardwareWalletConnectivityNotConnected', [
-                DEVICE_NAMES.LEDGER,
+                KEYRING_NAMES.LEDGER,
               ])}{' '}
               <button
                 className="hardware-connectivity-message__button"

ui/pages/confirm-transaction-base/hardware-connectivity/index.scss

@@ -19,8 +19,22 @@
   }
 }
 
-.hardware-connectivity-message__button {
-  font-size: inherit;
-  background: unset;
-  padding: 0;
+.hardware-connectivity {
+  &-message {
+    margin-bottom: 24px;
+
+    .actionable-message {
+      padding: 8px;
+
+      &__message {
+        text-align: start;
+      }
+    }
+
+    &__button {
+      font-size: inherit;
+      background: unset;
+      padding: 0;
+    }
+  }
 }