Miscellaneous CSS cleanup (and make the report modal look better) (#1334)

components/ui/ModalConfirm.vue

@@ -123,10 +123,5 @@ export default {
       max-width: 100%;
     }
   }
-
-  .button-group {
-    margin-left: auto;
-    margin-top: 1.5rem;
-  }
 }
 </style>

components/ui/ModalReport.vue

@@ -1,6 +1,6 @@
 <template>
   <Modal ref="modal" :header="`Report ${itemType}`">
-    <div class="modal-report legacy-label-styles">
+    <div class="modal-report universal-labels">
       <div class="markdown-body">
         <p>
           Modding should be safe for everyone, so we take abuse and malicious intent seriously at
@@ -15,10 +15,8 @@
           Discord invite, consider reporting it there.
         </p>
       </div>
-      <label class="report-label" for="report-type">
-        <span>
-          <strong>Reason</strong>
-        </span>
+      <label for="report-type">
+        <span class="label__title">Reason</span>
       </label>
       <Multiselect
         id="report-type"
@@ -31,10 +29,11 @@
         :show-labels="false"
         placeholder="Choose report type"
       />
-      <label class="report-label" for="additional-information">
-        <strong>Additional information</strong>
-        <span>
-          Include links and images if possible. This editor supports
+      <label for="report-body">
+        <span class="label__title">Additional information</span>
+        <span class="label__description add-line-height">
+          Please provide additional context about your report. Include links and images if possible.
+          <strong>Empty reports will be closed.</strong> This editor supports
           <a
             class="text-link"
             href="https://docs.modrinth.com/docs/tutorials/markdown/"
@@ -126,6 +125,7 @@ export default {
         })
 
         this.$refs.modal.hide()
+        await this.$router.push('/dashboard/reports')
       } catch (err) {
         this.$notify({
           group: 'main',
@@ -149,24 +149,13 @@ export default {
   display: flex;
   flex-direction: column;
 
-  .markdown-body {
-    margin-bottom: 1rem;
+  .add-line-height {
+    line-height: 1.5;
+    margin-bottom: 0;
   }
 
   .multiselect {
     max-width: 20rem;
-    margin-bottom: 1rem;
-  }
-
-  .report-label {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .button-group {
-    margin-left: auto;
-    margin-top: 1.5rem;
   }
 
   .textarea-wrapper {

components/ui/ModalTransfer.vue

@@ -187,11 +187,6 @@ export default {
     }
   }
 
-  .button-group {
-    margin-top: var(--spacing-card-md);
-    justify-content: right;
-  }
-
   strong {
     color: var(--color-text-dark);
     font-weight: 500;