Skip to content

Commit d04bee0

Browse files
YuurinBeeYuurinBee
committed
PIVX Mini-App Stylization
1 parent 019c9be commit d04bee0

3 files changed

Lines changed: 76 additions & 57 deletions

File tree

‎src/index.html‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -297,14 +297,15 @@ <h3>Send PIVX</h3>
297297
</div>
298298
</div>
299299
<div class="pivx-send-custom-toggle" id="pivx-send-custom-toggle">
300-
Send custom amount
300+
Send Custom Amount
301301
</div>
302302
</div>
303303

304304
<!-- Custom Amount (hidden by default) -->
305305
<div class="pivx-send-custom-section" id="pivx-send-custom-section" style="display: none;">
306306
<div class="pivx-send-custom-warning">
307-
Custom amounts require on-chain confirmation and may take longer to send.
307+
<svg class="icon icon-info"><use xlink:href="#icon-info"></use></svg>
308+
Custom amounts require on-chain confirmation and may take longer to send.
308309
</div>
309310
<div class="pivx-amount-input-container">
310311
<input type="number" id="pivx-send-amount" placeholder="0.00" step="0.01" min="0">
@@ -315,7 +316,7 @@ <h3>Send PIVX</h3>
315316
<span class="pivx-withdraw-max-btn" id="pivx-send-max">MAX</span>
316317
</div>
317318
<div class="pivx-send-back-toggle" id="pivx-send-back-toggle">
318-
← Back to quick send
319+
Back to Quick Send
319320
</div>
320321
</div>
321322

‎src/main.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -525,7 +525,7 @@ async function refreshPivxWallet() {
525525
pivxCurrentWalletBalance = balance;
526526

527527
if (domPivxBalanceAmount) {
528-
domPivxBalanceAmount.innerHTML = `${balance.toFixed(2)} <span style="color: #564b8d;">PIV</span>`;
528+
domPivxBalanceAmount.innerHTML = `${balance.toFixed(2)} <span style="color: #642D8F;">PIV</span>`;
529529
// Trigger fade-in animation
530530
void domPivxBalanceAmount.offsetWidth; // Force reflow
531531
domPivxBalanceAmount.classList.add('pivx-fade-in');
@@ -556,7 +556,7 @@ async function refreshPivxWallet() {
556556
} catch (err) {
557557
console.error('Failed to refresh PIVX wallet:', err);
558558
if (domPivxBalanceAmount) {
559-
domPivxBalanceAmount.innerHTML = `0.00 <span style="color: #564b8d;">PIV</span>`;
559+
domPivxBalanceAmount.innerHTML = `0.00 <span style="color: #642D8F;">PIV</span>`;
560560
void domPivxBalanceAmount.offsetWidth;
561561
domPivxBalanceAmount.classList.add('pivx-fade-in');
562562
}

‎src/styles.css‎

Lines changed: 70 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -2507,6 +2507,11 @@ html, body {
25072507
background-color: rgba(255, 255, 255, 0.7);
25082508
}
25092509

2510+
.attachment-panel-btn .icon-pivx {
2511+
width: 44px;
2512+
height: 44px;
2513+
}
2514+
25102515
.attachment-panel-label {
25112516
position: relative;
25122517
font-size: 11px;
@@ -6019,7 +6024,8 @@ hr {
60196024

60206025
/* PIVX button in attachment panel */
60216026
.attachment-panel-pivx-btn {
6022-
background: linear-gradient(to right, #3e306d, #534792) !important;
6027+
background: linear-gradient(to bottom, #452568, #110B1B) !important;
6028+
border: 1px solid #110B1B;
60236029
}
60246030

60256031
/* ============================================================================
@@ -6028,7 +6034,7 @@ hr {
60286034

60296035
/* Attachment panel border when PIVX is active */
60306036
.attachment-panel.pivx-active {
6031-
border-color: #282828;
6037+
border: 1px solid #262626;
60326038
}
60336039

60346040
/* PIVX Wallet Panel Content */
@@ -6064,7 +6070,7 @@ hr {
60646070
.pivx-close-btn .icon {
60656071
width: 14px;
60666072
height: 14px;
6067-
background-color: #52478c;
6073+
background-color: #642D8F;
60686074
position: relative;
60696075
margin: 0;
60706076
}
@@ -6084,24 +6090,24 @@ hr {
60846090
align-items: center;
60856091
gap: 16px;
60866092
padding: 16px 20px;
6087-
background: linear-gradient(to right, #52478c 0%, #111013 100%);
6093+
background: linear-gradient(to right, #452568 0%, #110B1B 100%);
60886094
border-radius: 12px;
6089-
border: 1px solid #52478c;
6095+
border: 2px solid #642D8F;
60906096
opacity: 0; /* Hidden by default, animated in when panel opens */
60916097
}
60926098

60936099
.pivx-balance-logo {
6094-
width: 72px;
6095-
height: 72px;
6100+
width: 80px;
6101+
height: 80px;
60966102
flex-shrink: 0;
60976103
display: flex;
60986104
align-items: center;
60996105
justify-content: center;
61006106
}
61016107

61026108
.pivx-balance-logo img {
6103-
width: 64px;
6104-
height: 64px;
6109+
width: 80px;
6110+
height: 80px;
61056111
}
61066112

61076113
.pivx-balance-info {
@@ -6246,12 +6252,10 @@ hr {
62466252
height: 44px;
62476253
background: rgba(255, 255, 255, 0.12);
62486254
border-radius: 12px;
6249-
transition: box-shadow 0.15s ease, background 0.15s ease;
62506255
}
62516256

62526257
.pivx-dock-btn:hover .pivx-dock-icon {
62536258
background: rgba(255, 255, 255, 0.18);
6254-
box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
62556259
}
62566260

62576261
.pivx-dock-icon .icon {
@@ -6268,16 +6272,17 @@ hr {
62686272

62696273
/* Primary button (Send) - purple highlight */
62706274
.pivx-dock-btn-primary .pivx-dock-icon {
6271-
background: linear-gradient(to right, #3e306d, #534792);
6275+
background: #642D8F;
62726276
}
62736277

62746278
.pivx-dock-btn-primary .pivx-dock-icon .icon {
62756279
background-color: white;
62766280
}
62776281

62786282
.pivx-dock-btn-primary:hover .pivx-dock-icon {
6279-
background: linear-gradient(to right, #4a3c7a, #6358a3);
6280-
box-shadow: 0 4px 12px rgba(92, 77, 154, 0.4);
6283+
background: #642D8F;
6284+
transform: scale(1.1);
6285+
transition: transform 0.15s ease;
62816286
}
62826287

62836288
.pivx-dock-label {
@@ -6297,8 +6302,8 @@ hr {
62976302
left: 0;
62986303
right: 0;
62996304
bottom: 0;
6300-
background: rgba(0, 0, 0, 0.85);
6301-
backdrop-filter: blur(8px);
6305+
background: rgba(0, 0, 0, 0.90);
6306+
backdrop-filter: blur(4px);
63026307
display: none;
63036308
align-items: center;
63046309
justify-content: center;
@@ -6314,20 +6319,20 @@ hr {
63146319

63156320
.pivx-dialog {
63166321
background: rgba(20, 20, 20, 0.95);
6317-
border: 1px solid rgba(92, 77, 154, 0.3);
6322+
border: 2px solid #262626;
63186323
border-radius: 16px;
63196324
width: min(400px, calc(100vw - 40px));
63206325
overflow: hidden;
6321-
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
6326+
box-shadow: 0 0 40px rgba(0, 0, 0, 0.9);
63226327
}
63236328

63246329
.pivx-dialog-header {
63256330
display: flex;
63266331
justify-content: space-between;
63276332
align-items: center;
63286333
padding: 15px 20px;
6329-
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
6330-
background: linear-gradient(to right, #3e306d, #534792);
6334+
border-bottom: 2px solid #262626;
6335+
background: linear-gradient(to right, #110B1B 0%, #452568 100%);
63316336
}
63326337

63336338
.pivx-dialog-header h3 {
@@ -6391,22 +6396,21 @@ hr {
63916396
}
63926397

63936398
.pivx-copy-btn {
6394-
display: flex;
6395-
align-items: center;
6396-
justify-content: center;
6397-
gap: 8px;
6398-
padding: 10px;
6399-
background: rgba(255, 255, 255, 0.1);
6400-
border: 1px solid rgba(255, 255, 255, 0.2);
6399+
width: 100%;
6400+
padding: 14px;
6401+
background: #642D8F;
6402+
border: none;
64016403
border-radius: 8px;
6402-
color: #fff;
6403-
font-size: 14px;
6404+
color: white;
6405+
font-size: 16px;
6406+
font-weight: 500;
64046407
cursor: pointer;
64056408
transition: all 0.2s ease;
64066409
}
64076410

64086411
.pivx-copy-btn:hover {
6409-
background: rgba(255, 255, 255, 0.15);
6412+
opacity: 0.9;
6413+
transform: scale(1.02);
64106414
}
64116415

64126416
.pivx-copy-btn .icon {
@@ -6459,7 +6463,7 @@ hr {
64596463
width: 28px;
64606464
height: 28px;
64616465
border: 3px solid rgba(255, 255, 255, 0.2);
6462-
border-top-color: #7b68ee;
6466+
border-top-color: #B359FC;
64636467
border-radius: 50%;
64646468
animation: pivx-spin 1s linear infinite;
64656469
}
@@ -6554,7 +6558,7 @@ hr {
65546558

65556559
.pivx-send-promo-item.selected {
65566560
background: rgba(92, 77, 154, 0.4);
6557-
border-color: #7b68ee;
6561+
border-color: #B359FC;
65586562
}
65596563

65606564
.pivx-send-promo-item-amount {
@@ -6579,8 +6583,8 @@ hr {
65796583

65806584
.pivx-send-custom-toggle,
65816585
.pivx-send-back-toggle {
6582-
font-size: 12px;
6583-
color: rgba(255, 255, 255, 0.5);
6586+
font-size: 16px;
6587+
color: #B359FC;
65846588
cursor: pointer;
65856589
text-align: center;
65866590
padding: 8px;
@@ -6590,15 +6594,28 @@ hr {
65906594

65916595
.pivx-send-custom-toggle:hover,
65926596
.pivx-send-back-toggle:hover {
6593-
color: #7b68ee;
6597+
color: #B359FC80;
65946598
}
65956599

65966600
.pivx-send-custom-warning {
6597-
font-size: 11px;
6598-
color: #FCE459;
6601+
font-size: 12px;
6602+
color: #B2B2B2;
65996603
border-radius: 6px;
66006604
padding: 10px 12px;
6601-
margin-bottom: 10px;
6605+
margin-bottom: 20px;
6606+
background: #56565620;
6607+
display: flex;
6608+
align-items: flex-start;
6609+
gap: 8px;
6610+
text-align: left;
6611+
}
6612+
6613+
.pivx-send-custom-warning .icon {
6614+
width: 32px;
6615+
height: 32px;
6616+
flex-shrink: 0;
6617+
position: relative;
6618+
padding: 0 4px 0 0;
66026619
}
66036620

66046621
.pivx-amount-input-container {
@@ -6643,7 +6660,7 @@ hr {
66436660
gap: 8px;
66446661
font-size: 12px;
66456662
color: rgba(255, 255, 255, 0.5);
6646-
padding: 4px 0;
6663+
padding: 6px 0 20px 0;
66476664
}
66486665

66496666
.pivx-send-available #pivx-send-available-amount {
@@ -6674,17 +6691,18 @@ hr {
66746691
font-size: 12px;
66756692
color: rgba(255, 255, 255, 0.6);
66766693
text-align: center;
6694+
margin: -6px;
66776695
}
66786696

66796697
#pivx-send-recipient {
6680-
color: #8b5cf6;
6698+
color: #B359FC;
66816699
font-weight: 500;
66826700
}
66836701

66846702
.pivx-send-confirm-btn {
66856703
width: 100%;
66866704
padding: 14px;
6687-
background: linear-gradient(to right, #3e306d, #534792);
6705+
background: #642D8F;
66886706
border: none;
66896707
border-radius: 8px;
66906708
color: white;
@@ -6764,8 +6782,8 @@ hr {
67646782
}
67656783

67666784
.pivx-withdraw-max-btn {
6767-
background: rgba(92, 77, 154, 0.3);
6768-
color: #8b5cf6;
6785+
background: #B359FC30;
6786+
color: #B359FC;
67696787
padding: 2px 8px;
67706788
border-radius: 4px;
67716789
font-size: 11px;
@@ -6775,14 +6793,14 @@ hr {
67756793
}
67766794

67776795
.pivx-withdraw-max-btn:hover {
6778-
background: rgba(92, 77, 154, 0.5);
6796+
background: #B359FC50;
67796797
}
67806798

67816799
.pivx-withdraw-fee-info {
67826800
font-size: 12px;
67836801
color: rgba(255, 255, 255, 0.4);
67846802
text-align: center;
6785-
margin-bottom: 12px;
6803+
margin-bottom: -6px;
67866804
}
67876805

67886806
/* PIVX Settings Dialog */
@@ -6810,7 +6828,7 @@ hr {
68106828
}
68116829

68126830
.pivx-settings-input:focus {
6813-
border-color: rgba(92, 77, 154, 0.5);
6831+
border-color: #B359FC;
68146832
}
68156833

68166834
.pivx-settings-input::placeholder {
@@ -6820,7 +6838,7 @@ hr {
68206838
.pivx-settings-select {
68216839
padding: 12px;
68226840
background: rgba(0, 0, 0, 0.3);
6823-
border: 1px solid rgba(255, 255, 255, 0.1);
6841+
border: 1px solid #383838 !important;
68246842
border-radius: 8px;
68256843
color: #fff;
68266844
font-size: 14px;
@@ -6835,7 +6853,7 @@ hr {
68356853
}
68366854

68376855
.pivx-settings-select:focus {
6838-
border-color: rgba(92, 77, 154, 0.5);
6856+
border-color: #B359FC !important;
68396857
}
68406858

68416859
.pivx-settings-select option {
@@ -6852,20 +6870,20 @@ hr {
68526870

68536871
.pivx-settings-save-btn {
68546872
width: 100%;
6855-
padding: 12px;
6856-
background: linear-gradient(to right, #3e306d, #534792);
6873+
padding: 14px;
6874+
background: #642D8F;
68576875
border: none;
68586876
border-radius: 8px;
68596877
color: white;
6860-
font-size: 14px;
6878+
font-size: 16px;
68616879
font-weight: 500;
68626880
cursor: pointer;
68636881
transition: all 0.2s ease;
6864-
margin-top: 10px;
68656882
}
68666883

68676884
.pivx-settings-save-btn:hover {
68686885
opacity: 0.9;
6886+
transform: scale(1.02);
68696887
}
68706888

68716889
/* PIVX Payment Message Bubble - matches .msg-payment style */

0 commit comments

Comments
 (0)