changed arrow color to match timetable

src/SEQTA.ts

@@ -733,6 +733,22 @@ export async function ObserveMenuItemPosition() {
                   node,
                   MenuitemSVGKey[node.dataset.key as keyof typeof MenuitemSVGKey],
                 )
+              } else if (node?.firstChild?.nodeName === 'LABEL') {
+                // Assuming `node` is an <li> element containing a <label>
+                const label = node.firstChild as HTMLElement;
+                
+                // The magical step: We find the last child. If it's a text node, embrace it with <span>
+                let textNode = label.lastChild as HTMLElement;
+                
+                // A quick check to ensure it's a text node and not already ensconced in a <span>
+                if (textNode.nodeType === 3 && textNode.parentNode && textNode.parentNode.nodeName !== 'SPAN') {
+                  // The text node is indeed bare, and not in a <span>. Time to act!
+                  const span = document.createElement('span'); // The creation of the <span>
+                  span.textContent = textNode.nodeValue; // Transferring the text
+                  
+                  // Replacing the text node with our newly minted <span> full of text
+                  label.replaceChild(span, textNode);
+                }
               }
               ChangeMenuItemPositions(menuorder)
             }
@@ -1152,9 +1168,7 @@ function ReplaceMenuSVG(element: HTMLElement, svg: string) {
   let item = element.firstChild as HTMLElement
   item!.firstChild!.remove()
 
-  if (element.dataset.key == 'messages') {
+  item.innerHTML = `<span>${item.innerHTML}</span>`
-    (element!.firstChild! as HTMLElement).innerText! = 'Direct Messages'
-  }
 
   let newsvg = stringToHTML(svg).firstChild
   item.insertBefore((newsvg as Node), item.firstChild)

src/css/injected.scss

@@ -318,16 +318,15 @@ ol:has(.MessageList__avatar___2wxyb svg) {
   border: none !important;
   border-radius: 16px !important;
 }
-.actions .uiButton {
-  color: var(--text-primary) !important;
-}
 .singleSelect {
   border-radius: 16px !important;
   padding: 4px !important;
   padding-left: 12px !important;
   box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.2) !important;
 }
-
+.quickbar[data-yiq='light'] .actions {
+  color: white !important;
+}
 [style="--better-sub: #161616; --better-alert-highlight: #c61851; --background-primary: #ffffff; --background-secondary: #e5e7eb; --text-primary: black; --text-color: white; --better-main: #1a1a1a; --better-light: #333333;"] .menuShown > :last-child
 {
   top: 18% !important;
@@ -356,6 +355,7 @@ ol:has(.MessageList__avatar___2wxyb svg) {
 }
 #main .timetablepage .quickbar {
   border: none;
+  box-shadow: 0 4px 8px rgba(0,0,0,0.5);
   border-radius: 1rem;
 }
 .quickbar .actions {
@@ -366,14 +366,36 @@ ol:has(.MessageList__avatar___2wxyb svg) {
   border-top-left-radius: 100%;
   border-bottom-right-radius: 1rem !important;
 }
+.quickbar::before {
+  background-color: inherit;
+  clip-path: polygon(50% 40%, 0 100%, 100% 100%);
+  border-bottom-color: transparent !important;
+}
 #main > .timetablepage > .quickbar.below::before {
-  border-bottom-color: var(--background-primary);
+  border-bottom-color: transparent;
   top: -1.75rem;
+  background-color: inherit;
+  clip-path: polygon(50% 40%, 0 100%, 100% 100%);
+  border-bottom-color: transparent !important;
+}
+#main > .timetablepage > .quickbar.above::after {
+  content: "";
+  position: absolute;
+  bottom: -1.75rem;
+  z-index: 2;
+  left: 50%;
+  margin: 0 0 0 -12px;
+  background-color: rgba(255, 255, 255, 0.2);
+  clip-path: polygon(50% 40%, 0 0, 100% 0);
+  border: 12px solid rgba(255,255,255,0);
+  border-top-color: transparent;
 }
 #main > .timetablepage > .quickbar.above::before {
-  border-bottom-color: var(--background-primary);
+  border-bottom-color: transparent;
   bottom: -1.75rem !important;
-  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
+  background-color: inherit;
+  clip-path: polygon(50% 40%, 0 0, 100% 0);
+  border-top-color: transparent !important;
 }
 #main .timetablepage .actions a,
 #main .timetablepage .actions button {
@@ -2221,6 +2243,23 @@ li.MessageList__unread___3imtO {
 .calendarEventEditor > .tabset > .item {
   border-radius: 0 !important;
 }
+
+.calendar {
+  background: var(--better-main) !important;
+  color: var(--text-color) !important;
+  border-radius: 1rem !important;
+  margin-top: 4px;
+
+  table {
+    background: transparent !important;
+  }
+
+  .uiButton {
+    background: rgba(0, 0, 0, 0.5) !important;
+    color: var(--text-primary) !important;
+  }
+}
+
 .MessageList__MessageList___3DxoC > header {
   display: flex;
   justify-content: space-between;