changed styles to tailwind

frontend/app/components/Session_/Player/Controls/EventsList.tsx

@@ -4,9 +4,7 @@ import {
   MobilePlayerContext,
 } from 'Components/Session/playerContext';
 import { observer } from 'mobx-react-lite';
-import stl from './timeline.module.css';
 import { getTimelinePosition } from './getTimelinePosition';
-import classNames from 'classnames';
 import { useStore } from '@/mstore';
 
 function EventsList() {
@@ -41,9 +39,7 @@ function EventsList() {
         <div
           /* @ts-ignore TODO */
           key={`${e.key}_${e.time}`}
-          className={classNames(
-            `absolute w-[2px] h-[10px] z-[3] pointer-events-none ${e.isHighlighted ? 'bg-[#f0a930]' : 'bg-[#394eff]'}`,
-          )}
+          className={`absolute w-[2px] h-[10px] z-[3] pointer-events-none ${e.isHighlighted ? 'bg-[#f0a930]' : 'bg-[#394eff]'}`}
           style={{ left: `${getTimelinePosition(e.time, scale)}%` }}
         />
       ))}
@@ -63,7 +59,7 @@ function MobileEventsList() {
         <div
           /* @ts-ignore TODO */
           key={`${e.key}_${e.time}`}
-          className={stl.event}
+          className={`absolute w-[2px] h-[10px] z-[3] pointer-events-none ${e.isHighlighted ? 'bg-[#f0a930]' : 'bg-[#394eff]'}`}
           style={{ left: `${getTimelinePosition(e.time, scale)}%` }}
         />
       ))}

frontend/app/components/Session_/Player/Controls/timeline.module.css

@@ -49,28 +49,6 @@
   z-index: 2;
 }
 
-
-.event {
-  position: absolute;
-  width: 2px;
-  height: 10px;
-  background: $main;
-  z-index: 3;
-  pointer-events: none;
-  /* top: 0; */
-  /* bottom: 0; */
- /*  &:hover {
-    width: 10px;
-    height: 10px;
-    margin-left: -6px;
-    z-index: 1;
-  };*/
-}
-
-.event__highlighted {
-  background: #f0a930;
-}
-
 /* .event.click, .event.input {
   background: $green;
 }