improve styling, fix dark mode bugs

README.md

@@ -1,7 +1,7 @@
 ![Logo](https://raw.githubusercontent.com/SethBurkart123/BetterThanBetterSeqta/c96edd5956fc11571408310aea98cf7222d6876f/src/icons/betterseqta-light-full.png#gh-dark-mode-only)
 ![Logo](https://raw.githubusercontent.com/SethBurkart123/BetterThanBetterSeqta/c96edd5956fc11571408310aea98cf7222d6876f/src/icons/betterseqta-dark-full.png#gh-light-mode-only)
 
-# Even BetterSEQTA
+# BetterSEQTA+
 
 Forking the BetterSEQTA project to add extra functionality
 Looking for contributors!

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "evenbetterseqta",
+  "name": "betterseqtaplus",
   "version": "1.0.0",
   "type": "module",
   "description": "![Logo](https://raw.githubusercontent.com/SethBurkart123/BetterThanBetterSeqta/c96edd5956fc11571408310aea98cf7222d6876f/src/icons/betterseqta-light-full.png#gh-dark-mode-only) ![Logo](https://raw.githubusercontent.com/SethBurkart123/BetterThanBetterSeqta/c96edd5956fc11571408310aea98cf7222d6876f/src/icons/betterseqta-dark-full.png#gh-light-mode-only)",

public/manifest.json

@@ -1,6 +1,6 @@
 {
   "manifest_version": 3,
-  "name": "Even BetterSEQTA",
+  "name": "BetterSEQTA+",
   "version": "3.0.0",
   "description": "An extension that makes the SEQTA experience customizable and unique to you!",
   "icons": {

public/popup/info.html

@@ -50,7 +50,7 @@
                 Created and developed and maintained by CK and AH
               </p>
               <p class="item subitem">
-                EvenBetterSEQTA is a revived or BetterSEQTA which is no longer
+                BetterSEQTA+ is a revived or BetterSEQTA which is no longer
                 maintained.
               </p>
             </div>
@@ -330,7 +330,7 @@
             <div class="text-container">
               <h1 class="addonitem">Animated Background</h1>
               <p class="item subitem">
-                Adds an animated background to EvenBetterSEQTA.
+                Adds an animated background to BetterSEQTA+.
               </p>
             </div>
             <div class="onoffswitch">
@@ -374,7 +374,7 @@
 
           <div class="item-container" style="height: 2em; margin-top: 0px">
             <div class="text-container">
-              <h1 class="addonitem">EvenBetterSEQTA</h1>
+              <h1 class="addonitem">BetterSEQTA+</h1>
             </div>
             <div class="onoffswitch" style="margin-bottom: 0px">
               <input

src/inject/injected.css

@@ -249,8 +249,6 @@ ol:has(.MessageList__avatar___2wxyb svg) {
     150,
     150
   ) !important; /* color of the scroll thumb */
-  border-radius: 20px; /* roundness of the scroll thumb */
-  border: 3px solid orange; /* creates padding around scroll thumb */
 }
 
 .content .footer {
@@ -327,10 +325,6 @@ ol:has(.MessageList__avatar___2wxyb svg) {
   box-shadow: 0px 5px 16px 6px rgba(0, 0, 0, 0) !important;
 }
 
-.menuShown :first-child:has(.header h1) {
-  border-radius: 16px !important;
-}
-
 .uiSlidePane {
   background-color: rgba(0, 0, 0, 0);
   transition-duration: 500ms !important;
@@ -349,9 +343,6 @@ ol:has(.MessageList__avatar___2wxyb svg) {
 #main .timetablepage {
   padding-top: 10px;
 }
-.header {
-  background: var(--arc-palette-foregroundPrimary) !important;
-}
 
 .document {
   border-radius: 32px !important;
@@ -387,8 +378,19 @@ ol > [data-message] {
 ol > [data-label] {
   margin-left: 4px;
   margin-bottom: 4px;
-  border-top-left-radius: 8px;
+}
-  border-bottom-left-radius: 8px;
+
+@media (min-width: 1000px) {
+  ol > [data-label] {
+    border-top-left-radius: 8px;
+    border-bottom-left-radius: 8px;
+  }
+}
+
+.Viewer__newMessage___3ToUb {
+  border-radius: 0.5rem !important;
+  font-size: 0.8rem !important;
+  background-color: var(--background-primary) !important;
 }
 
 .MessageList__sender___32riy :last-child {
@@ -1032,10 +1034,6 @@ div > ol:has(.uiFileHandlerWrapper) {
   color: var(--text-primary);
 }
 
-.LabelList__LabelList___2RJFf > li.LabelList__selected___3Egk7 {
-  color: var(--text-primary);
-}
-
 .Viewer__sidebar___1Btu4 > header {
   background: unset;
 }
@@ -1060,6 +1058,7 @@ div > ol:has(.uiFileHandlerWrapper) {
 
 .LabelList__LabelList___2RJFf > li.LabelList__selected___3Egk7 {
   background: var(--background-primary);
+  color: var(--text-primary);
 }
 
 .Viewer__Viewer___32BH- {
@@ -1235,7 +1234,7 @@ ul {
 
 .uiFileHandler .uiButton {
   border-radius: 2rem !important;
-  color: lightgray !important;
+  color: var(--text-primary) !important;
   margin-top: 0.25rem !important;
 }
 
@@ -1277,8 +1276,15 @@ blurred {
   cursor: pointer;
 }
 
+.uiSlidePane > .pane > .header button {
+  color: var(--text-primary) !important;
+}
+
+.uiSlidePane > .pane > .header > h1 {
+  color: var(--text-primary) !important;
+}
+
 .uiSlidePane > .pane > .header {
-  color: var(--text-color);
   background-color: var(--better-main);
 }
 

src/seqta/icons/assessmentsIcon.js

@@ -1,3 +1,5 @@
+export default String.raw`
 <svg style="width:24px;height:24px;border-radius:0;" viewBox="0 0 24 24">
   <path fill="currentColor" d="M6 20H13V22H6C4.89 22 4 21.11 4 20V4C4 2.9 4.89 2 6 2H18C19.11 2 20 2.9 20 4V12.54L18.5 11.72L18 12V4H13V12L10.5 9.75L8 12V4H6V20M24 17L18.5 14L13 17L18.5 20L24 17M15 19.09V21.09L18.5 23L22 21.09V19.09L18.5 21L15 19.09Z"></path>
-</svg>
+</svg>
+`;

src/seqta/icons/coursesIcon.js

@@ -1,3 +1,5 @@
+export default String.raw`
 <svg style="width:24px;height:24px;border-radius:0;" viewBox="0 0 24 24">
   <path fill="currentColor" d="M19 1L14 6V17L19 12.5V1M21 5V18.5C19.9 18.15 18.7 18 17.5 18C15.8 18 13.35 18.65 12 19.5V6C10.55 4.9 8.45 4.5 6.5 4.5C4.55 4.5 2.45 4.9 1 6V20.65C1 20.9 1.25 21.15 1.5 21.15C1.6 21.15 1.65 21.1 1.75 21.1C3.1 20.45 5.05 20 6.5 20C8.45 20 10.55 20.4 12 21.5C13.35 20.65 15.8 20 17.5 20C19.15 20 20.85 20.3 22.25 21.05C22.35 21.1 22.4 21.1 22.5 21.1C22.75 21.1 23 20.85 23 20.6V6C22.4 5.55 21.75 5.25 21 5M10 18.41C8.75 18.09 7.5 18 6.5 18C5.44 18 4.18 18.19 3 18.5V7.13C3.91 6.73 5.14 6.5 6.5 6.5C7.86 6.5 9.09 6.73 10 7.13V18.41Z"></path>
-</svg>
+</svg>
+`;

src/seqta/utils/stringToHTML.js

@@ -1,6 +1,6 @@
 import DOMPurify from "dompurify";
 
-export function stringToHTML(str, styles = false) {
+export default function stringToHTML(str, styles = false) {
   var parser = new DOMParser();
   str = DOMPurify.sanitize(str, { ADD_ATTR: ["onclick"] });
   var doc = parser.parseFromString(str, "text/html");