refactor: improve visibility of extract element

apps/client/src/features/rundown/RundownExport.module.scss

@@ -22,12 +22,6 @@
   height: 100%;
 }
 
-.corner {
-  @include editor.corner;
-  display: inline;
-  z-index: 2;
-}
-
 .list {
   @include editor.panel;
   height: inherit;

apps/client/src/features/rundown/RundownExport.tsx

@@ -1,11 +1,11 @@
 import { memo } from 'react';
-import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
 
 import { ContextMenu } from '../../common/components/context-menu/ContextMenu';
 import ErrorBoundary from '../../common/components/error-boundary/ErrorBoundary';
 import { useAppMode } from '../../common/stores/appModeStore';
 import { handleLinks } from '../../common/utils/linkUtils';
 import { cx } from '../../common/utils/styleUtils';
+import { Corner } from '../editors/editor-utils/EditorUtils';
 
 import EventEditor from './event-editor/EventEditor';
 import RundownWrapper from './RundownWrapper';
@@ -24,7 +24,7 @@ const RundownExport = () => {
       <div className={style.rundown}>
         <div className={style.list}>
           <ErrorBoundary>
-            {!isExtracted && <IoArrowUp className={style.corner} onClick={(event) => handleLinks(event, 'rundown')} />}
+            {!isExtracted && <Corner onClick={(event) => handleLinks(event, 'rundown')} />}
             <ContextMenu>
               <RundownWrapper />
             </ContextMenu>

apps/client/src/features/rundown/event-block/EventBlockInner.tsx

@@ -158,7 +158,8 @@ function TimerIcon(props: { type: TimerType; className: string }) {
     return <IoTime className={className} />;
   }
   if (type === TimerType.TimeToEnd) {
-    return <IoFlag className={className} />;
+    const classes = cx([style.active, className]);
+    return <IoFlag className={classes} />;
   }
   return <IoArrowDown className={className} />;
 }