From 43fb019e05e1f1753c488445ee983e84033d8fa9 Mon Sep 17 00:00:00 2001
From: Siklos <siklos@tuta.io>
Date: Mon, 1 Aug 2022 12:30:59 +0200
Subject: [PATCH] Improve style for sidebar elements

---
 src/Components/ElementsSidebar/ElementsSidebar.tsx | 14 +++++++-------
 src/Components/Sidebar/Sidebar.tsx                 |  8 ++++----
 src/index.css                                      |  6 ++++++
 3 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/Components/ElementsSidebar/ElementsSidebar.tsx b/src/Components/ElementsSidebar/ElementsSidebar.tsx
index 1b080ac..46b6120 100644
--- a/src/Components/ElementsSidebar/ElementsSidebar.tsx
+++ b/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>
diff --git a/src/Components/Sidebar/Sidebar.tsx b/src/Components/Sidebar/Sidebar.tsx
index f8da2b6..af08ce9 100644
--- a/src/Components/Sidebar/Sidebar.tsx
+++ b/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>
diff --git a/src/index.css b/src/index.css
index 29f3840..7327b1a 100644
--- a/src/index.css
+++ b/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 
+  }
 }
\ No newline at end of file