dsadas

modules/fx-rates/assets/fx-rates.css

@@ -1,27 +1,36 @@
-#fx-rates-app {
-  padding: 1rem 0 2rem;
-}
-
-.fx-stack {
+#fx-rates-app,
+#fx-rates-currencies {
   display: grid;
-  gap: 1rem;
+  gap: 16px;
 }
 
-.fx-card {
-  background: var(--panel-bg, #fff);
-  border: 1px solid rgba(15, 23, 42, 0.12);
-  border-radius: 8px;
-  padding: 1rem;
+.fx-submenu-row {
+  display: flex;
+  gap: 14px;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
 }
 
-.fx-card h1,
-.fx-card h2 {
+.fx-section-head {
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+  align-items: flex-start;
+  flex-wrap: wrap;
+}
+
+.fx-section-head h2,
+.section-box h2,
+.card-box h2 {
   margin: 0 0 0.5rem;
 }
 
-.fx-card p {
+.fx-section-head p,
+.section-box p,
+.card-box p {
   margin: 0 0 0.75rem;
-  color: #5b6573;
+  color: var(--muted);
 }
 
 .fx-card-head {
@@ -38,40 +47,6 @@
   flex-wrap: wrap;
 }
 
-.fx-button {
-  appearance: none;
-  border: 1px solid #d0d7e2;
-  background: #fff;
-  color: #1c2734;
-  border-radius: 8px;
-  padding: 0.7rem 1rem;
-  cursor: pointer;
-}
-
-.fx-button--primary {
-  background: #1c2734;
-  color: #fff;
-  border-color: #1c2734;
-}
-
-.fx-button--ghost {
-  background: #fff4fb;
-  border-color: #f5b7d7;
-  color: #ff8a00;
-}
-
-.fx-button--accent {
-  background: linear-gradient(90deg, #ff006a 0%, #ff9e00 100%);
-  color: #111827;
-  border-color: transparent;
-  font-weight: 700;
-}
-
-.fx-button[disabled] {
-  opacity: 0.6;
-  cursor: wait;
-}
-
 .fx-form-grid {
   display: grid;
   gap: 0.75rem;
@@ -90,29 +65,30 @@
 .fx-form-grid span,
 .fx-block span {
   font-size: 0.9rem;
-  color: #5b6573;
+  color: var(--muted);
 }
 
 .fx-form-grid input,
 .fx-form-grid select,
 .fx-block input {
   width: 100%;
-  border: 1px solid #d0d7e2;
-  border-radius: 8px;
+  border: 1px solid var(--line);
+  border-radius: 12px;
   padding: 0.7rem 0.8rem;
+  background: var(--surface-strong);
+  color: var(--text);
 }
 
 .fx-message {
-  margin-bottom: 0.9rem;
-  color: #1c2734;
+  color: var(--text);
 }
 
 .fx-message.is-error {
-  color: #b42318;
+  color: #d92d20;
 }
 
 .fx-message.is-success {
-  color: #027a48;
+  color: color-mix(in srgb, var(--accent-green) 78%, var(--text));
 }
 
 .fx-table-wrap {
@@ -127,7 +103,7 @@
 .fx-table th,
 .fx-table td {
   text-align: left;
-  border-bottom: 1px solid #eef2f6;
+  border-bottom: 1px solid var(--line);
   padding: 0.65rem 0.4rem;
 }
 
@@ -141,13 +117,13 @@
   min-height: 1.5rem;
   font-size: 1rem;
   font-weight: 700;
-  color: #1c2734;
+  color: var(--text);
 }
 
 .fx-card-meta {
   display: grid;
   gap: 0.35rem;
-  color: #5b6573;
+  color: var(--muted);
   font-size: 0.95rem;
   text-align: right;
 }
@@ -156,7 +132,6 @@
   display: flex;
   gap: 0.75rem;
   flex-wrap: wrap;
-  margin-bottom: 1rem;
 }
 
 .fx-action-row form {
@@ -175,22 +150,27 @@
   display: grid;
   gap: 1rem;
   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-  margin: 1rem 0 1.25rem;
 }
 
-.fx-mini-card {
+.fx-card-grid {
   display: grid;
-  gap: 0.2rem;
+  gap: 16px;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
 }
 
 .fx-mini-label,
 .fx-field-label {
   font-size: 0.9rem;
-  color: #6a7383;
+  color: var(--muted);
   letter-spacing: 0.18em;
   text-transform: uppercase;
 }
 
+.fx-card-value {
+  font-size: 1.2rem;
+  font-weight: 700;
+}
+
 .fx-currency-selection-row {
   display: flex;
   flex-wrap: wrap;
@@ -216,11 +196,11 @@
 .fx-input,
 .fx-select {
   width: 100%;
-  border: 1px solid #d0d7e2;
+  border: 1px solid var(--line);
   border-radius: 18px;
   padding: 0.8rem 1rem;
-  background: #fff;
-  color: #1c2734;
+  background: var(--surface-strong);
+  color: var(--text);
 }
 
 .fx-field {
@@ -234,11 +214,11 @@
   display: inline-flex;
   align-items: center;
   gap: 0.6rem;
-  border: 1px solid #d0d7e2;
+  border: 1px solid var(--line);
   border-radius: 999px;
   padding: 0.7rem 1rem;
-  background: #fff;
-  color: #1c2734;
+  background: var(--surface-strong);
+  color: var(--text);
 }
 
 .fx-token {
@@ -247,12 +227,12 @@
 
 .fx-token:hover,
 .fx-suggestion:hover {
-  border-color: rgba(255, 158, 0, 0.45);
-  background: rgba(255, 244, 251, 0.9);
+  border-color: color-mix(in srgb, var(--brand-accent-3) 45%, transparent);
+  background: color-mix(in srgb, var(--brand-accent) 6%, var(--surface-strong));
 }
 
 .fx-token-close {
-  color: #ff9e00;
+  color: var(--brand-accent-3);
   font-weight: 700;
   text-transform: uppercase;
 }
@@ -269,11 +249,11 @@
 }
 
 .fx-suggestion strong {
-  color: #111827;
+  color: var(--text);
 }
 
 .fx-text {
-  color: #5b6573;
+  color: var(--muted);
 }
 
 .fx-history-date {
@@ -285,10 +265,10 @@
 .fx-info-button {
   width: 1.4rem;
   height: 1.4rem;
-  border: 1px solid #d0d7e2;
+  border: 1px solid var(--line);
   border-radius: 999px;
-  background: #fff;
-  color: #5b6573;
+  background: var(--surface-strong);
+  color: var(--muted);
   font-size: 0.78rem;
   font-weight: 700;
   line-height: 1;
@@ -304,6 +284,11 @@
     flex-direction: column;
   }
 
+  .fx-submenu-row,
+  .fx-card-head {
+    align-items: flex-start;
+  }
+
   .fx-currency-search {
     flex: 1 1 auto;
     width: 100%;