cleaner start page

Management.Web/Shared/CurrentFiles.razor

@@ -3,7 +3,7 @@
 @inject YamlManager yamlManager
 @inject CoursePlanner planner
 
-@code 
+@code
 {
   [Parameter]
   public int RefreshKey { get; set; }
@@ -15,24 +15,20 @@
 
 }
 
-@if(localCourses != null)
-{
-  <h3>Stored Courses</h3>
-  @foreach (var course in localCourses)
+<div class="text-center">
+
+  @if (localCourses != null)
   {
-    void SetCourse()
+    <h3 >Stored Courses</h3>
+    @foreach (var course in localCourses)
     {
-      planner.LocalCourse = course;
-      this.StateHasChanged();
-    }
-    <div>
-      <button 
-        class="btn btn-outline-primary"
-        @onclick="@SetCourse"
+      <h4 
+        class="m-3 hover-underline-animation"  
+        @onclick="() => planner.LocalCourse = course" 
+        role='button'
       >
-        Use
-      </button>
-      @course.Name
-    </div>
+        @course.Name
+      </h4>
+    }
   }
-}
+</div>

Management.Web/Shared/CurrentFiles.razor.css

@@ -0,0 +1,30 @@
+.hover-underline-animation {
+  display: inline-block;
+  position: relative;
+  color: var(--bs-primary-text-emphasis);
+  transition: all 500ms;
+}
+
+.hover-underline-animation:hover {
+  /* text-shadow: 10px 10px #092565; */
+  /* text-shadow: 10px 10px 40px #092565; */
+  transform: scale(1.05);
+}
+
+.hover-underline-animation::after {
+  content: '';
+  position: absolute;
+  width: 100%;
+  transform: scaleX(0);
+  height: 2px;
+  bottom: 0;
+  left: 0;
+  background-color: var(--bs-primary-text-emphasis);
+  transform-origin: bottom right;
+  transition: transform 500ms ease-out;
+}
+
+.hover-underline-animation:hover::after {
+  transform: scaleX(1);
+  transform-origin: bottom left;
+}