style: match colors

brown-ccv · Dec 6, 2024 · 57e4946 · 57e4946
1 parent a52e5ee
commit 57e4946
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/components/base/Accordion.vue b/components/base/Accordion.vue
@@ -1,13 +1,16 @@
 <template>
   <div>
-    <div class="card" :class="{ 'not-expanded': !expanded }">
+    <div
+      class="card has-background-"
+      :class="{ 'not-expanded': !expanded, 'has-background-': backgroundColor }"
+    >
       <header class="card-header" @click="toggleCardState">
         <p class="card-header-title">
           {{ title }}
         </p>
         <a class="card-header-icon">
           <span class="icon">
-            <i class="fa fa-angle-up"></i>
+            <i class="mdi mdi-information-outline mdi-24px" />
           </span>
         </a>
       </header>
@@ -25,6 +28,7 @@
 export default {
   props: {
     title: String,
+    backgroundColor: String,
     expandAll: Boolean,
   },
   data() {

diff --git a/components/storage/ServiceSelection.vue b/components/storage/ServiceSelection.vue
@@ -10,7 +10,7 @@
           matchingServices[i] ? 'has-background-info' : 'has-background-light',
         ]"
       >
-        <div class="is-flex">
+        <div class="is-flex is-align-items-center">
           <button
             class="button-nostyle"
             type="button"
@@ -30,7 +30,7 @@
                 ]"
             /></span>
           </button>
-          <Accordion :title="humanize(s.name)">
+          <Accordion :title="humanize(s.name)" background-color="info">
             <div class="content" v-html="$md.render(s.description || '')"></div>
           </Accordion>
         </div>