Change collapse icon rotation for closed

- Use one icon and use CSS transforms to rotate it

src/components/Panel.tsx

@@ -27,7 +27,15 @@ export const Panel: React.FC<PanelProps> = ({
           setCollapsed(collapsed => !collapsed);
         }}
       >
-        {collapsed ? "▲" : "▼"}
+        {
+          <span
+            className={`btn-panel-collapse-icon ${
+              collapsed ? "btn-panel-collapse-icon-closed" : ""
+            }`}
+          >
+            ▼
+          </span>
+        }
       </button>
       {!collapsed && <div className="panelColumn">{children}</div>}
     </div>

src/styles.scss

@@ -38,6 +38,16 @@ body {
       right: 5px;
       background: none;
       margin: 0px;
+      color: black;
+    }
+
+    .btn-panel-collapse-icon {
+      transform: none;
+      display: inline-block;
+    }
+
+    .btn-panel-collapse-icon-closed {
+      transform: rotateZ(90deg);
     }
   }