Improve style for sidebar elements

src/Components/ElementsSidebar/ElementsSidebar.tsx

@@ -40,13 +40,13 @@ export class ElementsSidebar extends React.Component<IElementsSidebarProps> {
     this.iterateChilds((container: Container) => {
       const depth: number = Container.getDepth(container);
       const key = container.props.id.toString();
-      const text = '\t\t'.repeat(depth) + key;
+      const text = '|\t'.repeat(depth) + key;
       const selectedClass: string = this.props.SelectedContainer !== null &&
         this.props.SelectedContainer.props.id === container.props.id
         ? '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)}>
+        <button className={`elements-sidebar-row whitespace-pre text-left text-sm transition-all ${selectedClass}`} key={key} onClick={() => this.props.selectContainer(container)}>
           { text }
         </button>
       );
@@ -54,13 +54,13 @@ export class ElementsSidebar extends React.Component<IElementsSidebarProps> {
 
     return (
       <div className={`fixed bg-slate-400 text-white transition-all h-screen w-64 overflow-y-auto z-20 ${isOpenClasses}`}>
-        <div className='w-full h-auto p-4 flex justify-start' onClick={this.props.onClick}>
-          <button className='text-lg'>&times;</button>
-        </div>
+        <button className='close-button hover:bg-slate-600 justify-start' onClick={this.props.onClick}>
+          &times; Close
+        </button>
         <div className='bg-slate-500 sidebar-row'>
-          Liste des éléments
+          Elements
         </div>
-        <div className='overflow-auto divide-y divide-solid'>
+        <div className='overflow-auto divide-y divide-solid divide-slate-500'>
           { containerRows }
         </div>
       </div>

src/Components/Sidebar/Sidebar.tsx

@@ -19,11 +19,11 @@ export default class Sidebar extends React.Component<ISidebarProps> {
     const isOpenClasses = this.props.isOpen ? 'left-0' : '-left-64';
     return (
       <div className={`fixed bg-blue-500 dark:bg-blue-500 text-white transition-all h-screen w-64 overflow-y-auto z-20 ${isOpenClasses}`}>
-        <div className='w-full h-auto p-4 flex justify-end' onClick={this.props.onClick}>
-          <button className='text-lg'>&times;</button>
-        </div>
+        <button className='close-button hover:bg-blue-600 justify-end' onClick={this.props.onClick}>
+          Close &times;
+        </button>
         <div className='bg-blue-400 sidebar-row'>
-          Composants
+          Components
         </div>
         {listElements}
       </div>

src/index.css

@@ -6,4 +6,10 @@
   .sidebar-row {
     @apply p-6 w-full
   }
+  .elements-sidebar-row {
+    @apply pl-6 pr-6 pt-2 pb-2 w-full
+  }
+  .close-button {
+    @apply transition-all w-full h-auto p-4 flex 
+  }
 }