From d725d154fe95f23e71a0d52396f7404450bc1849 Mon Sep 17 00:00:00 2001
From: Nuno Lopes <n@lopezi.com>
Date: Fri, 24 May 2024 12:31:52 +0100
Subject: [PATCH] improve AppListItems display structure

---
 src/aoWebWallet/Pages/Apps.razor              |  6 +-----
 .../Shared/Components/AppListItem.razor       | 20 ++++++++++---------
 src/aoWebWallet/wwwroot/css/app.css           |  4 ++++
 3 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/aoWebWallet/Pages/Apps.razor b/src/aoWebWallet/Pages/Apps.razor
index ca36059..fdf0c90 100644
--- a/src/aoWebWallet/Pages/Apps.razor
+++ b/src/aoWebWallet/Pages/Apps.razor
@@ -7,10 +7,7 @@
 
 <MudContainer Class="mt-16 px-8" MaxWidth="MaxWidth.ExtraExtraLarge">
     <MudText Typo="Typo.h5">Apps</MudText>
-    <br />
-    <MudText>A list of friends of aoWebWallet. Use your tokens and explore the ao ecosystem.</MudText>
-    <br />
-    <br />
+    <MudText Class="mb-8">A list of friends of aoWebWallet. Use your tokens and explore the ao ecosystem.</MudText>
 
     <MudGrid>
         <AppListItem Name="ArSwap"
@@ -37,7 +34,6 @@
                      Link="https://trunkao.xyz"
                      Logo="https://pbs.twimg.com/profile_images/1771940735195152384/hNUuY1Fk_400x400.jpg"
                      Description="Meme Token" />
-
     </MudGrid>
 </MudContainer>
 
diff --git a/src/aoWebWallet/Shared/Components/AppListItem.razor b/src/aoWebWallet/Shared/Components/AppListItem.razor
index 12d14e2..8d27ecb 100644
--- a/src/aoWebWallet/Shared/Components/AppListItem.razor
+++ b/src/aoWebWallet/Shared/Components/AppListItem.razor
@@ -1,13 +1,15 @@
-<MudItem xs="12" md="6" lg="2">
-    <MudPaper Elevation="2" Class="pa-8">
+<MudItem xs="12" sm="3" Class="pb-0">
+    <MudPaper Elevation="2" Class="pa-6">
         <MudStack>
-            <MudStack AlignItems="AlignItems.Center">
-                <MudAvatar Size="Size.Large">
-                    <MudImage Src="@Logo" Alt="@Name" Elevation="25" />
-                </MudAvatar>
-            </MudStack>
-            <MudText>@Name - @Description</MudText>
-            <MudLink Href="@Link" Target="_blank">@Link</MudLink>
+            <MudLink Href="@Link" Target="_blank">
+                <MudStack AlignItems="AlignItems.Center">
+                    <MudAvatar Size="Size.Large">
+                        <MudImage Src="@Logo" Alt="@Name" Elevation="25" />
+                    </MudAvatar>
+                </MudStack>
+                <MudText Class="my-2">@Name - @Description</MudText>
+                <MudIcon Icon="@Icons.Material.Filled.ArrowOutward" Class="float-right" Color="Color.Primary" />
+            </MudLink>
         </MudStack>
     </MudPaper>
 </MudItem>
diff --git a/src/aoWebWallet/wwwroot/css/app.css b/src/aoWebWallet/wwwroot/css/app.css
index 9de43bb..c62bfd1 100644
--- a/src/aoWebWallet/wwwroot/css/app.css
+++ b/src/aoWebWallet/wwwroot/css/app.css
@@ -418,3 +418,7 @@ body {
 .mud-list.mud-list-padding, .mud-dialog {
     background-color: rgba(16,16,67,1) !important;
 }
+
+.float-right {
+    float:right;
+}