Merge pull request #71 from IUBLibTech/fix-build-issues

Fix CSS issues with latest build fixes
IUBLibTech · Mar 10, 2025 · bbeb783 · bbeb783
2 parents cfd3b92 + 1518a0a
commit bbeb783
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 4 deletions.
diff --git a/src/components/MetadataEditor/MetadataEditor.jsx b/src/components/MetadataEditor/MetadataEditor.jsx
@@ -111,7 +111,7 @@ class MetadataEditor extends Component {
       whiteText,
     } = this.state;
     return (
-      <form className='metadata-editor'onKeyDown={this.handleKeyDown}>
+      <form className='metadata-editor' onKeyDown={this.handleKeyDown}>
         <TextField
           id="label"
           autoFocus={true}

diff --git a/src/components/Playhead/Playhead.scss b/src/components/Playhead/Playhead.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 .playhead {
   position: absolute;
   background: #FF4081;
@@ -51,7 +53,7 @@
   //  border-right: 5px solid transparent;
   //}
   .playhead:before {
-    background: mix(#FF4081, #000, 70%);
+    background: color.mix(#FF4081, #000, 70%);
     transform: scale(1);
   }
 }
diff --git a/src/components/TimelineMarker/TimelineMarker.jsx b/src/components/TimelineMarker/TimelineMarker.jsx
@@ -37,7 +37,7 @@ class TimelineMarker extends Component {
 
     return (
       <div
-        className={bookmark ? 'timeline-marker--bookmark' : 'timeline-marker--marker'}
+        className={`timeline-marker ${bookmark ? 'timeline-marker--bookmark' : 'timeline-marker--marker'}`}
         style={{ left: `${x}%` }}
         onMouseDown={onMouseDown}
       >

diff --git a/src/components/VolumeSliderCompact/VolumeSliderCompact.jsx b/src/components/VolumeSliderCompact/VolumeSliderCompact.jsx
@@ -53,7 +53,7 @@ class VolumeSliderCompact extends Component {
     const { volume, flipped } = this.props;
 
     return (
-      <div className={flipped ? 'volume-slider-compact--flipped' : 'volume-slider-compact'}>
+      <div className={flipped ? 'volume-slider-compact volume-slider-compact--flipped' : 'volume-slider-compact'}>
         <Slider
           min={0}
           max={100}