styling updates

src/canvas/canvas.js

@@ -1332,7 +1332,7 @@ class Canvas extends React.Component {
                                     </DroppableWrapper>
 
                                     <CanvasToolBar isOpen={this.state.toolbarOpen}
-                                        widgetType={this.selectedWidget?.getWidgetType() || ""}
+                                        widgetType={this.selectedWidget?.getDisplayName() || ""}
                                         attrs={this.state.toolbarAttrs}
                                     />
                                     {/* </ActiveWidgetProvider> */}

src/canvas/toolbar.js

@@ -338,7 +338,7 @@ const CanvasToolBar = memo(({ isOpen, widgetType, attrs = {} }) => {
                 
                 if (isFirstLevel){
                     return (
-                        <Collapse key={keyName} ghost defaultActiveKey={keys}>
+                        <Collapse key={keyName} defaultActiveKey={keys}>
                             <Collapse.Panel header={val.label} key={keyName}>
                                 {renderTool(keyName, val)}
                             </Collapse.Panel>
@@ -367,7 +367,7 @@ const CanvasToolBar = memo(({ isOpen, widgetType, attrs = {} }) => {
 
                 if (isFirstLevel){
                     return (
-                        <Collapse key={keyName} ghost defaultActiveKey={keys}>
+                        <Collapse key={keyName}  defaultActiveKey={keys}>
                             <Collapse.Panel header={val.label} key={keyName}>
                                 <div className={`${containerClass} tw-px-2`}>
                                     {renderToolbar(val, keyName, toolCount+1)}
@@ -398,13 +398,15 @@ const CanvasToolBar = memo(({ isOpen, widgetType, attrs = {} }) => {
                 ${toolbarOpen ? "tw-translate-x-0" : "tw-translate-x-full"} 
                 tw-w-[280px] tw-px-3 tw-p-2 tw-h-[600px] tw-rounded-md tw-z-[1000] tw-shadow-lg 
                 tw-transition-transform tw-duration-[0.3s] tw-overflow-x-hidden
-                tw-flex tw-flex-col tw-gap-2 tw-overflow-y-auto`}
+                tw-flex tw-flex-col tw-gap-2 tw-overflow-y-auto tw-border-[2px] 
+                tw-border-solid tw-border-gray-300`}
 
                 style={{
                     transform: toolbarOpen ? "translateX(0)" : "translateX(calc(100% + 50px))"
                 }}
         >
-            <h3 className="tw-text-lg tw-text-center">
+            <h3 className="tw-text-lg tw-text-center tw-bg-[#FAFAFA] tw-border-[1px] tw-border-solid tw-border-[#D9D9D9]
+                            tw-p-1 tw-px-2 tw-rounded-md tw-font-medium">
                 {capitalize(`${widgetType || ""}`).replace(/_/g, " ")}
             </h3>
 

src/canvas/widgets/base.js

@@ -32,6 +32,7 @@ const ATTRS_KEYS = ['value', 'label', 'tool', 'onChange', 'options', 'toolProps'
 class Widget extends React.Component {
 
     static widgetType = "widget"
+    static displayName = "Widget"
 
     static requirements = [] // requirements for the widgets (libraries) eg: tkvideoplayer, tktimepicker
     static requiredImports = [] // import statements
@@ -347,6 +348,10 @@ class Widget extends React.Component {
         return this.constructor.widgetType
     }
 
+    getDisplayName(){
+        return this.constructor.displayName
+    }
+
     getRequirements(){
         return this.constructor.requirements
     }
@@ -1285,6 +1290,7 @@ class Widget extends React.Component {
                                         style={{
                                          
                                             position: "fixed", // transforms are applied on parent so its going to be relative to parent
+                                            // TODO: this Change left and top with elementRect.left
                                             left: left,
                                             top: top,
 

src/canvas/widgets/widgetDragDrop.js

@@ -3,6 +3,7 @@ import { useDragWidgetContext } from "./draggableWidgetContext"
 import { useDragContext } from "../../components/draggable/draggableContext"
 
 
+// NOTE: not in use
 // FIXME: sometimes even after drag end the showDroppable is visible
 /**
  * @param {} - widgetRef - the widget ref for your widget

src/components/cards.js

@@ -42,7 +42,7 @@ export function SidebarWidgetCard({ name, img, url, license, widgetClass, innerR
                 <div ref={innerRef} className="tw-select-none  tw-h-[200px] tw-w-[230px] tw-flex tw-flex-col 
                                                 tw-rounded-md tw-overflow-hidden 
                                                 tw-gap-2 tw-text-gray-600 tw-bg-[#ffffff44] tw-border-solid tw-border-[1px]
-                                                tw-border-blue-500 tw-shadow-md">
+                                                tw-border-gray-500 tw-shadow-md">
                     <div className="tw-h-[200px] tw-pointer-events-none tw-w-full tw-overflow-hidden">
                         <img src={img} alt={name} className="tw-object-contain tw-h-full tw-w-full tw-select-none" />
                     </div>

src/frameworks/customtk/plugins/analogTimepicker.js

@@ -20,6 +20,7 @@ const Themes = {
 class AnalogTimePicker extends CustomTkBase{
 
     static widgetType = "analog_timepicker"
+    static displayName = "Analog Timepicker"
 
     static requiredImports = [
                                 ...CustomTkBase.requiredImports, 

src/frameworks/customtk/plugins/mapview.js

@@ -13,6 +13,8 @@ import { CustomTkBase } from "../widgets/base"
 class MapView extends CustomTkBase{
 
     static widgetType = "map_view"
+    static displayName = "Map View"
+
 
     static requiredImports = [
         ...CustomTkBase.requiredImports, 

src/frameworks/customtk/plugins/pandasTable.js

@@ -70,6 +70,7 @@ const ResizableTable = ({minRows=5, minCols=5}) => {
 class PandasTable extends CustomTkBase{
 
     static widgetType = "pandas_table"
+    static displayName = "Pandas Table"
 
     static requiredImports = [
         ...CustomTkBase.requiredImports, 

src/frameworks/customtk/plugins/videoPlayer.js

@@ -12,6 +12,7 @@ import { getPythonAssetPath } from "../../utils/pythonFilePath"
 class VideoPlayer extends CustomTkBase{
 
     static widgetType = "video_player"
+    static displayName = "Video Player"
 
     static requiredImports = [
         ...CustomTkBase.requiredImports, 

src/frameworks/customtk/sidebarWidgets.js

@@ -7,7 +7,7 @@ import Label from "./widgets/label"
 import Button from "./widgets/button"
 import OptionMenu from "./widgets/optionMenu"
 import Slider from "./widgets/slider"
-import { CheckBox, RadioButton } from "./widgets/ checkButton"
+import { CheckBox, RadioButton } from "./widgets/checkButton"
 import { Input, Text } from "./widgets/input"
 import SpinBox from "./widgets/spinBox"
 

src/frameworks/customtk/widgets/button.js

@@ -6,6 +6,7 @@ import { CustomTkWidgetBase } from "./base"
 class Button extends CustomTkWidgetBase{
 
     static widgetType = "button"
+    static displayName = "Button"
 
     constructor(props) {
         super(props)

src/frameworks/customtk/widgets/checkButton.js

@@ -8,6 +8,8 @@ import { CustomTkWidgetBase } from "./base"
 export class CheckBox extends CustomTkWidgetBase{
 
     static widgetType = "check_button"
+    static displayName = "Check Box"
+
     constructor(props) {
         super(props)
 

src/frameworks/customtk/widgets/frame.js

@@ -5,6 +5,7 @@ import { CustomTkBase } from "./base"
 class Frame extends CustomTkBase{
 
     static widgetType = "frame"
+    static displayName = "Frame"
 
     constructor(props) {
         super(props)

src/frameworks/customtk/widgets/input.js

@@ -6,6 +6,7 @@ import { CustomTkWidgetBase } from "./base"
 export class Input extends CustomTkWidgetBase{
 
     static widgetType = "entry"
+    static displayName = "Entry"
     
     constructor(props) {
         super(props)

src/frameworks/customtk/widgets/label.js

@@ -7,7 +7,7 @@ import { CustomTkWidgetBase } from "./base"
 class Label extends CustomTkWidgetBase{
 
     static widgetType = "label"
-
+    static displayName = "Label"
 
     constructor(props) {
         super(props)

src/frameworks/customtk/widgets/mainWindow.js

@@ -6,6 +6,7 @@ import { CustomTkBase } from "./base"
 class MainWindow extends CustomTkBase{
 
     static widgetType = "main_window"
+    static displayName = "Main Window"
 
     constructor(props) {
         super(props)

src/frameworks/customtk/widgets/optionMenu.js

@@ -7,6 +7,7 @@ import { convertObjectToKeyValueString, removeKeyFromObject } from "../../../uti
 class OptionMenu extends CustomTkWidgetBase{
 
     static widgetType = "option_menu"
+    static displayName = "Option Menu"
 
     constructor(props) {
         super(props)

src/frameworks/customtk/widgets/slider.js

@@ -7,6 +7,8 @@ import { CustomTkWidgetBase } from "./base"
 class Slider extends CustomTkWidgetBase{
 
     static widgetType = "scale"
+    static displayName = "Scale"
+
     // FIXME: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use 
     constructor(props) {
         super(props)

src/frameworks/customtk/widgets/spinBox.js

@@ -8,6 +8,7 @@ import { CustomTkWidgetBase } from "./base"
 class SpinBox extends CustomTkWidgetBase{
 
     static widgetType = "spin_box"
+    static displayName = "Spin Box"
 
     constructor(props) {
         super(props)

src/frameworks/customtk/widgets/toplevel.js

@@ -5,6 +5,7 @@ import Tools from "../../../canvas/constants/tools"
 class TopLevel extends Widget{
 
     static widgetType = "toplevel"
+    static displayName = "Top Level"
 
     constructor(props) {
         super(props)

src/frameworks/tkinter/plugins/analogTimepicker.js

@@ -20,6 +20,7 @@ const Themes = {
 class AnalogTimePicker extends TkinterBase{
 
     static widgetType = "analog_timepicker"
+    static displayName = "Analog Timepicker"
 
     static requiredImports = [
                                 ...TkinterBase.requiredImports, 

src/frameworks/tkinter/plugins/mapview.js

@@ -13,6 +13,7 @@ import { TkinterBase } from "../widgets/base"
 class MapView extends TkinterBase{
 
     static widgetType = "map_view"
+    static displayName = "Map View"
 
     static requiredImports = [
         ...TkinterBase.requiredImports, 

src/frameworks/tkinter/plugins/pandasTable.js

@@ -70,6 +70,7 @@ const ResizableTable = ({minRows=5, minCols=5}) => {
 class PandasTable extends TkinterBase{
 
     static widgetType = "pandas_table"
+    static displayName = "Pandas Table"
 
     static requiredImports = [
         ...TkinterBase.requiredImports, 

src/frameworks/tkinter/plugins/videoPlayer.js

@@ -12,6 +12,7 @@ import { getPythonAssetPath } from "../../utils/pythonFilePath"
 class VideoPlayer extends TkinterBase{
 
     static widgetType = "video_player"
+    static displayName = "Video Player"
 
     static requiredImports = [
         ...TkinterBase.requiredImports, 

src/frameworks/tkinter/sidebarWidgets.js

@@ -7,7 +7,7 @@ import Label from "./widgets/label"
 import Button from "./widgets/button"
 import OptionMenu from "./widgets/optionMenu"
 import Slider from "./widgets/slider"
-import { CheckBox, RadioButton } from "./widgets/ checkButton"
+import { CheckBox, RadioButton } from "./widgets/checkButton"
 import { Input, Text } from "./widgets/input"
 import SpinBox from "./widgets/spinBox"
 

src/frameworks/tkinter/widgets/button.js

@@ -6,6 +6,7 @@ import { TkinterWidgetBase } from "./base"
 class Button extends TkinterWidgetBase{
 
     static widgetType = "button"
+    static displayName = "Button"
 
     constructor(props) {
         super(props)

src/frameworks/tkinter/widgets/checkButton.js

@@ -8,6 +8,8 @@ import { TkinterWidgetBase } from "./base"
 export class CheckBox extends TkinterWidgetBase{
 
     static widgetType = "check_button"
+    static displayName = "Check Box"
+
     constructor(props) {
         super(props)
 

src/frameworks/tkinter/widgets/frame.js

@@ -5,6 +5,7 @@ import {TkinterBase} from "./base"
 class Frame extends TkinterBase{
 
     static widgetType = "frame"
+    static displayName = "Frame"
 
     constructor(props) {
         super(props)

src/frameworks/tkinter/widgets/input.js

@@ -6,6 +6,7 @@ import { TkinterWidgetBase } from "./base"
 export class Input extends TkinterWidgetBase{
 
     static widgetType = "entry"
+    static displayName = "Entry"
     
     constructor(props) {
         super(props)

src/frameworks/tkinter/widgets/label.js

@@ -7,6 +7,7 @@ import { TkinterWidgetBase } from "./base"
 class Label extends TkinterWidgetBase{
 
     static widgetType = "label"
+    static displayName = "Label"
 
 
     constructor(props) {

src/frameworks/tkinter/widgets/mainWindow.js

@@ -6,6 +6,7 @@ import { TkinterBase } from "./base"
 class MainWindow extends TkinterBase{
 
     static widgetType = "main_window"
+    static displayName = "Main Window"
 
     constructor(props) {
         super(props)

src/frameworks/tkinter/widgets/optionMenu.js

@@ -7,6 +7,7 @@ import { convertObjectToKeyValueString } from "../../../utils/common"
 class OptionMenu extends TkinterWidgetBase{
 
     static widgetType = "option_menu"
+    static displayName = "Option Menu"
 
     constructor(props) {
         super(props)

src/frameworks/tkinter/widgets/slider.js

@@ -7,6 +7,8 @@ import {TkinterBase, TkinterWidgetBase} from "./base"
 class Slider extends TkinterWidgetBase{
 
     static widgetType = "scale"
+    static displayName = "Scale"
+
     // FIXME: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use 
     constructor(props) {
         super(props)

src/frameworks/tkinter/widgets/spinBox.js

@@ -8,6 +8,7 @@ import {TkinterBase, TkinterWidgetBase} from "./base"
 class SpinBox extends TkinterWidgetBase{
 
     static widgetType = "spin_box"
+    static displayName = "Spin Box"
 
     constructor(props) {
         super(props)

src/frameworks/tkinter/widgets/toplevel.js

@@ -5,6 +5,8 @@ import Tools from "../../../canvas/constants/tools"
 class TopLevel extends Widget{
 
     static widgetType = "toplevel"
+    static displayName = "Top Level"
+
 
     constructor(props) {
         super(props)

src/sidebar/sidebar.js

@@ -62,7 +62,7 @@ function Sidebar({tabs}){
                 >
             
 
-            <div className="tw-min-w-[80px] tw-w-[80px] tw-h-full tw-flex tw-flex-col tw-gap-4 tw-p-3 tw-place-items-center">
+            <div className="tw-min-w-[80px] tw-w-[80px] tw-bg-gray-100 tw-h-full tw-flex tw-flex-col tw-gap-4 tw-p-3 tw-place-items-center">
                 {
                     sidebarTabs.map((tab, index) => {
                         return (
@@ -113,7 +113,9 @@ function Sidebar({tabs}){
                 </div>
             </div>
 
-            <div className="tw-w-full tw-h-full tw-bg-inherit tw-flex tw-flex-col tw-overflow-x-hidden" ref={sideBarExtraRef}>
+            <div className="tw-w-full tw-h-full tw-bg-inherit tw-rounded-lg
+                            tw-shadow-[rgb(59,130,246)] !tw-shadow-[rgba(179,116,206,0.5)_-3px_0px_10px_] tw-flex tw-flex-col tw-overflow-x-hidden" 
+                ref={sideBarExtraRef}>
                 <div className="tw-w-full tw-h-[50px] tw-flex tw-place-content-end tw-p-1">
                     <button className="tw-outline-none tw-bg-transparent tw-border-none tw-text-gray-600 tw-cursor-pointer tw-text-xl"
                             onClick={closeSidebar}

src/sidebar/treeviewContainer.js

@@ -13,7 +13,7 @@ import { useWidgetContext } from "../canvas/context/widgetContext"
 function transformWidgets(widgets, widgetRefs, isTopLevel=true) {
     // console.log("Wdiegts refs: ", widgetRefs)
     return widgets.map(widget => ({
-      title: widget.widgetType.name, // Assuming widgetType is a class
+      title: widgetRefs.current[widget.id].current.getDisplayName(), // Assuming widgetType is a class
       key: widget.id,
       isTopLevel: isTopLevel,
       widgetRef: widgetRefs.current[widget.id],

src/styles/index.css

@@ -13,7 +13,7 @@ body {
 
 /* width */
 ::-webkit-scrollbar {
-	width: 8px;
+	width: 6px;
 }
 
 /* Track */