Styling

css/styles.css

@@ -22,21 +22,24 @@
 }
 
 .loader {
-    border: 10px solid #f3f3f3; /* Light grey */
-    border-top: 10px solid #bf5700; /* Blue */
+    border: 10px solid #f3f3f3;
+    border-top: 10px solid #FF9800;
     border-radius: 50%;
     width: 50px;
     height: 50px;
     display: none;
     animation: spin 2s linear infinite;
-  }
-  
-  @keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-  }
+}
 
-/* The Close Button */
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
 
 .close {
     color: #aaaaaa;

js/content.js

@@ -45,7 +45,7 @@ $(function () {
 		$("table").after(`<div style="text-align:center">
 							  <div class="loader"></div>
 							  <br>
-						  	<h2 id="nextlabel"style="color: #bf5700;display:none;">Loading Courses</h2>
+						  	<h1 id="nextlabel"style="color: #FF9800;display:none;">Loading Courses</h1>
 						  </div>`);
 		var modhtml = `<div class=modal id=myModal>
 							<div class=modal-content>

options.html

@@ -14,8 +14,8 @@
         Highlighting</h2>
       <button id="togglecourseConflictHighlight" class="matbut" style="float:right; display:inline-block;font-size:medium;background:#F44336;">Turn
         Off</button>
-      <h2 style="padding: 5px 16px 16px 16px; font-weight: normal;display: inline-block;text-align:left;">All Courses
-        on First Page</h2>
+      <h2 style="padding: 5px 16px 16px 16px; font-weight: normal;display: inline-block;text-align:left;">Scroll To
+        Load More Courses</h2>
       <button id="toggleloadAll" class="matbut" style="float: right;display:inline-block;font-size:medium;background:#F44336;">Turn
         Off</button>
     </div>