@rhinestone/deposit-modal 0.14.1 → 0.16.0

package/dist/styles.css

@@ -647,6 +647,13 @@
   height: 14px;
 }
 
+.rs-input-hint {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--rs-muted);
+  line-height: normal;
+}
+
 /* =============================================================================
    Spinner
    ============================================================================= */
@@ -2125,6 +2132,18 @@
   height: 24px;
 }
 
+/* Names the flow the panel returns to, so a mid-flow entry reads as an
+   interruption rather than an exit. Widens the otherwise fixed 24px box. */
+.rs-modal-header-back--labelled {
+  width: auto;
+  gap: 4px;
+  padding-right: 4px;
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+}
+
 /* =============================================================================
    Amount Step Redesign
    ============================================================================= */
@@ -2400,6 +2419,13 @@
   font-feature-settings: "tnum";
 }
 
+/* Lucide icons default to 24px, which dwarfs the 14px row. */
+.rs-review-detail-value.rs-link svg {
+  width: 12px;
+  height: 12px;
+  flex-shrink: 0;
+}
+
 .rs-review-detail-icon {
   width: 16px;
   height: 16px;
@@ -4070,6 +4096,9 @@
    ============================================================================= */
 
 .rs-modal-header-history {
+  /* Anchors the status dot; the glyph and the button's box are identical in
+     every badge state, so the header never re-flows. */
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -4098,6 +4127,36 @@
   height: 24px;
 }
 
+/* Status dot on the history entry point. Colour is the only difference between
+   states, keyed to the row badges' failed/processing hues; the button's
+   accessible name says the state in words. */
+.rs-history-dot {
+  position: absolute;
+  top: 1px;
+  right: 1px;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  /* A ring in the surface colour separates the dot from the glyph beneath it. */
+  box-shadow: 0 0 0 2px var(--rs-background);
+}
+
+.rs-history-dot--needs-you {
+  background: #9f0712;
+}
+
+.rs-history-dot--progress {
+  background: #00407f;
+}
+
+.rs-modal[data-theme="dark"] .rs-history-dot--needs-you {
+  background: #ffc9c9;
+}
+
+.rs-modal[data-theme="dark"] .rs-history-dot--progress {
+  background: #bee3ff;
+}
+
 /* =============================================================================
    Deposit History Panel — matches Figma 1878:142660 / 1878:142727.
    The panel overlays the deposit flow inside .rs-modal-content; its own
@@ -4211,6 +4270,32 @@
   line-height: normal;
 }
 
+/* The escape hatch under the title: a text button, not a card, so the primary
+   action stays the expanded row's recover CTA. */
+.rs-history-hint {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  align-items: baseline;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--rs-muted);
+  font-size: 13px;
+  font-family: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.rs-history-hint strong {
+  color: var(--rs-foreground);
+  font-weight: 500;
+}
+
+.rs-history-hint:hover strong {
+  text-decoration: underline;
+}
+
 /* List of transaction cards. */
 .rs-history-list {
   display: flex;
@@ -4223,28 +4308,38 @@
   padding-right: 2px;
 }
 
-/* Card */
+/* Card. A wrapper rather than one button: the expanded panel holds its own
+   controls (the tx link, the recover CTA), which cannot nest inside the
+   disclosure button. The trigger is the row; the panel is its sibling. */
 .rs-history-card {
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: 0;
-  padding: 12px 8px;
   background: var(--rs-surface-subtle);
-  border: none;
   border-radius: 8px;
-  cursor: pointer;
   text-align: left;
-  font-family: inherit;
   color: var(--rs-foreground);
   transition: background-color 0.15s;
 }
 
-.rs-history-card:hover:not(:disabled) {
+.rs-history-card-trigger {
+  width: 100%;
+  padding: 12px 8px;
+  background: transparent;
+  border: none;
+  border-radius: inherit;
+  cursor: pointer;
+  text-align: left;
+  font-family: inherit;
+  color: inherit;
+}
+
+.rs-history-card:hover {
   background: var(--rs-surface);
 }
 
-.rs-history-card:focus-visible {
+.rs-history-card-trigger:focus-visible {
   outline: 2px solid var(--rs-border-accent);
   outline-offset: 2px;
 }
@@ -4369,13 +4464,34 @@
   visibility: visible;
 }
 
-/* Expanded detail block under the row. */
+/* Expanded detail block under the row. Its own padding, since the collapsed
+   card's padding now belongs to the trigger. */
 .rs-history-card-details {
   display: flex;
   flex-direction: column;
   gap: 8px;
   width: 100%;
-  padding-top: 16px;
+  padding: 4px 8px 12px;
+}
+
+/* The only control in the panel, and it leaves the list — hence the chevron. */
+.rs-history-card-recover {
+  justify-content: center;
+  gap: 4px;
+  margin-top: 4px;
+}
+
+/* Button wraps its children in a single span, so the button's own gap never
+   reaches the label and the chevron. */
+.rs-history-card-recover > span {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.rs-history-card-recover svg {
+  width: 16px;
+  height: 16px;
 }
 
 .rs-history-card-link {
@@ -4431,6 +4547,11 @@
   color: #82181a;
 }
 
+.rs-history-badge--refunded {
+  background: var(--rs-surface);
+  color: var(--rs-foreground);
+}
+
 .rs-history-badge--spam {
   background: var(--rs-surface);
   color: var(--rs-muted);
@@ -4458,6 +4579,23 @@
   color: #fde68a;
 }
 
+/* Recovery started from a row, and the transaction-hash lookup: a second
+   overlay above the still-mounted panel, so the list keeps its scroll position
+   and the row stays expanded. */
+.rs-history-recovery,
+.rs-history-lookup {
+  position: absolute;
+  inset: 0;
+  z-index: 11;
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+  gap: 16px;
+  background: var(--rs-background);
+  border-radius: inherit;
+  animation: rs-history-slide-in 0.2s cubic-bezier(0.32, 0.72, 0, 1);
+}
+
 /* Load more button at the end of the list. */
 .rs-history-load-more {
   display: flex;
@@ -4486,77 +4624,6 @@
   cursor: not-allowed;
 }
 
-/* =============================================================================
-   Shell — matches Figma "modal" frame (padded container, no fixed title bar)
-   ============================================================================= */
-
-.rs-shell {
-  display: flex;
-  flex-direction: column;
-  padding: 16px;
-  gap: 16px;
-}
-
-.rs-shell-nav {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  min-height: 24px;
-}
-
-.rs-shell-nav-actions {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.rs-shell-icon-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  padding: 0;
-  background: transparent;
-  border: none;
-  border-radius: 4px;
-  color: var(--rs-foreground);
-  cursor: pointer;
-  transition: opacity 0.15s;
-  font-family: inherit;
-}
-
-.rs-shell-icon-btn:hover:not(:disabled) {
-  opacity: 0.65;
-}
-
-.rs-shell-icon-btn:disabled {
-  opacity: 0.3;
-  cursor: not-allowed;
-}
-
-.rs-shell-icon-btn:focus-visible {
-  outline: 2px solid var(--rs-border-accent);
-  outline-offset: 2px;
-}
-
-.rs-shell-icon-btn svg {
-  width: 24px;
-  height: 24px;
-}
-
-.rs-shell-body {
-  display: flex;
-  flex-direction: column;
-  gap: 32px;
-}
-
-.rs-shell-section {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
 /* Body header — icon wrapper + title + subtitle */
 
 .rs-body-header {
@@ -5025,26 +5092,6 @@
   height: 16px;
 }
 
-/* Powered-by footer in shell */
-
-.rs-shell-footer {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-  font-size: 11px;
-  font-weight: 500;
-  color: var(--rs-muted);
-}
-
-/* When the shell is active the dialog content no longer needs a separate
-   border or background — the shell paints everything inside the same padded
-   container, matching Figma. */
-.rs-modal-content:has(.rs-shell) {
-  border: 1px solid var(--rs-border);
-  background-color: var(--rs-background);
-}
-
 /* =============================================================================
    Fiat On-Ramp (Swapped iframe flow)
    ============================================================================= */