@rhinestone/deposit-modal 0.1.12 → 0.1.14

package/dist/styles.css

@@ -70,6 +70,9 @@
   --rs-secondary: var(--color-gray3);
   --rs-secondary-hover: var(--color-gray4);
 
+  --rs-shadow-dropdown:
+    0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
+
   /* Sizing */
   --rs-height-button: 42px;
   --rs-height-titlebar: 36px;
@@ -100,18 +103,34 @@
    ============================================================================= */
 
 .rs-modal[data-theme="dark"] {
-  --color-gray1: #111111;
-  --color-gray2: #191919;
-  --color-gray3: #222222;
-  --color-gray4: #2a2a2a;
-  --color-gray5: #313131;
-  --color-gray6: #3a3a3a;
-  --color-gray7: #484848;
-  --color-gray8: #606060;
+  --color-gray1: #050505;
+  --color-gray2: #0a0a0a;
+  --color-gray3: #131313;
+  --color-gray4: #1a1a1a;
+  --color-gray5: #232323;
+  --color-gray6: #2c2c2c;
+  --color-gray7: #3b3b3b;
+  --color-gray8: #525252;
   --color-gray9: #6e6e6e;
-  --color-gray10: #7b7b7b;
-  --color-gray11: #b4b4b4;
-  --color-gray12: #eeeeee;
+  --color-gray10: #9a9a9a;
+  --color-gray11: #b0b0b0;
+  --color-gray12: #ededed;
+
+  /* Dark mode tints: translucent overlays instead of light pastels */
+  --color-blue3: rgba(0, 144, 255, 0.10);
+  --color-blue4: rgba(0, 144, 255, 0.16);
+  --color-blue10: #3b9eff;
+  --color-green3: rgba(48, 164, 108, 0.10);
+  --color-green4: rgba(48, 164, 108, 0.16);
+  --color-green10: #3cb179;
+  --color-red3: rgba(229, 72, 77, 0.10);
+  --color-red4: rgba(229, 72, 77, 0.16);
+  --color-red10: #f16a6e;
+  --color-amber3: rgba(226, 163, 54, 0.10);
+
+  --rs-shadow-dropdown:
+    0 4px 20px rgba(0, 0, 0, 0.6), 0 1px 4px rgba(0, 0, 0, 0.4);
+
   color-scheme: dark;
 }
 
@@ -1149,7 +1168,6 @@
 .rs-connect-wallet-row {
   display: flex;
   align-items: center;
-  justify-content: space-between;
   gap: 12px;
   width: 100%;
   padding: 10px 12px;
@@ -1178,11 +1196,67 @@
   border-style: dashed;
 }
 
+.rs-connect-wallet-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  min-width: 36px;
+  border-radius: 50%;
+  background: var(--rs-surface);
+  color: var(--rs-muted);
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease;
+}
+
+.rs-connect-wallet-icon svg {
+  width: 18px;
+  height: 18px;
+}
+
+.rs-connect-wallet-icon--selected {
+  background: var(--rs-primary-tint);
+  color: var(--rs-primary);
+}
+
+.rs-connect-wallet-icon--action {
+  background: var(--rs-background-secondary);
+  color: var(--rs-muted-foreground);
+}
+
+.rs-connect-wallet-row:hover .rs-connect-wallet-icon--action {
+  background: var(--rs-surface);
+}
+
+.rs-connect-wallet-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  min-width: 16px;
+  color: var(--rs-muted-foreground);
+  margin-left: auto;
+  transition: color 0.15s ease;
+}
+
+.rs-connect-wallet-indicator svg {
+  width: 14px;
+  height: 14px;
+}
+
+.rs-connect-wallet-row--selected .rs-connect-wallet-indicator {
+  color: var(--rs-primary);
+}
+
 .rs-connect-wallet-meta {
   display: flex;
   flex-direction: column;
   gap: 2px;
   min-width: 0;
+  flex: 1;
 }
 
 .rs-connect-wallet-label {
@@ -1601,6 +1675,11 @@
   gap: 6px;
 }
 
+.rs-flow-pill-token-icon-wrapper {
+  position: relative;
+  flex-shrink: 0;
+}
+
 .rs-flow-pill-token-icon {
   width: 20px;
   height: 20px;
@@ -1623,6 +1702,29 @@
   object-fit: contain;
 }
 
+.rs-flow-pill-chain-badge {
+  position: absolute;
+  bottom: -2px;
+  right: -2px;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  border: 1.5px solid var(--rs-surface);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 6px;
+  font-weight: 700;
+  overflow: hidden;
+}
+
+.rs-flow-pill-chain-badge img {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  object-fit: contain;
+}
+
 .rs-flow-pill-token-symbol {
   font-size: 13px;
   font-weight: 500;
@@ -2058,9 +2160,7 @@
   background: var(--rs-background);
   border: 1px solid var(--rs-border);
   border-radius: var(--rs-radius-sm);
-  box-shadow:
-    0 -4px 12px rgba(0, 0, 0, 0.08),
-    0 -1px 3px rgba(0, 0, 0, 0.06);
+  box-shadow: var(--rs-shadow-dropdown);
   padding: 4px;
   display: flex;
   flex-direction: column;
@@ -2192,8 +2292,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 16px;
-  padding: 8px 0;
+  gap: 12px;
 }
 
 .rs-deposit-address-selectors {
@@ -2265,9 +2364,7 @@
   background: var(--rs-background);
   border: 1px solid var(--rs-border);
   border-radius: var(--rs-radius-sm);
-  box-shadow:
-    0 4px 12px rgba(0, 0, 0, 0.08),
-    0 1px 3px rgba(0, 0, 0, 0.06);
+  box-shadow: var(--rs-shadow-dropdown);
   padding: 4px;
   display: flex;
   flex-direction: column;
@@ -2334,8 +2431,9 @@
 
 .rs-deposit-address-value {
   font-size: 12px;
-  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
-    "Liberation Mono", monospace;
+  font-family:
+    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
+    monospace;
   color: var(--rs-foreground);
   word-break: break-all;
   text-align: center;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rhinestone/deposit-modal",
-  "version": "0.1.12",
+  "version": "0.1.14",
   "description": "React modal component for Rhinestone cross-chain deposits",
   "author": "Rhinestone <dev@rhinestone.wtf>",
   "bugs": {