Adjust Button Styling for Adding Grades

project/frontend-angular/src/app/grade-teacher/grade-teacher.css

@@ -9,7 +9,6 @@
     }
 }
 
-/* Main Container */
 .grades-container {
     max-width: 1200px;
     margin: 0 auto;
@@ -17,65 +16,63 @@
     animation: fadeIn 0.6s ease-in;
 }
 
-/* Header Section */
 .header-section {
-margin-bottom: 32px;
+    margin-bottom: 32px;
 }
 
 .subject-title {
-font-size: 48px;
-font-weight: 700;
-letter-spacing: -1px;
-color: #ffffff;
-margin-bottom: 8px;
+    font-size: 48px;
+    font-weight: 700;
+    letter-spacing: -1px;
+    color: #ffffff;
+    margin-bottom: 8px;
+    text-align: center;
 }
 
-/* Search Section */
 .search-section {
-background: rgba(255, 255, 255, 0.02);
-border: 1px solid rgba(255, 255, 255, 0.1);
-border-radius: 12px;
-padding: 20px;
-margin-bottom: 24px;
-transition: all 0.3s ease;
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 12px;
+    padding: 20px;
+    margin-bottom: 24px;
+    transition: all 0.3s ease;
 }
 
 .search-section:hover {
-background: rgba(255, 255, 255, 0.05);
-border-color: rgba(255, 255, 255, 0.15);
+    background: rgba(255, 255, 255, 0.05);
+    border-color: rgba(255, 255, 255, 0.15);
 }
 
 .search-label {
-display: block;
-font-size: 14px;
-font-weight: 500;
-color: #e0e0e0;
-margin-bottom: 8px;
+    display: block;
+    font-size: 14px;
+    font-weight: 500;
+    color: #e0e0e0;
+    margin-bottom: 8px;
 }
 
 .search-input {
-width: 100%;
-padding: 12px 16px;
-background: rgba(255, 255, 255, 0.05);
-border: 1px solid rgba(255, 255, 255, 0.1);
-border-radius: 8px;
-color: #ffffff;
-font-size: 14px;
-font-family: inherit;
-transition: all 0.3s ease;
+    width: 100%;
+    padding: 12px 16px;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 8px;
+    color: #ffffff;
+    font-size: 14px;
+    font-family: inherit;
+    transition: all 0.3s ease;
 }
 
 .search-input:focus {
-outline: none;
-border-color: rgba(255, 255, 255, 0.2);
-background: rgba(255, 255, 255, 0.08);
+    outline: none;
+    border-color: rgba(255, 255, 255, 0.2);
+    background: rgba(255, 255, 255, 0.08);
 }
 
 .search-input::placeholder {
-color: #888;
+    color: #888;
 }
 
-/* Form Section */
 .form-section {
     background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
     border: 1px solid rgba(255, 255, 255, 0.1);
@@ -144,16 +141,19 @@ color: #888;
 }
 
 .submit-button {
+    display: block;
+    margin: 0 auto;
     background: linear-gradient(135deg, #8C231E 0%, #a52a24 100%);
     color: #ffffff;
     border: none;
-    padding: 12px 24px;
+    padding: 16px 0;
     border-radius: 8px;
-    font-size: 14px;
+    font-size: 16px;
     font-weight: 500;
     cursor: pointer;
     transition: all 0.3s ease;
     font-family: inherit;
+    width: 50%;
 }
 
 .submit-button:hover {
@@ -165,7 +165,14 @@ color: #888;
     transform: translateY(0);
 }
 
-/* Table Section */
+.grade-form .form-group.submit-row {
+    grid-column: 1 / -1;
+    margin-top: 16px;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+}
+
 .table-section {
 background: rgba(255, 255, 255, 0.02);
 border: 1px solid rgba(255, 255, 255, 0.1);
@@ -229,7 +236,6 @@ color: #e0e0e0;
 border-bottom: 1px solid rgba(255, 255, 255, 0.05);
 }
 
-/* Grade Management */
 .grade-container {
 display: flex;
 flex-wrap: wrap;
@@ -294,7 +300,6 @@ border-color: #8C231E;
     box-shadow: 0 2px 8px rgba(140, 35, 30, 0.3);
 }
 
-/* Responsive Design */
 @media (max-width: 768px) {
     .grades-container {
         padding: 20px 15px;

project/frontend-angular/src/app/grade-teacher/grade-teacher.html

@@ -60,7 +60,7 @@
       <div *ngIf="errorMessage === 'Student already has a grade'" class="duplicate-error">
         Student already has a grade
       </div>
-      <div class="form-group">
+      <div class="form-group submit-row">
         <button type="submit" class="submit-button">Add Grade</button>
       </div>
     </form>
@@ -70,7 +70,7 @@
       <thead class="table-header">
         <tr>
           <th>
-            Name
+            First Name
             @if (sortDirection==='desc') {
               <button class="sort-button" (click)="sortByName()">↓</button>
             }