timeline stylings

app/modules/LowerPanel/LowerPanel.tsx

@@ -14,7 +14,7 @@ export const LowerPanel = ({ children }: LowerPanelPropsI) => {
     <div
       className={[
         "absolute bottom-0",
-        "h-[260px] w-screen overflow-auto",
+        "h-[280px] w-screen overflow-auto",
         "border-t border-ui-panel-border",
         "bg-ui-panel",
       ].join(" ")}

app/pages/PageEnigma/PageEnigma.tsx

@@ -18,11 +18,10 @@ import { EngineProvider } from "~/contexts/EngineProvider";
 
 export const PageEnigma = () => {
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
- 
+
   const [timelineHeight, setTimelineHeight] = useState(0);
   const timelineRef = useRef<HTMLDivElement | null>(null);
 
-
   const updateTimelineHeight = useCallback(() => {
     if (timelineRef.current) {
       setTimelineHeight(timelineRef.current.offsetHeight);
@@ -55,8 +54,7 @@ export const PageEnigma = () => {
           <div
             id="CanvasUiWrapper"
             className="flex"
-            // style={{ height: `calc(100% - ${timelineHeight}px)` }}
-            style={{ height: `calc(100% - 260px` }}
+            style={{ height: `calc(100% - ${timelineHeight}px)` }}
           >
             <div className="relative w-full overflow-hidden bg-gray-400">
               <canvas
@@ -88,12 +86,12 @@ export const PageEnigma = () => {
           </div>
 
           {/* Timeline */}
-          <div className="min-h-[220px]" ref={timelineRef}>
+          <div className="min-h-[280px]" ref={timelineRef}>
             <TrackProvider>
               <Timeline
-                // editorCurrent={editorRef.current}
-                // time={20}
-                // length={12}
+              // editorCurrent={editorRef.current}
+              // time={20}
+              // length={12}
               />
             </TrackProvider>
           </div>

app/pages/PageEnigma/comps/Timeline/Audio.tsx

@@ -10,13 +10,15 @@ export const Audio = () => {
 
   return (
     <div
-      className="bg-audio-groupBg block rounded-lg pl-2 pr-4"
+      className="block rounded-lg bg-audio-groupBg pb-5 pl-2 pr-4"
       style={{ width: fullWidth + 90 }}
     >
-      <div className="mb-2 text-sm text-white">Global Audio</div>
+      <div className="mb-5 pt-2 text-xs font-medium text-white">
+        Global Audio
+      </div>
       <div className="flex flex-col gap-2">
         <div className="pl-16">
-          <div className="bg-audio-unselected relative mt-4 block h-8 w-full rounded">
+          <div className="relative mt-4 block h-9 w-full rounded-lg bg-audio-unselected">
             {clips.map((clip, index) => (
               <TrackClip
                 key={clip.id}
@@ -31,10 +33,7 @@ export const Audio = () => {
                 clip={clip}
               />
             ))}
-            <div
-              className="absolute text-xs text-white"
-              style={{ top: 6, left: 4 }}
-            >
+            <div className="absolute ps-2 pt-1 text-xs font-medium text-white">
               Global Audio Track
             </div>
           </div>

app/pages/PageEnigma/comps/Timeline/Camera.tsx

@@ -9,13 +9,13 @@ export const Camera = () => {
 
   return (
     <div
-      className="bg-camera-groupBg block rounded-lg pl-2 pr-4"
+      className="block rounded-lg bg-camera-groupBg pb-5 pl-2 pr-4"
       style={{ width: fullWidth + 90 }}
     >
-      <div className="mb-2 text-sm text-white">Camera</div>
+      <div className="mb-5 pt-2 text-xs font-medium text-white">Camera</div>
       <div className="flex flex-col gap-2">
         <div className="pl-16">
-          <div className="bg-camera-unselected relative mt-4 block h-8 w-full rounded">
+          <div className="relative mt-4 block h-9 w-full rounded-lg bg-camera-unselected">
             {clips.map((clip, index) => (
               <TrackClip
                 key={clip.id}
@@ -30,10 +30,7 @@ export const Camera = () => {
                 clip={clip}
               />
             ))}
-            <div
-              className="absolute text-xs text-white"
-              style={{ top: 6, left: 4 }}
-            >
+            <div className="absolute ps-2 pt-1 text-xs font-medium text-white">
               Camera Position/Rotation
             </div>
           </div>

app/pages/PageEnigma/comps/Timeline/Character.tsx

@@ -18,13 +18,13 @@ export const Character = ({ characterId }: Props) => {
 
   return (
     <div
-      className="block rounded-lg bg-character-groupBg pl-2 pr-4"
+      className="block rounded-lg bg-character-groupBg pb-5 pl-2 pr-4"
       style={{ width: fullWidth + 90 }}
     >
-      <div className="mb-2 text-xs text-white">Character</div>
-      <div className="flex flex-col gap-2">
+      <div className="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-8 rounded bg-character-unselected">
+          <div className="relative mt-4 block h-9 rounded-lg bg-character-unselected">
             {animationClips.map((clip, index) => (
               <TrackClip
                 key={clip.id}
@@ -46,16 +46,13 @@ export const Character = ({ characterId }: Props) => {
                 clip={clip}
               />
             ))}
-            <div
-              className="absolute text-xs text-white"
-              style={{ top: 6, left: 4 }}
-            >
+            <div className="absolute ps-2 pt-1 text-xs font-medium text-white">
               Animation
             </div>
           </div>
         </div>
         <div className="pl-16">
-          <div className="relative mt-4 block h-8 w-full rounded bg-character-unselected">
+          <div className="relative mt-4 block h-9 w-full rounded-lg bg-character-unselected">
             {positionClips.map((clip, index) => (
               <TrackClip
                 key={clip.id}
@@ -77,16 +74,13 @@ export const Character = ({ characterId }: Props) => {
                 clip={clip}
               />
             ))}
-            <div
-              className="absolute text-xs text-white"
-              style={{ top: 6, left: 4 }}
-            >
+            <div className="absolute ps-2 pt-1 text-xs font-medium text-white">
               Character Position/Rotation
             </div>
           </div>
         </div>
         <div className="pl-16">
-          <div className="relative mt-4 block h-8 w-full rounded bg-character-unselected">
+          <div className="relative mt-4 block h-9 w-full rounded-lg bg-character-unselected">
             {lipSyncClips.map((clip, index) => (
               <TrackClip
                 key={clip.id}
@@ -108,10 +102,7 @@ export const Character = ({ characterId }: Props) => {
                 clip={clip}
               />
             ))}
-            <div
-              className="absolute text-xs text-white"
-              style={{ top: 6, left: 4 }}
-            >
+            <div className="absolute ps-2 pt-1 text-xs font-medium text-white">
               Lipsync Audio Track
             </div>
             <button

app/pages/PageEnigma/comps/Timeline/Objects.tsx

@@ -8,14 +8,14 @@ export const Objects = () => {
 
   return (
     <div
-      className="bg-objects-groupBg block rounded-lg pl-2 pr-4"
+      className="block rounded-lg bg-objects-groupBg pb-5 pl-2 pr-4"
       style={{ width: fullWidth + 90 }}
     >
-      <div className="mb-2 text-sm text-white">Objects</div>
+      <div className="mb-5 pt-2 text-xs font-medium text-white">Objects</div>
       {objects.objects.map((object) => (
         <div key={object.id} className="flex flex-col gap-2">
           <div className="pl-16">
-            <div className="bg-objects-unselected relative mt-4 block h-8 w-full rounded">
+            <div className="relative mt-4 block h-9 w-full rounded-lg bg-objects-unselected">
               {object.clips.map((clip, index) => (
                 <TrackClip
                   key={clip.id}
@@ -35,10 +35,7 @@ export const Objects = () => {
                   clip={clip}
                 />
               ))}
-              <div
-                className="absolute text-xs text-white"
-                style={{ top: 6, left: 4 }}
-              >
+              <div className="absolute ps-2 pt-1 text-xs font-medium text-white">
                 Mask Position/Rotation
               </div>
             </div>

app/pages/PageEnigma/comps/Timeline/Timeline.tsx

@@ -1,7 +1,7 @@
-import { 
+import {
   Fragment,
   // useCallback,
-  useContext
+  useContext,
 } from "react";
 
 import { Button } from "~/components";
@@ -13,20 +13,22 @@ import { TrackContext } from "~/contexts/TrackContext/TrackContext";
 import { LowerPanel } from "~/modules/LowerPanel";
 import { Character } from "./Character";
 
-
-
 import { Camera } from "./Camera";
 import { Audio } from "./Audio";
 import { Objects } from "./Objects";
 import { useMouseEventsAnimation } from "./utils/useMouseEventsAnimation";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faSortDown } from "@fortawesome/pro-solid-svg-icons";
 
-export const Timeline = ({
-  // editorCurrent,
-  // time,
-}: {
-  // editorCurrent: Editor | null;
-  // time: number;
-}) => {
+export const Timeline = (
+  {
+    // editorCurrent,
+    // time,
+  }: {
+    // editorCurrent: Editor | null;
+    // time: number;
+  },
+) => {
   const editorEngine = useContext(EngineContext);
   // editorEngine replaced the engineRef.current passed as a prop
   // const { characters, updateCharacters } = useContext(TrackContext);
@@ -40,19 +42,19 @@ export const Timeline = ({
   return (
     <>
       <LowerPanel>
-        <div className="mt-4 flex h-3 text-sm text-white">
+        <div className="mt-4 flex h-3 text-xs text-white opacity-75">
           {Array(length)
             .fill(0)
             .map((_, index) => (
               <Fragment key={index}>
                 <div
-                  className="absolute"
+                  className="absolute ps-1"
                   style={{ left: index * sectionWidth + 92 }}
                 >
                   00:{index < 10 ? "0" + index.toString() : index.toString()}
                 </div>
                 <div
-                  className="bg-ui-divider absolute block h-full"
+                  className="absolute block h-full bg-ui-divider"
                   style={{
                     width: 1,
                     left: index * sectionWidth + 88,
@@ -68,7 +70,7 @@ export const Timeline = ({
             00:{length < 10 ? "0" + length.toString() : length.toString()}
           </div>
           <div
-            className="bg-ui-divider absolute block h-full"
+            className="absolute block h-full bg-ui-divider"
             style={{
               width: 1,
               left: length * sectionWidth + 88,
@@ -95,16 +97,17 @@ export const Timeline = ({
           style={{ top: 8, left: time * 4 * scale + 88 }}
           onPointerDown={onPointerDown}
         >
-          <i
-            className="fa-solid fa-sort-down font-brand-primary absolute"
-            style={{ top: 0, left: 0 }}
-          ></i>
+          <FontAwesomeIcon
+            icon={faSortDown}
+            style={{ top: 0, left: -2 }}
+            className="text-brand-primary"
+          />
           <div
             className="absolute block bg-brand-primary"
             style={{
               left: 0,
               top: 8,
-              width: 3,
+              width: 2,
               height: fullHeight,
             }}
           />

app/pages/PageEnigma/comps/Timeline/TrackClip.tsx

@@ -28,20 +28,23 @@ export const TrackClip = ({ clip, min, max, style, updateClip }: Props) => {
   return (
     <>
       <div
-        className={[...classes, "px-1", "rounded", "text-sm text-white"].join(
-          " ",
-        )}
-        style={{ top: -21, left: offset * 4 * scale + 2 }}
+        className={[
+          ...classes,
+          "px-[6px] py-[3px]",
+          "rounded",
+          "text-xs font-medium text-white",
+        ].join(" ")}
+        style={{ top: -28, left: offset * 4 * scale + 2 }}
       >
         {clip.name}
       </div>
       <button
         className={[
           ...classes,
-          "rounded-l",
+          "rounded-l-lg",
           "block h-full",
           clip.id === selectedClip
-            ? "border-b-1 border-t-1 border-l-1 border border-r-0 border-white"
+            ? "border border-b-2 border-l-2 border-r-0 border-t-2 border-white"
             : "",
         ].join(" ")}
         style={{ width: 15, left: offset * 4 * scale, cursor: "w-resize" }}
@@ -53,7 +56,7 @@ export const TrackClip = ({ clip, min, max, style, updateClip }: Props) => {
           ...classes,
           "block h-full",
           clip.id === selectedClip
-            ? "border-b-1 border-t-1 border border-l-0 border-r-0 border-white"
+            ? "border border-b-2 border-l-0 border-r-0 border-t-2 border-white"
             : "",
         ].join(" ")}
         style={{
@@ -67,10 +70,10 @@ export const TrackClip = ({ clip, min, max, style, updateClip }: Props) => {
       <button
         className={[
           ...classes,
-          "rounded-r",
+          "rounded-r-lg",
           "block h-full",
           clip.id === selectedClip
-            ? "border-b-1 border-t-1 border-r-1 border border-l-0 border-white"
+            ? "border border-b-2 border-l-0 border-r-2 border-t-2 border-white"
             : "",
         ].join(" ")}
         style={{

app/styles/base.css

@@ -1,3 +1,23 @@
+* {
+  scrollbar-width: thin;
+  scrollbar-color: #676781 #39394d;
+}
+
+/* Works on Chrome, Edge, and Safari */
+*::-webkit-scrollbar {
+  width: 12px;
+}
+
+*::-webkit-scrollbar-track {
+  background: #39394d;
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: #39394d;
+  border-radius: 30px;
+  border: 3px solid gray;
+}
+
 body {
   font-family: "Fira Sans", sans-serif;
 }

tailwind.config.ts

@@ -109,7 +109,7 @@ export default {
       "ui-panel-border": "#393948",
       "ui-controls": "#39394D",
       "ui-controls-button": "#676781",
-      "ui-divider": "#D3D3D3",
+      "ui-divider": "#515168",
 
       gray: colors.gray,
       black: colors.black,