feat(Icons) Added font awesome icons (#29)

Components/Inputs/CodeLinkComponent.razor

@@ -1,16 +1,16 @@
-<a href="@Href" class="codeLinkButton">
-    View on GitHub
+<a href="@Href" target="_blank"  class="codeLinkButton">
+    View on GitHub <i class="fa-brands fa-github" style="font-size: 24px; margin-left: 5px;"></i>
 </a>
 
 <style>
     .codeLinkButton {
         color: white;
         background-color: var(--info);
-        border: 1px solid var(--info-border);
+        border: 2px solid var(--info-border);
         padding: 16px;
         border-radius: 3px;
         display: block;
-        width: 180px;
+        width: 200px;
         text-align: center;
     }
     

Components/Inputs/EditLinkComponent.razor

@@ -1,4 +1,4 @@
-<a href="@Href" class="editLinkButton">
+<a href="@Href" target="_blank" class="editLinkButton">
     Edit on GitHub
 </a>
 

Components/Inputs/LinkButtonComponent.razor

@@ -0,0 +1,35 @@
+<a href="@Href" class="linkButtonContainer" >
+    @ChildContent
+</a>
+
+<style>
+    .linkButtonContainer {
+        padding: 16px;
+        border: 1px solid;
+        border-radius: 8px;
+        font-weight: 800;
+        font-size: 1.2rem;
+        border-color: var(--primary);
+        background-color: var(--primary);
+    }
+    
+    .linkButtonContainer:hover {
+        background-color: var(--primary-hover);
+        border-color: var(--primary-border-hover);
+        color: white;
+    }
+
+</style>
+
+
+@code {
+
+    [Parameter]
+    public RenderFragment ChildContent { get; set; } = default!;
+
+    
+    [Parameter]
+    public string Href { get; set; } = "";
+    
+
+}

Components/Inputs/SearchButtonComponent.razor

@@ -4,10 +4,18 @@
 
 <button id="@Id" class="searchButtonContainer" @onclick="ButtonClicked">
     <div class="searchText">
-        Search...
+        <i class="fa-solid fa-magnifying-glass" style="margin-left: 3px; margin-right: 6px;"></i> Search...
     </div>
     <div class="searchHotkey">
-        @CommandKey + K
+        @if (IsMac)
+        {
+            <span><i class="fa-solid fa-command"></i>K</span>
+        }
+        else
+        {
+            <span>CTRL + K</span>
+        }
+        
     </div>
 </button>
 
@@ -28,10 +36,10 @@
     }
     
     .searchHotkey {
-        padding:  2px;
-        
-        background-color: var(--info);
-        border: 2px solid var(--primary-border);
+        padding: 4px;
+        background-color: rgba(255,255,255,0.05);
+        border: 2px solid rgba(255,255,255,0.25);
+        border-radius: 4px;
     }
 </style>
 
@@ -42,9 +50,9 @@
     [Parameter]
     public string Id { get; set; } = default!;
 
-    private string userAgent = "";
+    private string _userAgent = "";
 
-    string CommandKey => userAgent.Contains("Mac OS") ? "CMD" : "Ctrl";
+    bool IsMac => _userAgent.Contains("Mac OS");
 
     private void ButtonClicked(EventArgs eventArgs)
     {
@@ -53,7 +61,7 @@
 
     protected override async Task OnInitializedAsync()
     {
-        userAgent = await JsRuntime.InvokeAsync<string>("getUserAgent");
+        _userAgent = await JsRuntime.InvokeAsync<string>("getUserAgent");
     }
 
 }

Components/Inputs/SearchIconButtonComponent.razor

@@ -3,24 +3,28 @@
 @inject IJSRuntime JsRuntime
 
 <button id="@Id" class="searchIconButtonContainer" @onclick="ButtonClicked">
-    <div class="searchText">
-        S
+    <div class="searchIcon">
+        <i class="fa-solid fa-magnifying-glass"></i>
     </div>
 </button>
 
 <style>
     .searchIconButtonContainer {
-        background-color: var(--primary);
-        border: 2px solid var(--primary-border);
         border-radius: 8px;
         font-weight: 800;
-        width: 32px;
+        width: 100%;
         padding: 5px;
         display: flex;
         flex-direction: row;
         justify-content:  space-between;
         align-items: center;
     }
+    
+    .searchIcon {
+        font-size: 28px; 
+        text-align: center; 
+        margin: auto;
+    }
 </style>
 
 @code {

Components/Navigation/DesktopNavComponent.razor

@@ -13,7 +13,7 @@
 <div class="desktopNavContainer">
     <div class="menuHeader">
         <NavLink id="desktop-homeLink" href="/" class="websiteTitle">
-            IGP Fan Reference
+            <i class="fa-solid fa-house" style="margin-right: 4px;"></i> IGP Fan Reference
         </NavLink>
 
         <div class="sectionNavs">
@@ -27,7 +27,13 @@
                 }
 
                 <div class="sectionNav">
-                    <button onclick="@(() => { MenuClicked(webSection.Id); })" class="@sectionButtonStyle">@webSection.Name</button>
+                    
+                    <button onclick="@(() => { MenuClicked(webSection.Id); })" class="@sectionButtonStyle"><i class="fa-solid @webSection.Icon"></i> 
+                        @if (!webSection.OnlyIcon)
+                        {
+                            <span style="margin-left: 12px">@webSection.Name</span>
+                        }
+                        </button>
                     @if (isSelected)
                     {
                         <div class="navMenuPosition">
@@ -95,7 +101,7 @@
 
     .sectionNavs {
         display: flex;
-        gap: 8px;  
+        gap: 16px;  
         align-items: center;
     }
 
@@ -140,6 +146,7 @@
         box-shadow: 0 2px 3px black;
         background-color: var(--info);
         transform: translateY(-1px) scale(1.08);
+        border-radius: 12px;
     }
 
     @@media only screen and (max-width: 1025px) {

Components/Navigation/MobileNavComponent.razor

@@ -7,7 +7,7 @@
         {
             <div class="mobileNavSectionButton" @onclick="() => OnSectionClicked(webSection)" @onclick:preventDefault="true" @onclick:stopPropagation="true">
                 <div class="mobileNavSectionButtonText">
-                    @webSection?.Name
+                    <i class="fa-solid @webSection.Icon" style="font-size: 28px;"></i>
                 </div>
             </div>
         }
@@ -96,6 +96,7 @@
         border: 1px solid var(--primary);
         width: 100%;
         height: 64px;
+        border-radius: 2px;
         display: flex;
         background-color: var(--primary);
         cursor: pointer;
@@ -146,7 +147,7 @@
 @code {
 #if NO_SQL
     [Parameter]
-    public List<WebSectionModel?> WebSections { get; set; } = default!;
+    public List<WebSectionModel> WebSections { get; set; } = default!;
 
     [Parameter]
     public List<WebPageModel> WebPages { get; set; } = default!;

Components/Navigation/TabletNavComponent.razor

@@ -10,7 +10,7 @@
             <SearchButtonComponent/>
             <div class="tabletButton">
                 <div class="tabletMenuTitle">
-                    Menu
+                    <i class="fa-solid fa-bars" style="font-size: 32px; margin:auto"></i>
                 </div>
             </div>
         </div>

IGP/Dialog/SearchDialogComponent.razor

@@ -116,8 +116,18 @@
 
 .searchLink {
     text-decoration: underline;
+}
+
+@@media only screen and (max-width: 1025px) {
+    .searchContainer {
+        height: 300px;
 
+    }
+    .searchBox {
+        height: 230px;
+    }
 }
+
 </style>
 }
 

IGP/Index.razor

@@ -6,7 +6,8 @@
 @layout PageLayout
 
 <DevOnlyComponent>
-    <PermissionsPage/>
+    <LinkButtonComponent Href="https://github.com/JonathanMcCaffrey/IGP-Fan-Reference/blob/main/IGP/Pages/HarassCalculatorPage.razor">
+        View on GitHub <i class="fa-brands fa-github" style="font-size: 24px; margin-left: 5px;"></i>
+    </LinkButtonComponent>
 </DevOnlyComponent>
-
 <HomePage/>

IGP/Pages/Documentation/Parts/DocumentComponent.razor

@@ -16,7 +16,9 @@ else
         </div>
         <div class="docContent">@((MarkupString)Markdown.ToHtml(content, Pipeline))</div>
         <div class="docFooter">
-            <EditLinkComponent Href="@GitUrl"></EditLinkComponent>
+            <LinkButtonComponent Href="@GitUrl">
+                Edit on GitHub <i class="fa-brands fa-github" style="font-size: 24px; margin-left: 5px;"></i>
+                </LinkButtonComponent>
         </div>
     </div>
 }

IGP/Pages/HarassCalculatorPage.razor

@@ -180,7 +180,10 @@
                 Can I see the code for the calculation?
             </InfoQuestionComponent>
             <InfoAnswerComponent>
-                <CodeLinkComponent Href="https://github.com/JonathanMcCaffrey/IGP-Fan-Reference/blob/main/IGP/Pages/HarassCalculatorPage.razor"/>
+                <br/>
+                <LinkButtonComponent Href="https://github.com/JonathanMcCaffrey/IGP-Fan-Reference/blob/main/IGP/Pages/HarassCalculatorPage.razor">
+                    View on GitHub <i class="fa-brands fa-github" style="font-size: 24px; margin-left: 5px;"></i>
+                </LinkButtonComponent>
             </InfoAnswerComponent>
         </InfoBodyComponent>
     </PaperComponent>

IGP/Pages/Notes/Parts/NoteComponent.razor

@@ -16,7 +16,9 @@ else
         </div>
         <div class="noteContent">@((MarkupString)Markdown.ToHtml(content, Pipeline))</div>
         <div class="noteFooter">
-            <EditLinkComponent Href="@GitUrl"></EditLinkComponent>
+            <LinkButtonComponent Href="@GitUrl">
+                Edit on GitHub <i class="fa-brands fa-github" style="font-size: 24px; margin-left: 5px;"></i>
+            </LinkButtonComponent>
         </div>
     </div>
 }

IGP/wwwroot/generated/WebSectionModels.json

@@ -1 +1 @@
-[{"Id":1,"Name":"Tools","Description":"Tools Stuff","Order":1,"IsPrivate":"False","WebPageModels":[]},{"Id":2,"Name":"Resources","Description":"Resources Stuff","Order":2,"IsPrivate":"False","WebPageModels":[]},{"Id":3,"Name":"General","Description":"About Stuff","Order":3,"IsPrivate":"False","WebPageModels":[]},{"Id":4,"Name":"Development","Description":"Development Stuff","Order":4,"IsPrivate":"False","WebPageModels":[]},{"Id":5,"Name":"Settings","Description":"Settings Stuff","Order":5,"IsPrivate":"False","WebPageModels":[]}]
+[{"Id":1,"Name":"Tools","Description":"Tools Stuff","Order":1,"IsPrivate":"False","Icon":"fa-screwdriver-wrench","OnlyIcon":false,"WebPageModels":[]},{"Id":2,"Name":"Resources","Description":"Resources Stuff","Order":2,"IsPrivate":"False","Icon":"fa-toolbox","OnlyIcon":false,"WebPageModels":[]},{"Id":3,"Name":"General","Description":"About Stuff","Order":3,"IsPrivate":"False","Icon":"fa-circle-info","OnlyIcon":false,"WebPageModels":[]},{"Id":4,"Name":"Development","Description":"Development Stuff","Order":4,"IsPrivate":"False","Icon":"fa-code","OnlyIcon":false,"WebPageModels":[]},{"Id":5,"Name":"Settings","Description":"Settings Stuff","Order":5,"IsPrivate":"False","Icon":"fa-gear","OnlyIcon":false,"WebPageModels":[]}]

IGP/wwwroot/index.html

@@ -32,6 +32,7 @@
         src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js"></script>
 <script src="javascript/download.js"></script>
 <script src="_content/Blazor-Analytics/blazor-analytics.js"></script>
+<script src="https://kit.fontawesome.com/c77aa98347.js" crossorigin="anonymous"></script>
 <script>
     Blazor.start({
         applicationCulture: 'en-US'

Model/Website/WebPageModel.cs

@@ -8,4 +8,5 @@ public class WebPageModel
     public string Description { get; set; } = "Add description";
     public string Href { get; set; } = null;
     public string IsPrivate { get; set; } = "True";
+    
 }

Model/Website/WebSectionModel.cs

@@ -11,5 +11,8 @@ public class WebSectionModel
     public int Order { get; set; } = 0;
     public string IsPrivate { get; set; } = "True";
     
+    public string Icon { get; set; } = "fa-icons";
+    public bool OnlyIcon { get; set; } = false;
+
     [NotMapped] public List<WebPageModel> WebPageModels { get; set; } = new();
 }