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 {