From 57964282ee52d5689dbb9a53a62d6681fdabb2a8 Mon Sep 17 00:00:00 2001
From: Emma Alexia Triphora <emma@modrinth.com>
Date: Thu, 24 Aug 2023 15:21:12 -0400
Subject: [PATCH] Miscellaneous CSS cleanup (and make the report modal look
 better) (#1334)

---
 assets/styles/components.scss           | 54 +------------------------
 components/ui/ModalConfirm.vue          |  5 ---
 components/ui/ModalReport.vue           | 35 ++++++----------
 components/ui/ModalTransfer.vue         |  5 ---
 pages/[type]/[id]/gallery.vue           |  5 ---
 pages/[type]/[id]/settings/index.vue    |  4 ++
 pages/[type]/[id]/settings/links.vue    |  4 ++
 pages/[type]/[id]/version/[version].vue |  5 ---
 pages/user/[id].vue                     |  4 --
 9 files changed, 22 insertions(+), 99 deletions(-)

diff --git a/assets/styles/components.scss b/assets/styles/components.scss
index b497578bb..4482acae7 100644
--- a/assets/styles/components.scss
+++ b/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;
diff --git a/components/ui/ModalConfirm.vue b/components/ui/ModalConfirm.vue
index d9c2a88b9..e796c9d25 100644
--- a/components/ui/ModalConfirm.vue
+++ b/components/ui/ModalConfirm.vue
@@ -123,10 +123,5 @@ export default {
       max-width: 100%;
     }
   }
-
-  .button-group {
-    margin-left: auto;
-    margin-top: 1.5rem;
-  }
 }
 </style>
diff --git a/components/ui/ModalReport.vue b/components/ui/ModalReport.vue
index 8af756686..a5c71f811 100644
--- a/components/ui/ModalReport.vue
+++ b/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 {
diff --git a/components/ui/ModalTransfer.vue b/components/ui/ModalTransfer.vue
index fbd6d9cbd..84ce624e5 100644
--- a/components/ui/ModalTransfer.vue
+++ b/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;
diff --git a/pages/[type]/[id]/gallery.vue b/pages/[type]/[id]/gallery.vue
index 6e36ee887..9838f4b16 100644
--- a/pages/[type]/[id]/gallery.vue
+++ b/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>
diff --git a/pages/[type]/[id]/settings/index.vue b/pages/[type]/[id]/settings/index.vue
index 7dd794381..489dc8a84 100644
--- a/pages/[type]/[id]/settings/index.vue
+++ b/pages/[type]/[id]/settings/index.vue
@@ -466,4 +466,8 @@ svg {
   min-height: 8rem;
   max-width: 24rem;
 }
+
+.multiselect {
+  max-width: 15rem;
+}
 </style>
diff --git a/pages/[type]/[id]/settings/links.vue b/pages/[type]/[id]/settings/links.vue
index 33ed4b25f..a3dff5133 100644
--- a/pages/[type]/[id]/settings/links.vue
+++ b/pages/[type]/[id]/settings/links.vue
@@ -276,4 +276,8 @@ export default defineNuxtComponent({
     max-width: 26rem;
   }
 }
+
+.multiselect {
+  max-width: 15rem;
+}
 </style>
diff --git a/pages/[type]/[id]/version/[version].vue b/pages/[type]/[id]/version/[version].vue
index 38ce1d25c..e3a49d67d 100644
--- a/pages/[type]/[id]/version/[version].vue
+++ b/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>
diff --git a/pages/user/[id].vue b/pages/user/[id].vue
index 0f63c67e6..4ed90597d 100644
--- a/pages/user/[id].vue
+++ b/pages/user/[id].vue
@@ -500,10 +500,6 @@ export default defineNuxtComponent({
   }
 }
 
-.button-group:first-child {
-  margin-left: auto;
-}
-
 .textarea-wrapper {
   height: 10rem;
 }