Skip to content

Commit

Permalink
Refactor dashboard and wallet styles for improved layout and accessib…
Browse files Browse the repository at this point in the history 
…ility
  • Loading branch information
@miladsoft
miladsoft committed Dec 18, 2024
1 parent 8585bba commit 2f4482c
Show file tree
Hide file tree
Showing 4 changed files with 90 additions and 102 deletions.
172 changes: 77 additions & 95 deletions src/Angor/Client/Pages/Settings.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,33 +79,23 @@
<h5>This will wipe your wallet!</h5>
</div>

<div class="card">
<div class="card-header p-2">
<div class="d-flex align-items-center text-warning">
<span>Warning</span>
</div>
</div>
<div class="card-body pb-0 pt-0 ps-3 pe-3">
<p class="mb-0">By confirming, you agree to wiping all data from this device since you have a backup of your wallet words.</p>
<div class="alert alert-warning" role="alert">
<p class="mb-0 text-bl">Warning: By confirming, you agree to wiping all data from this device since you have a backup of your wallet words.</p>

<div class="form-check">
<input class="form-check-input border mt-0" type="checkbox" id="confirmWipeCheckbox" @bind="confirmWipe">
<label class="form-check-label text-black mb-0" for="confirmWipeCheckbox">
Confirm?
</label>
</div>
<div class="card-footer pb-2 pt-2 ps-3 pe-3">
<div class="form-check">
<input class="form-check-input border mt-0" type="checkbox" id="confirmWipeCheckbox" @bind="confirmWipe">
<label class="form-check-label mb-0" for="confirmWipeCheckbox">
Confirm?
</label>
@if (showConfirmWipeMessage)
{
<div class="alert alert-danger mt-2 mb-0" role="alert">
Please tick the box to wipe all storage!
</div>
@if (showConfirmWipeMessage)
{
<div class="alert alert-danger text-white mt-2" role="alert">
Please tick the box to wipe all storage!
</div>
}

</div>
}
</div>


<!-- Dropdown for network selection -->
<div class="card card-body mb-3 mt-4">
<label for="networkSelection">Select Network:</label>
Expand All @@ -122,7 +112,7 @@
</div>
<div class="modal-footer">
<button class="btn btn-danger" @onclick="ChangeNetwork">Change Network</button>
</div>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -379,29 +369,21 @@
</span>
</div>
<div class="modal-body modal-body-scroll">
<div class="card">
<div class="card-header p-2">
<div class="d-flex align-items-center text-warning">
<span>Warning</span>
</div>
</div>
<div class="card-body pb-0 pt-0 ps-3 pe-3">
<p class="mb-0">By confirming, you agree to wiping all data from this device since you have a backup of your wallet words.</p>
<div class="alert alert-warning" role="alert">
<p class="mb-0 text-bl">Warning: By confirming, you agree to wiping all data from this device since you have a backup of your wallet words.</p>

<div class="form-check">
<input class="form-check-input border mt-0" type="checkbox" id="confirmWipeCheckbox" @bind="confirmWipe">
<label class="form-check-label text-black mb-0" for="confirmWipeCheckbox">
Confirm?
</label>
</div>
<div class="card-footer pb-2 pt-2 ps-3 pe-3">
<div class="form-check">
<input class="form-check-input border mt-0" type="checkbox" id="confirmWipeCheckbox" @bind="confirmWipe">
<label class="form-check-label mb-0" for="confirmWipeCheckbox">
Confirm?
</label>
@if (showConfirmWipeMessage)
{
<div class="alert alert-danger mt-2 mb-0" role="alert">
Please tick the box to wipe all storage!
</div>
@if (showConfirmWipeMessage)
{
<div class="alert alert-danger text-white mt-2" role="alert">
Please tick the box to wipe all storage!
</div>
}
</div>
}
</div>
</div>
<div class="modal-footer">
Expand Down Expand Up @@ -432,7 +414,7 @@
private bool confirmWipe = false;
private bool showConfirmWipeMessage = false;
private string selectedNetwork = "Main"; // Default to "testnet"
private string selectedCurrency = "BTC"; // Default to BTC
private SettingsInfo settingsInfo;
Expand All @@ -446,11 +428,11 @@
networkType = _networkConfiguration.GetNetwork().Name;

_networkService.OnStatusChanged += UpdateUI;

selectedCurrency = _clientStorage.GetCurrencyDisplaySetting();

selectedNetwork = networkType;

return base.OnInitializedAsync();
}

Expand All @@ -472,66 +454,66 @@
await Refresh(false);
}
}

private async Task AddIndexer()
{
if (!string.IsNullOrWhiteSpace(newIndexerLink))
{
if (!Uri.TryCreate(newIndexerLink, UriKind.Absolute, out Uri? uri))
{
if (!Uri.TryCreate(newIndexerLink, UriKind.Absolute, out Uri? uri))
{
notificationComponent.ShowErrorMessage($"Invalid URL: {newIndexerLink}");
return;
}

if (uri.Scheme is not ("http" or "https"))
notificationComponent.ShowErrorMessage($"Invalid URL: {newIndexerLink}");
return;
}

if (uri.Scheme is not ("http" or "https"))
{
notificationComponent.ShowErrorMessage($"Invalid URL schema. Must be HTTP or HTTPS.");
return;
}
newIndexerLink = $"{uri.Scheme}://{uri.Host}".TrimEnd('/');
Logger.LogInformation($"Normalized URL: {newIndexerLink}");
if (settingsInfo.Indexers.Any(a => a.Url == newIndexerLink))
{
notificationComponent.ShowErrorMessage($"URL already exists: {newIndexerLink}");
return;
}
// Check indexer status and fetch genesis block hash
var (isOnline, genesisHash) = await _indexerService.CheckIndexerNetwork(newIndexerLink);
if (!isOnline)

newIndexerLink = $"{uri.Scheme}://{uri.Host}".TrimEnd('/');

Logger.LogInformation($"Normalized URL: {newIndexerLink}");

if (settingsInfo.Indexers.Any(a => a.Url == newIndexerLink))
{
notificationComponent.ShowErrorMessage($"URL already exists: {newIndexerLink}");
return;
}

// Check indexer status and fetch genesis block hash
var (isOnline, genesisHash) = await _indexerService.CheckIndexerNetwork(newIndexerLink);
if (!isOnline)
{
notificationComponent.ShowErrorMessage("The indexer is offline or unreachable.");
return;
}

var expectedHash = _networkConfiguration.GetGenesisBlockHash();
if (!_indexerService.ValidateGenesisBlockHash(genesisHash, expectedHash))
{
var expectedNetworkName = _networkConfiguration.GetNetwork().Name;
var fetchedNetworkName = _networkConfiguration.GetNetworkNameFromGenesisBlockHash(genesisHash);
notificationComponent.ShowErrorMessage($"The indexer is not compatible with the selected network. " +
$"Expected: {expectedNetworkName}, Provided: {fetchedNetworkName ?? "Unknown"}");
return;

var expectedHash = _networkConfiguration.GetGenesisBlockHash();
if (!_indexerService.ValidateGenesisBlockHash(genesisHash, expectedHash))
{
var expectedNetworkName = _networkConfiguration.GetNetwork().Name;
var fetchedNetworkName = _networkConfiguration.GetNetworkNameFromGenesisBlockHash(genesisHash);
notificationComponent.ShowErrorMessage($"The indexer is not compatible with the selected network. " +
$"Expected: {expectedNetworkName}, Provided: {fetchedNetworkName ?? "Unknown"}");
return;
}

// Add indexer to settings
settingsInfo.Indexers.Add(new SettingsUrl
{
Url = newIndexerLink,
LastCheck = DateTime.UtcNow,
Status = UrlStatus.Online
});

_clientStorage.SetSettingsInfo(settingsInfo);
notificationComponent.ShowNotificationMessage("Indexer added successfully.");
newIndexerLink = string.Empty;

await Refresh(false);
}

// Add indexer to settings
settingsInfo.Indexers.Add(new SettingsUrl
{
Url = newIndexerLink,
LastCheck = DateTime.UtcNow,
Status = UrlStatus.Online
});

_clientStorage.SetSettingsInfo(settingsInfo);
notificationComponent.ShowNotificationMessage("Indexer added successfully.");
newIndexerLink = string.Empty;

await Refresh(false);
}
}
}

private async Task AddRelay()
{
Expand Down
6 changes: 3 additions & 3 deletions src/Angor/Client/Pages/Wallet.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -300,7 +300,7 @@ else

<!-- Show words button with warning -->
<div class="mb-3">
<div class="alert alert-warning text-white" role="alert">
<div class="alert alert-warning" role="alert">
<p class="fs-6">Warning: These words can be used to recover your wallet. Keep them safe.</p>
</div>
</div>
Expand Down Expand Up @@ -371,7 +371,7 @@ else
<!-- Section 2 -->
<div class="row mt-4">
<div class="row d-flex justify-content-center text-center align-items-center">
<div class="col-lg-3 col-sm-6 mt-lg-0">
<div class="col-lg-3 col-sm-6 col-6 mt-lg-0">
<div class="card h-100 @(activeTab == 1 ? "active" : "")" id="tab1">
<div class="card-body d-flex flex-column justify-content-center text-center" role="button" @onclick="() => SetActiveTab(1)">
<span class="mb-3 @(activeTab == 1 ? "heartbeat" : "")" aria-hidden="true">
Expand All @@ -381,7 +381,7 @@ else
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 mt-4 mt-lg-0 mt-sm-0">
<div class="col-lg-3 col-sm-6 col-6 mt-lg-0 mt-sm-0">
<div class="card h-100 @(activeTab == 2 ? "active" : "")" id="tab2">
<div class="card-body d-flex flex-column justify-content-center text-center" role="button" @onclick="() => SetActiveTab(2)">
<span class="mb-3 @(activeTab == 2 ? "heartbeat" : "")" aria-hidden="true">
Expand Down
10 changes: 8 additions & 2 deletions src/Angor/Client/wwwroot/assets/css/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@
--angor-modal-header-padding: 1rem 1rem;
--angor-modal-title-line-height: 1.5;
--angor-modal-footer-gap: 0.5rem;
--btn-border: #046479;
}

.dark {
Expand Down Expand Up @@ -232,7 +233,7 @@
}

::-webkit-scrollbar-thumb {
background: var(--angor-light);
background: var(--angor-scrollbar-thumb-hover-bg);
}

::-webkit-scrollbar-thumb:hover {
Expand Down Expand Up @@ -781,6 +782,10 @@ tr[style*="cursor: pointer;"]:hover {
border-color: var(--angor-dark) !important;
}

.text-black{
color: #000 !important;
}

.dark g[fill] {
fill: var(--angor-primary) !important;
}
Expand Down Expand Up @@ -967,10 +972,11 @@ tr[style*="cursor: pointer;"]:hover {
}

input[type="checkbox"] + label {
display: block;
display: flex;
margin: 0.2em;
cursor: pointer;
padding: 0.2em;
align-items: center;
}

input[type="checkbox"] {
Expand Down
4 changes: 2 additions & 2 deletions src/Angor/Client/wwwroot/assets/css/dashboard.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ h6,

p {
margin-top: 0;
margin-bottom: 1rem;
margin-bottom: 0;
}

abbr[title] {
Expand Down Expand Up @@ -5719,7 +5719,7 @@ fieldset:disabled .btn {
}

.alert-warning {
--angor-alert-color: #975400;
--angor-alert-color: #040200;
--angor-alert-bg: #fee8cc;
--angor-alert-border-color: #feddb3;
}
Expand Down

0 comments on commit 2f4482c

Please sign in to comment.