refact: removal of inline style to match bootstrap class

Author: EliasMasche

src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTable.razor

@@ -29,8 +29,8 @@
                         {
                             @if (ShowAdminActions)
                             {
-                                <div draggable="true" @ondrag="@(() => currentDragItem = skill)" style="cursor: grab"
-                                 class="skill-tag">
+                                <div draggable="true" @ondrag="@(() => currentDragItem = skill)"
+                                 class="skill-tag cursor-grab">
                                     <SkillTag Skill="@skill"
                                               ShowAdminActions="@true"
                                               DeleteSkill="@(() => DeleteSkill(skill))"/>

src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/CreateNewBlogPost.razor

@@ -35,7 +35,7 @@
 
     <EditForm Model="@model" OnValidSubmit="OnValidBlogPostCreatedAsync">
         <DataAnnotationsValidator />
-        
+
         <div class="row g-4">
             <div class="col-lg-8">
                 <div class="card shadow-sm border-0 hover-shadow-lg transition">
@@ -45,19 +45,18 @@
                     <div class="card-body p-0">
                                 <div class="p-4 border-bottom">
                                     <div class="form-floating">
-                                        <input type="text" class="form-control form-control-lg border-0 shadow-none" 
+                                        <input type="text" class="form-control form-control-lg border-0 shadow-none fs-3 fw-semibold"
                                                id="title" placeholder="Enter your post title..."
-                                               @oninput="args => model.Title = args.Value!.ToString()!" 
-                                               value="@model.Title" 
-                                               style="font-size: 1.5rem; font-weight: 600;" />
+                                               @oninput="args => model.Title = args.Value!.ToString()!"
+                                               value="@model.Title"/>
                                         <label for="title" class="fw-bold">Post Title</label>
                                     </div>
                                     <ValidationMessage For="() => model.Title" class="text-danger small mt-1"></ValidationMessage>
                                 </div>
 
                                 <div class="p-4 border-bottom">
                                     <label class="form-label fw-bold text-dark mb-3">Short Description</label>
-                                    <MarkdownTextArea Id="short" Class="form-control border-0 shadow-none" 
+                                    <MarkdownTextArea Id="short" Class="form-control border-0 shadow-none"
                                                       Rows="4" Placeholder="Write a compelling summary..."
                                                       @bind-Value="@model.ShortDescription"
                                                       PreviewFunction="ReplaceShortCodes"></MarkdownTextArea>
@@ -69,15 +68,15 @@
                                         Content                        <span class="badge bg-secondary ms-2 fw-medium">@ReadingTimeCalculator.GetWordCount(model.Content) words</span>
                         <span class="badge bg-info ms-1 fw-medium">~@GetEstimatedReadTime() min read</span>
                                     </label>
-                                    <MarkdownTextArea Id="content" Class="form-control border-0 shadow-none" 
+                                    <MarkdownTextArea Id="content" Class="form-control border-0 shadow-none"
                                                       Rows="25" Placeholder="Start writing your amazing content..."
                                                       PreviewFunction="ReplaceShortCodes"
                                                       @bind-Value="@model.Content"></MarkdownTextArea>
                                     <ValidationMessage For="() => model.Content" class="text-danger small mt-1"></ValidationMessage>
 
                                     <div class="position-absolute top-0 end-0 m-3">
                                         <div class="btn-group">
-                                            <button class="btn btn-outline-primary btn-sm dropdown-toggle" type="button" 
+                                            <button class="btn btn-outline-primary btn-sm dropdown-toggle" type="button"
                                                     data-bs-toggle="dropdown" aria-expanded="false">
                                                 Tools
                                             </button>
@@ -129,8 +128,8 @@
                             </div>
                             <div class="card-body">
                                 <div class="form-floating">
-                                    <InputText type="text" class="form-control" id="tags" 
-                                               placeholder="technology, programming, tutorial" 
+                                    <InputText type="text" class="form-control" id="tags"
+                                               placeholder="technology, programming, tutorial"
                                                @bind-Value="model.Tags" />
                                     <label for="tags">Tags (comma separated)</label>
                                 </div>
@@ -181,7 +180,7 @@
                                     }
                                     <ValidationMessage For="() => model.ScheduledPublishDate" class="text-danger small mt-1"></ValidationMessage>
                                 </div>
-                                
+
                                 @if (BlogPost is not null && !IsScheduled)
                                 {
                                     <div class="form-check form-switch">
@@ -202,17 +201,17 @@
                             <div class="card-body">
                                 <div class="mb-3">
                                     <div class="form-floating">
-                                        <InputText type="url" class="form-control" id="preview" 
-                                                   placeholder="https://example.com/image.jpg" 
+                                        <InputText type="url" class="form-control" id="preview"
+                                                   placeholder="https://example.com/image.jpg"
                                                    @bind-Value="model.PreviewImageUrl" />
                                         <label for="preview">Primary Image URL</label>
                                     </div>
                                     <ValidationMessage For="() => model.PreviewImageUrl" class="text-danger small mt-1"></ValidationMessage>
                                 </div>
                                 <div class="mb-3">
                                     <div class="form-floating">
-                                        <InputText type="url" class="form-control" id="fallback-preview" 
-                                                   placeholder="https://example.com/fallback.jpg" 
+                                        <InputText type="url" class="form-control" id="fallback-preview"
+                                                   placeholder="https://example.com/fallback.jpg"
                                                    @bind-Value="model.PreviewImageUrlFallback" />
                                         <label for="fallback-preview">Fallback Image URL</label>
                                     </div>
@@ -306,25 +305,25 @@
         {
             return "Editing";
         }
-        
+
         if (model.IsPublished)
         {
             return "Ready to Publish";
         }
-        
+
         if (IsScheduled)
         {
             return "Scheduled";
         }
-        
+
         return "Draft";
     }
 
     private int GetEstimatedReadTime()
     {
         if (string.IsNullOrWhiteSpace(model.Content))
             return 1;
-            
+
         return ReadingTimeCalculator.CalculateReadingTime(model.Content);
     }
 

src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/FeatureInfoDialog.razor

@@ -4,7 +4,7 @@
     changes.</p>
     <p>Use with caution and check the changelog</p>
     <hr/>
-    <h3 style="display:inline-block">Slide-Show</h3><i class="lab"></i>
+    <h3 class="d-inline-block">Slide-Show</h3><i class="lab"></i>
     <p>Will create a slide-show with images specified by the tag.</p>
     <strong>Usage:</strong>
     <code><pre>&lt;slide-show&gt;
@@ -13,7 +13,7 @@
     &lt;slide-show-image src="https://picsum.photos/550/200" title="Title 3"&gt;&lt;/slide-show-image&gt;
 &lt;/slide-show&gt;</pre></code>
     <hr />
-    <h3 style="display:inline-block">Convert To Markdown</h3><i class="lab"></i>
+    <h3 class="d-inline-block">Convert To Markdown</h3><i class="lab"></i>
     <p>By clicking the button in the editor "Convert to Markdown", you will be able to transform HTML content into Markdown content. You will be also able to restore the original content</p>
 </ModalDialog>
 

src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/ShortCodeDialog.razor

@@ -23,7 +23,7 @@
 					<tr @onclick="() => AddShortCode(shortCode)" style="cursor: pointer;">
 						<td>@shortCode.Name</td>
 						<td>
-							<div style="max-height: 100px; overflow-y: auto;">
+							<div class="overflow-auto mh-100px">
 								@MarkdownConverter.ToMarkupString(shortCode.MarkdownContent)
 							</div>
 						</td>

src/LinkDotNet.Blog.Web/Features/Admin/Dashboard/Components/VisitCountPerPage.razor

@@ -22,7 +22,7 @@
             {
                 <p id="total-clicks">Loading...</p>
             }
-            <table class="table table-striped table-hover table-active" style="table-layout: fixed">
+            <table class="table table-striped table-hover table-active table-fixed">
                 <tbody>
                 <tr>
                     <th>Title</th>

src/LinkDotNet.Blog.Web/Features/Components/ConfirmDialog.razor

@@ -1,8 +1,8 @@
 <ModalDialog @ref="ModalDialog" Title="@Title">
     <h3>@Content</h3>
     <div class="d-flex justify-content-end gap-2 mt-4">
-	    <button id="ok" @onclick="OnYesButtonPressed" type="button" class="btn btn-primary" style="width: 125px;">Ok</button>
-	    <button id="cancel" @onclick="OnNoButtonPressed" type="button" class="btn btn-secondary" style="width: 125px;">Cancel</button>
+	    <button id="ok" @onclick="OnYesButtonPressed" type="button" class="btn btn-primary w-100">Ok</button>
+	    <button id="cancel" @onclick="OnNoButtonPressed" type="button" class="btn btn-secondary w-100" >Cancel</button>
     </div>
 </ModalDialog>
 

src/LinkDotNet.Blog.Web/Features/Components/ModalDialog.razor

@@ -1,4 +1,4 @@
-<div class="modal @modalClass" tabindex="-1" role="dialog" style="display:@modalDisplay; overflow-y: auto;">
+<div class="modal @modalClass overflow-auto" tabindex="-1" role="dialog" style="display:@modalDisplay;">
     <div class="modal-dialog modal-lg" role="document">
         <div class="modal-content">
             <div class="modal-header">

src/LinkDotNet.Blog.Web/Features/SupportMe/Components/Patreon.razor

@@ -1,7 +1,6 @@
 <a href="https://www.patreon.com/@PatreonName" target="_blank" bind
-   class="text-decoration-none border border-dark rounded p-2 link"
-   style="background: #fb6856">
-	<i class="me-2" style="color: white">
+   class="text-decoration-none border border-dark rounded p-2 link bg-danger">
+	<i class="me-2 text-white">
 		<svg style="height: 1em; width: 1em;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
 			<path d="M512 194.8c0 101.3-82.4 183.8-183.8 183.8-101.7 0-184.4-82.4-184.4-183.8 0-101.6 82.7-184.3 184.4-184.3C429.6 10.5 512 93.2 512 194.8zM0 501.5h90v-491H0v491z" fill="white"></path>
 		</svg>