Make panels collapsible (#239)

* Make panels collapsible

- Add Panel component with collapse logic
- Use the component in all the necessary panel groups

* Remove unnecessary container from PanelCanvas

* Add "hide property" to Pane component to hide Panel contents using a prop

- Instead of doing conditional rendering, pass the condition to Panel as props

* Change collapse icon rotation for closed

- Use one icon and use CSS transforms to rotate it

* Remove unnecessary imports from PanelSelection

src/components/panels/PanelCanvas.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 
 import { ColorPicker } from "../ColorPicker";
+import { Panel } from "../Panel";
 
 interface PanelCanvasProps {
   viewBackgroundColor: string;
@@ -14,22 +15,19 @@ export const PanelCanvas: React.FC<PanelCanvasProps> = ({
   onClearCanvas
 }) => {
   return (
-    <>
-      <h4>Canvas</h4>
-      <div className="panelColumn">
-        <h5>Canvas Background Color</h5>
-        <ColorPicker
-          color={viewBackgroundColor}
-          onChange={color => onViewBackgroundColorChange(color)}
-        />
-        <button
-          type="button"
-          onClick={onClearCanvas}
-          title="Clear the canvas & reset background color"
-        >
-          Clear canvas
-        </button>
-      </div>
-    </>
+    <Panel title="Canvas">
+      <h5>Canvas Background Color</h5>
+      <ColorPicker
+        color={viewBackgroundColor}
+        onChange={color => onViewBackgroundColorChange(color)}
+      />
+      <button
+        type="button"
+        onClick={onClearCanvas}
+        title="Clear the canvas & reset background color"
+      >
+        Clear canvas
+      </button>
+    </Panel>
   );
 };