Change css class on sidebar and symbols

src/Components/ElementsSidebar/ElementsSidebar.test.tsx

@@ -104,6 +104,7 @@ describe.concurrent('Elements sidebar', () => {
           maxWidth: Infinity,
           type: 'type',
           isAnchor: false,
+          warning: '',
           showChildrenDimensions: true,
           showSelfDimensions: true,
           isDimensionBorrower: true,
@@ -133,6 +134,7 @@ describe.concurrent('Elements sidebar', () => {
           isFlex: false,
           maxWidth: Infinity,
           type: 'type',
+          warning: '',
           showChildrenDimensions: true,
           showSelfDimensions: true,
           isDimensionBorrower: true,
@@ -183,6 +185,7 @@ describe.concurrent('Elements sidebar', () => {
         minWidth: 1,
         width: 0,
         height: 0,
+        warning: '',
         xPositionReference: XPositionReference.Left,
         margin: {},
         isFlex: false,

src/Components/ElementsSidebar/ElementsSidebar.tsx

@@ -5,6 +5,7 @@ import { IContainerModel } from '../../Interfaces/IContainerModel';
 import { FindContainerById, GetDepth, MakeIterator } from '../../utils/itertools';
 import { ISymbolModel } from '../../Interfaces/ISymbolModel';
 import { PropertyType } from '../../Enums/PropertyType';
+import { ExclamationIcon } from '@heroicons/react/outline';
 
 interface IElementsSidebarProps {
   mainContainer: IContainerModel
@@ -146,16 +147,20 @@ export function ElementsSidebar(props: IElementsSidebarProps): JSX.Element {
     return (
       <button type="button"
         className={`w-full border-blue-500 elements-sidebar-row whitespace-pre
-          text-left text-sm font-medium transition-all ${container.properties.type} ${selectedClass}`}
+          text-left text-sm font-medium transition-all inline-flex ${container.properties.type} ${selectedClass}`}
         id={key}
         key={key}
         style={style}
+        title={container.properties.warning}
         onClick={() => props.selectContainer(container.properties.id)}
         onDrop={(event) => HandleOnDrop(event, props.mainContainer, props.addContainer)}
         onDragOver={(event) => HandleDragOver(event, props.mainContainer)}
         onDragLeave={(event) => HandleDragLeave(event)}
       >
         {text}
+        {container.properties.warning.length > 0 &&
+          <ExclamationIcon></ExclamationIcon>
+        }
       </button>
     );
   }