refactor: improve visibility of extract element

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