improve icon sizes after blazor navigation

josxha · Oct 21, 2023 · dd93942 · dd93942
1 parent 5d773fb
commit dd93942
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 28 deletions.
diff --git a/OryAdmin/Components/Layout/NavbarMenu.razor b/OryAdmin/Components/Layout/NavbarMenu.razor
@@ -1,15 +1,13 @@
 @inject EnvService env
-<nav class="navbar is-fixed-top has-shadow is-info" role="navigation" aria-label="main navigation">
-    <div class="navbar-brand">
+<nav class="navbar is-fixed-top has-shadow is-info"
+     role="navigation" aria-label="main navigation">
+    <div class="navbar-brand is-justify-content-space-between">
         <a class="navbar-item" href="">
             <h1 class="title">OryAdmin</h1>
         </a>
-    </div>
-
-    <div class="navbar-end">
         <a class="navbar-item" href="https://github.com/josxha/Oryon" target="_blank">
             <span class="icon">
-                <i class="fa-brands fa-github"></i>
+                <i class="fa-brands fa-github fa-xl"></i>
             </span>
         </a>
     </div>

diff --git a/OryAdmin/Components/Layout/SideMenu.razor b/OryAdmin/Components/Layout/SideMenu.razor
@@ -5,8 +5,9 @@
     <ul class="menu-list">
         <li>
             <a href="/">
-                <span class="icon" style="height: 16px; width: 16px">
-                    <i class="fa-solid fa-server"></i>
+                <span class="icon">
+                    <i class="fa-solid fa-server fa-sm" 
+                    style="max-width: 16px; max-height: 16px;"></i>
                 </span> Services
             </a>
         </li>
@@ -15,60 +16,85 @@
     <ul class="menu-list">
         <li>
             <a href="identities/users" class="@(env.EnabledKratos ? "" : "is-disabled")">
-                <span class="icon" style="height: 16px; width: 16px">
-                    <i class="fa-solid fa-users"></i>
-                </span> Users
+                <span class="icon-text">
+                    <span class="icon">
+                        <i class="fa-solid fa-users fa-sm" 
+                        style="max-width: 16px; max-height: 16px;"></i>
+                    </span>
+                    <span>Users</span>
+                </span>
             </a>
         </li>
         <li>
             <a href="identities/schemas" class="@(env.EnabledKratos ? "" : "is-disabled")">
                 <span class="icon-text">
                     <span class="icon">
-                        <i class="fas fa-receipt"></i>
+                        <i class="fas fa-receipt fa-sm" 
+                        style="max-width: 16px; max-height: 16px;"></i>
                     </span>
-                    <span>Identity Schemas</span>
+                    <span>Schemas</span>
                 </span>
             </a>
         </li>
         <li>
             <a href="identities/messages" class="@(env.EnabledKratos ? "" : "is-disabled")">
-                <span class="icon" style="height: 16px; width: 16px">
-                    <i class="fa-solid fa-envelope"></i>
-                </span> Message Log
+                <span class="icon-text">
+                    <span class="icon">
+                        <i class="fa-solid fa-envelope fa-sm" 
+                        style="max-width: 16px; max-height: 16px;"></i>
+                    </span>
+                    <span>Message Log</span>
+                </span>
             </a>
         </li>
     </ul>
     <p class="menu-label">OAuth2</p>
     <ul class="menu-list">
         <li>
             <a href="oauth2" class="@(env.EnabledHydra ? "" : "is-disabled")">
-                <span class="icon">
-                    <i class="fa-solid fa-circle-info"></i>
-                </span> Information
+                <span class="icon-text">
+                    <span class="icon">
+                        <i class="fa-solid fa-circle-info fa-sm" 
+                        style="max-width: 16px; max-height: 16px;"></i>
+                    </span>
+                    <span>Information</span>
+                </span>
             </a>
         </li>
         <li>
             <a href="oauth2/clients" class="@(env.EnabledHydra ? "" : "is-disabled")">
-                <span class="icon" style="height: 16px; width: 16px">
-                    <i class="fa-solid fa-window-restore"></i>
-                </span> Clients
+                <span class="icon-text">
+                    <span class="icon">
+                        <i class="fa-solid fa-window-restore fa-sm" 
+                        style="max-width: 16px; max-height: 16px;"></i>
+                    </span>
+                    <span>Clients</span>
+                </span>
             </a>
         </li>
         <li>
             <a href="oauth2/issuers" class="@(env.EnabledHydra ? "" : "is-disabled")">
-                <span class="icon" style="height: 16px; width: 16px">
-                    <i class="fa-solid fa-address-card"></i>
-                </span> Grant Issuers
+                <span class="icon-text">
+                    <span class="icon">
+                        <i class="fa-solid fa-address-card fa-sm" 
+                        style="max-width: 16px; max-height: 16px;"></i>
+                    </span>
+                    <span>Grant Issuers</span>
+                </span>
             </a>
         </li>
     </ul>
     <p class="menu-label">Permissions</p>
     <ul class="menu-list">
         <li>
             <a href="permissions" class="@(env.EnabledKeto ? "" : "is-disabled")">
-                <span class="icon" style="height: 16px; width: 16px">
-                    <i class="fa-solid fa-rectangle-list"></i>
-                </span> Permissions
+                <span class="icon-text">
+                    <span class="icon">
+                        <i class="fa-solid fa-rectangle-list fa-sm" 
+                        style="max-width: 16px; max-height: 16px;"></i>
+                    </span>
+                    <span>Permissions</span>
+                </span>
             </a>
         </li>
     </ul>