From 83ebd01526d277f6995da61124e604741b082d5c Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Tue, 20 May 2025 17:55:49 +0200
Subject: [PATCH] ui: darkmode fixes for spot and highlights

---
 .../components/FilterSeries/ExcludeFilters.tsx    |  2 +-
 .../Player/ClipPlayer/ClipPlayerContent.tsx       | 15 +++++++++++++--
 .../components/Spots/SpotsList/SpotListItem.tsx   |  6 +++---
 .../Spots/SpotsList/SpotsListHeader.tsx           |  3 ++-
 4 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/frontend/app/components/Dashboard/components/FilterSeries/ExcludeFilters.tsx b/frontend/app/components/Dashboard/components/FilterSeries/ExcludeFilters.tsx
index 532176702..10bcc278a 100644
--- a/frontend/app/components/Dashboard/components/FilterSeries/ExcludeFilters.tsx
+++ b/frontend/app/components/Dashboard/components/FilterSeries/ExcludeFilters.tsx
@@ -56,7 +56,7 @@ function ExcludeFilters(props: Props) {
           ))}
         </div>
       ) : (
-        <Button type="link" onClick={addPageFilter}>
+        <Button type="link" onClick={addPageFilter} className="!text-black">
           {t('Add Exclusion')}
         </Button>
       )}
diff --git a/frontend/app/components/Session/Player/ClipPlayer/ClipPlayerContent.tsx b/frontend/app/components/Session/Player/ClipPlayer/ClipPlayerContent.tsx
index 6bc61da82..ddf267669 100644
--- a/frontend/app/components/Session/Player/ClipPlayer/ClipPlayerContent.tsx
+++ b/frontend/app/components/Session/Player/ClipPlayer/ClipPlayerContent.tsx
@@ -54,11 +54,22 @@ function ClipPlayerContent(props: Props) {
 
   if (!playerContext.player) return null;
 
+  const outerHeight = props.isHighlight ? 556 + 39 : 556;
+  const innerHeight = props.isHighlight ? 504 + 39 : 504;
   return (
     <div
-      className={cn(styles.playerBlock, 'flex flex-col', 'overflow-x-hidden max-h-[556px] h-[556px]')}
+      className={cn(
+        styles.playerBlock,
+        'flex flex-col',
+        `overflow-x-hidden max-h-[${outerHeight}px] h-[${outerHeight}px]`,
+      )}
     >
-      <div className={cn(stl.playerBody, 'flex-1 flex flex-col relative max-h-[504px] h-[504px]')}>
+      <div
+        className={cn(
+          stl.playerBody,
+          `flex-1 flex flex-col relative max-h-[${innerHeight}px] h-[${innerHeight}px]`,
+        )}
+      >
         <div className={cn(stl.playerBody, 'flex flex-1 flex-col relative')}>
           <div className="relative flex-1 overflow-hidden group">
             <ClipPlayerOverlay autoplay={props.autoplay} />
diff --git a/frontend/app/components/Spots/SpotsList/SpotListItem.tsx b/frontend/app/components/Spots/SpotsList/SpotListItem.tsx
index 04dc1dce6..a06a71404 100644
--- a/frontend/app/components/Spots/SpotsList/SpotListItem.tsx
+++ b/frontend/app/components/Spots/SpotsList/SpotListItem.tsx
@@ -148,14 +148,14 @@ function SpotListItem({
           <div className="absolute left-0 bottom-8 flex relative gap-2 justify-end pe-2 pb-2 ">
             <Tooltip title={tooltipText} className="capitalize">
               <div
-                className="bg-black/70 text-white p-1 px-2 text-xs rounded-lg transition-transform transform translate-y-14 group-hover:translate-y-0 "
+                className="bg-gray-dark text-white p-1 px-2 text-xs rounded-lg transition-transform transform translate-y-14 group-hover:translate-y-0 "
                 onClick={copyToClipboard}
                 style={{ cursor: 'pointer' }}
               >
                 <Link2 size={16} strokeWidth={1} />
               </div>
             </Tooltip>
-            <div className="bg-black/70 text-white p-1 px-2 text-xs rounded-lg flex items-center cursor-normal">
+            <div className="bg-gray-dark text-white p-1 px-2 text-xs rounded-lg flex items-center cursor-normal">
               {spot.duration}
             </div>
           </div>
@@ -213,7 +213,7 @@ export function GridItem({
   return (
     <div
       className={`bg-white rounded-lg overflow-hidden shadow-sm border ${
-        isSelected ? 'border-teal/30' : 'border-transparent'
+        isSelected ? 'border-teal/30' : ''
       } transition flex flex-col items-start hover:border-teal`}
     >
       <div
diff --git a/frontend/app/components/Spots/SpotsList/SpotsListHeader.tsx b/frontend/app/components/Spots/SpotsList/SpotsListHeader.tsx
index de0f1f0b0..5041857be 100644
--- a/frontend/app/components/Spots/SpotsList/SpotsListHeader.tsx
+++ b/frontend/app/components/Spots/SpotsList/SpotsListHeader.tsx
@@ -64,10 +64,11 @@ const SpotsListHeader = observer(
                     type="text"
                     onClick={onClearSelection}
                     className="mr-2 px-3"
+                    size='small'
                   >
                     {t('Clear')}
                   </Button>
-                  <Button onClick={onDelete} type="primary" ghost>
+                  <Button onClick={onDelete} type="primary" ghost size='small'>
                     {t('Delete')} ({selectedCount})
                   </Button>
                 </>