refact: initial process of CSS classes to Bootstrap 5

Author: EliasMasche

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

@@ -4,16 +4,18 @@
 
 @inject IRepository<ProfileInformationEntry> Repository
 @inject ISortOrderCalculator SortOrderCalculator
-<div class="profile-card">
-    <div class="profile-name">
+
+<div class="card shadow-sm w-100 rounded">
+	<div class="px-4 py-3 fs-5 lh-base" style="background: var(--tag-background);">
         <span>@ProfileInformation.Name</span>
         <br/>
         <span>@ProfileInformation.Heading</span>
     </div>
-    <div class="profile-image">
-        <img src="@ProfileInformation.ProfilePictureUrl" alt="Profile Picture" />
+	<div class="p-4" style="background: var(--tag-background);">
+		<img src="@ProfileInformation.ProfilePictureUrl" alt="Profile Picture"
+		     class="w-100 mx-auto d-block rounded-circle"/>
     </div>
-    <ul class="profile-keypoints"
+	<ul class="list-unstyled px-4 pt-2 mb-0" style="background: var(--tag-background);"
         ondragover="event.preventDefault();">
         @foreach (var entry in profileInformationEntries)
         {

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

@@ -9,36 +9,41 @@
             <AddSkillDialog @ref="AddSkillDialog" SkillAdded="@AddSkill"></AddSkillDialog>
         }
     </div>
-<div class="table-container">
-    <table class="skill-table" id="skill-table">
+<div class="table-responsive">
+    <table class="table w-100 mt-3 align-top" id="skill-table">
+        <thead>
+            <tr>
+                <th class="w-10">Capability</th>
+                <th class="w-30">Familiar with</th>
+                <th class="w-30">Proficient</th>
+                <th class="w-30">Expert</th>
+            </tr>
+        </thead>
         <tbody>
-        <tr>
-            <th>Capability</th>
-            <th>Familiar with</th>
-            <th>Proficient</th>
-            <th>Expert</th>
-        </tr>
         @foreach (var skillCapabilityGroup in skills.GroupBy(s => s.Capability))
         {
             <tr ondragover="event.preventDefault();">
                 <td>@skillCapabilityGroup.Key</td>
                 @foreach (var skillLevel in ProficiencyLevel.All)
                 {
-                    <td @ondrop="@(() => HandleDrop(skillLevel))" class="proficiency-level">
+                    <td @ondrop="@(() => HandleDrop(skillLevel))" class="border-top align-top" style="min-width: 100px;">
                         @foreach (var skill in skillCapabilityGroup.Where(s => s.ProficiencyLevel == skillLevel))
                         {
-                            @if (ShowAdminActions)
+                            if (ShowAdminActions)
                             {
-                                <div draggable="true" @ondrag="@(() => currentDragItem = skill)" style="cursor: grab"
-                                 class="skill-tag">
+                                <div draggable="true"
+                                     @ondrag="@(() => currentDragItem = skill)"
+                                     class="d-inline-block me-2 my-2 px-2 py-1 rounded bg-light"
+                                     style="background-color: var(--tag-background); cursor: grab; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
+
                                     <SkillTag Skill="@skill"
                                               ShowAdminActions="@true"
                                               DeleteSkill="@(() => DeleteSkill(skill))"/>
                                 </div>
                             }
                             else
                             {
-                                <div>
+                                <div class="d-inline-block me-2 my-2">
                                     <SkillTag Skill="@skill"/>
                                 </div>
                             }
@@ -49,9 +54,10 @@
         }
         </tbody>
     </table>
+
     @if (ShowAdminActions)
     {
-        <small for="skill-table">You can drag and drop your skills from one proficiency to another</small>
+        <small class="form-text text-muted">You can drag and drop your skills from one proficiency to another</small>
     }
 </div>
 @code {

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

@@ -1,5 +1,6 @@
 @using LinkDotNet.Blog.Domain
-<span class="skill-tag">
+<span class="d-inline-flex align-items-center rounded px-2 py-1 me-2 my-2"
+      style="background-color: var(--tag-background); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
     @if (!string.IsNullOrEmpty(Skill.IconUrl))
     {
         <img src="@Skill.IconUrl" alt="icon" max-width="48px"/>

src/LinkDotNet.Blog.Web/Pages/_Layout.cshtml

@@ -25,12 +25,6 @@
     <link rel="preload" href="css/fonts/icons.woff2" as="font" type="font/woff2" crossorigin />
     <link rel="preload" href="css/fonts/icons.woff" as="font" type="font/woff" crossorigin />
     <link href="css/basic.css" rel="stylesheet" />
-    <link href="css/icons.css" rel="stylesheet" />
-    <link href="css/aboutme.css" rel="stylesheet" />
-    <link href="css/admin.css" rel="stylesheet" />
-    <link href="css/components.css" rel="stylesheet" />
-    <link href="css/home.css" rel="stylesheet" />
-    <link href="css/blogpost.css" rel="stylesheet" />
     <link rel="preload" href="LinkDotNet.Blog.Web.styles.css" as="style">
     <link href="LinkDotNet.Blog.Web.styles.css" rel="stylesheet"/>
 	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" integrity="sha512-jnSuA4Ss2PkkikSOLtYs8BlYIeeIK1h99ty4YfvRPAlzr377vr3CXDb7sb7eEEBYjDtcYj+AjBH3FLv5uSJuXg==" crossorigin="anonymous" referrerpolicy="no-referrer" />