UI consistency fixes

michielpost · May 30, 2024 · 9cb1708 · 9cb1708
1 parent 56a4e69
commit 9cb1708
Show file tree

Hide file tree

Showing 9 changed files with 61 additions and 38 deletions.
diff --git a/src/aoWebWallet.Tests/aoWebWallet.Tests.csproj b/src/aoWebWallet.Tests/aoWebWallet.Tests.csproj
@@ -15,8 +15,8 @@
       <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
     </PackageReference>
     <PackageReference Include="Microsoft.NET.Test.Sdk" Version="17.10.0" />
-    <PackageReference Include="MSTest.TestAdapter" Version="3.4.1" />
-    <PackageReference Include="MSTest.TestFramework" Version="3.4.1" />
+    <PackageReference Include="MSTest.TestAdapter" Version="3.4.2" />
+    <PackageReference Include="MSTest.TestFramework" Version="3.4.2" />
   </ItemGroup>
 
   <ItemGroup>

diff --git a/src/aoWebWallet/Pages/About.razor b/src/aoWebWallet/Pages/About.razor
@@ -3,8 +3,12 @@
 
 <PageTitle>About - @Program.PageTitlePostFix</PageTitle>
 
-<MudContainer Class="mt-16 px-8" MaxWidth="MaxWidth.ExtraExtraLarge">
-    <MudText Typo="Typo.h5">ao Web Wallet</MudText>
+<MudContainer Class="mt-2 px-8" MaxWidth="MaxWidth.ExtraExtraLarge">
+    <MudBreadcrumbs Class="breadcrumbs-aoww" Items="_items"></MudBreadcrumbs>
+
+    <MudPaper Elevation="2" Class="pa-4">
+        <MudText Typo="Typo.h5">ao Web Wallet</MudText>
+    </MudPaper>
 
     <MudStack>
         <MudItem xs="12" md="6">
@@ -13,22 +17,7 @@
                 <MudText Align="Align.Left">Created for the Hack the Weave hackathon by <a href="https://twitter.com/michielpostnl" target="_blank" style="text-decoration-line:underline">Michiel Post</a> and <a href="https://twitter.com/2n1u0" target="_blank" style="text-decoration-line:underline">Nuno Lopes</a></MudText>
             </MudPaper>
         </MudItem>
-        <MudItem xs="12" md="6">
-            <MudText Typo="Typo.h6" GutterBottom="true">Features</MudText>
-            <MudPaper Width="100%">
-                <MudList>
-                    <MudListItem Icon="@Icons.Material.Filled.Star" Text="Open Source" />
-                    <MudListItem Icon="@Icons.Material.Filled.Star" Text="Add ArConnect Wallets" />
-                    <MudListItem Icon="@Icons.Material.Filled.Star" Text="Create new wallets or import a wallet.json file" />
-                    <MudListItem Icon="@Icons.Material.Filled.Star" Text="View balances of a wallet" />
-                    <MudListItem Icon="@Icons.Material.Filled.Star" Text="View all transactions for a wallet" />
-                    <MudListItem Icon="@Icons.Material.Filled.Star" Text="Send tokens" />
-                    <MudListItem Icon="@Icons.Material.Filled.Star" Text="Add custom tokens" />
-                    <MudListItem Icon="@Icons.Material.Filled.Star" Text="View all transactions for a token" />
-                    <MudListItem Icon="@Icons.Material.Filled.Star" Text="Dark and Light theme" />
-                </MudList>
-            </MudPaper>
-        </MudItem>
+
         <MudItem xs="12" md="6">
             <MudPaper Elevation="2" Class="pa-4">
                 <MudText Align="MudBlazor.Align.Left">
@@ -56,6 +45,13 @@
 </MudContainer>
 
     @code {
+
+    private List<BreadcrumbItem> _items = new List<BreadcrumbItem>
+        {
+            new BreadcrumbItem("Home", href: "/"),
+            new BreadcrumbItem("About", href: null, disabled: true)
+        };
+
     string? versionHash = Program.GetVersionHash();
     private string result = DateTimeOffset.UtcNow.ToString();
 

diff --git a/src/aoWebWallet/Pages/ActionPage.razor b/src/aoWebWallet/Pages/ActionPage.razor
@@ -11,7 +11,7 @@
 <PageTitle>@Program.PageTitlePostFix</PageTitle>
 
 
-<MudContainer Class="mt-16 px-8" MaxWidth="MaxWidth.False">
+<MudContainer Class="mt-2 px-8" MaxWidth="MaxWidth.False">
     <MudText Typo="Typo.h5">New transaction</MudText>
 
     <MudStack>

diff --git a/src/aoWebWallet/Pages/Apps.razor b/src/aoWebWallet/Pages/Apps.razor
@@ -5,11 +5,14 @@
 
 <PageTitle>Friends of aoWebWallet - @Program.PageTitlePostFix</PageTitle>
 
-<MudContainer Class="mt-16 px-8" MaxWidth="MaxWidth.ExtraExtraLarge">
-    <MudText Typo="Typo.h5">Apps</MudText>
-    <MudText Class="mb-8">A list of friends of aoWebWallet. Use your tokens and explore the ao ecosystem.</MudText>
+<MudContainer Class="mt-2 px-8" MaxWidth="MaxWidth.ExtraExtraLarge">
+    <MudBreadcrumbs Class="breadcrumbs-aoww" Items="_items"></MudBreadcrumbs>
 
-    <MudGrid>
+    <MudPaper Elevation="2" Class="pa-6">
+        <MudText Class="mb-8">A list of friends of aoWebWallet. Use your tokens and explore the ao ecosystem.</MudText>
+    </MudPaper>
+
+    <MudGrid Class="mt-2">
         <AppListItem Name="ArSwap"
                      Link="https://arswap.org"
                      Logo="https://pbs.twimg.com/profile_images/1778816003259985920/HpnZQDK6_400x400.jpg"
@@ -37,4 +40,10 @@
     </MudGrid>
 </MudContainer>
 
-
+@code{
+    private List<BreadcrumbItem> _items = new List<BreadcrumbItem>
+        {
+            new BreadcrumbItem("Home", href: "/"),
+            new BreadcrumbItem("Apps", href: null, disabled: true)
+        };
+}
diff --git a/src/aoWebWallet/Pages/ReceivePage.razor b/src/aoWebWallet/Pages/ReceivePage.razor
@@ -16,7 +16,7 @@
 <PageTitle>Receive Tokens - @Program.PageTitlePostFix</PageTitle>
 
 
-<MudContainer Class="mt-16 px-4" MaxWidth="MaxWidth.False">
+<MudContainer Class="mt-2 px-8" MaxWidth="MaxWidth.False">
     <MudText Typo="Typo.h5">Receive Tokens</MudText>
 
     <MudGrid>
@@ -64,13 +64,18 @@
         <MudItem xs="12">
             <MudPaper Class="pa-4">
                 <MudStack>
-                    <MudText Typo="Typo.h6">Share URL</MudText>
                     <MudStack Spacing="0" Row="true">
-                        <MudLink Href="@shareUrl" Typo="Typo.subtitle1">
-                            @shareUrl
+                        <MudLink Href="@shareUrl" Target="_blank" Typo="Typo.subtitle1">
+                            Pay using aoWebWallet
                         </MudLink>
                         <MudIconButton Class="copy-clipboard" Icon="@Icons.Material.Filled.ContentCopy" Color="Color.Default" OnClick="async () => { await ClipboardService.CopyToClipboard(shareUrl); }" />
                     </MudStack>
+                    <MudStack Spacing="0" Row="true">
+                        <MudLink Href="@NavigationManager.Uri" Target="_blank" Typo="Typo.subtitle1">
+                            Share this page
+                        </MudLink>
+                        <MudIconButton Class="copy-clipboard" Icon="@Icons.Material.Filled.ContentCopy" Color="Color.Default" OnClick="async () => { await ClipboardService.CopyToClipboard(NavigationManager.Uri); }" />
+                    </MudStack>
                 </MudStack>
             </MudPaper>
         </MudItem>

diff --git a/src/aoWebWallet/Pages/ScanQrPage.razor b/src/aoWebWallet/Pages/ScanQrPage.razor
@@ -10,8 +10,8 @@
 <PageTitle>Scan QR - @Program.PageTitlePostFix</PageTitle>
 
 
-<MudContainer Class="mt-16 px-8" MaxWidth="MaxWidth.False">
-    <MudText Typo="Typo.h5">QR Scanner</MudText>
+<MudContainer Class="mt-2 px-8" MaxWidth="MaxWidth.False">
+    <MudBreadcrumbs Class="breadcrumbs-aoww" Items="_items"></MudBreadcrumbs>
 
     <MudItem xs="12" sm="6" Class="pb-0">
         <MudPaper Elevation="2" Class="pa-6">
@@ -23,6 +23,13 @@
 </MudContainer>
 
 @code {
+
+     private List<BreadcrumbItem> _items = new List<BreadcrumbItem>
+        {
+            new BreadcrumbItem("Home", href: "/"),
+            new BreadcrumbItem("QR Scanner", href: null, disabled: true)
+        };
+
     private QRCodeScannerJsInterop? _qrCodeScannerJsInterop;
     private Action<string>? _onQrCodeScanAction;
 

diff --git a/src/aoWebWallet/Pages/Settings.razor b/src/aoWebWallet/Pages/Settings.razor
@@ -5,8 +5,8 @@
 
 <PageTitle>Settings - @Program.PageTitlePostFix</PageTitle>
 
-<MudContainer Class="mt-16 px-8" MaxWidth="MaxWidth.ExtraExtraLarge">
-    <MudText Typo="Typo.h5" Class="mb-4">Settings</MudText>
+<MudContainer Class="mt-2 px-8" MaxWidth="MaxWidth.ExtraExtraLarge">
+    <MudBreadcrumbs Class="breadcrumbs-aoww" Items="_items"></MudBreadcrumbs>
 
     <MudStack>
         <MudItem xs="12" sm="6" md="6">
@@ -43,6 +43,12 @@
 
 @code {
 
+     private List<BreadcrumbItem> _items = new List<BreadcrumbItem>
+        {
+            new BreadcrumbItem("Home", href: "/"),
+            new BreadcrumbItem("Settings", href: null, disabled: true)
+        };
+
     async void Submit()
     {
         await BindingContext.SaveUserSettings();

diff --git a/src/aoWebWallet/Services/StorageService.cs b/src/aoWebWallet/Services/StorageService.cs
@@ -63,8 +63,8 @@ public static void AddSystemTokens(List<Token> result)
               new TokenData
               {
                   TokenId = "aYrCboXVSl1AXL9gPFe3tfRxRf0ZmkOXH65mKT0HHZw",
-                  Denomination = 0,
-                  Logo = "Sie_26dvgyok0PZD_-iQAFOhOd5YxDTkczOLoqTTL_A",
+                  Denomination = 6,
+                  Logo = "wfI-5PlYXL66_BqquCXm7kq-ic1keu0b2CqRjw82yrU",
                   Name = "AR.IO EXP",
                   Ticker = "EXP"
               });

diff --git a/src/aoww.Services.Tests/aoww.Services.Tests.csproj b/src/aoww.Services.Tests/aoww.Services.Tests.csproj
@@ -15,8 +15,8 @@
       <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
     </PackageReference>
     <PackageReference Include="Microsoft.NET.Test.Sdk" Version="17.10.0" />
-    <PackageReference Include="MSTest.TestAdapter" Version="3.4.1" />
-    <PackageReference Include="MSTest.TestFramework" Version="3.4.1" />
+    <PackageReference Include="MSTest.TestAdapter" Version="3.4.2" />
+    <PackageReference Include="MSTest.TestFramework" Version="3.4.2" />
   </ItemGroup>
 
   <ItemGroup>