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

assets/styles/components.scss

@@ -974,6 +974,8 @@ tr.button-transparent {
   display: flex;
   grid-gap: var(--spacing-card-sm);
   flex-wrap: wrap;
+  margin-top: var(--spacing-card-md);
+  justify-content: right;
 }
 
 .multiselect--above .multiselect__content-wrapper {
@@ -1339,58 +1341,6 @@ button {
   }
 }
 
-.legacy-label-styles {
-  label {
-    display: flex;
-    flex-direction: column;
-    margin-bottom: 0.5rem;
-
-    &.no-margin {
-      margin-bottom: 0;
-    }
-
-    @media screen and (min-width: 1024px) {
-      flex-direction: row;
-      align-items: center;
-    }
-
-    > span {
-      flex: 2;
-      padding-right: var(--spacing-card-lg);
-
-      &.no-padding {
-        padding-right: 0;
-      }
-    }
-
-    > input,
-    > .multiselect,
-    > .input-group {
-      flex: 3;
-      height: fit-content;
-    }
-
-    > input[type='button'] {
-      height: fit-content;
-      flex: 1;
-    }
-
-    > input[type='button']:hover {
-      cursor: pointer;
-    }
-
-    > div,
-    > a {
-      height: fit-content;
-      flex: 1;
-    }
-
-    > div:hover {
-      cursor: pointer;
-    }
-  }
-}
-
 .input-group {
   display: flex;
   flex-direction: row;

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">
+      <label for="report-type">
-        <span>
+        <span class="label__title">Reason</span>
-          <strong>Reason</strong>
-        </span>
       </label>
       <Multiselect
         id="report-type"
@@ -31,10 +29,11 @@
         :show-labels="false"
         placeholder="Choose report type"
       />
-      <label class="report-label" for="additional-information">
+      <label for="report-body">
-        <strong>Additional information</strong>
+        <span class="label__title">Additional information</span>
-        <span>
+        <span class="label__description add-line-height">
-          Include links and images if possible. This editor supports
+          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 {
+  .add-line-height {
-    margin-bottom: 1rem;
+    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;

pages/[type]/[id]/gallery.vue

@@ -804,10 +804,5 @@ export default defineNuxtComponent({
       background-color: #000000;
     }
   }
-
-  .button-group {
-    margin-left: auto;
-    margin-top: 1.5rem;
-  }
 }
 </style>

pages/[type]/[id]/settings/index.vue

@@ -466,4 +466,8 @@ svg {
   min-height: 8rem;
   max-width: 24rem;
 }
+
+.multiselect {
+  max-width: 15rem;
+}
 </style>

pages/[type]/[id]/settings/links.vue

@@ -276,4 +276,8 @@ export default defineNuxtComponent({
     max-width: 26rem;
   }
 }
+
+.multiselect {
+  max-width: 15rem;
+}
 </style>

pages/[type]/[id]/version/[version].vue

@@ -1596,10 +1596,5 @@ export default defineNuxtComponent({
   .multiselect {
     max-width: 20rem;
   }
-
-  .button-group {
-    margin-left: auto;
-    margin-top: 1.5rem;
-  }
 }
 </style>

pages/user/[id].vue

@@ -500,10 +500,6 @@ export default defineNuxtComponent({
   }
 }
 
-.button-group:first-child {
-  margin-left: auto;
-}
-
 .textarea-wrapper {
   height: 10rem;
 }