From d1f85845b04997783fc491aa21b3818d655ea396 Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Mon, 9 Dec 2024 16:27:43 -0500
Subject: [PATCH] style: plus/minus icons

---
 components/base/Accordion.vue           | 15 ++++++---------
 components/storage/ServiceSelection.vue |  2 +-
 2 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/components/base/Accordion.vue b/components/base/Accordion.vue
index 0e7def6..c9802d6 100644
--- a/components/base/Accordion.vue
+++ b/components/base/Accordion.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div
-      class="card has-background-info"
+      class="card has-background-info is-hoverable"
       :class="{ 'not-expanded': !expanded}"
     >
       <header class="card-header" @click="toggleCardState">
@@ -9,8 +9,11 @@
           {{ title }}
         </p>
         <a class="card-header-icon">
-          <span class="icon">
-            <i class="mdi mdi-menu-up mdi-24px" />
+          <span v-if="expanded === false" class="icon">
+            <i class="mdi mdi-plus mdi-24px" />
+          </span>
+          <span v-else class="icon">
+            <i class="mdi mdi-minus mdi-24px" />
           </span>
         </a>
       </header>
@@ -28,7 +31,6 @@
 export default {
   props: {
     title: String,
-    backgroundColor: String,
     expandAll: Boolean,
   },
   data() {
@@ -54,11 +56,6 @@ export default {
 
   .card-header {
     cursor: pointer;
-
-    .icon {
-      transform: rotate(180deg);
-      transition: transform 150ms ease-out;
-    }
   }
 
   .card-content {
diff --git a/components/storage/ServiceSelection.vue b/components/storage/ServiceSelection.vue
index c74b536..55eaf88 100644
--- a/components/storage/ServiceSelection.vue
+++ b/components/storage/ServiceSelection.vue
@@ -30,7 +30,7 @@
                 ]"
             /></span>
           </button>
-          <Accordion :title="humanize(s.name)" background-color="info">
+          <Accordion :title="humanize(s.name)">
             <div class="content" v-html="$md.render(s.description || '')"></div>
           </Accordion>
         </div>