Replace more hardcoded css

frontend/src/app/components/accelerate-preview/accelerate-fee-graph.component.scss

@@ -92,7 +92,7 @@
 
       &.target {
         .fill {
-          background: #653b9c;
+          background: var(--tertiary);
         }
         .fee {
           position: absolute;
@@ -114,7 +114,7 @@
         }
         &.active, &:hover {
           .fill {
-            background: #105fb0;
+            background: var(--primary);
           }
           .line {
             .fee-rate .label {

frontend/src/app/components/accelerate-preview/accelerate-preview.component.html

@@ -179,10 +179,10 @@
               <ng-container>
                 <tr class="group-first">
                   <td class="item">
-                    <b style="background-color: #105fb0;" class="p-1 pl-0">Maximum acceleration cost</b>
+                    <b style="background-color: var(--primary);" class="p-1 pl-0">Maximum acceleration cost</b>
                   </td>
                   <td class="amt">
-                    <span style="background-color: #105fb0" class="p-1 pl-0">
+                    <span style="background-color: var(--primary)" class="p-1 pl-0">
                       {{ maxCost | number }}
                     </span>
                   </td>

frontend/src/app/components/accelerate-preview/accelerate-preview.component.scss

@@ -1,6 +1,6 @@
 .fee-card {
   padding: 15px;
-  background-color: #1d1f31;
+  background-color: var(--bg);
 
   .feerate {
     display: flex;
@@ -23,7 +23,7 @@
 }
 
 .feerate.active {
-  background-color: #105fb0 !important;
+  background-color: var(--primary) !important;
   opacity: 1;
   border: 1px solid #007fff !important;
 }