feat: Adds the ability to delete a portal (#5305)

app/javascript/dashboard/components/ModalHeader.vue

@@ -6,6 +6,9 @@
     </h2>
     <p v-if="headerContent" class="small-12 column wrap-content">
       {{ headerContent }}
+      <span v-if="headerContentValue" class="content-value">
+        {{ headerContentValue }}
+      </span>
     </p>
     <slot />
   </div>
@@ -22,6 +25,10 @@ export default {
       type: String,
       default: '',
     },
+    headerContentValue: {
+      type: String,
+      default: '',
+    },
     headerImage: {
       type: String,
       default: '',
@@ -32,5 +39,8 @@ export default {
 <style scoped lang="scss">
 .wrap-content {
   word-wrap: break-word;
+  .content-value {
+    font-weight: var(--font-weight-bold);
+  }
 }
 </style>

app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue

@@ -5,9 +5,10 @@
         {{ $t(`SIDEBAR.${menuItem.label}`) }}
       </span>
       <div v-if="isHelpCenterSidebar" class="submenu-icons">
+        <!-- Hidden since this is in V2
         <div class="submenu-icon">
           <fluent-icon icon="search" size="16" />
-        </div>
+        </div> -->
         <div class="submenu-icon" @click="onClickOpen">
           <fluent-icon icon="add" size="16" />
         </div>

app/javascript/dashboard/components/ui/WootButton.vue

@@ -14,7 +14,9 @@
       :icon="icon"
       :icon-size="iconSize"
     />
-    <span v-if="$slots.default" class="button__content"><slot /></span>
+    <span v-if="$slots.default" class="button__content">
+      <slot />
+    </span>
   </button>
 </template>
 <script>

app/javascript/dashboard/components/widgets/modal/DeleteModal.vue

@@ -1,13 +1,22 @@
 <template>
   <modal :show.sync="show" :on-close="onClose">
-    <woot-modal-header :header-title="title" :header-content="message" />
+    <woot-modal-header
+      :header-title="title"
+      :header-content="message"
+      :header-content-value="messageValue"
+    />
     <div class="modal-footer delete-item">
-      <button class="alert button nice text-truncate" @click="onConfirm">
-        {{ confirmText }}
-      </button>
-      <button class="button clear text-truncate" @click="onClose">
+      <woot-button variant="clear" class="action-button" @click="onClose">
         {{ rejectText }}
-      </button>
+      </woot-button>
+      <woot-button
+        color-scheme="alert"
+        class="action-button"
+        variant="smooth"
+        @click="onConfirm"
+      >
+        {{ confirmText }}
+      </woot-button>
     </div>
   </modal>
 </template>
@@ -25,8 +34,14 @@ export default {
     onConfirm: { type: Function, default: () => {} },
     title: { type: String, default: '' },
     message: { type: String, default: '' },
+    messageValue: { type: String, default: '' },
     confirmText: { type: String, default: '' },
     rejectText: { type: String, default: '' },
   },
 };
 </script>
+<style lang="scss" scoped>
+.action-button {
+  max-width: var(--space-giga);
+}
+</style>