ORDER ARROW

dashboard_static/index.html

@@ -107,7 +107,7 @@
                                 </ul>
                             </div>
                         </div>
-                        <!-- <div class="button">BLOCKED WORDS</div> -->
+                        <span class="material-symbols-outlined order-btn">arrow_downward</span>
                     </div>
                     <div class="popchart column">
                         <span class="colheader chartheader">Sports Popularity Chart</span>

dashboard_static/js/events.js

@@ -68,3 +68,11 @@ $(".logo").on("click", function() {
         root.style.setProperty('--column-color', 'rgba(112, 128, 144, 0.388');
     }
 })
+
+$(".order-btn").on("click", function() {
+    if($(this).html() == "arrow_downward") {    // Descending to ascending
+        $(this).html("arrow_upward")
+    } else {    // Ascending to descending
+        $(this).html("arrow_downward")
+    }
+})

dashboard_static/style/style.css

@@ -242,6 +242,12 @@ body {
 	border: none;
 }
 
+.material-symbols-outlined.order-btn {
+	line-height: 52px;
+	font-weight: 600;
+	user-select: none;
+}
+
 .sort-btn {
 	user-select: none;
 	position: relative;