Nav updates

Closes #4. Closes #6.
btcpayserver · Apr 25, 2024 · 3958b41 · 3958b41
1 parent 88003ab
commit 3958b41
Show file tree

Hide file tree

Showing 7 changed files with 13 additions and 18 deletions.
diff --git a/BTCPayApp.UI/Components/Layout/NavbarBottom.razor b/BTCPayApp.UI/Components/Layout/NavbarBottom.razor
@@ -9,12 +9,6 @@
                 <span>Dashboard</span>
             </NavLink>
         </li>
-        <li class="nav-item">
-            <NavLink class="nav-link" href="@Routes.Wallet" Match="NavLinkMatch.Prefix">
-                <Icon symbol="wallet-existing"/>
-                <span>Wallet</span>
-            </NavLink>
-        </li>
         <li class="nav-item">
             <NavLink class="nav-link" href="@Routes.Invoices" Match="NavLinkMatch.Prefix">
                 <Icon symbol="nav-invoices"/>
@@ -29,7 +23,7 @@
         </li>
         <li class="nav-item">
             <NavLink class="nav-link" href="@Routes.Settings" Match="NavLinkMatch.All">
-                <Icon symbol="nav-settings"/>
+                <Icon symbol="settings"/>
                 <span>Settings</span>
             </NavLink>
         </li>

diff --git a/BTCPayApp.UI/Components/Layout/Titlebar.razor b/BTCPayApp.UI/Components/Layout/Titlebar.razor
@@ -1,9 +1,9 @@
-<div id="Titlebar" class="@(Fixed ? "fixed" : null)">
+<section id="Titlebar" class="container d-flex align-items-center justify-content-between p-3 @(Fixed ? "fixed" : null)">
     <div class="back">
         @if (!string.IsNullOrEmpty(Back))
         {
             <NavLink class="btn-close btn-back" href="@Back">
-                <Icon symbol="nav-back"/>
+                <Icon symbol="back"/>
             </NavLink>
         }
     </div>
@@ -13,12 +13,12 @@
     <div class="close">
         @if (Close)
         {
-        <button type="button" class="btn-close" aria-label="Close">
-            <Icon symbol="nav-close"/>
-        </button>
+            <button type="button" class="btn-close" aria-label="Close">
+                <Icon symbol="close"/>
+            </button>
         }
     </div>
-</div>
+</section>
 
 @code {
     [Parameter]

diff --git a/BTCPayApp.UI/Components/Layout/Titlebar.razor.css b/BTCPayApp.UI/Components/Layout/Titlebar.razor.css
@@ -3,6 +3,7 @@
   display: flex;
   justify-content: space-between;
   background-color: var(--btcpay-body-bg);
+  padding: 0 var(--btcpay-space-s);
 }
 
 #Titlebar.fixed {

diff --git a/BTCPayApp.UI/Pages/DashboardPage.razor b/BTCPayApp.UI/Pages/DashboardPage.razor
@@ -10,7 +10,7 @@
 
 <AuthorizeView>
     <Authorized>
-        <section class="container d-flex align-items-center justify-content-between py-3">
+        <section class="container d-flex align-items-center justify-content-between py-2 px-4">
             <div class="d-flex align-items-center justify-content-between gap-2">
                 <div class="fw-semibold">
                     @context.User.Identity?.Name

diff --git a/BTCPayApp.UI/Pages/SettingsPage.razor b/BTCPayApp.UI/Pages/SettingsPage.razor
@@ -12,7 +12,7 @@
 <PageTitle>Settings</PageTitle>
 
 <SectionContent SectionName="top">
-    <Titlebar>
+    <Titlebar Back="@Routes.Dashboard">
         <h1>Settings</h1>
     </Titlebar>
 </SectionContent>

diff --git a/BTCPayApp.UI/Pages/WalletSetupPage.razor b/BTCPayApp.UI/Pages/WalletSetupPage.razor
@@ -8,7 +8,7 @@
 <PageTitle>Wallet Setup</PageTitle>
 
 <SectionContent SectionName="top">
-    <Titlebar>
+    <Titlebar Back="@Routes.Dashboard">
         <h1>Wallet Setup</h1>
     </Titlebar>
 </SectionContent>

diff --git a/BTCPayApp.UI/wwwroot/css/global.css b/BTCPayApp.UI/wwwroot/css/global.css
@@ -1,7 +1,7 @@
 :root {
   --sticky-header-height: 0; /* gets dynamically set via JavaScript */
-  --navbar-top-height: 3.25rem;
-  --navbar-bottom-height: 3.25rem;
+  --navbar-top-height: 3.5rem;
+  --navbar-bottom-height: 3.5rem;
   --sidebar-width: 280px;
 }