From b3ab3b119385698ccebb3d1c42cc2a08a1df4df1 Mon Sep 17 00:00:00 2001
From: paul <paul.sajo.official@gmail.com>
Date: Tue, 11 Mar 2025 14:00:09 +0530
Subject: [PATCH] styling updates

---
 src/canvas/canvas.js       |  2 +-
 src/canvas/toolbar.js      | 10 ++++++----
 src/canvas/widgets/base.js |  1 +
 src/components/cards.js    |  2 +-
 src/sidebar/sidebar.js     |  6 ++++--
 src/styles/index.css       |  2 +-
 6 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/canvas/canvas.js b/src/canvas/canvas.js
index 924a061..4ac96f5 100644
--- a/src/canvas/canvas.js
+++ b/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> */}
diff --git a/src/canvas/toolbar.js b/src/canvas/toolbar.js
index 094db7d..2e3a830 100644
--- a/src/canvas/toolbar.js
+++ b/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>
 
diff --git a/src/canvas/widgets/base.js b/src/canvas/widgets/base.js
index dfb0d89..09e4831 100644
--- a/src/canvas/widgets/base.js
+++ b/src/canvas/widgets/base.js
@@ -1290,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,
 
diff --git a/src/components/cards.js b/src/components/cards.js
index f337d57..3ef2547 100644
--- a/src/components/cards.js
+++ b/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>
diff --git a/src/sidebar/sidebar.js b/src/sidebar/sidebar.js
index c28075b..fa9826b 100644
--- a/src/sidebar/sidebar.js
+++ b/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}
diff --git a/src/styles/index.css b/src/styles/index.css
index 12b2462..010bd75 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -13,7 +13,7 @@ body {
 
 /* width */
 ::-webkit-scrollbar {
-	width: 8px;
+	width: 6px;
 }
 
 /* Track */