fix form design

Author: rosalieper

src/components/Pages/complaint.vue

@@ -1,20 +1,20 @@
 <template>
   <v-main>
-    <v-responsive max-width="840px" min-width="250px" >
+    <v-responsive max-width="600px" min-width="250px" >
       <p id="titleReportIllegalContent">Reporting illegal content</p>
-      <p>Please use this form to report any content that you consider to be illegal. After sending the email,<br/>
-      which is generated by clicking the ‘Report illegal content’ button, your report will be delivered to<br/>
-      us and handled in accordance with Regulation (EU) 2022/2065, Article 16 (‘Digital Services Act’).<br/>
-      If you supply an email, you will then automatically receive a confirmation of receipt and, as soon<br/>
-      as we have processed your report, we will inform you of any action taken. Please be aware that<br/>
-      no feedback will be provided on the action taken if the report is deemed abusive (e.g. spam or<br/>
+      <p id="pageContent">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-responsive max-width="512px">
-        <v-form ref="form" v-model="isvalid" v-on:submit.prevent>
+      <v-form ref="form" v-model="isvalid" v-on:submit.prevent>
+        <v-responsive max-width="519px">
           <v-textarea
               id="contentURL"
               v-model="contenturl"
-              :rules="[v => v.length <= 300 || 'Max 300 characters', () => !!contenturl || 'This field is required']"
+              :rules="[() => !!contenturl || 'This field is required']"
               label="URL(s) for the content in question"
               required
             />
@@ -24,7 +24,7 @@
               id="inputMessage"
               counter="10000"
               v-model="message"
-              :rules="[v => v.length <= 10000 || 'Message must be 10000 characters or less', () => !!message || 'This field is required']"
+              :rules="[v => v.length <= 1000 || 'Message must be 1000 characters or less', () => !!message || 'This field is required']"
               auto-grow
               label="Reason why the information in question is illegal content"
               required
@@ -42,27 +42,26 @@
               id="contactemail"
               v-model="email"
               :rules="[v => v.length <= 300 || 'Max 300 characters']"
-              label="Your email (optional)"
+              label="Email address (optional)"
               persistent-hint
               hint ="Receiving a confirmation receipt and updates requires an email"
             />
-            <v-checkbox
-              label="I am convinced in good faith that the information and statements contained in
-                      the report are correct and complete."
-              v-model="accepted"
-              :rules="[() => !!accepted || '']"
-              required
-
-              />
+        </v-responsive>
+          <v-checkbox
+            label="I am convinced in good faith that the information and statements contained in
+                    the report are correct and complete."
+            v-model="accepted"
+            :rules="[() => !!accepted || '']"
+            required
+          />
 
 
-            <div align="right">
-              <v-btn color="primary" @click="send" class="mt-6">
-                Report illegal content
-              </v-btn>
-            </div>
-        </v-form>
-      </v-responsive>
+          <div align="right">
+            <v-btn color="primary" @click="send" class="mt-6">
+              Report illegal content
+            </v-btn>
+          </div>
+      </v-form>
       <v-snackbar color="success" elevation="24" v-model="successMessage">
         Report successfully submitted. Thanks!
         <template v-slot:action>
@@ -113,7 +112,7 @@ export default {
       const message = this.message
       const name = this.name
       const email = this.email
-      this.$api.reportIllegalContent(
+      this.$api.complaint(
         {
           name: name,
           url: url,
@@ -165,6 +164,26 @@ export default {
 </script>
 
 <style>
+.formfields{
+  color: var(--black-087, rgba(0, 0, 0, 0.87));
+
+  /* v-text/body-1 */
+  font-family: Roboto;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px; /* 150% */
+  letter-spacing: 0.5px;
+}
+#pageContent{
+  color: #000;
+  font-feature-settings: 'liga' off, 'clig' off;
+  font-family: Lato;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 24px; /* 171.429% */
+}
 #titleReportIllegalContent{
   align-self: stretch;
   color: #000;