fix borders when element is selected

src/components/area.jsx

@@ -61,10 +61,13 @@ export default function Area(props) {
         onMouseDown={props.onMouseDown}
       >
         <div
-          className={`${
+          className={`border-2 ${
             hovered
-              ? "border-4 border-dashed border-[#5891db]"
+              ? "border-dashed border-blue-500"
-              : "border-2 border-slate-400"
+              : selectedElement.element === ObjectType.AREA &&
+                selectedElement.id === props.areaData.id
+              ? "border-blue-500"
+              : "border-slate-400"
           } w-full h-full cursor-move rounded relative`}
         >
           <div
@@ -310,7 +313,7 @@ export default function Area(props) {
             r={6}
             fill={settings.mode === "light" ? "white" : "rgb(28, 31, 35)"}
             stroke="#5891db"
-            strokeWidth={3}
+            strokeWidth={2}
             cursor="nwse-resize"
             onMouseDown={(e) => handleMouseDown(e, "tl")}
           />
@@ -320,7 +323,7 @@ export default function Area(props) {
             r={6}
             fill={settings.mode === "light" ? "white" : "rgb(28, 31, 35)"}
             stroke="#5891db"
-            strokeWidth={3}
+            strokeWidth={2}
             cursor="nesw-resize"
             onMouseDown={(e) => handleMouseDown(e, "tr")}
           />
@@ -330,7 +333,7 @@ export default function Area(props) {
             r={6}
             fill={settings.mode === "light" ? "white" : "rgb(28, 31, 35)"}
             stroke="#5891db"
-            strokeWidth={3}
+            strokeWidth={2}
             cursor="nesw-resize"
             onMouseDown={(e) => handleMouseDown(e, "bl")}
           />
@@ -340,7 +343,7 @@ export default function Area(props) {
             r={6}
             fill={settings.mode === "light" ? "white" : "rgb(28, 31, 35)"}
             stroke="#5891db"
-            strokeWidth={3}
+            strokeWidth={2}
             cursor="nwse-resize"
             onMouseDown={(e) => handleMouseDown(e, "br")}
           />

src/components/control_panel.jsx

@@ -837,9 +837,6 @@ export default function ControlPanel(props) {
         function: resetView,
         shortcut: "Ctrl+R",
       },
-      "View schema": {
-        function: () => {},
-      },
       Grid: {
         function: viewGrid,
         shortcut: "Ctrl+Shift+G",

src/components/note.jsx

@@ -53,9 +53,17 @@ export default function Note(props) {
           props.data.y + props.data.height - r
         } L${props.data.x} ${props.data.y + fold}`}
         fill={props.data.color}
-        stroke="#665b25"
+        stroke={
+          hovered
+            ? "rgb(59 130 246)"
+            : selectedElement.element === ObjectType.NOTE &&
+              selectedElement.id === props.data.id
+            ? "rgb(59 130 246)"
+            : "rgb(168 162 158)"
+        }
+        strokeDasharray={hovered ? 4 : 0}
         strokeLinejoin="round"
-        strokeWidth="0.6"
+        strokeWidth="1.2"
       />
       <path
         d={`M${props.data.x} ${props.data.y + fold} L${
@@ -66,9 +74,17 @@ export default function Note(props) {
           props.data.y + fold
         } Z`}
         fill={props.data.color}
-        stroke="#665b25"
+        stroke={
+          hovered
+            ? "rgb(59 130 246)"
+            : selectedElement.element === ObjectType.NOTE &&
+              selectedElement.id === props.data.id
+            ? "rgb(59 130 246)"
+            : "rgb(168 162 158)"
+        }
+        strokeDasharray={hovered ? 4 : 0}
         strokeLinejoin="round"
-        strokeWidth="0.6"
+        strokeWidth="1.2"
       />
       <foreignObject
         x={props.data.x}

src/components/table.jsx

@@ -23,6 +23,7 @@ import {
   TextArea,
   Card,
   Checkbox,
+  InputNumber,
   TagInput,
   Row,
   Col,
@@ -77,10 +78,13 @@ export default function Table(props) {
         }}
       >
         <div
-          className={`border-2 border-gray-400 ${
+          className={`border-2 ${
-            props.active && !props.moving && "border-blue-500 border-4"
+            isHovered
-          } ${
+              ? "border-dashed border-blue-500"
-            props.moving && "border-blue-500 border-4 border-dashed"
+              : selectedElement.element === ObjectType.TABLE &&
+                selectedElement.id === props.tableData.id
+              ? "border-blue-500"
+              : "border-slate-400"
           } select-none rounded-lg w-full ${
             settings.mode === "light"
               ? "bg-zinc-100 text-zinc-800"
@@ -519,8 +523,8 @@ export default function Table(props) {
                       {f.type === "VARCHAR" && (
                         <>
                           <div className="font-semibold">Length</div>
-                          <Input
+                          <InputNumber
-                            className="my-2"
+                            className="my-2 w-full"
                             placeholder="Set length"
                             value={f.length}
                             onChange={(value) =>

src/components/table_overview.jsx

@@ -15,6 +15,7 @@ import {
   Button,
   Card,
   TagInput,
+  InputNumber,
   Popover,
   Checkbox,
   Select,
@@ -342,8 +343,8 @@ export default function TableOverview(props) {
                             {f.type === "VARCHAR" && (
                               <>
                                 <div className="font-semibold">Length</div>
-                                <Input
+                                <InputNumber
-                                  className="my-2"
+                                  className="my-2 w-full"
                                   placeholder="Set length"
                                   value={f.length}
                                   onChange={(value) =>