User chevron and make entire header clickable

client/src/styles/partials/generic/drawers.scss

@@ -1,8 +1,11 @@
 .bd-drawer {
+    .bd-form-header {
+        cursor: pointer;
+    }
     .bd-drawer-open-button {
         svg {
-            transition: transform 0.2s ease;
-            transform: rotate(0deg);
+            transition: transform 0.5s ease;
+            transform: none;
         }
     }
 
@@ -18,7 +21,7 @@
     &.bd-drawer-open {
         .bd-drawer-open-button {
             svg {
-                transform: rotate(45deg);
+                transform: scaleY(-1);
             }
         }
 

client/src/ui/components/common/Drawer.vue

@@ -10,9 +10,9 @@
 
 <template>
     <div :class="['bd-drawer', {'bd-drawer-open': open}]">
-        <div class="bd-form-header bd-drawer-header">
+        <div class="bd-form-header bd-drawer-header" @click="() => open = !open">
             <span class="bd-form-header-text">{{ label }}</span>
-            <span class="bd-form-header-button bd-drawer-open-button" @click="() => open = !open"><MiPlus /></span>
+            <span class="bd-form-header-button bd-drawer-open-button"><MiChevronDown /></span>
         </div>
         <div class="bd-drawer-contents">
             <slot />
@@ -21,14 +21,14 @@
 </template>
 
 <script>
-    import { MiPlus } from './MaterialIcon';
+    import { MiChevronDown } from './MaterialIcon';
 
     export default {
         props: [
             'label'
         ],
         components: {
-            MiPlus
+            MiChevronDown
         },
         data() {
             return {