improve AppListItems display structure

michielpost · May 24, 2024 · d725d15 · d725d15
1 parent 8acc4b7
commit d725d15
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 14 deletions.
diff --git 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
@@ -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
@@ -418,3 +418,7 @@ body {
 .mud-list.mud-list-padding, .mud-dialog {
     background-color: rgba(16,16,67,1) !important;
 }
+
+.float-right {
+    float:right;
+}