From d155e345e895bef9b9d3967233de28b4ef920b29 Mon Sep 17 00:00:00 2001
From: Siklos <siklos@tuta.io>
Date: Mon, 1 Aug 2022 17:15:45 +0200
Subject: [PATCH] Improve sidebar style

---
 .../ElementsSidebar/ElementsSidebar.tsx       |  4 +--
 src/Components/Properties/Properties.tsx      | 30 +++++++++++++++----
 2 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/src/Components/ElementsSidebar/ElementsSidebar.tsx b/src/Components/ElementsSidebar/ElementsSidebar.tsx
index b184df5..990d502 100644
--- a/src/Components/ElementsSidebar/ElementsSidebar.tsx
+++ b/src/Components/ElementsSidebar/ElementsSidebar.tsx
@@ -48,7 +48,7 @@ export class ElementsSidebar extends React.Component<IElementsSidebarProps> {
         ? 'bg-blue-500 hover:bg-blue-600'
         : 'bg-slate-400 hover:bg-slate-600';
       containerRows.push(
-        <button className={`elements-sidebar-row whitespace-pre text-left text-sm transition-all ${selectedClass}`} key={key} onClick={() => this.props.selectContainer(container)}>
+        <button className={`elements-sidebar-row whitespace-pre text-left text-sm font-medium transition-all ${selectedClass}`} key={key} onClick={() => this.props.selectContainer(container)}>
           { text }
         </button>
       );
@@ -62,7 +62,7 @@ export class ElementsSidebar extends React.Component<IElementsSidebarProps> {
         <div className='bg-slate-500 sidebar-row'>
           Elements
         </div>
-        <div className='overflow-auto divide-y divide-solid divide-slate-500'>
+        <div className='overflow-auto text-slate-200 flex-grow divide-y divide-solid divide-slate-500'>
           { containerRows }
         </div>
         <Properties properties={this.props.SelectedContainer?.GetProperties()} onChange={this.props.onPropertyChange}></Properties>
diff --git a/src/Components/Properties/Properties.tsx b/src/Components/Properties/Properties.tsx
index 155a686..3c8c425 100644
--- a/src/Components/Properties/Properties.tsx
+++ b/src/Components/Properties/Properties.tsx
@@ -26,22 +26,40 @@ export class Properties extends React.Component<IPropertiesProps, IPropertiesSta
     }
 
     const groupInput: React.ReactNode[] = [];
-    Object.entries(this.props.properties).forEach((pair) => this.handleProperties(pair, groupInput));
+    Object
+      .entries(this.props.properties)
+      .forEach((pair) => this.handleProperties(pair, groupInput));
 
     return (
-      <div>
+      <div className='p-3 bg-slate-500 h-3/5 overflow-y-auto'>
         { groupInput }
       </div>
     );
   }
 
-  public handleProperties = ([key, value]: [string, string | number], groupInput: React.ReactNode[]) => {
+  public handleProperties = (
+    [key, value]: [string, string | number],
+    groupInput: React.ReactNode[]
+  ) => {
     const id = `property-${key}`;
     const type = typeof value === 'number' ? 'number' : 'text';
+    const isDisabled = key === 'id'; // hardcoded
     groupInput.push(
-      <div key={id}>
-        <label className='' htmlFor={id}>{key}</label>
-        <input className='text-black' type={type} id={id} value={value} onChange={(event) => this.props.onChange(key, event.target.value)} />
+      <div key={id} className='mt-4'>
+        <label className='text-sm font-medium text-slate-200' htmlFor={id}>{key}</label>
+        <input
+          className='text-base font-medium transition-all text-slate-200 mt-1 block w-full px-3 py-2
+          bg-slate-600 border-2 border-slate-600 rounded-lg shadow-sm placeholder-slate-400
+          focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500
+         disabled:bg-slate-700 disabled:text-slate-400 disabled:border-slate-700 disabled:shadow-none
+         invalid:border-pink-500 invalid:text-pink-600
+         focus:invalid:border-pink-500 focus:invalid:ring-pink-5002'
+          type={type}
+          id={id}
+          value={value}
+          onChange={(event) => this.props.onChange(key, event.target.value)}
+          disabled={isDisabled}
+        />
       </div>
     );
   };