src/App.scss

@@ -5,15 +5,3 @@ svg {
   height: 100%;
   width: 100%;
 }
-
-text {
-  font-size: 18px;
-  font-weight: 800;
-  fill: none;
-  fill-opacity: 0;
-  stroke: #000000;
-  stroke-width: 1px;
-  stroke-linecap: butt;
-  stroke-linejoin: miter;
-  stroke-opacity: 1;
-}

src/App.tsx

@@ -218,7 +218,7 @@ class App extends React.Component<IAppProps> {
           onClick={() => this.ToggleSidebar()}
           buttonOnClick={(type: string) => this.AddContainer(type)}
         />
-        <button className='fixed z-10 top-4 left-4 text-lg bg-blue-200 hover:bg-blue-300 transition-all drop-shadow-md hover:drop-shadow-lg py-2 px-3 rounded-lg' onClick={() => this.ToggleSidebar()}>&#9776; Components</button>
+        <button className='fixed z-10 top-4 left-4 text-lg bg-blue-200 hover:bg-blue-300 transition-all drop-shadow-md hover:drop-shadow-lg py-2 px-3 rounded-lg' onClick={() => this.ToggleSidebar()}>&#9776; Menu</button>
         <ElementsSidebar
           MainContainer={this.state.MainContainer}
           SelectedContainer={this.state.SelectedContainer}
@@ -227,7 +227,7 @@ class App extends React.Component<IAppProps> {
           onPropertyChange={(key: string, value: string) => this.OnPropertyChange(key, value)}
           selectContainer={(container: Container) => this.SelectContainer(container)}
         />
-        <button className='fixed z-10 top-4 right-12 text-lg bg-slate-200 hover:bg-slate-300 transition-all drop-shadow-md hover:drop-shadow-lg py-2 px-3 rounded-lg' onClick={() => this.ToggleElementsSidebar()}>&#9776; Elements</button>
+        <button className='fixed z-10 top-4 right-12 text-lg bg-slate-200 hover:bg-slate-300 transition-all drop-shadow-md hover:drop-shadow-lg py-2 px-3 rounded-lg' onClick={() => this.ToggleElementsSidebar()}>&#9776; Menu</button>
         <SVG>
           { this.state.MainContainer }
         </SVG>
@@ -243,8 +243,6 @@ class App extends React.Component<IAppProps> {
 export async function fetchConfiguration(): Promise<Configuration> {
   const url = `${import.meta.env.VITE_API_URL}`;
 
-  // The test library cannot use the Fetch API
-  // @ts-ignore
   if (window.fetch) {
     return await fetch(url, {
       method: 'POST'

src/Components/SVG/Elements/Container.tsx

@@ -57,17 +57,12 @@ export class Container extends React.Component<IContainerProps> {
 
   public render(): React.ReactNode {
     const containersElements = this.props.children.map(child => child.render());
-    const xText = (this.props.properties.x * 2 + Number(this.props.properties.width)) / 2;
-    const yText = (this.props.properties.y * 2 + Number(this.props.properties.height)) / 2;
-
-    // g style
     const defaultStyle = {
       transitionProperty: 'all',
       transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
       transitionDuration: '150ms'
     } as React.CSSProperties;
 
-    // Rect style
     const style = Object.assign(
       JSON.parse(JSON.stringify(defaultStyle)),
       this.props.properties
@@ -77,7 +72,6 @@ export class Container extends React.Component<IContainerProps> {
     delete style.height;
     delete style.width;
 
-    // Dimension props
     const id = `dim-${this.props.properties.id}`;
     const xStart: number = 0;
     const xEnd = Number(this.props.properties.width);
@@ -105,12 +99,6 @@ export class Container extends React.Component<IContainerProps> {
           style={style}
         >
         </rect>
-        <text
-          x={xText}
-          y={yText}
-        >
-          {this.props.properties.id}
-        </text>
         { containersElements }
       </g>
     );

src/main.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
-import './index.scss';
+import './index.css';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>