add extra icons + clean up styling

public/fonts/IconFamily.css

@@ -0,0 +1,6 @@
+@font-face {
+  font-family: 'IconFamily';
+  src: local('IconFamily') local('Icon Family') url('/fonts/IconFamily.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+}

public/manifest.json

@@ -35,6 +35,10 @@
       "resources": ["icons/*"],
       "matches": ["*://*/*"]
     },
+    {
+      "resources": ["fonts/*"],
+      "matches": ["*://*/*"]
+    },
     {
       "resources": ["images/*"],
       "matches": ["*://*/*"]

src/SEQTA.js

@@ -770,6 +770,21 @@ function RunFunctionOnTrue(storedSetting) {
     document.head.appendChild(fileref);
     document.getElementsByTagName("html")[0].appendChild(fileref);
 
+    // Injecting custom icons font file
+    const fontURL = chrome.runtime.getURL("fonts/IconFamily.woff");
+
+    const style = document.createElement("style");
+    style.setAttribute("type", "text/css");
+    style.innerHTML = `
+    @font-face {
+      font-family: 'IconFamily';
+      src: url('${fontURL}') format('woff');
+      font-weight: normal;
+      font-style: normal;
+    }`;
+    document.head.appendChild(style);
+
+
     document.documentElement.style.setProperty("--better-sub", "#161616");
     document.documentElement.style.setProperty(
       "--better-alert-highlight",
@@ -2559,51 +2574,6 @@ function CheckSpecialDay(date1, date2) {
   }
 }
 
-function CreateDateCheckedDiv(text, date) {
-  let upcomingitemcontainer = document.querySelector("#upcoming-items");
-  let type;
-  let class_;
-  let id;
-  let innerText;
-  let container = CreateElement(
-    (type = "div"),
-    (class_ = "upcoming-date-container"),
-  );
-  let datecontainer = CreateElement(
-    (type = "div"),
-    (class_ = "upcoming-date-title"),
-  );
-  let titletext = CreateElement(
-    (type = "h5"),
-    (class_ = "upcoming-special-day"),
-    (id = undefined),
-    (innerText = text),
-  );
-  let titledate = CreateElement(
-    // eslint-disable-next-line no-unused-vars
-    type = "h5",
-    // eslint-disable-next-line no-unused-vars
-    class_ = undefined,
-    // eslint-disable-next-line no-unused-vars
-    id = undefined,
-    // eslint-disable-next-line no-unused-vars
-    innerText = date,
-  );
-
-  let textcontainer = CreateElement("div", "upcoming-blank");
-  let textblank = CreateElement("p");
-  textblank.innerText = "No assessments due";
-
-  textcontainer.append(textblank);
-
-  datecontainer.append(titletext);
-  datecontainer.append(titledate);
-
-  container.append(datecontainer);
-  container.append(textcontainer);
-  upcomingitemcontainer.append(container);
-}
-
 function CreateSubjectFilter(subjectcode, itemcolour, checked) {
   let label = CreateElement("label", "upcoming-checkbox-container");
   label.innerText = subjectcode;
@@ -2656,8 +2626,6 @@ function CreateUpcomingSection(assessments) {
   let upcomingitemcontainer = document.querySelector("#upcoming-items");
   let overdueDates = [];
   let upcomingDates = {};
-  let TodayinUpcoming = false;
-  let TomorrowinUpcoming = false;
 
   // date = '2022/3/20';
   // var Today = new Date(date);
@@ -2678,23 +2646,9 @@ function CreateUpcomingSection(assessments) {
       }
     }
   }
-  var options = { weekday: "long", month: "long", day: "numeric" };
-  if (!TodayinUpcoming) {
-    let text = Today.toLocaleDateString("en-AU", options);
-    CreateDateCheckedDiv("Today", text);
-  }
 
-  function addTomorrowinUpcoming() {
+  var TomorrowDate = new Date();
-    // var TomorrowDate = new Date(date);
+  TomorrowDate.setDate(TomorrowDate.getDate() + 1);
-    var TomorrowDate = new Date();
-    TomorrowDate.setDate(TomorrowDate.getDate() + 1);
-    let textDate = TomorrowDate.toLocaleDateString("en-AU", options);
-    CreateDateCheckedDiv("Tomorrow", textDate);
-  }
-
-  if (!TomorrowinUpcoming && !TodayinUpcoming) {
-    addTomorrowinUpcoming();
-  }
 
   GetLessonColours().then((colours) => {
     let subjects = colours;
@@ -2776,9 +2730,6 @@ function CreateUpcomingSection(assessments) {
         upcomingitemcontainer.append(assessmentDate);
       }
 
-      if (specialcase === "Today" && !TomorrowinUpcoming) {
-        addTomorrowinUpcoming();
-      }
     }
     chrome.storage.local.get(null, function (result) {
       FilterUpcomingAssessments(result.subjectfilters);

src/inject/injected.css

@@ -364,6 +364,49 @@ td.colourBar {
   padding-left: 10px;
   padding-right: 10px;
 }
+
+#toolbar span:has(.search) {
+  position: relative;  /* Makes sure the pseudo-element is positioned relative to this element */
+}
+
+#toolbar .search {
+  padding-left: 30px;  /* Provides space for the icon */
+}
+
+#toolbar span:has(.search)::before {
+  content: "\eca5";  /* Unicode for the search icon */
+  position: absolute;
+  left: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: currentColor;
+  font-size: 16px;
+  font-family: "IconFamily";
+  pointer-events: none;
+}
+
+#container #content .search {
+  width: 100%;
+  border-radius: 16px;
+}
+
+#container #content .uiButton {
+  border-radius: 16px;
+}
+
+#toolbar button.toggled, #toolbar button.depressed {
+  background: var(--better-main);
+}
+
+.buttonChecklist {
+  border-radius: 16px;
+  margin-top: 4px;
+}
+
+#toolbar > span:has(input) {
+  flex: 1 1 0%;
+}
+
 #main > .reports > .item > .report {
   filter: brightness(1) !important;
   border-radius: 16px !important;
@@ -492,6 +535,12 @@ div > ol:has(.uiFileHandlerWrapper) {
 .Module__wrapper___2sbOo {
   background: var(--background-primary) !important;
   color: var(--text-primary) !important;
+  box-shadow: none;
+}
+
+.course .composer {
+  background: var(--background-primary) !important;
+  overflow: hidden;
 }
 
 .composer
@@ -501,7 +550,6 @@ div > ol:has(.uiFileHandlerWrapper) {
   > .Canvas__canvas___OBdCZ {
   background-color: unset !important;
   background-image: unset !important;
-  background: var(--auto-background) !important;
   color: white !important;
 }
 
@@ -1051,9 +1099,30 @@ div > ol:has(.uiFileHandlerWrapper) {
   background: var(--background-primary);
 }
 
+.Input__Input___3RSTI::before {
+  content: "\eca5";  /* Unicode for the search icon */
+  transform: translateY(-50%);
+  color: currentColor;
+  font-size: 16px;
+  margin-left: 8px;
+  margin-top: auto;
+  font-family: "IconFamily";
+  pointer-events: none;
+}
+
 .Input__Input___3RSTI > input {
+  outline: none !important;
+  border: none !important;
   color: var(--text-primary);
-  background: var(--better-main);
+  width: 100%;
+}
+
+.Input__Input___3RSTI {
+  transition: background-color 0.5s,border-color 0.5s;
+  background-color: var(--auto-background);
+  position: relative;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.5rem;
 }
 
 .Avatar__Avatar___gE5kx.Avatar__staff___4gVLs {
@@ -1683,6 +1752,47 @@ body {
   -moz-animation: spin 3s linear infinite;
 }
 
+.LabelList__name___-CHgq {
+  display: flex;
+  align-items: center;
+}
+
+[data-label="inbox"] > .LabelList__name___-CHgq::before {
+  content: "\eb70";  /* Unicode for the search icon */
+  color: currentColor;
+  font-size: 16px;
+  margin-right: 8px; /* Adjusted to margin-right for the icon to be on the left */
+  font-family: "IconFamily";
+  pointer-events: none;
+}
+
+[data-label="outbox"] > .LabelList__name___-CHgq::before {
+  content: "\eca6";  /* Unicode for the search icon */
+  color: currentColor;
+  font-size: 16px;
+  margin-right: 8px; /* Adjusted to margin-right for the icon to be on the left */
+  font-family: "IconFamily";
+  pointer-events: none;
+}
+
+[data-label="starred"] > .LabelList__name___-CHgq::before {
+  content: "\ece8";
+  color: currentColor;
+  font-size: 16px;
+  margin-right: 8px; /* Adjusted to margin-right for the icon to be on the left */
+  font-family: "IconFamily";
+  pointer-events: none;
+}
+
+[data-label="trash"] > .LabelList__name___-CHgq::before {
+  content: "\ed2c";  /* Unicode for the search icon */
+  color: currentColor;
+  font-size: 16px;
+  margin-right: 8px; /* Adjusted to margin-right for the icon to be on the left */
+  font-family: "IconFamily";
+  pointer-events: none;
+}
+
 .outer-circle {
   margin: -108px;
   animation-direction: alternate-reverse;
@@ -1809,7 +1919,6 @@ body {
 }
 
 .upcoming-items {
-  background-color: var(--better-sub);
   width: 100%;
   max-height: 55em;
   overflow-y: auto;
@@ -2015,10 +2124,6 @@ body {
   justify-content: space-between;
 }
 
-.Input__Input___3RSTI {
-  width: 100%;
-}
-
 .messages-filterbutton {
   height: 34px;
   width: 25%;
@@ -2129,17 +2234,6 @@ body {
   margin: 0;
 }
 
-.upcoming-container {
-  width: 94%;
-  margin: 50px auto;
-  max-height: 60em;
-  background-color: var(--better-main);
-  display: flex;
-  flex-direction: column;
-  -webkit-box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
-  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
-}
-
 .upcoming-items {
   background-color: var(--background-primary);
   transition: 200ms;
@@ -2154,12 +2248,6 @@ body {
   border-bottom-right-radius: 15px;
 }
 
-.upcoming-container h2 {
-  margin: 20px;
-  font-size: 20px;
-  font-weight: 400;
-}
-
 .upcoming-assessment-title {
   color: var(--text-primary);
   transition: 200ms;