@rhinestone/deposit-modal 0.3.0-alpha.4 → 0.3.0-alpha.5

package/dist/styles.css

@@ -1,6 +1,10 @@
 /* ABOUTME: Styles for the deposit-modal component. */
 /* ABOUTME: Uses CSS variables for theming - matches deposit-widget design exactly. */
 
+/* Self-host the Figma typefaces so the modal renders with the correct
+   weights regardless of whether the consumer app loads Inter / Geist Mono. */
+@import url("https://fonts.googleapis.com/css2?family=Geist+Mono:wght@500&family=Inter:wght@400;500;600;700&display=swap");
+
 /* =============================================================================
    CSS Variables (Light Mode Default) - Using Radix Gray Scale
    ============================================================================= */
@@ -54,9 +58,22 @@
   /* Semantic colors */
   --rs-background: #ffffff;
   --rs-background-secondary: var(--color-gray1);
-  --rs-surface-subtle: #fafafa;
+  --rs-surface-subtle: #fcfbfb;
   --rs-surface: var(--color-gray3);
   --rs-surface-hover: var(--color-gray4);
+  /* Figma: icon-wrapper tokens. Same as surface in light, but dark mode
+     diverges so we keep them separate. */
+  --rs-icon-wrapper-bg: #f4f4f5;
+  --rs-icon-wrapper-icon: #9f9fa9;
+  /* Figma input/label + view/icon-secondary — differ from the generic
+     gray scale: light-mode label/icon is zinc-600 (#52525c), dark mode
+     falls to zinc-400 (#9f9fa9). */
+  --rs-input-label: #52525c;
+  --rs-icon-secondary: #52525c;
+  /* Figma button-dark-ghost token — used by amount-step presets. */
+  --rs-button-ghost-bg: #e4e4e7;
+  --rs-button-ghost-bg-hover: #d4d4d8;
+  --rs-button-ghost-text: #27272a;
 
   /* Primary (CTA). Default theme uses the dark-on-light pair.
      A custom theme overrides these directly via inline CSS vars,
@@ -72,7 +89,7 @@
 
   --rs-success: var(--color-green9);
   --rs-success-tint: var(--color-green3);
-  --rs-error: var(--color-red9);
+  --rs-error: #fb2c36;
   --rs-error-tint: var(--color-red3);
   --rs-warning: var(--color-amber11);
   --rs-warning-tint: var(--color-amber3);
@@ -106,10 +123,12 @@
   --rs-radius-full: 9999px;
   --rs-radius: var(--rs-radius-md);
 
-  /* Typography */
+  /* Typography. Figma uses Inter; we list it first and fall back to the
+     system stack so consumers that load Inter get the exact design, and
+     everyone else gets a sensible default. */
   font-family:
-    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
-    sans-serif;
+    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+    Arial, sans-serif;
   font-size: 14px;
   line-height: 1.5;
   color: var(--rs-foreground);
@@ -118,12 +137,15 @@
   -moz-osx-font-smoothing: grayscale;
   position: relative;
   /* Flex column so children (header + body) can split available height with
-     the body region scrolling when it overflows. */
+     the body region scrolling when it overflows. Figma: modal applies a
+     16px padding and 16px gap between the header row and the body. */
   display: flex;
   flex-direction: column;
   flex: 1;
   min-height: 0;
   overflow: hidden;
+  padding: 16px;
+  gap: 16px;
 }
 
 /* =============================================================================
@@ -165,14 +187,27 @@
   --color-neutral10: #e4e4e7;
   --color-neutral11: #d4d4d8;
 
-  --rs-background: #0c0c0c;
+  --rs-background: #0a0a0a;
   /* Well / dropdown / QR-card surface in dark mode. Used by anything that
      renders an elevated container (asset rows, QR well, select inputs). */
   --rs-background-secondary: #18181b;
   --rs-surface-subtle: #18181b;
   --rs-surface: #27272a;
+  /* Figma: icon-wrapper/background — separate from --rs-surface so the
+     deposit-header icon tile stays #18181b in dark mode. */
+  --rs-icon-wrapper-bg: #18181b;
+  --rs-icon-wrapper-icon: #52525c;
+  --rs-input-label: #9f9fa9;
+  --rs-icon-secondary: #9f9fa9;
+  --rs-button-ghost-bg: #27272a;
+  --rs-button-ghost-bg-hover: #3f3f46;
+  --rs-button-ghost-text: #e4e4e7;
   --rs-surface-hover: #3f3f46;
-  --rs-primary-foreground: #18181b;
+  /* Figma button-dark in dark mode: zinc-200 disc, near-black label. */
+  --rs-primary: #e4e4e7;
+  --rs-primary-hover: #d4d4d8;
+  --rs-primary-active: #9f9fa9;
+  --rs-primary-foreground: #09090b;
   --rs-primary-disabled-bg: #27272a;
   --rs-primary-disabled-fg: #71717b;
   --rs-icon: var(--color-gray10);
@@ -207,7 +242,7 @@
 }
 
 .rs-modal-content {
-  --rs-radius-lg: 14px;
+  --rs-radius-lg: 16px;
   --rs-background: #ffffff;
   --rs-border: #f4f4f5;
 
@@ -229,7 +264,7 @@
 }
 
 .rs-modal-content[data-theme="dark"] {
-  --rs-background: #0c0c0c;
+  --rs-background: #0a0a0a;
   --rs-border: #18181b;
 }
 
@@ -878,9 +913,9 @@
   width: 100%;
   display: flex;
   align-items: center;
-  gap: 12px;
-  padding: 10px 8px;
-  background-color: var(--rs-surface-subtle);
+  gap: 16px;
+  padding: 16px 12px;
+  background-color: transparent;
   border: none;
   border-radius: 8px;
   cursor: pointer;
@@ -890,7 +925,7 @@
 }
 
 .rs-asset-row:hover:not(:disabled) {
-  background-color: var(--rs-surface);
+  background-color: var(--rs-surface-subtle);
 }
 
 .rs-asset-row:focus-visible {
@@ -898,7 +933,8 @@
   outline-offset: 2px;
 }
 
-.rs-asset-row--selected {
+.rs-asset-row--selected,
+.rs-asset-row--selected:hover:not(:disabled) {
   background-color: var(--rs-surface);
 }
 
@@ -907,7 +943,7 @@
   flex: 1;
   min-width: 0;
   align-items: center;
-  gap: 12px;
+  gap: 16px;
 }
 
 /* Icon group — token glyph (32px) with the chain glyph (14px) overlapping
@@ -920,8 +956,8 @@
 }
 
 .rs-asset-icon {
-  width: 32px;
-  height: 32px;
+  width: 28px;
+  height: 28px;
   margin-right: -10px;
   border-radius: 50%;
   background-color: var(--rs-surface);
@@ -999,7 +1035,7 @@
 
 .rs-asset-balance {
   flex-shrink: 0;
-  font-size: 18px;
+  font-size: 12px;
   font-weight: 500;
   color: var(--rs-foreground);
   text-align: right;
@@ -1571,7 +1607,9 @@
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-  padding: 12px;
+  /* Outer padding now lives on the parent .rs-modal; this container only
+     manages the vertical rhythm between body slot and powered-by. */
+  padding: 0;
   gap: 16px;
 }
 
@@ -1624,6 +1662,32 @@
   color: var(--rs-foreground);
 }
 
+/* Inline "Disconnect" pill that sits inside a connected-wallet ListRow's
+   meta slot. Figma: 14/Medium text, padded 12/16, transparent background
+   so the row's surface shows through. */
+.rs-list-row-action {
+  appearance: none;
+  border: none;
+  background: transparent;
+  padding: 12px 16px;
+  border-radius: 8px;
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--rs-foreground);
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.rs-list-row-action:hover {
+  background: var(--rs-surface-hover);
+}
+
+.rs-list-row-action:focus-visible {
+  outline: 2px solid var(--rs-border-accent);
+  outline-offset: 2px;
+}
+
 .rs-connect-transfer-link {
   margin-top: 10px;
   padding: 0;
@@ -1853,7 +1917,8 @@
   align-items: center;
   justify-content: space-between;
   min-height: 24px;
-  padding: 12px 12px 0;
+  /* Padding/gap now live on the parent .rs-modal (matches Figma 1:1). */
+  padding: 0;
   background-color: transparent;
   border-bottom: none;
 }
@@ -1989,19 +2054,20 @@
   flex: 1 0 0;
   min-width: 0;
   padding: 12px 16px;
-  background: var(--rs-surface);
+  background: var(--rs-button-ghost-bg);
   border: none;
   border-radius: 8px;
   font-family: inherit;
   font-size: 14px;
   font-weight: 500;
-  color: var(--rs-foreground);
+  line-height: normal;
+  color: var(--rs-button-ghost-text);
   cursor: pointer;
   transition: background-color 0.15s;
 }
 
 .rs-amount-preset-btn:hover:not(:disabled) {
-  background: var(--rs-surface-hover);
+  background: var(--rs-button-ghost-bg-hover);
 }
 
 .rs-amount-preset-btn:focus-visible {
@@ -2017,10 +2083,30 @@
 .rs-amount-details {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 4px;
 }
 
 .rs-amount-detail-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--rs-muted);
+  line-height: normal;
+}
+
+/* Review-deposit detail rows (ConfirmStep) — Figma uses 14px Medium with
+   8px stack gap, vs the wallet-deposit-amount rows which are 12px / 4px. */
+.rs-review-details {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+}
+
+.rs-review-detail-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -2031,6 +2117,68 @@
   line-height: normal;
 }
 
+.rs-review-detail-value {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--rs-muted);
+  font-feature-settings: "tnum";
+}
+
+.rs-review-detail-icon {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  overflow: hidden;
+  flex-shrink: 0;
+  background: var(--rs-background);
+}
+
+.rs-review-detail-icon img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.rs-review-detail-info {
+  display: inline-flex;
+  width: 16px;
+  height: 16px;
+  align-items: center;
+  justify-content: center;
+  color: var(--rs-icon-secondary);
+  cursor: help;
+}
+
+.rs-review-detail-info svg {
+  width: 16px;
+  height: 16px;
+}
+
+.rs-review-detail-link {
+  display: inline-flex;
+  width: 16px;
+  height: 16px;
+  align-items: center;
+  justify-content: center;
+  color: var(--rs-muted);
+  text-decoration: none;
+  transition: opacity 0.15s;
+}
+
+.rs-review-detail-link:hover {
+  opacity: 0.7;
+}
+
+.rs-review-detail-link svg {
+  width: 14px;
+  height: 14px;
+}
+
+.rs-review-detail-value--strike {
+  text-decoration: line-through;
+}
+
 .rs-amount-detail-value {
   display: flex;
   align-items: center;
@@ -2277,7 +2425,8 @@
 .rs-withdraw-label {
   font-size: 14px;
   font-weight: 500;
-  color: var(--rs-muted);
+  line-height: normal;
+  color: var(--rs-input-label);
 }
 
 .rs-withdraw-label--sm {
@@ -2290,7 +2439,7 @@
   gap: 8px;
   padding: 12px;
   background: var(--rs-surface-subtle);
-  border-radius: var(--rs-radius-md);
+  border-radius: 8px;
   border: 1px solid var(--rs-surface-subtle);
 }
 
@@ -2299,6 +2448,8 @@
   border: none;
   background: transparent;
   font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
   color: var(--rs-foreground);
   outline: none;
   min-width: 0;
@@ -2310,9 +2461,9 @@
 }
 
 .rs-withdraw-input--address {
-  font-family:
-    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
+  font-family: inherit;
   font-size: 14px;
+  font-weight: 400;
 }
 
 .rs-withdraw-input--amount {
@@ -2399,12 +2550,14 @@
 }
 
 .rs-withdraw-max-btn {
-  padding: 8px 16px;
+  padding: 12px 16px;
   background: transparent;
-  border: 1.19px solid var(--rs-foreground);
+  border: 1.191px solid var(--rs-foreground);
   border-radius: 8px;
-  font-size: 14px;
+  font-family: inherit;
+  font-size: 16px;
   font-weight: 500;
+  line-height: normal;
   color: var(--rs-foreground);
   cursor: pointer;
   white-space: nowrap;
@@ -2426,8 +2579,9 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  font-size: 13px;
+  font-size: 12px;
   font-weight: 500;
+  line-height: normal;
   padding: 0;
 }
 
@@ -2461,14 +2615,15 @@
   justify-content: space-between;
   padding: 12px;
   background: var(--rs-surface-subtle);
-  border-radius: var(--rs-radius-md);
+  border-radius: 8px;
   border: 1px solid var(--rs-surface-subtle);
   cursor: pointer;
   transition:
     border-color 0.15s,
     background-color 0.15s;
   width: 100%;
-  font-size: 16px;
+  font-size: 14px;
+  line-height: normal;
 }
 
 .rs-withdraw-dropdown:hover {
@@ -2500,9 +2655,9 @@
 }
 
 .rs-withdraw-dropdown-arrow {
-  width: 16px;
-  height: 16px;
-  color: var(--rs-muted-foreground);
+  width: 24px;
+  height: 24px;
+  color: var(--rs-icon-secondary);
   transition: transform 0.15s;
 }
 
@@ -2676,9 +2831,10 @@
 }
 
 .rs-deposit-address-dropdown-label {
-  font-size: 12px;
+  font-size: 11px;
   font-weight: 500;
-  color: var(--rs-muted-foreground);
+  line-height: normal;
+  color: var(--rs-input-label);
   margin: 0;
 }
 
@@ -2693,14 +2849,16 @@
   display: inline-flex;
   align-items: center;
   gap: 4px;
-  color: var(--rs-muted-foreground);
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--rs-input-label);
 }
 
 .rs-deposit-address-min-icon {
   width: 16px;
   height: 16px;
   flex-shrink: 0;
-  color: inherit;
+  color: var(--rs-icon-secondary);
 }
 
 /* Price impact accordion — sits at the bottom of the transfer-crypto
@@ -2738,7 +2896,7 @@
   justify-content: center;
   width: 16px;
   height: 16px;
-  color: var(--rs-muted);
+  color: var(--rs-icon-secondary);
   flex-shrink: 0;
 }
 
@@ -2748,7 +2906,7 @@
 }
 
 .rs-price-impact-label {
-  font-size: 14px;
+  font-size: 12px;
   font-weight: 500;
   color: var(--rs-muted);
 }
@@ -2803,7 +2961,7 @@
   align-items: center;
   gap: 8px;
   padding-top: 12px;
-  font-size: 14px;
+  font-size: 12px;
   color: var(--rs-muted);
 }
 
@@ -2883,7 +3041,7 @@
   align-items: center;
   gap: 8px;
   width: 100%;
-  padding: 8px 12px;
+  padding: 12px;
   background: var(--rs-surface-subtle);
   border-radius: 8px;
   border: 1px solid var(--rs-surface-subtle);
@@ -2893,6 +3051,7 @@
     background-color 0.15s;
   font-size: 14px;
   font-weight: 500;
+  line-height: normal;
   color: var(--rs-foreground);
   font-family: inherit;
 }
@@ -2902,6 +3061,14 @@
   border-color: var(--rs-surface);
 }
 
+.rs-deposit-address-dropdown-trigger--open {
+  border-color: #9f9fa9;
+}
+
+.rs-deposit-address-dropdown-trigger--open:hover {
+  border-color: #9f9fa9;
+}
+
 .rs-deposit-address-dropdown-icon {
   width: 24px;
   height: 24px;
@@ -2913,9 +3080,15 @@
 .rs-deposit-address-dropdown-chevron {
   width: 24px;
   height: 24px;
-  color: var(--rs-muted);
+  color: var(--rs-icon-secondary);
   margin-left: auto;
   flex-shrink: 0;
+  transition: transform 0.15s ease;
+}
+
+.rs-deposit-address-dropdown-trigger--open
+  .rs-deposit-address-dropdown-chevron {
+  transform: rotate(180deg);
 }
 
 .rs-deposit-address-dropdown-menu {
@@ -2924,15 +3097,15 @@
   left: 0;
   right: 0;
   z-index: 20;
-  background: var(--rs-background);
-  border: 1px solid var(--rs-border);
+  background: var(--rs-surface-subtle);
+  border: 1px solid var(--rs-surface-subtle);
   border-radius: var(--rs-radius-sm);
-  box-shadow: var(--rs-shadow-dropdown);
-  padding: 4px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
+  padding: 12px;
   display: flex;
   flex-direction: column;
-  gap: 2px;
-  max-height: 200px;
+  gap: 16px;
+  max-height: 240px;
   overflow-y: auto;
   overscroll-behavior: none;
   animation: rs-dropdown-in 0.12s ease-out;
@@ -2943,26 +3116,26 @@
   align-items: center;
   gap: 6px;
   width: 100%;
-  padding: 7px 8px;
+  padding: 0;
   border-radius: calc(var(--rs-radius-sm) - 2px);
   border: none;
   background: transparent;
   color: var(--rs-foreground);
-  font-size: 13px;
+  font-size: 14px;
   font-weight: 500;
+  line-height: normal;
   cursor: pointer;
   text-align: left;
-  transition: background-color 0.1s;
+  transition: opacity 0.1s;
   font-family: inherit;
 }
 
 .rs-deposit-address-dropdown-item:hover {
-  background: var(--rs-surface);
+  opacity: 0.7;
 }
 
 .rs-deposit-address-dropdown-item--active {
-  background: var(--rs-primary-tint);
-  color: var(--rs-primary);
+  color: var(--rs-foreground);
 }
 
 /* Well-card containing the 280px QR + truncated mono address. */
@@ -2980,24 +3153,25 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 20px;
+  padding: 12px;
 }
 
 .rs-deposit-address-qr canvas,
 .rs-deposit-address-qr svg {
   display: block;
-  width: 220px;
-  height: 220px;
+  width: 200px;
+  height: 200px;
 }
 
 .rs-deposit-address-value {
   width: 100%;
-  padding: 0 20px 12px;
+  padding: 0 16px 12px;
   font-family:
     "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
     "Liberation Mono", monospace;
-  font-size: 13px;
+  font-size: 12px;
   font-weight: 500;
+  line-height: normal;
   color: var(--rs-muted);
   text-align: center;
   word-break: break-all;
@@ -3114,6 +3288,9 @@
   position: relative;
 }
 
+/* Outer card that groups one-or-more deposit entries. Positioned over
+   the bottom of the deposit-address screen. Figma: card/background +
+   16px padding/gap + drop-shadow. */
 .rs-deposit-notifications {
   position: absolute;
   bottom: 12px;
@@ -3122,20 +3299,21 @@
   z-index: 10;
   display: flex;
   flex-direction: column;
-  gap: 8px;
-  pointer-events: none;
+  gap: 16px;
+  padding: 16px;
+  background: var(--rs-surface-subtle);
+  border-radius: 16px;
+  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.14));
+  max-height: calc(100% - 24px);
+  overflow-y: auto;
+  animation: rs-notification-slide-up 0.3s ease-out;
 }
 
 .rs-deposit-notification {
-  pointer-events: auto;
-  background: var(--rs-background);
-  border: 1px solid var(--rs-border);
-  border-radius: var(--rs-radius-lg);
-  overflow: hidden;
-  box-shadow:
-    0 -4px 20px rgba(0, 0, 0, 0.10),
-    0 -1px 6px rgba(0, 0, 0, 0.06);
-  animation: rs-notification-slide-up 0.3s ease-out;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 100%;
 }
 
 @keyframes rs-notification-slide-up {
@@ -3151,19 +3329,23 @@
 
 .rs-deposit-notification-header {
   display: flex;
-  align-items: flex-start;
-  gap: 10px;
-  padding: 14px 14px 0;
+  align-items: center;
+  gap: 12px;
+  padding: 0;
 }
 
 .rs-deposit-notification-icon {
   flex-shrink: 0;
-  padding-top: 1px;
+  width: 42px;
+  height: 42px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .rs-deposit-notification-badge {
-  width: 32px;
-  height: 32px;
+  width: 42px;
+  height: 42px;
   border-radius: 50%;
   display: flex;
   align-items: center;
@@ -3171,68 +3353,80 @@
 }
 
 .rs-deposit-notification-badge svg {
-  width: 14px;
-  height: 14px;
-}
-
-.rs-deposit-notification-badge .rs-spinner {
-  width: 16px;
-  height: 16px;
+  width: 20px;
+  height: 20px;
 }
 
 .rs-deposit-notification-badge--complete {
-  background-color: var(--rs-success-tint);
-  color: var(--rs-success);
+  background-color: #00bc7d;
+  color: #ffffff;
 }
 
 .rs-deposit-notification-badge--failed {
-  background-color: var(--rs-error-tint);
-  color: var(--rs-error);
+  background-color: #fb2c36;
+  color: #ffffff;
 }
 
 .rs-deposit-notification-badge--processing {
-  background-color: var(--rs-primary-tint);
-  color: var(--rs-primary);
+  background-color: transparent;
+  color: var(--rs-icon-secondary);
+}
+
+.rs-deposit-notification-badge--processing .rs-spinner {
+  width: 42px;
+  height: 42px;
 }
 
 .rs-deposit-notification-content {
   flex: 1;
   min-width: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-self: stretch;
+}
+
+.rs-deposit-notification-title-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
 }
 
 .rs-deposit-notification-title {
   font-size: 14px;
-  font-weight: 600;
+  font-weight: 700;
+  line-height: normal;
   color: var(--rs-foreground);
-  line-height: 1.3;
 }
 
 .rs-deposit-notification-subtitle {
   font-size: 12px;
-  color: var(--rs-muted-foreground);
-  line-height: 1.4;
-  margin-top: 2px;
+  font-weight: 500;
+  line-height: normal;
+  color: var(--rs-muted);
+  margin-top: 0;
+  word-break: break-word;
 }
 
 .rs-deposit-notification-close {
   flex-shrink: 0;
-  width: 24px;
-  height: 24px;
-  display: flex;
+  width: 16px;
+  height: 16px;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
   border: none;
   background: transparent;
-  color: var(--rs-muted-foreground);
+  color: var(--rs-icon-secondary);
   cursor: pointer;
-  border-radius: 4px;
   padding: 0;
-  transition: color 0.15s, background 0.15s;
+  transition: opacity 0.15s;
 }
 
 .rs-deposit-notification-close:hover {
-  color: var(--rs-foreground);
-  background: var(--rs-surface);
+  opacity: 0.7;
 }
 
 .rs-deposit-notification-close svg {
@@ -3240,10 +3434,41 @@
   height: 16px;
 }
 
+.rs-deposit-notification-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 33px;
+  padding: 8px 0 8px 54px;
+  border: none;
+  background: transparent;
+  color: var(--rs-muted);
+  font-size: 12px;
+  font-weight: 500;
+  line-height: normal;
+  font-family: inherit;
+  cursor: pointer;
+  margin: 0;
+  text-align: left;
+}
+
+.rs-deposit-notification-toggle-chevron {
+  width: 16px;
+  height: 16px;
+  color: var(--rs-icon-secondary);
+  flex-shrink: 0;
+  transition: transform 0.15s ease;
+}
+
+.rs-deposit-notification--expanded .rs-deposit-notification-toggle-chevron {
+  transform: rotate(180deg);
+}
+
 .rs-deposit-notification-details {
-  margin: 10px 14px 0;
+  margin: 4px 0 0 54px;
   padding: 8px 10px;
-  background: var(--rs-surface);
+  background: var(--rs-background);
   border-radius: var(--rs-radius-sm);
 }
 
@@ -3260,27 +3485,28 @@
 
 .rs-deposit-notification-label {
   font-size: 12px;
-  color: var(--rs-muted-foreground);
+  color: var(--rs-muted);
 }
 
 .rs-deposit-notification-value {
   font-size: 12px;
   font-weight: 500;
-  color: var(--rs-muted);
-  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
+  color: var(--rs-foreground);
+  font-family: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
+    Monaco, Consolas, monospace;
 }
 
 .rs-deposit-notification-link {
   display: inline-flex;
   align-items: center;
   gap: 3px;
-  color: var(--rs-muted);
+  color: var(--rs-foreground);
   text-decoration: none;
-  transition: color 0.15s;
+  transition: opacity 0.15s;
 }
 
 .rs-deposit-notification-link:hover {
-  color: var(--rs-foreground);
+  opacity: 0.7;
 }
 
 .rs-deposit-notification-link-icon {
@@ -3288,27 +3514,6 @@
   height: 10px;
 }
 
-.rs-deposit-notification-toggle {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  padding: 10px 0;
-  border: none;
-  border-top: 1px solid var(--rs-border-surface);
-  background: transparent;
-  color: var(--rs-muted-foreground);
-  font-size: 12px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: color 0.15s;
-  margin-top: 10px;
-}
-
-.rs-deposit-notification-toggle:hover {
-  color: var(--rs-foreground);
-}
-
 /* =============================================================================
    Processing Badges (centered icon badges)
    ============================================================================= */
@@ -3557,7 +3762,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 4px;
+  gap: 8px;
 }
 
 .rs-history-empty-glyph {
@@ -3590,15 +3795,17 @@
 }
 
 .rs-history-empty-title {
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 500;
   color: var(--rs-foreground);
+  line-height: normal;
 }
 
 .rs-history-empty-hint {
-  font-size: 14px;
+  font-size: 12px;
   font-weight: 500;
   color: var(--rs-muted);
+  line-height: normal;
 }
 
 /* List of transaction cards. */
@@ -3659,7 +3866,7 @@
 .rs-history-card-row {
   display: flex;
   align-items: center;
-  gap: 16px;
+  gap: 8px;
   width: 100%;
 }
 
@@ -3670,8 +3877,8 @@
 }
 
 .rs-history-card-token {
-  width: 32px;
-  height: 32px;
+  width: 28px;
+  height: 28px;
   margin-right: -10px;
   border-radius: 50%;
   background: var(--rs-surface);
@@ -3718,7 +3925,7 @@
 }
 
 .rs-history-card-title {
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 700;
   color: var(--rs-foreground);
   line-height: normal;
@@ -3743,7 +3950,7 @@
 }
 
 .rs-history-card-amount {
-  font-size: 18px;
+  font-size: 12px;
   font-weight: 500;
   color: var(--rs-foreground);
   line-height: normal;
@@ -3755,7 +3962,7 @@
 .rs-history-card-details {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 8px;
   width: 100%;
 }
 
@@ -3766,15 +3973,14 @@
   font-size: 12px;
   font-weight: 500;
   line-height: 18px;
-  color: var(--color-blue9, #0084d1);
+  color: #0084d1;
   text-decoration: none;
-  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
-    monospace;
+  font-family: inherit;
 }
 
 .rs-history-card-link svg {
-  width: 14px;
-  height: 14px;
+  width: 16px;
+  height: 16px;
 }
 
 .rs-history-card-link:hover {
@@ -3818,6 +4024,28 @@
   color: var(--rs-muted);
 }
 
+/* Dark-mode badge overrides — Figma swaps to deeper saturated fills with
+   light text for contrast against the #18181b card surface. */
+.rs-modal[data-theme="dark"] .rs-history-badge--completed {
+  background: #006045;
+  color: #d0fae5;
+}
+
+.rs-modal[data-theme="dark"] .rs-history-badge--failed {
+  background: #9f0712;
+  color: #ffe2e2;
+}
+
+.rs-modal[data-theme="dark"] .rs-history-badge--processing {
+  background: #00407f;
+  color: #bee3ff;
+}
+
+.rs-modal[data-theme="dark"] .rs-history-badge--pending {
+  background: #78350f;
+  color: #fde68a;
+}
+
 /* Load more button at the end of the list. */
 .rs-history-load-more {
   display: flex;
@@ -3929,13 +4157,13 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 44px;
-  height: 44px;
-  padding: 10px;
-  background: var(--rs-surface);
-  border: 1px solid var(--rs-surface);
+  width: 40px;
+  height: 40px;
+  padding: 8px;
+  background: var(--rs-icon-wrapper-bg);
+  border: 1px solid var(--rs-icon-wrapper-bg);
   border-radius: 8px;
-  color: var(--rs-muted-foreground);
+  color: var(--rs-icon-wrapper-icon);
   box-sizing: border-box;
 }
 
@@ -3963,10 +4191,9 @@
 }
 
 .rs-body-header-title {
-  font-size: 20px;
+  font-size: 16px;
   font-weight: 700;
   line-height: 1.2;
-  letter-spacing: -0.01em;
   color: var(--rs-foreground);
   margin: 0;
 }
@@ -3984,13 +4211,13 @@
 .rs-list {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 8px;
 }
 
 .rs-list-row {
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 8px;
   width: 100%;
   padding: 12px;
   background: var(--rs-background-secondary);
@@ -4028,7 +4255,8 @@
   justify-content: center;
   width: 24px;
   height: 24px;
-  color: var(--rs-muted-foreground);
+  /* Figma: oauth-button/default/icon — same value light/dark. */
+  color: #71717b;
 }
 
 .rs-list-row-leading svg {
@@ -4062,12 +4290,12 @@
 .rs-list-row-text {
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: 4px;
   min-width: 0;
 }
 
 .rs-list-row-title {
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 500;
   color: var(--rs-foreground);
   line-height: 1.25;
@@ -4077,7 +4305,7 @@
 }
 
 .rs-list-row-subtitle {
-  font-size: 14px;
+  font-size: 12px;
   font-weight: 500;
   color: var(--rs-muted);
   line-height: 1.25;
@@ -4101,32 +4329,22 @@
 .rs-list-row-meta-icons {
   display: flex;
   align-items: center;
-  gap: -4px;
+  gap: 4px;
 }
 
 .rs-list-row-meta-icons > * {
-  margin-left: -4px;
   width: 20px;
   height: 20px;
-  border-radius: 50%;
-  background: var(--rs-background);
-  border: 1px solid var(--rs-background);
-  overflow: hidden;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-}
-
-.rs-list-row-meta-icons > *:first-child {
-  margin-left: 0;
+  flex-shrink: 0;
 }
 
 .rs-list-row-meta-icons img,
 .rs-list-row-meta-icons svg {
   width: 100%;
   height: 100%;
-  object-fit: cover;
-  border-radius: 50%;
   display: block;
 }
 
@@ -4134,7 +4352,8 @@
   flex-shrink: 0;
   width: 16px;
   height: 16px;
-  color: var(--rs-muted-foreground);
+  /* Figma: oauth-button/default/icon — same #71717b in both themes. */
+  color: #71717b;
   display: inline-flex;
   align-items: center;
   justify-content: center;