refactor: improve visibility of extract element

apps/client/src/features/control/message/MessageControl.module.scss

@@ -21,22 +21,6 @@
   position: relative;
 }
 
-.corner {
-  @include rotate-fourty-five;
-
-  position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
-  cursor: pointer;
-  color: $ui-white;
-  transition-property: color;
-  transition-duration: $transition-time-action;
-
-  &:hover {
-    color: $ontime-color;
-  }
-}
-
 .options {
   display: flex;
   flex-direction: column;

apps/client/src/features/control/message/MessageControlExport.jsx

@@ -1,20 +1,21 @@
 import { memo } from 'react';
-import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
 
 import ErrorBoundary from '../../../common/components/error-boundary/ErrorBoundary';
 import { handleLinks } from '../../../common/utils/linkUtils';
 import { cx } from '../../../common/utils/styleUtils';
+import { Corner } from '../../editors/editor-utils/EditorUtils';
 
 import MessageControl from './MessageControl';
 
 import style from '../../editors/Editor.module.scss';
 
 const MessageControlExport = () => {
+  const isExtracted = window.location.pathname.includes('/messagecontrol');
   const classes = cx([style.content, style.contentColumnLayout]);
 
   return (
     <div className={style.messages} data-testid='panel-messages-control'>
-      <IoArrowUp className={style.corner} onClick={(event) => handleLinks(event, 'messagecontrol')} />
+      {!isExtracted && <Corner onClick={(event) => handleLinks(event, 'messagecontrol')} />}
       <div className={classes}>
         <ErrorBoundary>
           <MessageControl />

apps/client/src/features/control/message/TimerPreview.tsx

@@ -10,6 +10,7 @@ import useViewSettings from '../../../common/hooks-query/useViewSettings';
 import { handleLinks } from '../../../common/utils/linkUtils';
 import { cx } from '../../../common/utils/styleUtils';
 import { tooltipDelayMid } from '../../../ontimeConfig';
+import { Corner } from '../../editors/editor-utils/EditorUtils';
 
 import style from './MessageControl.module.scss';
 
@@ -48,7 +49,7 @@ export default function TimerPreview() {
 
   return (
     <div className={style.preview}>
-      <IoArrowUp className={style.corner} onClick={(event) => handleLinks(event, 'timer')} />
+      <Corner onClick={(event) => handleLinks(event, 'timer')} />
       <div className={contentClasses}>
         <div
           className={style.mainContent}

apps/client/src/features/control/playback/TimerControlExport.tsx

@@ -1,17 +1,18 @@
 import { memo } from 'react';
-import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
 
 import ErrorBoundary from '../../../common/components/error-boundary/ErrorBoundary';
 import { handleLinks } from '../../../common/utils/linkUtils';
+import { Corner } from '../../editors/editor-utils/EditorUtils';
 
 import PlaybackControl from './PlaybackControl';
 
 import style from '../../editors/Editor.module.scss';
 
 const TimerControlExport = () => {
+  const isExtracted = window.location.pathname.includes('/timercontrol');
   return (
     <div className={style.playback} data-testid='panel-timer-control'>
-      <IoArrowUp className={style.corner} onClick={(event) => handleLinks(event, 'timercontrol')} />
+      {!isExtracted && <Corner onClick={(event) => handleLinks(event, 'timercontrol')} />}
       <div className={style.content}>
         <ErrorBoundary>
           <PlaybackControl />

apps/client/src/features/editors/Editor.module.scss

@@ -4,10 +4,6 @@ $min-playback-width: 27rem;
 $max-playback-width: 30rem;
 $panel-gap: 0.5rem;
 
-.corner {
-  @include editor.corner;
-}
-
 .mainContainer {
   background-color: $ui-black;
   width: 100%;
@@ -31,11 +27,6 @@ $panel-gap: 0.5rem;
   gap: $panel-gap;
   overflow: hidden;
 
-  .corner {
-    /* we show this if the component hasnt been extracted */
-    display: inline;
-  }
-
   .rundown,
   .playback,
   .messages {

apps/client/src/features/editors/EditorMixin.scss

@@ -6,23 +6,6 @@
   --editor--panel__br: 8px;
 }
 
-@mixin corner() {
-  display: none;
-  transform: rotate(45deg);
-
-  position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
-  cursor: pointer;
-  color: $ui-white;
-  transition-property: color;
-  transition-duration: $transition-time-action;
-
-  &:hover {
-    color: $ontime-color;
-  }
-}
-
 @mixin panel() {
   display: flex;
 
@@ -31,9 +14,4 @@
   height: 100%;
   background-color: $bg-container-l2;
   padding: 1rem;
-
-  .corner {
-    /* we show this if the component hasnt been extracted */
-    display: inline;
-  }
 }

apps/client/src/features/editors/editor-utils/EditorUtils.module.scss

@@ -0,0 +1,22 @@
+.corner {
+  transform: rotate(45deg);
+
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  cursor: pointer;
+  color: $ui-white;
+  transition-property: color;
+  transition-duration: $transition-time-action;
+  border-radius: 99px;
+
+  // similar styles to ontime-button-subtle
+  background-color: $gray-1050;
+  outline: 2px solid $gray-1050;
+
+  &:hover {
+    color: $ontime-color;
+    background-color: $gray-1000;
+    outline: 2px solid $gray-1000;
+  }
+}

apps/client/src/features/editors/editor-utils/EditorUtils.tsx

@@ -0,0 +1,10 @@
+import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
+import { type IconBaseProps } from '@react-icons/all-files/lib';
+
+import { cx } from '../../../common/utils/styleUtils';
+
+import style from './EditorUtils.module.scss';
+
+export function Corner({ className, ...elementProps }: IconBaseProps) {
+  return <IoArrowUp className={cx([style.corner, className])} {...elementProps} />;
+}

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} />;
 }