Skip to content

Commit eb3b482

Browse files
miladsoftmiladsoft
authored
Fix UI (#278)
* Refactor progress display and enhance card styles in Spend page * Enhance claim info card styles and improve transaction layout responsiveness * Update header text for clarity and simplify condition check in Spend page
1 parent d79569b commit eb3b482

File tree

4 files changed

+367
-127
lines changed

4 files changed

+367
-127
lines changed

Diff for: ‎src/Angor/Client/Pages/Release.razor

+154-70
Original file line numberDiff line numberDiff line change
@@ -39,16 +39,14 @@
3939
<span class="header-icon-wrapper">
4040
<Icon IconName="signature" Width="32" Height="32" />
4141
</span>
42-
<h5 class="header-text">Claim released funds without a penalty</h5>
42+
<h5 class="header-text">Claim funds without penalty</h5>
4343
</div>
4444
<div class="header-actions">
45-
4645
</div>
4746
</div>
4847
</div>
4948
</div>
5049

51-
5250
<div class="row slide-in mt-4">
5351
<div class="card card-body">
5452
<p class="mb-0 font-weight-normal text-sm animate-fade-in-delayed">
@@ -57,99 +55,184 @@
5755
</div>
5856
</div>
5957

60-
<div class="card mt-4 text-center animate-fade-in">
61-
<div class="card-header d-flex justify-content-between align-items-center flex-wrap">
62-
<h4 class="mb-0">Waiting for the founder to approve</h4>
63-
<div class="d-flex mt-2 mt-md-0">
64-
<button class="btn btn-border animate-scale" @onclick="FetchInvestorCheckPassword" disabled="@refreshSpinner">
65-
@if (refreshSpinner)
66-
{
67-
<span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
68-
<span>Refreshing...</span>
69-
}
70-
else
71-
{
72-
<Icon IconName="refresh" Width="20" Height="20" class="me-1" />
73-
<span>Refresh</span>
74-
}
75-
</button>
58+
<div class="card card-body mt-4 animate-fade-in">
59+
60+
<div class="d-flex align-items-center justify-content-between mb-4">
61+
<div class="d-flex align-items-center">
62+
<span class="user-select-none animate-rotate">
63+
<Icon IconName="indexer" Height="32" Width="32"></Icon>
64+
</span>
65+
<div class="h-100 ms-3">
66+
<h5 class="mb-0 font-weight-bolder">
67+
Awaiting release
68+
</h5>
69+
70+
</div>
7671
</div>
72+
<button class="btn btn-border-success refresh-btn h-100 w-auto" @onclick="FetchInvestorCheckPassword" disabled="@refreshSpinner">
73+
@if (refreshSpinner)
74+
{
75+
<span class="spinner-border spinner-border-sm opacity-10 btn-angor btn-content"
76+
role="status"
77+
aria-hidden="true">
78+
</span>
79+
}
80+
else
81+
{
82+
<Icon IconName="refresh" Height="24" Width="24" />
83+
}
84+
</button>
7785
</div>
78-
86+
7987
@if (InvestorProject.UnfundedReleaseTransactionId != null)
8088
{
81-
<p class="my-3">
82-
Transaction ID: <span id="transactionID">@InvestorProject.UnfundedReleaseTransactionId</span> |
83-
<a href="@explorerLink" target="_blank" class="ms-2">View on explorer</a>
84-
</p>
85-
86-
<p class="modal-title">
87-
Coins have already been released.
88-
</p>
89-
<hr class="my-4" />
90-
<p class="text-muted">You can now proceed to claim your funds.</p>
89+
<div class="transaction-status-container">
90+
<div class="transaction-info p-4 rounded shadow-sm">
91+
<div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3">
92+
<div class="transaction-details">
93+
<h6 class="text-muted mb-2">Transaction ID</h6>
94+
<div class="d-flex align-items-center">
95+
<span class="transaction-id text-truncate">@InvestorProject.UnfundedReleaseTransactionId</span>
96+
<a href="@explorerLink" target="_blank" class="ms-2 btn btn-sm btn-outline-primary">
97+
<Icon IconName="link" Width="16" Height="16" Class="me-1" />
98+
View on Explorer
99+
</a>
100+
</div>
101+
</div>
102+
<div class="transaction-status">
103+
<span class="badge bg-success">
104+
<Icon IconName="check-circle" Width="16" Height="16" Class="me-1" />
105+
Released
106+
</span>
107+
</div>
108+
</div>
109+
<hr class="my-4" />
110+
<div class="text-center">
111+
<p class="lead mb-0">Your coins have been successfully released.</p>
112+
<p class="text-muted mt-2">You can now proceed to claim your funds.</p>
113+
</div>
114+
</div>
115+
</div>
91116
}
92117
else
93118
{
94119
@if (InvestorReleaseSigInfo == null)
95120
{
96-
<div class="card-body d-flex justify-content-center align-items-center">
121+
<div class="d-flex justify-content-center align-items-center">
97122
<div class="loader-slow"></div>
98123
</div>
99124
}
100125
else
101126
{
102-
<p class="modal-title">
103-
The founder has signed a transaction that allows the investor to take back the coins without a penalty, you may claim back your coins.
104-
</p>
127+
<div class="info-card d-flex align-items-center mb-4">
128+
<Icon IconName="info" Class="alert-icon me-3" Width="24" Height="24" />
129+
<p class="mb-0">
130+
Funds are ready to be claimed without penalty
131+
</p>
132+
</div>
133+
105134
@if (totalInvested != null)
106135
{
107-
<p class="modal-title">
108-
Total coins to claim is @Money.Satoshis(totalInvested.Value).ToUnit(MoneyUnit.BTC) @network.CoinTicker
109-
</p>
136+
<div class="info-card">
137+
<div class="d-flex flex-column flex-sm-row justify-content-between align-items-center gap-3">
138+
<div class="claim-amount text-center text-md-start">
139+
<h6 class="mb-1 text-muted">Total Available to Claim</h6>
140+
<h4 class="mb-0">@Money.Satoshis(totalInvested.Value).ToUnit(MoneyUnit.BTC) @network.CoinTicker</h4>
141+
</div>
142+
<button class="btn btn-border-success btn-lg mt-2 mt-sm-0" @onclick="ClaimInvestorCoinsPasswordAsync" disabled="@claimCoinSpinner">
143+
@if (claimCoinSpinner)
144+
{
145+
<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
146+
<span>Processing Claim...</span>
147+
}
148+
else
149+
{
150+
<Icon IconName="coins" Class="me-2" Width="20" Height="20" />
151+
<span>Claim Funds</span>
152+
}
153+
</button>
154+
</div>
155+
</div>
156+
110157
}
111-
<br/>
112-
<button class="btn btn-sm btn-border ml-2" @onclick="ClaimInvestorCoinsPasswordAsync" disabled="@claimCoinSpinner">
113-
@if (claimCoinSpinner)
114-
{
115-
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
116-
<span>Claiming coins...</span>
117-
}
118-
else
119-
{
120-
<span>Claim coins</span>
121-
}
122-
</button>
123158
}
124159
}
125160
</div>
126-
161+
127162
@if (showReleaseModal)
128163
{
129164
<div class="modal-wrapper">
130165
<div class="modal fade show d-block" tabindex="-1">
131-
<div class="modal-dialog">
132-
<div class="modal-content">
133-
<div class="modal-header">
134-
<h5 class="modal-title">Recovery Confirmation</h5>
135-
<button type="button" class="btn-close" @onclick="() => showReleaseModal = false" disabled="@prepareToReleaseCoinsConfirmSpinner"></button>
166+
<div class="modal-dialog modal-dialog-centered">
167+
<div class="modal-content modern-modal">
168+
<div class="modal-header border-0 pb-0">
169+
<div class="d-flex align-items-center">
170+
<Icon IconName="wallet" Height="32" Width="32" class="me-2" />
171+
<h5 class="modal-title">Recovery Confirmation</h5>
172+
</div>
173+
<button class="btn-close-custom" @onclick="() => showReleaseModal = false" disabled="@prepareToReleaseCoinsConfirmSpinner">
174+
<Icon IconName="close-circle" Height="24" Width="24" />
175+
</button>
136176
</div>
137-
<div class="modal-body modal-body-scroll">
138-
139-
<p class="mb-1">Claim back your investment without a penalty </p>
140177

141-
<p class="mb-1"><strong>Miner fee:</strong> @Money.Satoshis(releaseTransaction?.TransactionFee ?? 0).ToUnit(MoneyUnit.BTC) @network.CoinTicker</p>
142-
143-
<hr>
144-
145-
<div class="mb-3">
146-
<label for="feeRange" class="form-label">Feerate for @feeData.SelectedFeeEstimation.Confirmations blocks is @feeData.SelectedFeeEstimation.FeeRate sats</label>
147-
<input type="range" class="form-range" id="feeRange" @bind="feeData.FeePosition" @oninput="ReleaseInvestorFeeRangeChanged" min="@feeData.FeeMin" max="@feeData.FeeMax">
178+
<div class="modal-body modal-body-scroll">
179+
<div class="release-confirmation-container">
180+
<div class="transaction-summary mb-4">
181+
<div class="summary-header d-flex align-items-center mb-3">
182+
<Icon IconName="info-circle" Class="me-2" Width="24" Height="24" />
183+
<h6 class="mb-0">Transaction Summary</h6>
184+
</div>
185+
186+
<div class="info-card fee-details p-3 rounded">
187+
<div class="d-flex justify-content-between align-items-center mb-3">
188+
<span class="text-muted">Network Fee:</span>
189+
<span class="fee-amount fw-bold">
190+
@Money.Satoshis(releaseTransaction?.TransactionFee ?? 0).ToUnit(MoneyUnit.BTC) @network.CoinTicker
191+
</span>
192+
</div>
193+
194+
<div class="fee-adjustment">
195+
<div class="d-flex justify-content-between align-items-center mb-2">
196+
<label for="feeRange" class="form-label mb-0">Transaction Speed</label>
197+
<span class="badge bg-primary">
198+
@feeData.SelectedFeeEstimation.FeeRate sats
199+
</span>
200+
</div>
201+
202+
<div class="range-container position-relative">
203+
<input type="range"
204+
class="form-range"
205+
id="feeRange"
206+
@bind="feeData.FeePosition"
207+
@oninput="ReleaseInvestorFeeRangeChanged"
208+
min="@feeData.FeeMin"
209+
max="@feeData.FeeMax">
210+
211+
<div class="range-labels d-flex justify-content-between mt-2">
212+
<small class="text-muted">Slower</small>
213+
<small class="text-muted">
214+
~@feeData.SelectedFeeEstimation.Confirmations blocks
215+
</small>
216+
<small class="text-muted">Faster</small>
217+
</div>
218+
</div>
219+
</div>
220+
</div>
221+
</div>
222+
223+
<div class="confirmation-message alert alert-warning">
224+
<div class="d-flex align-items-center">
225+
<Icon IconName="exclamation-triangle" Class="me-2" Width="20" Height="20" />
226+
<div>
227+
<h6 class="alert-heading mb-1">Confirmation Required</h6>
228+
<p class="mb-0 small">
229+
You are about to claim back your investment without any penalty.
230+
This action cannot be undone.
231+
</p>
232+
</div>
233+
</div>
234+
</div>
148235
</div>
149-
150-
<hr>
151-
152-
<p class="mt-3">Are you sure you want to claim back these funds?</p>
153236
</div>
154237
<div class="modal-footer">
155238
<button type="button" class="btn btn-border-warning" @onclick="() => showReleaseModal = false" disabled="@prepareToReleaseCoinsConfirmSpinner">Cancel</button>
@@ -171,6 +254,7 @@
171254
</div>
172255
}
173256

257+
174258
@code {
175259
[Parameter]
176260
public string ProjectIdentifier { get; set; }
@@ -297,7 +381,7 @@
297381
Logger.LogError("Incorrect signature types received");
298382
InvestorReleaseSigInfo = null;
299383
}
300-
384+
301385
StateHasChanged();
302386

303387
});

Diff for: ‎src/Angor/Client/Pages/Spend.razor

+23-16
Original file line numberDiff line numberDiff line change
@@ -89,32 +89,39 @@
8989
{
9090
@if (totalInvestedAmount <= founderProject.ProjectInfo.TargetAmount && founderProject.ProjectHasStarted())
9191
{
92-
<div class="target-status-section slide-in mt-4">
92+
<div class="card card-body slide-in mt-4">
9393

94-
<div class="info-alert glass-effect">
94+
<div class="info-alert">
9595
<Icon IconName="info" Class="alert-icon" Width="24" Height="24" />
9696
<p>The target investment amount has not been reached. As founder, you can only release the funds back to the investors.</p>
9797
</div>
98+
9899
<div class="status-overview mt-4">
99-
<div class="progress-circle-wrapper">
100-
<div class="progress-circle"
101-
role="progressbar"
102-
data-percentage="@((totalInvestedAmount * 100 / founderProject.ProjectInfo.TargetAmount).ToString("0"))"
103-
style="--percentage: @((totalInvestedAmount * 100 / founderProject.ProjectInfo.TargetAmount).ToString("0"))">
104-
<div class="progress-circle-inner">
105-
<div class="progress-circle-content">
106-
<Icon IconName="alert-circle" Height="32" Width="32" Class="warning-icon" />
107-
<h4 class="progress-title">Target Not Reached</h4>
108-
<div class="progress-value">
109-
@((totalInvestedAmount * 100 / founderProject.ProjectInfo.TargetAmount).ToString("0.0"))%
100+
@{
101+
var progressPercent = founderProject.ProjectInfo.TargetAmount > 0
102+
? (Money.Satoshis(totalInvestedAmount).ToUnit(MoneyUnit.BTC) / Money.Satoshis(founderProject.ProjectInfo.TargetAmount).ToUnit(MoneyUnit.BTC)) * 100
103+
: 0;
104+
105+
<div class="w-100">
106+
<div class="progress-card @(progressPercent >= 100 ? "progress-success" : "progress-warning")">
107+
<div class="percent">
108+
<svg>
109+
<circle cx="105" cy="105" r="100"></circle>
110+
<circle cx="105" cy="105" r="100" style="--percent: @progressPercent"></circle>
111+
</svg>
112+
<div class="number">
113+
<p>@progressPercent %</p>
110114
</div>
111115
</div>
116+
<div class="footer text-center mt-4">
117+
<p>@Money.Satoshis(totalInvestedAmount).ToUnit(MoneyUnit.BTC) @network.CoinTicker </p>
118+
</div>
112119
</div>
113120
</div>
114-
</div>
121+
}
115122

116123
<div class="amount-stats">
117-
<div class="amount-card glass-effect">
124+
<div class="amount-card info-card rounded-3 border hover-effect">
118125
<div class="amount-card-content">
119126
<Icon IconName="wallet" Height="32" Width="32" Class="card-icon" />
120127
<div class="amount-info">
@@ -130,7 +137,7 @@
130137
</div>
131138
</div>
132139

133-
<div class="amount-card glass-effect">
140+
<div class="amount-card info-card rounded-3 border hover-effect">
134141
<div class="amount-card-content">
135142
<Icon IconName="wallet" Height="32" Width="32" Class="card-icon" />
136143
<div class="amount-info">

0 commit comments

Comments
 (0)