reordering rubric

Management.Web/Shared/Components/AssignmentForm/AssignmentForm.razor

@@ -173,7 +173,9 @@
       Lock At Due Date
     </label>
   </div>
-  <RubricEditor />
+  <div class="container">
+    <RubricEditor />
+  </div>
   <SubmissionTypeSelector />
 }
 <ConfirmationModal Label="Delete" Class="btn btn-danger" OnConfirmAsync="HandleDelete" />

Management.Web/Shared/Components/AssignmentForm/RubricEditor.razor

@@ -104,10 +104,30 @@
       }
     }
   }
+
+  private int requiredPoints => rubric.Where(r => !r.IsExtraCredit).Select(r => r.Points).Sum();
+  private int extraCreditPoints => rubric.Where(r => r.IsExtraCredit).Select(r => r.Points).Sum();
 }
 
 <br>
-<h5>Rubric</h5>
+<div class="row">
+
+  <div class="col offset-3">
+    <h4 class="text-center">Rubric</h4>
+  </div>
+
+  <div class=" col-3 text-end my-1">
+    <button
+      @onclick:preventDefault="true"
+      @onclick="addItem"
+      type="button"
+      class="btn btn-outline-primary"
+    >
+      + rubric item
+    </button>
+  </div>
+</div>
+
 <ul class="list-group">
 @foreach (var rubricItem in rubric)
   {
@@ -120,21 +140,34 @@
   }
 </ul>
 
-<div class="text-end my-1">
-  <button
-    @onclick:preventDefault="true"
-    @onclick="removeItem"
-    type="button"
-    class="btn btn-outline-danger"
-  >
-    - rubric item
-  </button>
-  <button
-    @onclick:preventDefault="true"
-    @onclick="addItem"
-    type="button"
-    class="btn btn-outline-primary"
-  >
-    + rubric item
-  </button>
+
+<div class="row">
+  <div class="col">
+    <div>
+      Requred Points: @requiredPoints
+    </div>
+    <div>
+      Extra Credit Points @extraCreditPoints
+    </div>
+  </div>
+  <div class="col">
+    <div class="text-end my-1">
+      <button
+        @onclick:preventDefault="true"
+        @onclick="removeItem"
+        type="button"
+        class="btn btn-outline-danger"
+      >
+        - rubric item
+      </button>
+      <button
+        @onclick:preventDefault="true"
+        @onclick="addItem"
+        type="button"
+        class="btn btn-outline-primary"
+      >
+        + rubric item
+      </button>
+    </div>
+  </div>
 </div>

Management.Web/Shared/Components/AssignmentForm/RubricEditorItem.razor

@@ -56,7 +56,7 @@
         @bind="label" 
       />
     </div>
-    <div class="col">
+    <div class="col-auto">
       <label
         for="rubricPoints"
         class="form-label"