cleaner start page

Management.Web/Pages/Index.razor

@@ -42,7 +42,12 @@
 
 @if(planner.LocalCourse == null)
 {
-  <CurrentFiles RefreshKey="refreshKey" />
+  <div class="row justify-content-center">
+    <div class="col-auto">
+      <CurrentFiles RefreshKey="refreshKey" />
+    </div>
+  </div>
+  
   @if(!showNewFile)
   {
     <div class="text-center">

Management.Web/Shared/CurrentFiles.razor

@@ -15,24 +15,20 @@
 
 }
 
-@if(localCourses != null)
+<div class="text-center">
-{
+
-  <h3>Stored Courses</h3>
+  @if (localCourses != null)
-  @foreach (var course in localCourses)
   {
-    void SetCourse()
+    <h3 >Stored Courses</h3>
+    @foreach (var course in localCourses)
     {
-      planner.LocalCourse = course;
+      <h4 
-      this.StateHasChanged();
+        class="m-3 hover-underline-animation"  
-    }
+        @onclick="() => planner.LocalCourse = course" 
-    <div>
+        role='button'
-      <button 
-        class="btn btn-outline-primary"
-        @onclick="@SetCourse"
       >
-        Use
+        @course.Name
-      </button>
+      </h4>
-      @course.Name
+    }
-    </div>
   }
-}
+</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;
+}