wip: add close propterties icon (sketch)

Author: olzzon

packages/webui/src/client/lib/ui/icons/useredits.tsx

@@ -10,3 +10,18 @@ export function UserEditsIcon(): JSX.Element {
 		</svg>
 	)
 }
+
+export function UserEditsCloseIcon(): JSX.Element {
+	return (
+		<svg width="25" height="28" viewBox="0 0 25 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+			<path
+				d="M11 0C14 0 16 2.5 16 5H20V9C22.5 9 25 11.5 25 14C25 16.5 22.5 19 20 19V23H16C16 25.5 13.5 28 11 28C7.5 28 6 25.5 6 23H0V17H2C3.5 17 5 15.5 5 14C5 12.5 3.5 11 2 11H0V5H6C6 2.5 8 0 11 0ZM11 2C9 2 8 3.80859 8 5V7H2V9C4.5 9 7 11.5 7 14C7 16.5 4.5 19 2 19V21H8V23C8 24.5 9.5 26 11 26C12.5 26 14 24.5 14 23V21H18V17H20C21.5 17 23 15.5 23 14C23 12.5 21.5 11 20 11H18V7H14V5C14 3.80859 13 2 11 2Z"
+				fill="black"
+			/>
+			<path
+				d="M17.8 5.6L19.4 7.2L13.6 14L19.4 20.8L17.8 22.4L12 15.6L6.2 22.4L4.6 20.8L10.4 14L4.6 7.2L6.2 5.6L12 12.4L17.8 5.6Z"
+				fill="white"
+			/>
+		</svg>
+	)
+}

packages/webui/src/client/styles/elementSelected.scss

@@ -1,16 +1,11 @@
 @import '_variables';
 
 .element-selected {
-	border-radius: 0.1px;
-	border-width: 1px;
-	border-color: #171717;
-	border-style: solid;
-	animation: blinker 1s linear infinite;
+	animation: blinker 1.5s linear infinite;
 
 	@keyframes blinker {
-		30% {
-			opacity: 0.8;
-			background-color: rgb(13, 13, 13);
+		20% {
+			opacity: 0.2;
 		}
 	}
 }

packages/webui/src/client/ui/RundownView/RundownRightHandControls.tsx

@@ -25,7 +25,7 @@ import { RundownPlaylistId } from '@sofie-automation/corelib/dist/dataModel/Ids'
 import { MediaStatusPopUp } from './MediaStatusPopUp'
 import { MediaStatusIcon } from '../../lib/ui/icons/mediaStatus'
 import { SelectedElementsContext } from './SelectedElementsContext'
-import { UserEditsIcon } from '../../lib/ui/icons/useredits'
+import { UserEditsCloseIcon, UserEditsIcon } from '../../lib/ui/icons/useredits'
 import { CollapseChevrons } from '../../lib/ui/icons/notifications'
 
 interface IProps {
@@ -159,7 +159,7 @@ export function RundownRightHandControls(props: Readonly<IProps>): JSX.Element {
 				<SelectedElementsContext.Consumer>
 					{(context) => (
 						<button onClick={() => context.clearSelections()} className="status-bar__controls__button">
-							{context.listSelectedElements().length === 0 ? <UserEditsIcon /> : <CollapseChevrons />}
+							{context.listSelectedElements().length === 0 ? <UserEditsIcon /> : <UserEditsCloseIcon />}
 						</button>
 					)}
 				</SelectedElementsContext.Consumer>