Refactor of Scoped CSS

src/LinkDotNet.Blog.Web/Features/AboutMe/AboutMePage.razor

@@ -1,4 +1,4 @@
-@page "/AboutMe"
+@page "/AboutMe"
 @using LinkDotNet.Blog.Web.Features.AboutMe.Components
 @using LinkDotNet.Blog.Domain
 @inject IOptions<ApplicationConfiguration> AppConfiguration
@@ -16,12 +16,14 @@
             AbsolutePreviewImageUrl="@ImageUrl"></OgData>
 
     <div class="container">
-        <div class="row">
-            <div class="col-lg-3 col-md-4">
-                <Profile ShowAdminActions="@isAuthenticated" ProfileInformation="ProfileInformation.Value"/>
-            </div>
-            <TabbedNavigation IsAuthenticated="isAuthenticated"></TabbedNavigation>
-        </div>
+	    <div class="row gy-4">
+		    <div class="col-lg-3 col-md-4">
+			    <Profile ShowAdminActions="@isAuthenticated" ProfileInformation="ProfileInformation.Value" />
+		    </div>
+		    <div class="col-lg-9 col-md-8">
+			    <TabbedNavigation IsAuthenticated="isAuthenticated" />
+		    </div>
+	    </div>
     </div>
 }
 

src/LinkDotNet.Blog.Web/Features/AboutMe/Components/AddProfileShortItem.razor

@@ -1,13 +1,14 @@
-<li><input type="text" @bind-value="@content" placeholder="supports markdown" class="w-100"/>
-    <button type="button" class="btn btn-default" aria-label="Add Item" @onclick="@AddItemAsync">
-        <i class="plus" aria-hidden="true"></i>
-    </button>
+<li>
+	<input type="text" @bind-value="@content" placeholder="supports markdown" class="w-100"/>
+	<button type="button" class="btn btn-default" aria-label="Add Item" @onclick="@AddItemAsync">
+		<i class="plus" aria-hidden="true"></i>
+	</button>
 </li>
 
 @code {
-    [Parameter] 
+    [Parameter]
     public EventCallback<string> ValueAdded { get; set; }
-    
+
     private string content = string.Empty;
 
     private async Task AddItemAsync()
@@ -20,4 +21,4 @@
         await ValueAdded.InvokeAsync(content);
         content = string.Empty;
     }
-}
+}

src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Profile.razor

@@ -5,46 +5,46 @@
 @inject IRepository<ProfileInformationEntry> Repository
 @inject ISortOrderCalculator SortOrderCalculator
 <div class="profile-card">
-    <div class="profile-name">
-        <span>@ProfileInformation.Name</span>
-        <br/>
-        <span>@ProfileInformation.Heading</span>
-    </div>
-    <div class="profile-image">
-        <img src="@ProfileInformation.ProfilePictureUrl" alt="Profile Picture" />
-    </div>
-    <ul class="profile-keypoints"
-        ondragover="event.preventDefault();">
-        @foreach (var entry in profileInformationEntries)
-        {
-            @if (ShowAdminActions)
-            {
-                <li
-                    class="item-draggable"
-                    draggable="true"
-                    @ondrag="@(() => currentDragItem = entry)"
-                    @ondrop="@(() => HandleDrop(entry))">
+	<div class="profile-name">
+		<span>@ProfileInformation.Name</span>
+		<br/>
+		<span>@ProfileInformation.Heading</span>
+	</div>
+	<div class="profile-image">
+		<img src="@ProfileInformation.ProfilePictureUrl" alt="Profile Picture" />
+	</div>
+	<ul class="profile-keypoints"
+	    ondragover="event.preventDefault();">
+		@foreach (var entry in profileInformationEntries)
+		{
+			@if (ShowAdminActions)
+			{
+				<li
+					class="item-draggable"
+					draggable="true"
+					@ondrag="@(() => currentDragItem = entry)"
+					@ondrop="@(() => HandleDrop(entry))">
 
-                    <button type="button" class="btn btn-default" aria-label="Delete Item" @onclick="() => ShowDeleteDialog(entry.Content)">
-                        <i class="bin2" aria-hidden="true"></i>
-                    </button>
-                    @MarkdownConverter.ToMarkupString(entry.Content)
-                </li>
-            }
-            else
-            {
-                <li>@MarkdownConverter.ToMarkupString(entry.Content)</li>
-            }
-        }
-        @if (ShowAdminActions)
-        {
-            <AddProfileShortItem ValueAdded="@AddValue"></AddProfileShortItem>
-        }
-    </ul>
+					<button type="button" class="btn btn-default" aria-label="Delete Item" @onclick="() => ShowDeleteDialog(entry.Content)">
+						<i class="bin2" aria-hidden="true"></i>
+					</button>
+					@MarkdownConverter.ToMarkupString(entry.Content)
+				</li>
+			}
+			else
+			{
+				<li>@MarkdownConverter.ToMarkupString(entry.Content)</li>
+			}
+		}
+		@if (ShowAdminActions)
+		{
+			<AddProfileShortItem ValueAdded="@AddValue"></AddProfileShortItem>
+		}
+	</ul>
 </div>
 
 <ConfirmDialog @ref="Dialog" Content="Do you really want to delete this entry?" Title="Delete"
-OnYesPressed="DeleteItem"></ConfirmDialog>
+               OnYesPressed="DeleteItem"></ConfirmDialog>
 
 @code {
     [Parameter]

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

@@ -5,28 +5,30 @@
         <DataAnnotationsValidator />
         <ValidationSummary />
         <div class="mb-3">
-            <label for="title">Skill name</label>
-            <InputText class="form-control" id="title" @bind-Value="model.Skill" />
+	        <label for="title" class="form-label">Skill name</label>
+	        <InputText class="form-control" id="title" @bind-Value="model.Skill" />
         </div>
         <div class="mb-3">
-            <label for="image">Image Url</label>
-            <InputText class="form-control" id="image" @bind-Value="model.ImageUrl"/>
-            <small for="image" class="form-text text-body-secondary">If set is used before the skill (optional). 24x24 pixel
-            optimal size</small>
+	        <label for="image" class="form-label">Image Url</label>
+	        <InputText class="form-control" id="image" @bind-Value="model.ImageUrl" />
+	        <small class="form-text text-secondary">
+		        If set, it's used before the skill (optional). 24x24 pixel optimal size.
+	        </small>
         </div>
         <div class="mb-3">
-            <label for="capability">Capability</label>
-            <InputText class="form-control" id="capability" @bind-Value="model.Capability" />
+	        <label for="capability" class="form-label">Capability</label>
+	        <InputText class="form-control" id="capability" @bind-Value="model.Capability" />
         </div>
         <div class="mb-3">
-            <label for="proficiency">Proficiency</label>
-            <select class="form-select" id="proficiency" @bind="model.Proficiency">
-                @foreach (var level in ProficiencyLevel.All.Select(l => l.Key))
-                {
-                    <option value="@level">@level</option>
-                }
-            </select>
+	        <label for="proficiency" class="form-label">Proficiency</label>
+	        <select class="form-select" id="proficiency" @bind="model.Proficiency">
+		        @foreach (var level in ProficiencyLevel.All.Select(l => l.Key))
+		        {
+			        <option value="@level">@level</option>
+		        }
+	        </select>
         </div>
+
         <button class="btn btn-primary" type="submit">Submit</button>
     </EditForm>
 </ModalDialog>

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

@@ -5,7 +5,7 @@
         @if (ShowAdminActions)
         {
             <button type="button" class="btn btn-primary" @onclick="() => AddSkillDialog.Open()">
-                <i class="plus"></i>Add skill</button>
+                <i class="plus"></i> Add skill</button>
             <AddSkillDialog @ref="AddSkillDialog" SkillAdded="@AddSkill"></AddSkillDialog>
         }
     </div>

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

@@ -1,26 +1,26 @@
 @using LinkDotNet.Blog.Domain
 <span class="skill-tag">
-    @if (!string.IsNullOrEmpty(Skill.IconUrl))
-    {
-        <img src="@Skill.IconUrl" alt="icon" max-width="48px"/>
-    }
-    @Skill.Name
+	@if (!string.IsNullOrEmpty(Skill.IconUrl))
+	{
+		<img src="@Skill.IconUrl" alt="icon" max-width="48px"/>
+	}
+	@Skill.Name
 
-    @if (ShowAdminActions)
-    {
-        <button type="button" class="btn btn-default" aria-label="Delete Skill" @onclick="() => DeleteSkill.InvokeAsync()">
-            <i class="bin2" aria-hidden="true"></i>
-        </button>
-    }
+	@if (ShowAdminActions)
+	{
+		<button type="button" class="btn btn-default" aria-label="Delete Skill" @onclick="() => DeleteSkill.InvokeAsync()">
+			<i class="bin2" aria-hidden="true"></i>
+		</button>
+	}
 </span>
 
 @code {
-    [Parameter, EditorRequired]
-    public required Skill Skill { get; set; }
+	[Parameter, EditorRequired]
+	public required Skill Skill { get; set; }
 
-    [Parameter]
-    public bool ShowAdminActions { get; set; }
+	[Parameter]
+	public bool ShowAdminActions { get; set; }
 
-    [Parameter]
-    public EventCallback DeleteSkill { get; set; }
+	[Parameter]
+	public EventCallback DeleteSkill { get; set; }
 }

src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTag.razor.css

@@ -1,14 +1,14 @@
-.skill-tag {
-    padding: 8px;
-    border-radius: 5px;
-    background-color: var(--tag-background);
-    display: inline-block;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+.skill-tag {
+	padding: 8px;
+	border-radius: 5px;
+	background-color: var(--tag-background);
+	display: inline-block;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 
 .skill-tag img {
-    padding-right: 12px;
-    width: 36px;
-}
+	padding-right: 12px;
+	width: 36px;
+}

src/LinkDotNet.Blog.Web/Features/AboutMe/Components/TabbedNavigation.razor

@@ -1,23 +1,34 @@
 @using LinkDotNet.Blog.Web.Features.AboutMe.Components.Skill
 @using LinkDotNet.Blog.Web.Features.AboutMe.Components.Talk
 
-<div class="col-lg-9 col-md-8 tab-container">
-    <ul class="nav nav-pills nav-underline border-bottom justify-content-around" id="aboutMe" role="tablist">
-        <li class="nav-item" role="presentation">
-            <button class="nav-link active btn-primary btn-light" id="pills-skills-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Skills</button>
-        </li>
-        <li class="nav-item" role="presentation">
-            <button class="nav-link btn-primary btn-light" id="pills-talks-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Talks</button>
-        </li>
-    </ul>
-    <div class="tab-content" id="myTabContent">
-        <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-skills-tab" tabindex="0">
-            <SkillTable ShowAdminActions="@IsAuthenticated"></SkillTable>
-        </div>
-        <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-talks-tab" tabindex="0">
-            <Talks ShowAdminActions="@IsAuthenticated"></Talks>
-        </div>
-    </div>
+<div class="col-lg-9 col-md-8">
+	<ul class="nav nav-pills nav-underline border-bottom justify-content-around" id="aboutMe" role="tablist">
+		<li class="nav-item" role="presentation">
+			<button class="nav-link active" id="pills-skills-tab"
+			        data-bs-toggle="pill" data-bs-target="#pills-home"
+			        type="button" role="tab" aria-controls="pills-home" aria-selected="true">
+				Skills
+			</button>
+		</li>
+		<li class="nav-item" role="presentation">
+			<button class="nav-link" id="pills-talks-tab"
+			        data-bs-toggle="pill" data-bs-target="#pills-profile"
+			        type="button" role="tab" aria-controls="pills-profile" aria-selected="false">
+				Talks
+			</button>
+		</li>
+	</ul>
+
+	<div class="tab-content pt-3" id="myTabContent">
+		<div class="tab-pane fade show active" id="pills-home"
+		     role="tabpanel" aria-labelledby="pills-skills-tab" tabindex="0">
+			<SkillTable ShowAdminActions="@IsAuthenticated"></SkillTable>
+		</div>
+		<div class="tab-pane fade" id="pills-profile"
+		     role="tabpanel" aria-labelledby="pills-talks-tab" tabindex="0">
+			<Talks ShowAdminActions="@IsAuthenticated"></Talks>
+		</div>
+	</div>
 </div>
 
 @code {