cleanup rules

src/pages/rules/EditRuleBook.vue

@@ -6,6 +6,7 @@ import log from "loglevel";
 import {activityTypes, RuleInput, Rules, useRuleBooksStore} from "@/rules";
 import {PlusIcon, TrashIcon} from "@heroicons/vue/24/outline";
 import {routeNames} from "@/routes";
+import {Dropdown} from "@/components";
 
 const ruleBookId = ref<string>();
 const name = ref<string>('');
@@ -89,8 +90,13 @@ watch(useRoute(), async route => {
         </div>
       </div>
       <div class="flex flex-col grow border-b-1" v-for="activityType in activityTypes" :key="activityType.key">
-        <span>{{ activityType.name }}</span>
-        <RuleInput :ledgerRefs="ledgerRefs" v-model="rules[activityType.key]" />
+        <Dropdown :inline="true" :autoClose="false" class="rule-dropdown">
+          <template #button>
+            <span>{{ activityType.name }}</span>
+          </template>
+          <RuleInput :ledgerRefs="ledgerRefs" v-model="rules[activityType.key]" />
+        </Dropdown>
+
       </div>
     </div>
     <div class="mt-2 justify-end flex">
@@ -99,4 +105,16 @@ watch(useRoute(), async route => {
       </div>
     </div>
   </div>
-</template>
+</template>
+
+<style scoped>
+@reference "tailwindcss";
+
+.rule-dropdown :deep(>button) {
+  @apply bg-slate-800 hover:bg-slate-800 border-none flex items-center w-full;
+}
+
+.rule-dropdown.dropdown-open :deep(>button) {
+  @apply bg-slate-800 rounded-b-none;
+}
+</style>