Style fixes:

- Fix Cryptographic Keys "Key Components" diagram colors
- Fix TX Sender colors & spacing
- Fix DepositAuth table colors

content/_snippets/depositauth-semantics-table.html

@@ -142,28 +142,28 @@
   text-align: center;
 }
 .depauth-na {
-  background-color: #999;
+  background-color: var(--gray-dark);
 }
 .depauth-ok {
-  background-color: #afa;
+  background-color: var(--success);
+  color: black;
 }
 .depauth-no {
-  background-color: #faa;
+  background-color: var(--danger);
+  color: black;
 }
 .depauth-maybe {
-  background-color: #ffa;
+  background-color: var(--warning);
+  color: black;
 }
 .depauth-subtype {
   font-weight: normal;
   font-size: 8pt;
 }
 .depauth-spacer {
-  background-color: black;
+  background-color: var(--secondary);
   padding: 2px !important;
   font-size: 2px;
-}
-th.depauth-spacer {
-  border: 1px solid #dbdde2;
-  border-bottom-color: black;
+  border: 1px solid var(--secondary);
 }
 </style>

content/concepts/payment-system-basics/accounts/cryptographic-keys.md

@@ -21,7 +21,7 @@ A cryptographic key pair is a **private key** and a **public key** that are conn
 
 When dealing with the XRP Ledger, you may also use some related values such as a passphrase, seed, account ID, or address.
 
-[![Passphrase → Seed → Private Key → Public Key → Account ID ←→ Address](img/cryptographic-keys.svg)](img/cryptographic-keys.svg)
+{{ include_svg("img/cryptographic-keys.svg", "Diagram: Passphrase → Seed → Private Key → Public Key → Account ID ←→ Address") }}
 _Figure: A simplified view of the relationship between cryptographic key values._
 
 The passphrase, seed, and private key are **secrets**: if you know any of these values for an account, you can make valid signatures and you have full control over that account. If you own an account, be **very careful** with your account's secret information. If you don't have it, you can't use your account. If someone else can access it, they can take control of your account.

styles/_buttons.scss

@@ -1,3 +1,5 @@
+// Button styling --------------------------------------------------------------
+
 .btn, .content a.button {
   padding: 16px 24px;
   font-size: 14px;
@@ -8,6 +10,18 @@
   transition: 0.2s;
 }
 
+.form-group .btn {
+  // Fix spacing issues caused by default padding
+  padding: inherit;
+}
+
+.btn.disabled,
+button.disabled,
+.btn[disabled="disabled"],
+button[disabled="disabled"] {
+  cursor: not-allowed;
+}
+
 .btn-outline-secondary,
 .content a.button,
 .navbar-dark .navbar-nav .nav-link.btn-outline-secondary {
@@ -27,8 +41,6 @@
   color: $white;
 }
 
-/* Button styling ----------------------------------------------------------- */
-
 p + .readmore {
   margin-top: 12px;
 }

styles/_colors.scss

@@ -132,3 +132,9 @@ $input-box-shadow: inset 0 1px 1px rgba($primary, .075);
 $input-placeholder-color: $gray-200;
 $input-group-addon-bg: $gray-600;
 $input-group-addon-color: $white;
+
+$list-group-bg: $gray-900;
+$list-group-border-color: $gray-800;
+$list-group-disabled-color: $gray-200;
+
+$progress-bg: $gray-900;

styles/_dev-tools.scss

@@ -52,15 +52,23 @@
   width: 24px;height:24px;
 }
 
+#connection-status .card-body {
+  border-left: 0;
+}
+
 #connection-status-item.active {
-  background-color: #2BCB96; /* TODO: adjust this color */
-  border-color: #2BCB96; /* TODO: adjust this color */
+  background-color: $success;
+  border-color: $success;
 }
 
 #tx-sender-history ul {
   overflow: auto;
   height: 220px;
-  border: 1px solid rgba(0, 0, 0, 0.125)
+  border: 1px solid $gray-200;
+}
+
+#pp_progress small {
+  margin-top: .5rem; // Fix "Getting ready to send..." position
 }
 
 .page-tx-sender .input-group .form-control {
@@ -71,3 +79,18 @@
   max-width: 90vw !important;
   overflow: hidden;
 }
+
+.list-group-item-danger,
+#tx-sender-history .list-group-item-danger {
+  background-color: $magenta-300;
+  color: $black;
+
+  a {
+    color: $black;
+
+    &:hover {
+      color: $black;
+      text-decoration: underline;
+    }
+  }
+}

styles/_diagrams.scss

@@ -89,6 +89,10 @@
     g[fill="rgb(255,255,0)"] { // magenta-500 is our closest shade to pure red
       fill: $magenta-500;
     }
+    g[stroke="red"],
+    g[stroke="rgb(255,255,0)"] {
+      stroke: $magenta-500;
+    }
     g[fill="yellow"] + g text,
     g[fill="rgb(255,255,0)"] + g text { // On yellow notes, use black text
       fill: $black;