Skip to content

Commit

Permalink
UI/UX improvement (#235)
Browse files Browse the repository at this point in the history 
* Enhance theme handling by adding background color changes for dark and light modes

* Add feature boxes and a call-to-action button to the homepage

* Refactor dashboard and app styles; enhance RawTransactionModal with clipboard notification

* Enhance project browsing experience with animations and hover effects; update styles for improved UI

* Add class parameter to Icon component; enhance Wallet page with feature boxes and improved styles

* Enhance UI components with improved styles and animations; update project details display for better readability

* Refactor project layout to use grid animation; update icon colors for better visibility

* Refactor error UI layout for improved readability; update button colors for better visibility

* Change alert color in Wallet page to indicate error state; update class to 'alert-danger' for better visibility

* Refactor Create, Investor, and Wallet pages for improved layout and styling; enhance tab structure and card components for better usability

* Enhance RawTransactionModal with z-index for improved visibility; update Invest page buttons for better user interaction

* Refactor Spend page layout for improved readability; enhance transaction display with estimated completion time and expand functionality

* Refactor Spend page layout for enhanced user experience; improve transaction display with animations and better structure

* Enhance Spend page with instructional text for transaction selection; improve button interactions and z-index for notifications

* Add new SVG icons for expand, collapse, withdraw, investment, and statistics; update dashboard and app CSS for improved styling and responsiveness

* Revamp transaction confirmation modal with improved layout and styling; enhance transaction details display and user interaction

* Refactor Spend page to enhance clipboard functionality; replace button with icon for copying transaction ID and improve selected transactions display logic

* Enhance Spend page with improved transaction selection logic and user feedback; streamline button interactions and update styling for better usability

* Revamp UTXO selection modal with improved layout and styling; enhance transaction info display and user interaction

* Enhance wallet modal layout and styling; improve responsiveness of input fields and buttons for better user interaction

* Revamp QR code modal layout and styling; enhance user interaction and responsiveness. Improve wallet words validation and error messaging for better user experience.

* Refactor modal components for improved layout and styling; enhance user interaction with updated button designs and responsive adjustments.

* Enhance button styles across multiple pages for improved visual consistency; introduce new border styles for warning and danger buttons, and adjust layout for better responsiveness.

* Update success button hover background color for improved visual feedback

* Improve overall layout and styling of modals for enhanced user experience and responsiveness

* Revamp investment page layout and styling; enhance user interaction with improved card designs, responsive adjustments, and new investment stages breakdown.

* Enhance investment input section with a range slider for selecting amounts; improve layout and styling for better user interaction.

* Refactor Browse page layout and styling; enhance loading indicators and project card designs for improved user experience.

* Enhance investment and recovery modals with improved layout and styling; add animations and better user interaction elements for a more engaging experience.

* Refactor styles for info cards and navigation icons; improve background colors and icon dimensions for better visual consistency and user experience.

* Enhance Wallet page UI; improve button layout and add icons for better user interaction and visual appeal.
  • Loading branch information
@miladsoft
miladsoft authored Jan 6, 2025
1 parent 7b76bd8 commit bfd7815
Show file tree
Hide file tree
Showing 88 changed files with 3,744 additions and 1,802 deletions.
2 changes: 1 addition & 1 deletion src/Angor/Client/Components/FounderProjectItem.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@
<hr class="horizontal light mt-3">
<a role="button" class="d-flex align-items-center btn btn-border w-100-m" href=@($"/signatures/{FounderProject.ProjectInfo.ProjectIdentifier}")>
<span class="user-select-none">
<Icon IconName="check-circle" Height="24" Width="24"></Icon>
<Icon IconName="signature" Height="24" Width="24"></Icon>
</span>
<div class="h-100 ms-3">
<span class="mb-0 font-weight-bolder">
Expand Down
13 changes: 12 additions & 1 deletion src/Angor/Client/Components/Icon.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
[Parameter] public int Width { get; set; } = 32;
[Parameter] public int Height { get; set; } = 32;
[Parameter] public string Color { get; set; } = "var(--angor-primary)";
[Parameter] public string Class { get; set; } = "";
private string svgContent;

protected override async Task OnParametersSetAsync()
Expand All @@ -14,7 +15,17 @@

@if (!string.IsNullOrEmpty(svgContent))
{
@((MarkupString)svgContent)
if (@Class != "")
{
<i class="@Class">
@((MarkupString)svgContent)
</i>
}
else
{
@((MarkupString)svgContent)
}

}
else
{
Expand Down
39 changes: 24 additions & 15 deletions src/Angor/Client/Components/RawTransactionModal.razor
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,31 @@
@using Angor.Shared.Models
@inject IClipboardService ClipboardService
@inherits BaseComponent

<NotificationComponent @ref="notificationComponent" />

@if (IsVisible)
{
<div class="modal-wrapper">
<div class="modal fade show d-block">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Raw Transaction JSON</h5>
<span type="button" @onclick="CloseModal" aria-label="Close">
<Icon IconName="close-circle"/>
<i @onclick="CopyToClipboard" class="ms-auto cursor-pointer user-select-none">
<Icon IconName="copy"></Icon>
</i>
</span>
<div class="modal-wrapper z-index-top">
<div class="modal fade show d-block" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content modern-modal">
<div class="modal-header border-0 pb-0">
<div class="d-flex align-items-center">
<Icon IconName="file-code" Height="32" Width="32" class="me-2" />
<h5 class="modal-title">Raw Transaction JSON</h5>
</div>
<button class="btn-close-custom" @onclick="CloseModal">
<Icon IconName="close-circle" Height="24" Width="24" />
</button>
</div>
<div class="modal-body modal-body-scroll py-4">
<pre class="code-block">@RawTransactionJson</pre>
</div>
<div class="modal-body">
<pre>@RawTransactionJson</pre>
<div class="modal-footer border-0 pt-0">
<button class="btn btn-border" @onclick="CopyToClipboard">
<Icon IconName="copy" class="me-2" /> Copy to Clipboard
</button>
</div>
</div>
</div>
Expand All @@ -38,5 +46,6 @@
private async Task CopyToClipboard()
{
await ClipboardService.WriteTextAsync(RawTransactionJson);
notificationComponent.ShowNotificationMessage("Copied to clipboard!", 3);
}
}
}
48 changes: 30 additions & 18 deletions src/Angor/Client/Components/ShowQrCode.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,28 +19,39 @@
@if (showModal)
{
<div class="modal-wrapper">
<div class="modal fade show d-block" id="qrcodeModal" tabindex="-1" aria-labelledby="qrcodeModalLabel" aria-hidden="true">
<div class="modal-dialog custom-modal-size">
<!-- Custom modal size -->
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="coinControlModalLabel">Receive</h5>
<span type="button" data-bs-dismiss="modal" @onclick="HideModal" data-cy="QR_IMAGE_IN_POPUP">
<Icon IconName="close-circle"></Icon>
</span>
<div class="modal fade show d-block" tabindex="-1">
<div class="modal-dialog modal-dialog-centered modal-sm">
<div class="modal-content modern-modal">
<div class="modal-header border-0 pb-0">
<div class="d-flex align-items-center">
<Icon IconName="receive" Height="24" Width="24" class="me-2" />
<h5 class="modal-title fs-5">Receive Address</h5>
</div>
<button class="btn-close-custom" @onclick="HideModal">
<Icon IconName="close-circle" Height="20" Width="20" />
</button>
</div>
<div class="modal-body">
<img src="data:image/png;base64,@base64qrcode" class="qrcode-image" alt="QR Code" />
<div class="address-container">
<div class="d-flex align-items-center">
<p id="receive-address" class="address-text mb-0 overflow-x-auto" data-cy="WALLET_ADRESS_IN_QR_POPUP">@Data</p>
<i @onclick="CopyToClipboard" class="ms-auto cursor-pointer user-select-none">
<Icon IconName="copy"></Icon>
<div class="modal-body p-3">
<div class="text-center mb-3">
<img src="data:image/png;base64,@base64qrcode"
class="qrcode-image img-fluid rounded"
width="200" height="200"
alt="QR Code" />
</div>
<div class="card border p-2">
<div class="d-flex align-items-center gap-2">
<div class="flex-grow-1">
<small class="text-muted d-block mb-1">Address</small>
<div class="small text-truncate" title="@Data" data-cy="WALLET_ADRESS_IN_QR_POPUP">
@Data
</div>
</div>
<i class="px-2 py-1" @onclick="CopyToClipboard">
<Icon IconName="copy" Height="32" Width="32" />
</i>
</div>
</div>
</div>

</div>
</div>
</div>
Expand Down Expand Up @@ -91,7 +102,8 @@
using QRCodeGenerator qrGenerator = new QRCodeGenerator();
using QRCodeData qrCodeData = qrGenerator.CreateQrCode(content, QRCodeGenerator.ECCLevel.Q);
using PngByteQRCode pngByteQRCode = new PngByteQRCode(qrCodeData);
return Convert.ToBase64String(pngByteQRCode.GetGraphic(10));
// Reduced QR code size from 10 to 6
return Convert.ToBase64String(pngByteQRCode.GetGraphic(6));
}

private async Task CopyToClipboard()
Expand Down
Loading

0 comments on commit bfd7815

Please sign in to comment.