From d2d699df389d0b89d084db12dd372acb5465bc0a Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Wed, 18 Sep 2024 15:10:44 -0400
Subject: [PATCH 1/4] feat: match dropdown to MultipleChoice

---
 components/storage/ServiceSelection.vue | 48 +++++++------------------
 1 file changed, 13 insertions(+), 35 deletions(-)

diff --git a/components/storage/ServiceSelection.vue b/components/storage/ServiceSelection.vue
index 30ec05a..0428fbc 100644
--- a/components/storage/ServiceSelection.vue
+++ b/components/storage/ServiceSelection.vue
@@ -30,40 +30,23 @@
           /></span>
         </button>
         <p class="is-size-5 has-text-bold">{{ humanize(s.name) }}</p>
-        <span class="icon is-clickable" @click="toggleShowModal(s)"
-          ><i class="mdi mdi-information"
-        /></span>
+        <details v-if="s.description" class="service-details mb-4">
+          <summary>
+            <span class="icon has-text-info is-medium">
+              <i class="mdi mdi-information-outline mdi-24px" />
+            </span>
+          </summary>
+          <div class="content" v-html="$md.render(s.description || '')"></div>
+        </details>
       </div>
-      <DModal
-        v-if="showModal"
-        variant="white"
-        accent="info"
-        width="large"
-        close-options="both"
-        close-button-text="Dismiss"
-        @close="showModal = !showModal"
-      >
-        <template #content>
-          <div class="content">
-            <h2 class="title">
-              {{ humanize(modalData.service) }}
-            </h2>
-            <p v-html="$md.render(modalData.description || '')" />
-          </div>
-        </template>
-      </DModal>
     </div>
   </div>
 </template>
 
 <script>
-import DModal from '@/components/base/DModal.vue';
 import { humanize } from '@/utils';
 
 export default {
-  components: {
-    DModal,
-  },
   props: {
     services: {
       type: Array,
@@ -78,20 +61,10 @@ export default {
       required: true,
     },
   },
-  data() {
-    return {
-      showModal: false,
-      modalData: '',
-    };
-  },
   methods: {
     change(id) {
       this.$emit('service', { id });
     },
-    toggleShowModal(data) {
-      this.modalData = data;
-      this.showModal = true;
-    },
     humanize,
   },
 };
@@ -132,4 +105,9 @@ export default {
   font-weight: bold;
   font-size: 1.1rem;
 }
+
+.service-details {
+  cursor: pointer;
+  max-width: 50ch;
+}
 </style>

From 32a613f3724a4c09665403d373cb6af3ff0ad90f Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Wed, 18 Sep 2024 15:26:01 -0400
Subject: [PATCH 2/4] style: details column

---
 components/storage/ServiceSelection.vue | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/components/storage/ServiceSelection.vue b/components/storage/ServiceSelection.vue
index 0428fbc..5c59dc7 100644
--- a/components/storage/ServiceSelection.vue
+++ b/components/storage/ServiceSelection.vue
@@ -29,15 +29,18 @@
               ]"
           /></span>
         </button>
-        <p class="is-size-5 has-text-bold">{{ humanize(s.name) }}</p>
-        <details v-if="s.description" class="service-details mb-4">
-          <summary>
-            <span class="icon has-text-info is-medium">
-              <i class="mdi mdi-information-outline mdi-24px" />
-            </span>
-          </summary>
-          <div class="content" v-html="$md.render(s.description || '')"></div>
-        </details>
+        <div class="is-flex is-flex-direction-column">
+          <p class="is-size-5 has-text-bold">{{ humanize(s.name) }}</p>
+          <details v-if="s.description" class="service-details mb-4">
+            <summary>
+              <span class="icon is-medium">
+                <i class="mdi mdi-information mdi-24px" />
+              </span>
+            </summary>
+            <div class="content" v-html="$md.render(s.description || '')"></div>
+          </details>
+        </div>
+
       </div>
     </div>
   </div>

From 4fb9232ffd0af75c2d7442577a14cf85f3f54f4e Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Wed, 18 Sep 2024 16:00:56 -0400
Subject: [PATCH 3/4] style: info on new line

---
 components/storage/ServiceSelection.vue | 57 ++++++++++++-------------
 1 file changed, 28 insertions(+), 29 deletions(-)

diff --git a/components/storage/ServiceSelection.vue b/components/storage/ServiceSelection.vue
index 5c59dc7..0fb9dce 100644
--- a/components/storage/ServiceSelection.vue
+++ b/components/storage/ServiceSelection.vue
@@ -10,37 +10,36 @@
           matchingServices[i] ? 'has-background-info' : 'has-background-light',
         ]"
       >
-        <button
-          class="button-nostyle"
-          type="button"
-          :disabled="!matchingServices[i]"
-          @click="change(i)"
-        >
-          <span class="icon is-size-2"
-            ><i
-              :class="[
-                'mdi',
-                selectedServices[i] ||
-                (selectedServices[i] === null && matchingServices[i])
-                  ? 'mdi-checkbox-marked'
-                  : matchingServices[i]
-                  ? 'mdi-checkbox-blank'
-                  : 'mdi-checkbox-blank-off',
-              ]"
-          /></span>
-        </button>
-        <div class="is-flex is-flex-direction-column">
+        <div>
+          <button
+            class="button-nostyle"
+            type="button"
+            :disabled="!matchingServices[i]"
+            @click="change(i)"
+          >
+            <span class="icon is-size-2"
+              ><i
+                :class="[
+                  'mdi',
+                  selectedServices[i] ||
+                  (selectedServices[i] === null && matchingServices[i])
+                    ? 'mdi-checkbox-marked'
+                    : matchingServices[i]
+                    ? 'mdi-checkbox-blank'
+                    : 'mdi-checkbox-blank-off',
+                ]"
+            /></span>
+          </button>
           <p class="is-size-5 has-text-bold">{{ humanize(s.name) }}</p>
-          <details v-if="s.description" class="service-details mb-4">
-            <summary>
-              <span class="icon is-medium">
-                <i class="mdi mdi-information mdi-24px" />
-              </span>
-            </summary>
-            <div class="content" v-html="$md.render(s.description || '')"></div>
-          </details>
         </div>
-
+        <details v-if="s.description" class="service-details mb-4">
+          <summary>
+            <span class="icon is-medium">
+              <i class="mdi mdi-information mdi-24px" />
+            </span>
+          </summary>
+          <div class="content" v-html="$md.render(s.description || '')"></div>
+        </details>
       </div>
     </div>
   </div>

From 6d73b3f6da442fa0667b637a963afc035f3793fc Mon Sep 17 00:00:00 2001
From: Ellen Duong <shi.ellenduong@gmail.com>
Date: Thu, 3 Oct 2024 08:25:54 -0400
Subject: [PATCH 4/4] Update components/storage/ServiceSelection.vue

---
 components/storage/ServiceSelection.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/storage/ServiceSelection.vue b/components/storage/ServiceSelection.vue
index 0fb9dce..ae039b7 100644
--- a/components/storage/ServiceSelection.vue
+++ b/components/storage/ServiceSelection.vue
@@ -32,7 +32,7 @@
           </button>
           <p class="is-size-5 has-text-bold">{{ humanize(s.name) }}</p>
         </div>
-        <details v-if="s.description" class="service-details mb-4">
+        <details v-if="s.description" class="service-details mb-4 ml-4">
           <summary>
             <span class="icon is-medium">
               <i class="mdi mdi-information mdi-24px" />