From caba034bf2ee7fefacf944cb5b1218a098874f14 Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Tue, 26 Mar 2024 11:19:55 +0700
Subject: [PATCH] timeline styling updates

---
 app/pages/PageEnigma/comps/Timeline/Audio.tsx     |  4 ++--
 app/pages/PageEnigma/comps/Timeline/Character.tsx | 10 ++++++----
 app/pages/PageEnigma/comps/Timeline/Timeline.tsx  |  7 +++----
 app/pages/PageEnigma/comps/Timeline/TrackClip.tsx |  2 +-
 app/styles/base.css                               |  7 +++++++
 5 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/app/pages/PageEnigma/comps/Timeline/Audio.tsx b/app/pages/PageEnigma/comps/Timeline/Audio.tsx
index 7ebc66c2c5..20a53318c1 100644
--- a/app/pages/PageEnigma/comps/Timeline/Audio.tsx
+++ b/app/pages/PageEnigma/comps/Timeline/Audio.tsx
@@ -13,7 +13,7 @@ export const Audio = () => {
       className="block rounded-lg bg-audio-groupBg pb-5 pl-2 pr-4"
       style={{ width: fullWidth + 90 }}
     >
-      <div className="mb-5 pt-2 text-xs font-medium text-white">
+      <div className="prevent-select mb-5 pt-2 text-xs font-medium text-white">
         Global Audio
       </div>
       <div className="flex flex-col gap-2">
@@ -33,7 +33,7 @@ export const Audio = () => {
                 clip={clip}
               />
             ))}
-            <div className="absolute ps-2 pt-1 text-xs font-medium text-white">
+            <div className="prevent-select absolute ps-2 pt-1 text-xs font-medium text-white">
               Global Audio Track
             </div>
           </div>
diff --git a/app/pages/PageEnigma/comps/Timeline/Character.tsx b/app/pages/PageEnigma/comps/Timeline/Character.tsx
index 1d011a5a8c..88f6fde161 100644
--- a/app/pages/PageEnigma/comps/Timeline/Character.tsx
+++ b/app/pages/PageEnigma/comps/Timeline/Character.tsx
@@ -21,7 +21,9 @@ export const Character = ({ characterId }: Props) => {
       className="block rounded-lg bg-character-groupBg pb-5 pl-2 pr-4"
       style={{ width: fullWidth + 90 }}
     >
-      <div className="mb-5 pt-2 text-xs font-medium text-white">Character</div>
+      <div className="prevent-select mb-5 pt-2 text-xs font-medium text-white">
+        Character
+      </div>
       <div className="flex flex-col gap-5">
         <div className="pl-16">
           <div className="relative mt-4 block h-9 rounded-lg bg-character-unselected">
@@ -46,7 +48,7 @@ export const Character = ({ characterId }: Props) => {
                 clip={clip}
               />
             ))}
-            <div className="absolute ps-2 pt-1 text-xs font-medium text-white">
+            <div className="prevent-select absolute ps-2 pt-1 text-xs font-medium text-white">
               Animation
             </div>
           </div>
@@ -74,7 +76,7 @@ export const Character = ({ characterId }: Props) => {
                 clip={clip}
               />
             ))}
-            <div className="absolute ps-2 pt-1 text-xs font-medium text-white">
+            <div className="prevent-select absolute ps-2 pt-1 text-xs font-medium text-white">
               Character Position/Rotation
             </div>
           </div>
@@ -102,7 +104,7 @@ export const Character = ({ characterId }: Props) => {
                 clip={clip}
               />
             ))}
-            <div className="absolute ps-2 pt-1 text-xs font-medium text-white">
+            <div className="prevent-select prevent-select absolute ps-2 pt-1 text-xs font-medium text-white">
               Lipsync Audio Track
             </div>
             <button
diff --git a/app/pages/PageEnigma/comps/Timeline/Timeline.tsx b/app/pages/PageEnigma/comps/Timeline/Timeline.tsx
index a421190b95..56554a6ca6 100644
--- a/app/pages/PageEnigma/comps/Timeline/Timeline.tsx
+++ b/app/pages/PageEnigma/comps/Timeline/Timeline.tsx
@@ -42,13 +42,13 @@ export const Timeline = (
   return (
     <>
       <LowerPanel>
-        <div className="mt-4 flex h-3 text-xs text-white opacity-75">
+        <div className="prevent-select mt-4 flex h-3 border-t border-t-ui-panel-border text-xs text-white opacity-75">
           {Array(length)
             .fill(0)
             .map((_, index) => (
               <Fragment key={index}>
                 <div
-                  className="absolute ps-1"
+                  className="absolute ps-1 pt-1"
                   style={{ left: index * sectionWidth + 92 }}
                 >
                   00:{index < 10 ? "0" + index.toString() : index.toString()}
@@ -99,8 +99,7 @@ export const Timeline = (
         >
           <FontAwesomeIcon
             icon={faSortDown}
-            style={{ top: 0, left: -2 }}
-            className="text-brand-primary"
+            className="absolute ml-[-5px] mt-[-10px] h-5 text-brand-primary"
           />
           <div
             className="absolute block bg-brand-primary"
diff --git a/app/pages/PageEnigma/comps/Timeline/TrackClip.tsx b/app/pages/PageEnigma/comps/Timeline/TrackClip.tsx
index dd9cbd9d30..a80fa5183c 100644
--- a/app/pages/PageEnigma/comps/Timeline/TrackClip.tsx
+++ b/app/pages/PageEnigma/comps/Timeline/TrackClip.tsx
@@ -32,7 +32,7 @@ export const TrackClip = ({ clip, min, max, style, updateClip }: Props) => {
           ...classes,
           "px-[6px] py-[3px]",
           "rounded",
-          "text-xs font-medium text-white",
+          "prevent-select text-xs font-medium text-white",
         ].join(" ")}
         style={{ top: -28, left: offset * 4 * scale + 2 }}
       >
diff --git a/app/styles/base.css b/app/styles/base.css
index d1f5b477f9..deefbac978 100644
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -27,3 +27,10 @@ body {
 
   width: 100vw;
 }
+
+.prevent-select {
+  -webkit-user-select: none; /* Safari */
+  -ms-user-select: none; /* IE 10 and IE 11 */
+  user-select: none; /* Standard syntax */
+  pointer-events: none;
+}