asdasd

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

@@ -54,6 +54,19 @@
   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;
@@ -139,6 +152,122 @@
   text-align: right;
 }
 
+.fx-action-row {
+  display: flex;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+  margin-bottom: 1rem;
+}
+
+.fx-action-row form {
+  margin: 0;
+}
+
+.fx-mini-grid {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  margin: 1rem 0 1.25rem;
+}
+
+.fx-mini-card {
+  display: grid;
+  gap: 0.2rem;
+}
+
+.fx-mini-label,
+.fx-field-label {
+  font-size: 0.9rem;
+  color: #6a7383;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+}
+
+.fx-currency-selection-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  align-items: flex-start;
+}
+
+.fx-token-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+
+.fx-token-list--inline {
+  flex: 1 1 auto;
+}
+
+.fx-currency-search {
+  flex: 0 1 360px;
+  min-width: 260px;
+}
+
+.fx-input,
+.fx-select {
+  width: 100%;
+  border: 1px solid #d0d7e2;
+  border-radius: 18px;
+  padding: 0.8rem 1rem;
+  background: #fff;
+  color: #1c2734;
+}
+
+.fx-field {
+  display: grid;
+  gap: 0.45rem;
+  margin-top: 1rem;
+}
+
+.fx-token,
+.fx-suggestion {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.6rem;
+  border: 1px solid #d0d7e2;
+  border-radius: 999px;
+  padding: 0.7rem 1rem;
+  background: #fff;
+  color: #1c2734;
+}
+
+.fx-token {
+  cursor: pointer;
+}
+
+.fx-token:hover,
+.fx-suggestion:hover {
+  border-color: rgba(255, 158, 0, 0.45);
+  background: rgba(255, 244, 251, 0.9);
+}
+
+.fx-token-close {
+  color: #ff9e00;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.fx-suggestion-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin-top: 0.9rem;
+}
+
+.fx-suggestion {
+  cursor: pointer;
+}
+
+.fx-suggestion strong {
+  color: #111827;
+}
+
+.fx-text {
+  color: #5b6573;
+}
+
 .fx-history-date {
   display: inline-flex;
   align-items: center;
@@ -161,3 +290,15 @@
   justify-content: center;
   padding: 0;
 }
+
+@media (max-width: 860px) {
+  .fx-currency-selection-row {
+    flex-direction: column;
+  }
+
+  .fx-currency-search {
+    flex: 1 1 auto;
+    width: 100%;
+    min-width: 0;
+  }
+}