From e5012256ded982dfa14fb04ad471c0d2cee4fc6d Mon Sep 17 00:00:00 2001
From: Siklos <siklos@tuta.io>
Date: Mon, 1 Aug 2022 11:45:02 +0200
Subject: [PATCH 1/2] Rename SVGSidebar to ElementsSidebar

---
 src/App.tsx                                                   | 4 ++--
 .../SVGSidebar.tsx => ElementsSidebar/ElementsSidebar.tsx}    | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)
 rename src/Components/{SVGSidebar/SVGSidebar.tsx => ElementsSidebar/ElementsSidebar.tsx} (95%)

diff --git a/src/App.tsx b/src/App.tsx
index b5c86b6..8c356b9 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import './App.scss';
 import Sidebar from './Components/Sidebar/Sidebar';
-import { SVGSidebar } from './Components/SVGSidebar/SVGSidebar';
+import { ElementsSidebar } from './Components/ElementsSidebar/ElementsSidebar';
 import { AvailableContainer } from './Interfaces/AvailableContainer';
 import { Configuration } from './Interfaces/Configuration';
 import { Container } from './Components/SVG/Elements/Container';
@@ -133,7 +133,7 @@ class App extends React.Component<IAppProps> {
           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; Menu</button>
-        <SVGSidebar
+        <ElementsSidebar
           MainContainer={this.state.MainContainer}
           SelectedContainer={this.state.SelectedContainer}
           isOpen={this.state.isSVGSidebarOpen}
diff --git a/src/Components/SVGSidebar/SVGSidebar.tsx b/src/Components/ElementsSidebar/ElementsSidebar.tsx
similarity index 95%
rename from src/Components/SVGSidebar/SVGSidebar.tsx
rename to src/Components/ElementsSidebar/ElementsSidebar.tsx
index 6e9d632..4214b98 100644
--- a/src/Components/SVGSidebar/SVGSidebar.tsx
+++ b/src/Components/ElementsSidebar/ElementsSidebar.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Container } from '../SVG/Elements/Container';
 
-interface ISVGSidebarProps {
+interface IElementsSidebarProps {
   MainContainer: Container | null,
   isOpen: boolean,
   SelectedContainer: Container | null,
@@ -9,7 +9,7 @@ interface ISVGSidebarProps {
   selectContainer: (container: Container) => void
 }
 
-export class SVGSidebar extends React.Component<ISVGSidebarProps> {
+export class ElementsSidebar extends React.Component<IElementsSidebarProps> {
   public iterateChilds(handleContainer: (container: Container, depth: number) => void): React.ReactNode {
     // TODO: fix this by using dfs or sort
     const root = this.props.MainContainer;

From b2a020730cef080ec45c458f8377c58cd583b5e7 Mon Sep 17 00:00:00 2001
From: Siklos <siklos@tuta.io>
Date: Mon, 1 Aug 2022 11:45:41 +0200
Subject: [PATCH 2/2] ElementsSidebar: Fix hover color

---
 src/Components/ElementsSidebar/ElementsSidebar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Components/ElementsSidebar/ElementsSidebar.tsx b/src/Components/ElementsSidebar/ElementsSidebar.tsx
index 4214b98..fe6448a 100644
--- a/src/Components/ElementsSidebar/ElementsSidebar.tsx
+++ b/src/Components/ElementsSidebar/ElementsSidebar.tsx
@@ -49,7 +49,7 @@ export class ElementsSidebar extends React.Component<IElementsSidebarProps> {
       const text = '\t\t'.repeat(depth) + key;
       const selectedClass: string = this.props.SelectedContainer !== null &&
         this.props.SelectedContainer.props.id === container.props.id
-        ? 'bg-blue-500 hover:bg-slate-500'
+        ? 'bg-blue-500 hover:bg-blue-600'
         : 'bg-slate-400 hover:bg-slate-600';
       containerRows.push(
         <button className={`sidebar-row whitespace-pre text-left transition-all ${selectedClass}`} key={key} onClick={() => this.props.selectContainer(container)}>