Minor improvements to the 'Reporting illegal content' page (#1026)

* Fix indentation
* Remove unused element
* Use h1 tag for page title for better document structure
* Add margins to align page with UX design
* Remove some whitespace

Author: outdooracorn

src/components/Pages/Complaint.vue

@@ -2,21 +2,24 @@
   <v-main>
     <v-responsive max-width="616px" min-width="250px" >
       <div class="body">
-      <p class="text-h4">Reporting illegal content</p>
-        <p class="text-body-1">Please use this form to report any content that you consider to be illegal. After sending the email,
-        which is generated by clicking the ‘Report illegal content’ button, your report will be delivered to
-        us and handled in accordance with Regulation (EU) 2022/2065, Article 16 (‘Digital Services Act’).
-        If you supply an email, you will then automatically receive a confirmation of receipt and, as soon
-        as we have processed your report, we will inform you of any action taken. Please be aware that
-        no feedback will be provided on the action taken if the report is deemed abusive (e.g. spam or
-        unfounded report). In the event of repeated abusive use, we reserve the right to block you.</p>
+        <h1 class="text-h4 mb-4">Reporting illegal content</h1>
+        <p class="text-body-1 mb-9">
+          Please use this form to report any content that you consider to be illegal. After sending the email,
+          which is generated by clicking the ‘Report illegal content’ button, your report will be delivered to
+          us and handled in accordance with Regulation (EU) 2022/2065, Article 16 (‘Digital Services Act’).
+          If you supply an email, you will then automatically receive a confirmation of receipt and, as soon
+          as we have processed your report, we will inform you of any action taken. Please be aware that
+          no feedback will be provided on the action taken if the report is deemed abusive (e.g. spam or
+          unfounded report). In the event of repeated abusive use, we reserve the right to block you.
+        </p>
         <v-form ref="form" v-on:submit.prevent>
           <v-responsive max-width="519px">
             <v-textarea
               v-model="contenturl"
               :rules="[() => !!contenturl || 'This field is required']"
               label="URL(s) for the content in question"
               required
+              auto-grow
             />
             <v-textarea
               id="inputMessage"
@@ -27,9 +30,6 @@
               label="Reason why the information in question is illegal content"
               required
             />
-            <v-input
-            />
-
             <v-text-field
               id="contactname"
               v-model="name"
@@ -38,6 +38,7 @@
             />
             <v-text-field
               id="contactemail"
+              class="mb-6"
               v-model="email"
               :rules="[v => v.length <= 300 || 'Max 300 characters']"
               label="Email address (optional)"
@@ -57,32 +58,32 @@
               Report illegal content
             </v-btn>
           </div>
-      </v-form>
-      <v-snackbar color="success" elevation="24" v-model="successMessage">
-        <span class="text-body-1" >Report successfully submitted. Thanks!</span>
-        <template v-slot:action>
-          <v-btn
-            text
-            variant="text"
-            @click="closeAlert"
-          >
-            Close
-          </v-btn>
-        </template>
-      </v-snackbar>
-      <v-snackbar color="error" elevation="24" v-model="errorMessage" multi-line>
-        <span class="text-body-1" >Something went wrong with submitting your report. Please try again.</span>
-        <template v-slot:action>
-          <v-btn
-            text
-            variant="text"
-            @click="closeAlert"
-          >
-            Close
-          </v-btn>
-        </template>
-      </v-snackbar>
-    </div>
+        </v-form>
+        <v-snackbar color="success" elevation="24" v-model="successMessage">
+          <span class="text-body-1">Report successfully submitted. Thanks!</span>
+          <template v-slot:action>
+            <v-btn
+              text
+              variant="text"
+              @click="closeAlert"
+            >
+              Close
+            </v-btn>
+          </template>
+        </v-snackbar>
+        <v-snackbar color="error" elevation="24" v-model="errorMessage" multi-line>
+          <span class="text-body-1">Something went wrong with submitting your report. Please try again.</span>
+          <template v-slot:action>
+            <v-btn
+              text
+              variant="text"
+              @click="closeAlert"
+            >
+              Close
+            </v-btn>
+          </template>
+        </v-snackbar>
+      </div>
     </v-responsive>
   </v-main>
 </template>