From 05623b947c9133a0860e8713b8a6832ea851953a Mon Sep 17 00:00:00 2001
From: sghsri <sghsri@gmail.com>
Date: Sun, 27 Oct 2019 10:20:21 -0500
Subject: [PATCH] deconstructing class

---
 .DS_Store      | Bin 6148 -> 0 bytes
 css/styles.css |  25 ++--
 js/Template.js | 357 ++++++++++++++++++++++++-------------------------
 js/config.js   | 107 +++++++--------
 options.html   |   6 +-
 5 files changed, 245 insertions(+), 250 deletions(-)
 delete mode 100644 .DS_Store

diff --git a/.DS_Store b/.DS_Store
deleted file mode 100644
index fa98af4a24643bb5c9b9241e794f79a093fe76b4..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 6148
zcmeHK(T>tU6ukrNZb6AWnCw3G#l#0f*eIegCW!3AKA0FW`k-dF-6GVK4xvS&h~dS5
zQ2)SB@eBMAKS0l&8BHk|-;8nRCNpO`z30+<Zac#ek?78XL!ufHIcSWf3c4-E_qlCY
z!OT>FLdA$FAdjZhpwWi6ov;d61^zV!_}i`08NS+x29*7NQyNor9LY03l0Lk6iMWk+
z^}8~Rh>Bn)l;pfV=e)`^#G2q?Z5Y720rb}yVn4^&p%9TJo+lSuyw7>=!gGw+Lynz`
z`Yq>MpqF_cmC=VxM#{&ZClizP7k?6kN!o0F6@_AHXLrwWDo&+ZdEOt%c|Y~iS<>~U
zPx<PBmyUchek5h|YwY=t!@>NdcKM!+Q!k7MQ$-Gg0bHIv3FAP{yK)u>iHg(LHyo$z
zluv30i^a`bt-9N8wU%{v(QY^E?)7UomdmoUf93Gb@#*;Wo5kDZyN^f~Ca@4IyJYYu
ze8NB__o_dQBN-2I&AwG7Ukn*vsPd#J5M*NU*X1NGYgVd@@R?8wrYe+L^tZe;s<>HR
z1uSOH(0HTR#^Ew&Ic0iCM|78ZbRXEjGY9KWC%D*I#vbBIylQfrH<w*FnX-d?{>;28
z&V}=ry3N=sU={d-0=z!BXp9|$D~)RDK&OrXz!IjFVa$INnByAk7+h(@9hlHmpr#6Q
z#1NW}dDr-L46Zb4Itg?55aySKIiU#k>xl0vcM=_qwzmpc1=bZP>dPAM|3|++|F4tm
zl~uqh@Lwq)O1*xsi<HdXx{)03wJzEz8XNnqG%5-@vmL7eZ^Z{_%5cx+0kC6mr4chQ
P`$s^@U^}b8Usd1-?Ze)T

diff --git a/css/styles.css b/css/styles.css
index e26d0cd4..7f481255 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -133,11 +133,23 @@
     cursor: pointer;
 }
 
-.topbuttons .matbut {
+.topbuttons .material-button {
     display: inline-block;
 }
 
-.matbut {
+.rmp-button {
+
+}
+
+.ecis-button {
+    
+}
+
+.textbook-button{
+
+}
+
+.material-button {
     border: none;
     outline: none;
     cursor: pointer;
@@ -149,14 +161,11 @@
     font-style: bold;
     box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
     background: #ff9800;
-}
-
-.matbut {
     position: relative;
     overflow: hidden;
 }
 
-.matbut:after {
+.material-button:after {
     content: "";
     position: absolute;
     top: 50%;
@@ -187,7 +196,7 @@
     }
 }
 
-.matbut:focus:not(:active)::after {
+.material-button:focus:not(:active)::after {
     animation: ripple 1s ease-out;
 }
 
@@ -271,4 +280,4 @@
         bottom: 0;
         opacity: 0;
     }
-}
\ No newline at end of file
+}
diff --git a/js/Template.js b/js/Template.js
index acdac8ff..66bb66d5 100644
--- a/js/Template.js
+++ b/js/Template.js
@@ -1,194 +1,185 @@
-class Template {
-    static Main = class Main {
-        static modal() {
-            return `<div class=modal id=myModal>
-                        <div class=modal-content>
-                        <span class=close>×</span>
+class Template{}
+
+Template.Main = class {
+    static modal() {
+        return `<div class=modal id=myModal>
+                    <div class=modal-content>
+                    <span class=close>×</span>
+                    <div class=card>
+                            <div class=cardcontainer>
+                            <h2 class=title id="title">Computer Fluency (C S 302)</h2>
+                            <h2 class=profname id="profname">with Bruce Porter</h2>
+                            <div id="topbuttons" class=topbuttons>
+                                    <button class=material-button id="rateMyProf" style="background: #4CAF50;"> RMP </button>
+                                    <button class=material-button id="eCIS" style="background: #CDDC39;"> eCIS </button>
+                                    <button class=material-button id="textbook" style="background: #FFC107;"> Textbook </button>
+                                    <button class=material-button id="Syllabi"> Past Syllabi </button>
+                                    <button class=material-button id="saveCourse" value="add" style="background: #F44336;"> Save Course +</button>
+                                </div>
+                            </div>
+                        </div>
                         <div class=card>
-                                <div class=cardcontainer>
-                                <h2 class=title id="title">Computer Fluency (C S 302)</h2>
-                                <h2 class=profname id="profname">with Bruce Porter</h2>
-                                <div id="topbuttons" class=topbuttons>
-                                        <button class=matbut id="rateMyProf" style="background: #4CAF50;"> RMP </button>
-                                        <button class=matbut id="eCIS" style="background: #CDDC39;"> eCIS </button>
-                                        <button class=matbut id="textbook" style="background: #FFC107;"> Textbook </button>
-                                        <button class=matbut id="Syllabi"> Past Syllabi </button>
-                                        <button class=matbut id="saveCourse" value="add" style="background: #F44336;"> Save Course +</button>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class=card>
-                                <div class=cardcontainer style="">
-                                    <div class="chartloader">
-                                        <div class="loader" id='descload'></div>
-                                    </div>
-                                    <ul class=description id="description" style="list-style-type:disc"></ul>
-                                </div>
-                            </div>
-                            <div class=card style='text-align:center'>
-                                <select id="semesters" style='text-align-last:center;color:#666666;fill:#666666;'>
-                                </select>
+                            <div class=cardcontainer style="">
                                 <div class="chartloader">
-                                    <div class="loader" id='chartload'></div>
-                                </div>
-                                <div id="chartcontainer" class=cardcontainer>
-                                    <div id=chart></div>
+                                    <div class="loader" id='descload'></div>
                                 </div>
+                                <ul class=description id="description" style="list-style-type:disc"></ul>
                             </div>
                         </div>
-                    </div>`
-        }
-        static extension_button() {
-            return `<td data-th="Plus"><input type="image" class="distButton" id="distButton" width="20" height="20" src='${chrome.extension.getURL('images/disticon.png')}'/></td>`
-        }
-    }
-
-    static Catalog = class Catalog {
-        static loading() {
-            return `<div style="text-align:center">
-                            <div class="loader" id='loader'></div>
-                            <br>
-                            <h1 id="nextlabel"style="color: #FF9800;display:none;">Loading Courses</h1>
-                            <h1 id="retrylabel"style="color: #F44336;display:none;">Failed to Load Courses</h1>
-                            <br>
-                            <button class=matbut id="retry" style="background: #F44336;display:none;">Retry</button>
-                    </div>`
-        }
-    }
-
-
-    static UTPlanner = class UTPlanner{
-        static modal(){
-            return `<div class=modal id=myModal>
-                        <div class=modal-content>
-                        <span class=close>×</span>
-                        <div class=card>
-                                <div class=cardcontainer>
-                                <h2 class=title id="title">Computer Fluency (C S 302)</h2>
-                                <h2 class=profname id="profname" style="margin-bottom:0px;">with Bruce Porter</h2>
-                                <div id="topbuttons" class=topbuttons>
-                                        <button class=matbut id="moreInfo" style="background: #2196F3;"> More Info </button>
-                                        <button class=matbut id="textbook" style="background: #FFC107;"> Textbook </button>
-                                        <button class=matbut id="Syllabi"> Past Syllabi </button>
-                                        <button class=matbut id="saveCourse" value="add" style="background: #F44336;opacity:.4;"> Unable to Save</button>
-                                    </div>
-                                </div>
+                        <div class=card style='text-align:center'>
+                            <select id="semesters" style='text-align-last:center;color:#666666;fill:#666666;'>
+                            </select>
+                            <div class="chartloader">
+                                <div class="loader" id='chartload'></div>
                             </div>
-                            <div class=card style='text-align:center'>
-                                <select id="semesters" style='text-align-last:center;color:#666666;fill:#666666;'>
-                                </select>
-                                <div class="chartloader">
-                                    <div class="loader" id='chartload'></div>
-                                </div>
-                                <div id="chartcontainer" class=cardcontainer>
-                                    <div id=chart></div>
-                                </div>
+                            <div id="chartcontainer" class=cardcontainer>
+                                <div id=chart></div>
                             </div>
                         </div>
-                    </div>`
-        }
+                    </div>
+                </div>`
     }
-
-
-    static Calendar = class Calendar {
-        static line(line) {
-            let {
-                days,
-                start_time,
-                end_time,
-                location_link,
-                location_full
-            } = line;
-            return `<p class='time' style='font-size:large;'>
-                        <span style='display:inline-block;'>${days}:</span>
-                        <span style='margin-left:10px;display:inline-block;text-align:center;'>${start_time} to ${end_time}</span>
-                        <span style='float:right;display:inline-block;text-align:right;width: 25%;'>
-                            <a target='_blank' style='color:#3c87a3;text-decoration:none;'href='${location_link}'>${location_full}</a>
-                        </span>
-                    </p>`
-        }
-        static modal() {
-            return `<div id="myModal" class="modal">
-                        <div class="modal-content">
-                        <span class="close">&times;</span>
-                        <div class="card">
-                            <div id="colorStrip" style="height:10px;"></div>
-                            <div class="cardcontainer">
-                                <div id='header'>
-                                    <div style="display:flex;">
-                                        <h2 id="classname">Classname</h2>
-                                    </div>
-                                    <p id="prof">Prof</p>
-                                </div>
-                                <button id="info" class="matbut" style="font-size:medium; margin-right: auto; margin-left:auto; background: #2196F3;">More Info</button>
-                                <button id="register" class="matbut" style="font-size:medium; margin-right: auto; margin-left:10px; background: #4CAF50;">Register</button>
-                                <button id="remove" class="matbut" style="font-size:medium;margin:10px;background: #FF0000;">Remove</button>
-                            </div>
-                        </div>
-                    </div>`
-        }
+    static extension_button() {
+        return `<td data-th="Plus"><input type="image" class="distButton" id="distButton" width="20" height="20" src='${chrome.extension.getURL('images/disticon.png')}'/></td>`
+    }
+}
+Template.Catalog = class {
+    static loading() {
+        return `<div style="text-align:center">
+                        <div class="loader" id='loader'></div>
+                        <br>
+                        <h1 id="nextlabel"style="color: #FF9800;display:none;">Loading Courses</h1>
+                        <h1 id="retrylabel"style="color: #F44336;display:none;">Failed to Load Courses</h1>
+                        <br>
+                        <button class=material-button id="retry" style="background: #F44336;display:none;">Retry</button>
+                </div>`
+    }
+}
+Template.UTPlanner = class {
+    static modal(){
+        return `<div class=modal id=myModal>
+                    <div class=modal-content>
+                    <span class=close>×</span>
+                    <div class=card>
+                            <div class=cardcontainer>
+                            <h2 class=title id="title">Computer Fluency (C S 302)</h2>
+                            <h2 class=profname id="profname" style="margin-bottom:0px;">with Bruce Porter</h2>
+                            <div id="topbuttons" class=topbuttons>
+                                    <button class=material-button id="moreInfo" style="background: #2196F3;"> More Info </button>
+                                    <button class=material-button id="textbook" style="background: #FFC107;"> Textbook </button>
+                                    <button class=material-button id="Syllabi"> Past Syllabi </button>
+                                    <button class=material-button id="saveCourse" value="add" style="background: #F44336;opacity:.4;"> Unable to Save</button>
+                                </div>
+                            </div>
+                        </div>
+                        <div class=card style='text-align:center'>
+                            <select id="semesters" style='text-align-last:center;color:#666666;fill:#666666;'>
+                            </select>
+                            <div class="chartloader">
+                                <div class="loader" id='chartload'></div>
+                            </div>
+                            <div id="chartcontainer" class=cardcontainer>
+                                <div id=chart></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>`
+    }
+}
+Template.Calendar = class {
+    static line(line) {
+        let {
+            days,
+            start_time,
+            end_time,
+            location_link,
+            location_full
+        } = line;
+        return `<p class='time' style='font-size:large;'>
+                    <span style='display:inline-block;'>${days}:</span>
+                    <span style='margin-left:10px;display:inline-block;text-align:center;'>${start_time} to ${end_time}</span>
+                    <span style='float:right;display:inline-block;text-align:right;width: 25%;'>
+                        <a target='_blank' style='color:#3c87a3;text-decoration:none;'href='${location_link}'>${location_full}</a>
+                    </span>
+                </p>`
+    }
+    static modal() {
+        return `<div id="myModal" class="modal">
+                    <div class="modal-content">
+                    <span class="close">&times;</span>
+                    <div class="card">
+                        <div id="colorStrip" style="height:10px;"></div>
+                        <div class="cardcontainer">
+                            <div id='header'>
+                                <div style="display:flex;">
+                                    <h2 id="classname">Classname</h2>
+                                </div>
+                                <p id="prof">Prof</p>
+                            </div>
+                            <button id="info" class="matbut" style="font-size:medium; margin-right: auto; margin-left:auto; background: #2196F3;">More Info</button>
+                            <button id="register" class="matbut" style="font-size:medium; margin-right: auto; margin-left:10px; background: #4CAF50;">Register</button>
+                            <button id="remove" class="matbut" style="font-size:medium;margin:10px;background: #FF0000;">Remove</button>
+                        </div>
+                    </div>
+                </div>`
+    }
+}
+Template.Popup = class {
+    static list_item(i, list_tile_color, unique, department, number, profname, list_sub_color, line) {
+        return `<li id='${i}' class='course_list_item'>
+                                <div class='card course_list_card'>
+                                    <div class='container' style='background:${list_tile_color}'>
+                                        <button class='copy_button' title='Copy Unique #' value='${unique}'>
+                                            <i id='copyicon' class="material-icons copy_button_icon">content_copy</i>
+                                        </button>
+                                        <h4 class='course_name_truncate_box'>
+                                            <b>${department} ${number} <span class='course_list_item_subtext'> with ${profname} (${unique})</span></b>
+                                        </h4>
+                                        <p id='arrow' class='arrow'>&#9658;</p>
+                                    </div>
+                                </div>
+                                <div id='moreInfo' class='course_list_item_options'>
+                                    <p style='background-color:${list_sub_color};' class='course_list_item_time_box'>${line}</p>
+                                    <div id='infoButtons' class='course_list_item_options_button_container'>
+                                        <button class='material_button course_list_item_options_buttons remove_button' id='listRemove'>Remove</button>
+                                        <button class='material_button course_list_item_options_buttons register_button' id='register'>Register</button>
+                                        <button class='material_button course_list_item_options_buttons more_info_button' id='listMoreInfo'>More Info</button>
+                                    </div>
+                                </div>
+                            </li>`;
+    }
+
+    static conflict_message(conflict_message) {
+        return `<p id='conflict' class='conflict_message'>${conflict_message}</>`
+    }
+
+    static line(line) {
+        let {
+            days,
+            start_time,
+            end_time,
+            location_link,
+            location_full
+        } = line;
+
+        return `<span class='time_line_days'>${days}:</span>
+                <span class='time_line_hours'>${start_time} to ${end_time}</span>
+                <span class='time_line_location'>
+                    <a target='_blank' class= 'time_line_location_link' href='${location_link}'>${location_full}</a>
+                </span>
+                <br>`
+    }
+}
+Template.Import = class {
+
+    static button_text_default = "<span style='font-size:small'>Import to </span><b>UT Reg +<b>";
+    static waitlist_button_text_default = "<span style='font-size:small'>Import Waitlists to </span><b>UT Reg +<b>";
+    static button_success = "Courses Saved!";
+    static import_button() {
+        return `<button class='material-button' id='import' style='margin:15px 0px;'>${this.button_text_default}</button><br>`;
+    }
+
+    static waitlist_import_button() {
+        return `<button class='material-button' id='import_waitlist' style='margin:0px'>${this.waitlist_button_text_default}</button><br>`;
     }
-
-    static Popup = class Popup {
-        static list_item(i, list_tile_color, unique, department, number, profname, list_sub_color, line) {
-            return `<li id='${i}' class='course_list_item'>
-                                    <div class='card course_list_card'>
-                                        <div class='container' style='background:${list_tile_color}'>
-                                            <button class='copy_button' title='Copy Unique #' value='${unique}'>
-                                                <i id='copyicon' class="material-icons copy_button_icon">content_copy</i>
-                                            </button>
-                                            <h4 class='course_name_truncate_box'>
-                                                <b>${department} ${number} <span class='course_list_item_subtext'> with ${profname} (${unique})</span></b>
-                                            </h4>
-                                            <p id='arrow' class='arrow'>&#9658;</p>
-                                        </div>
-                                    </div>
-                                    <div id='moreInfo' class='course_list_item_options'>
-                                        <p style='background-color:${list_sub_color};' class='course_list_item_time_box'>${line}</p>
-                                        <div id='infoButtons' class='course_list_item_options_button_container'>
-                                            <button class='material_button course_list_item_options_buttons remove_button' id='listRemove'>Remove</button>
-                                            <button class='material_button course_list_item_options_buttons register_button' id='register'>Register</button>
-                                            <button class='material_button course_list_item_options_buttons more_info_button' id='listMoreInfo'>More Info</button>
-                                        </div>
-                                    </div>
-                                </li>`;
-        }
-
-        static conflict_message(conflict_message) {
-            return `<p id='conflict' class='conflict_message'>${conflict_message}</>`
-        }
-
-        static line(line) {
-            let {
-                days,
-                start_time,
-                end_time,
-                location_link,
-                location_full
-            } = line;
-
-            return `<span class='time_line_days'>${days}:</span>
-                    <span class='time_line_hours'>${start_time} to ${end_time}</span>
-                    <span class='time_line_location'>
-                        <a target='_blank' class= 'time_line_location_link' href='${location_link}'>${location_full}</a>
-                    </span>
-                    <br>`
-        }
-    }
-
-
-    static Import = class Import {
-
-        static button_text_default = "<span style='font-size:small'>Import to </span><b>UT Reg +<b>";
-        static waitlist_button_text_default = "<span style='font-size:small'>Import Waitlists to </span><b>UT Reg +<b>";
-        static button_success = "Courses Saved!";
-        static import_button() {
-            return `<button class='matbut' id='import' style='margin:15px 0px;'>${this.button_text_default}</button><br>`;
-        }
-
-        static waitlist_import_button() {
-            return `<button class='matbut' id='import_waitlist' style='margin:0px'>${this.waitlist_button_text_default}</button><br>`;
-        }
-    }
-
 }
diff --git a/js/config.js b/js/config.js
index 566bf242..448e2aa2 100644
--- a/js/config.js
+++ b/js/config.js
@@ -1,61 +1,56 @@
-class Timing {
-    static fade_time = 100;
-    static calendar_fade_time = 100;
-    static button_delay = 75;
+class Timing{}
+Timing.fade_time = 100;
+Timing.calendar_fade_time = 100;
+Timing.button_delay = 75;
+
+
+class Colors{}
+Colors.material_colors = ['#4CAF50', '#CDDC39',
+    '#FFC107', '#2196F3', '#F57C00', '#9C27B0', '#FF5722', '#673AB7',
+    '#FF5252', '#E91E63', '#009688', '#00BCD4',
+    '#4E342E', '#424242', '#9E9E9E'
+];
+Colors.open = "#4CAF50";
+Colors.waitlisted = "#FF9800";
+Colors.closed = "#FF5722";
+Colors.no_status = "#607D8B";
+
+
+Colors.open_light = "#C8E6C9";
+Colors.waitlisted_light = "#FFE0B2";
+Colors.closed_light = "#FFCCBC";
+Colors.no_status_light = "#CFD8DC";
+
+
+Colors.highlight_conflict = "#F44336";
+Colors.highlight_default = "#333333";
+Colors.highlight_saved = "#4CAF50";
+
+Colors.badge_flash = "#FF5722";
+Colors.badge_default = "#bf5700";
+
+
+class Export{}
+Export.png_options = {
+   foreignObjectRendering: true,
+   logging: true,
+   removeContainer: true,
+   async: true,
 }
 
+class Popup {}
+Popup.num_semesters = 2;
 
-class Colors {
-    static material_colors = ['#4CAF50', '#CDDC39',
-        '#FFC107', '#2196F3', '#F57C00', '#9C27B0', '#FF5722', '#673AB7',
-        '#FF5252', '#E91E63', '#009688', '#00BCD4',
-        '#4E342E', '#424242', '#9E9E9E'
-    ];
-    static open = "#4CAF50";
-    static waitlisted = "#FF9800";
-    static closed = "#FF5722";
-    static no_status = "#607D8B";
+class Text{}
+Text.emptyText = function(){
+    let arr = ["Doesn't Look Like Anything To Me.", "You Can't Fail Classes You're Not In.", "Pro-Tip: Don't Take O-Chem.",
+        "No Work Happens On PCL 5th Floor.", "Sophomore But Freshman By Credit.", "Pain is temporary, GPA is forever.",
+        "You've Yee'd Your Last Haw.", "lol everything is already waitlisted.", "At Least You're Not At A&M.",
+        `It's ${moment().format("h:mm")} and OU Still Sucks.`, 'TeXAs iS BaCK GuYZ', "'Academically Challenged'",
+        'Does McCombs teach Parseltongue?', 'Lets make Daddy Fenves proud.', 'Feel bad if you say Wampus.', 'No Cruce Enfrente Del Bus.',
+        'Midterm 1 has been Unmuted', 'Omae Wa Mou Shindeiru...', 'Bevo Bucks are the new Bitcoin', 'Subway Robber > Machete Guy'
+    ]
+    let index = Math.floor(Math.random() * arr.length);
 
-
-    static open_light = "#C8E6C9";
-    static waitlisted_light = "#FFE0B2";
-    static closed_light = "#FFCCBC";
-    static no_status_light = "#CFD8DC";
-
-
-    static highlight_conflict = "#F44336";
-    static highlight_default = "#333333";
-    static highlight_saved = "#4CAF50";
-
-    static badge_flash = "#FF5722";
-    static badge_default = "#bf5700";
-}
-
-class Export {
-    static png_options = {
-        foreignObjectRendering: true,
-        logging: true,
-        removeContainer: true,
-        async: true,
-    }
-}
-
-class Popup {
-    static num_semesters = 2;
-}
-
-
-class Text {
-    static emptyText() {
-        let arr = ["Doesn't Look Like Anything To Me.", "You Can't Fail Classes You're Not In.", "Pro-Tip: Don't Take O-Chem.",
-            "No Work Happens On PCL 5th Floor.", "Sophomore But Freshman By Credit.", "Pain is temporary, GPA is forever.",
-            "You've Yee'd Your Last Haw.", "lol everything is already waitlisted.", "At Least You're Not At A&M.",
-            `It's ${moment().format("h:mm")} and OU Still Sucks.`, 'TeXAs iS BaCK GuYZ', "'Academically Challenged'",
-            'Does McCombs teach Parseltongue?', 'Lets make Daddy Fenves proud.', 'Feel bad if you say Wampus.', 'No Cruce Enfrente Del Bus.',
-            'Midterm 1 has been Unmuted', 'Omae Wa Mou Shindeiru...', 'Bevo Bucks are the new Bitcoin', 'Subway Robber > Machete Guy'
-        ]
-        let index = Math.floor(Math.random() * arr.length);
-
-        return arr[index];
-    }
+    return arr[index];
 }
diff --git a/options.html b/options.html
index a7723a92..915f99dc 100644
--- a/options.html
+++ b/options.html
@@ -12,12 +12,12 @@
     <div>
       <h2 style="padding: 5px 16px 5px 16px; font-weight: normal;display: inline-block;text-align:left;">Conflict
         Highlighting</h2>
-      <button id="togglecourseConflictHighlight" class="matbut"
+      <button id="togglecourseConflictHighlight" class="material-button"
         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;">Scroll To
         Load More Courses</h2>
-      <button id="toggleloadAll" class="matbut"
+      <button id="toggleloadAll" class="material-button"
         style="float: right;display:inline-block;font-size:medium;background:#F44336;">Turn
         Off</button>
     </div>
@@ -28,4 +28,4 @@
     <script src="js/options.js"></script>
 </body>
 
-</html>
\ No newline at end of file
+</html>