cleaner start page

Management.Web/Pages/Index.razor

@@ -42,7 +42,12 @@
 
 @if(planner.LocalCourse == null)
 {
+  <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 @@
 
 }
 
+<div class="text-center">
+
   @if (localCourses != null)
   {
     <h3 >Stored Courses</h3>
     @foreach (var course in localCourses)
     {
-    void SetCourse()
-    {
-      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
+      </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;
+}