refactor inline styles on pages

michielpost · Apr 30, 2024 · dab3743 · dab3743
1 parent be7d535
commit dab3743
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 19 deletions.
diff --git a/src/aoWebWallet/Pages/About.razor b/src/aoWebWallet/Pages/About.razor
@@ -48,8 +48,8 @@
         </MudItem>
         <MudItem xs="12" md="6">
             <MudPaper Elevation="2" Class="pa-4 d-flex justify-center">
-                <a href="https://twitter.com/aoWebWallet" target="_blank" style="text-decoration-line:underline">
-                    <svg fill="#949498" width="40px" viewBox="0 0 24 24" aria-hidden="true" class="r-4qtqp9 r-yyyyoo r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-lrsllp r-18jsvk2 r-16y2uox r-8kz0gk"><g><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path></g></svg>
+                <a href="https://twitter.com/aoWebWallet" target="_blank">
+                    <svg fill="#949498" width="40px" viewBox="0 0 24 24" aria-hidden="true"><g><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path></g></svg>
                 </a>
             </MudPaper>
         </MudItem>

diff --git a/src/aoWebWallet/Pages/Tokens.razor b/src/aoWebWallet/Pages/Tokens.razor
@@ -12,7 +12,7 @@
 
     <DataLoaderProgress DataLoader="BindingContext.TokenList.DataLoader" Title="tokens" />
 
-    <MudContainer style="max-width: 100%;" Width="100%" Class="d-flex justify-end mb-4 pr-4">
+    <MudContainer Width="100%" Class="d-flex justify-end mb-4 pr-4 d-max-w-100">
         <MudIconButton Icon="@Icons.Material.Filled.AddCircle" aria-label="add token" OnClick="OpenAddTokenDialog"></MudIconButton>
     </MudContainer>
 
@@ -61,7 +61,7 @@
 
     private async void ToggleVisibility(Token token)
     {
-        
+
         await BindingContext.TokenToggleVisibility(token.TokenId);
 
         StateHasChanged();

diff --git a/src/aoWebWallet/Pages/TransactionDetail.razor b/src/aoWebWallet/Pages/TransactionDetail.razor
@@ -17,7 +17,7 @@
             var transfer = BindingContext.SelectedTransaction.Data;
 
             <MudText Typo="Typo.h5">Transaction</MudText>
-            <MudText Class="KodeMono" style="text-overflow: ellipsis; white-space: nowrap;overflow: hidden;" Typo="Typo.h6">
+            <MudText Class="KodeMono tx-wrap" Typo="Typo.h6">
                 @transfer.Id
             </MudText>
 

diff --git a/src/aoWebWallet/Pages/WalletDetail.razor b/src/aoWebWallet/Pages/WalletDetail.razor
@@ -19,7 +19,7 @@
                 <MudStack Row="true">
                     @if (BindingContext.SelectedWallet?.IsConnected ?? false)
                     {
-                        <MudIcon style="margin-left:2px; width:20px; padding-bottom:4px;" Icon="@Icons.Material.Filled.CheckCircle" Color="Color.Success" />
+                        <MudIcon Class="d-icon-wallet" Icon="@Icons.Material.Filled.CheckCircle" Color="Color.Success" />
                     }
                     <MudText Typo="Typo.body2">@BindingContext.SelectedWallet?.Wallet.Name</MudText>
                     @if (BindingContext.SelectedWallet?.Wallet.OwnerAddress != null)
@@ -30,7 +30,7 @@
                 @if (BindingContext.SelectedWallet?.Wallet.NeedsBackup ?? false)
                 {
                     <MudStack Row="true">
-                        <MudIcon style="margin-left:2px; width:20px; padding-bottom:4px;" Icon="@Icons.Material.Filled.Warning" Color="Color.Warning" />
+                        <MudIcon Class="d-icon-wallet" Icon="@Icons.Material.Filled.Warning" Color="Color.Warning" />
                         <MudText Typo="Typo.body2">Wallet not backed up yet!</MudText>
                     </MudStack>
                 }
@@ -58,7 +58,7 @@
     @if (BindingContext.SelectedWallet?.IsConnected ?? false)
     {
         <MudPaper>
-            <MudContainer style="max-width: 100%;" Width="100%" Class="d-flex mb-4 pr-4">
+            <MudContainer Width="100%" Class="d-flex mb-4 pr-4 d-max-w-100">
                 @if (BindingContext.UserSettings != null)
                 {
                     <MudStack Row=true Justify="Justify.Center">
@@ -97,7 +97,7 @@
 
     }
 
-    <MudContainer style="max-width: 100%;" Width="100%" Class="d-flex justify-end mb-4 pr-2">
+    <MudContainer Width="100%" Class="d-flex justify-end mb-4 pr-2 d-max-w-100">
         @*         <MudTooltip Text="Refresh balances" Arrow="true" Placement="Placement.Left">
         <MudIconButton Icon="@Icons.Material.Filled.Refresh" aria-label="refresh transactions" OnClick="RefreshBalances"></MudIconButton>
         </MudTooltip> *@
@@ -119,11 +119,10 @@
 
                 <MudPaper Class="pa-4">
                     <MudStack Row="true">
-
-                        <div style="width:222px; display:flex; flex-direction: row; align-items:center; max-height: 50px;">
+                        <div Class="d-custom-1">
                             <MudAvatar Image="@UrlHelper.GetArweaveUrl(balance.Data?.Token?.TokenData?.Logo)" Size="Size.Medium" title="@balance.Data?.Token?.TokenId" />
                             <MudStack Class="ml-4" Justify="Justify.Center" Spacing="0">
-                                <MudText style="font-weight: 500;" Typo="Typo.body1">@balance.Data?.Token?.TokenData?.Name</MudText>
+                                <MudText Class="d-font-weight-500" Typo="Typo.body1">@balance.Data?.Token?.TokenData?.Name</MudText>
                                 <MudText Typo="Typo.body2">@balance.Data?.Token?.TokenData?.Ticker</MudText>
                             </MudStack>
                         </div>

diff --git a/src/aoWebWallet/Pages/Wallets.razor b/src/aoWebWallet/Pages/Wallets.razor
@@ -20,7 +20,7 @@
 
     <DataLoaderProgress DataLoader="BindingContext.TokenList.DataLoader" Title="tokens" />
 
-    <MudContainer style="max-width: 100%;"  Width="100%" Class="d-flex justify-end mb-4 pr-3">
+    <MudContainer Width="100%" Class="d-flex justify-end mb-4 pr-3 d-max-w-100">
             @if (BindingContext.WalletList.Data != null && BindingContext.WalletList.Data.Any())
                 {
                     <MudTooltip Text="Add wallet" Arrow="true" Placement="Placement.Left">
@@ -43,23 +43,23 @@
                         <MudStack Row="true">
                             <MudAvatar Image="@logoUrl" Size="Size.Large" Class="rounded-full" />
 
-                            <MudStack style="overflow: hidden;" Justify="Justify.Center" Spacing="0">
-                                <div style="display:flex; white-space: nowrap;">
-                                    <MudLink Class="KodeMono" style="text-overflow: ellipsis; white-space: nowrap;overflow: hidden;" Href="@detailUrl" Typo="Typo.h6">
+                            <MudStack Class="d-overflow-hidden" Justify="Justify.Center" Spacing="0">
+                                <div Class="d-custom-2">
+                                    <MudLink Class="KodeMono tx-wrap" Href="@detailUrl" Typo="Typo.h6">
                                         @wallet.Address
                                     </MudLink>
                                     <MudIconButton Class="copy-clipboard" Icon="@Icons.Material.Filled.ContentCopy" Color="Color.Default" OnClick="async () => { await BindingContext.CopyToClipboard(wallet.Address); }" />
                                 </div>
-                                <div style="display:flex; flex-direction:row;">
+                                <div Class="d-flex flex-row">
                                     @if (wallet.IsReadOnly)
                                     {
                                         <MudText Typo="Typo.body2">read-only &nbsp;</MudText>
                                     }
                                     <MudText Typo="Typo.body2">@wallet.Name</MudText>
-                                   
+
                                     @if (wallet.NeedsBackup)
                                     {
-                                        <MudIcon style="margin-left:2px; width:20px; padding-bottom:4px;" Icon="@Icons.Material.Filled.Warning" Color="Color.Warning" />
+                                        <MudIcon Class="d-icon-wallet" Icon="@Icons.Material.Filled.Warning" Color="Color.Warning" />
                                         <MudText Typo="Typo.body2">Wallet not backed up yet!</MudText>
                                     }
                                 </div>

diff --git a/src/aoWebWallet/wwwroot/css/app.css b/src/aoWebWallet/wwwroot/css/app.css
@@ -207,4 +207,34 @@ button.mud-button-root.mud-icon-button.mud-ripple.mud-ripple-icon.copy-clipboard
     min-height: 100vh;
 }
 
+.d-max-w-100 {
+    max-width: 100%;
+}
+
+.d-icon-wallet {
+    margin-left:2px;
+    width:20px;
+    padding-bottom:4px;
+}
+
+.d-custom-1 {
+    width:222px;
+    display:flex;
+    flex-direction: row;
+    align-items:center;
+    max-height: 50px;
+}
+
+.d-custom-2 {
+    display:flex;
+    white-space: nowrap;
+}
+
+.d-font-weight-500 {
+    font-weight: 500 !important;
+}
+
+.d-overflow-hidden {
+    overflow: hidden;
+}