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}