feat: theme toasts and move elements styling to their js

frontend/src/js/_tooltip.js

@@ -1,21 +1,11 @@
-import { delegate } from 'tippy.js';
+import {delegate} from 'tippy.js';
 import 'tippy.js/dist/tippy.css';
-import 'tippy.js/themes/light-border.css';
+import '../styles/_toasts.scss'
-
 
 function initiateTooltips() {
-    const currentDataTheme = document.documentElement.getAttribute('data-theme') || '';
-    let theme;
-
-    if (currentDataTheme.endsWith('_dark')) {
-        theme = 'light-border';
-    } else if (currentDataTheme.endsWith('_light')) {
-        theme = 'dark';
-    }
-
     delegate(document.body, {
         target: '[data-tippy-content]',
-        theme: theme,
+        theme: "wygiwyh",
         zIndex: 1089,
         content(reference) {
             return reference.getAttribute('data-tippy-content');

frontend/src/js/datepicker.js

@@ -1,5 +1,6 @@
 import AirDatepicker from 'air-datepicker';
 import {createPopper} from '@popperjs/core';
+import '../styles/_datepicker.scss'
 
 // --- Static Locale Imports ---
 // We import all locales statically to ensure Vite transforms them correctly.

frontend/src/js/select.js

@@ -1,7 +1,6 @@
-// import 'tom-select/dist/css/tom-select.default.min.css';
-
 import TomSelect from "tom-select";
 import * as Popper from "@popperjs/core";
+import '../styles/_tom-select.scss'
 
 
 window.TomSelect = function createDynamicTomSelect(element) {

frontend/src/styles/_toasts.scss

@@ -0,0 +1,112 @@
+.tippy-box[data-theme~="wygiwyh"] {
+  background-color: var(--color-secondary);
+  background-clip: padding-box;
+  border: 1px solid color-mix(in oklab, var(--color-secondary-content) 15%, transparent);
+  color: var(--color-secondary-content);
+  box-shadow: 0 4px 14px -2px color-mix(in oklab, var(--color-secondary-content) 4%, transparent);
+}
+
+.tippy-box[data-theme~="wygiwyh"] > .tippy-backdrop {
+  background-color: var(--color-secondary);
+}
+
+.tippy-box[data-theme~="wygiwyh"] > .tippy-arrow:after,
+.tippy-box[data-theme~="wygiwyh"] > .tippy-svg-arrow:after {
+  content: "";
+  position: absolute;
+  z-index: -1;
+}
+
+.tippy-box[data-theme~="wygiwyh"] > .tippy-arrow:after {
+  border-color: transparent;
+  border-style: solid;
+}
+
+.tippy-box[data-theme~="wygiwyh"][data-placement^="top"] > .tippy-arrow:before {
+  border-top-color: var(--color-secondary);
+}
+
+.tippy-box[data-theme~="wygiwyh"][data-placement^="top"] > .tippy-arrow:after {
+  border-top-color: color-mix(in oklab, var(--color-secondary-content) 20%, transparent);
+  border-width: 7px 7px 0;
+  top: 17px;
+  left: 1px;
+}
+
+.tippy-box[data-theme~="wygiwyh"][data-placement^="top"] > .tippy-svg-arrow > svg {
+  top: 16px;
+}
+
+.tippy-box[data-theme~="wygiwyh"][data-placement^="top"] > .tippy-svg-arrow:after {
+  top: 17px;
+}
+
+.tippy-box[data-theme~="wygiwyh"][data-placement^="bottom"] > .tippy-arrow:before {
+  border-bottom-color: var(--color-secondary);
+  bottom: 16px;
+}
+
+.tippy-box[data-theme~="wygiwyh"][data-placement^="bottom"] > .tippy-arrow:after {
+  border-bottom-color: color-mix(in oklab, var(--color-secondary-content) 20%, transparent);
+  border-width: 0 7px 7px;
+  bottom: 17px;
+  left: 1px;
+}
+
+.tippy-box[data-theme~="wygiwyh"][data-placement^="bottom"] > .tippy-svg-arrow > svg {
+  bottom: 16px;
+}
+
+.tippy-box[data-theme~="wygiwyh"][data-placement^="bottom"] > .tippy-svg-arrow:after {
+  bottom: 17px;
+}
+
+.tippy-box[data-theme~="wygiwyh"][data-placement^="left"] > .tippy-arrow:before {
+  border-left-color: var(--color-secondary);
+}
+
+.tippy-box[data-theme~="wygiwyh"][data-placement^="left"] > .tippy-arrow:after {
+  border-left-color: color-mix(in oklab, var(--color-secondary-content) 20%, transparent);
+  border-width: 7px 0 7px 7px;
+  left: 17px;
+  top: 1px;
+}
+
+.tippy-box[data-theme~="wygiwyh"][data-placement^="left"] > .tippy-svg-arrow > svg {
+  left: 11px;
+}
+
+.tippy-box[data-theme~="wygiwyh"][data-placement^="left"] > .tippy-svg-arrow:after {
+  left: 12px;
+}
+
+.tippy-box[data-theme~="wygiwyh"][data-placement^="right"] > .tippy-arrow:before {
+  border-right-color: var(--color-secondary);
+  right: 16px;
+}
+
+.tippy-box[data-theme~="wygiwyh"][data-placement^="right"] > .tippy-arrow:after {
+  border-width: 7px 7px 7px 0;
+  right: 17px;
+  top: 1px;
+  border-right-color: color-mix(in oklab, var(--color-secondary-content) 20%, transparent);
+}
+
+.tippy-box[data-theme~="wygiwyh"][data-placement^="right"] > .tippy-svg-arrow > svg {
+  right: 11px;
+}
+
+.tippy-box[data-theme~="wygiwyh"][data-placement^="right"] > .tippy-svg-arrow:after {
+  right: 12px;
+}
+
+.tippy-box[data-theme~="wygiwyh"] > .tippy-svg-arrow {
+  fill: var(--color-secondary);
+}
+
+.tippy-box[data-theme~="wygiwyh"] > .tippy-svg-arrow:after {
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMCA2czEuNzk2LS4wMTMgNC42Ny0zLjYxNUM1Ljg1MS45IDYuOTMuMDA2IDggMGMxLjA3LS4wMDYgMi4xNDguODg3IDMuMzQzIDIuMzg1QzE0LjIzMyA2LjAwNSAxNiA2IDE2IDZIMHoiIGZpbGw9InJnYmEoMCwgOCwgMTYsIDAuMikiLz48L3N2Zz4=);
+  background-size: 16px 6px;
+  width: 16px;
+  height: 6px;
+}

frontend/src/styles/style.scss

@@ -1,8 +1,6 @@
 @use "variables";
 @use "font-awesome";
 @use "bootstrap";
-@use "datepicker";
-@use "tom-select";
 @use "animations";
 
 .sticky-sidebar {