From 00627254702b5f86e3f6ab453108e2e44f648bd6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Wed, 9 Oct 2019 15:49:11 +0200
Subject: [PATCH] Fix the frontend tests and design issues with and in the
 report modal

Co-Authored-By: mattwr18 <mattwr18@gmail.com>
Co-Authored-By: alina-beck <4ndroid4va@gmail.com>
---
 webapp/components/Modal/ReportModal.spec.js |  7 +++--
 webapp/components/Modal/ReportModal.vue     | 29 ++++++++++++---------
 2 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/webapp/components/Modal/ReportModal.spec.js b/webapp/components/Modal/ReportModal.spec.js
index bcbb85931..d6350f595 100644
--- a/webapp/components/Modal/ReportModal.spec.js
+++ b/webapp/components/Modal/ReportModal.spec.js
@@ -20,7 +20,7 @@ describe('ReportModal.vue', () => {
       id: 'c43',
     }
     mocks = {
-      $t: jest.fn(),
+      $t: jest.fn(a => a),
       $filters: {
         truncate: a => a,
       },
@@ -29,7 +29,9 @@ describe('ReportModal.vue', () => {
         error: () => {},
       },
       $apollo: {
-        mutate: jest.fn().mockResolvedValue(),
+        mutate: jest.fn().mockResolvedValue({
+          data: {},
+        }),
       },
     }
   })
@@ -154,6 +156,7 @@ describe('ReportModal.vue', () => {
 
       describe('click confirm button', () => {
         beforeEach(() => {
+          wrapper.find('.ds-radio-option-label').trigger('click')
           wrapper.find('button.confirm').trigger('click')
         })
 
diff --git a/webapp/components/Modal/ReportModal.vue b/webapp/components/Modal/ReportModal.vue
index 415ec9db4..0222a1fdf 100644
--- a/webapp/components/Modal/ReportModal.vue
+++ b/webapp/components/Modal/ReportModal.vue
@@ -1,10 +1,5 @@
 <template>
-  <ds-modal
-    :title="title"
-    :is-open="isOpen"
-    :width="{ base: '100%', sm: '200px', md: '200px', lg: '200px' }"
-    @cancel="cancel"
-  >
+  <ds-modal :title="title" :is-open="isOpen" @cancel="cancel">
     <transition name="ds-transition-fade">
       <ds-flex v-if="success" class="hc-modal-success" centered>
         <sweetalert-icon icon="success" />
@@ -26,6 +21,7 @@
       :schema="formSchema.reasonCategory"
       :label="$t('report.reason.category.label')"
       :options="form.reasonCategoryOptions"
+      labelProp="label"
     />
     <!-- Wolle <ds-input
         model="reasonDescription"
@@ -33,16 +29,16 @@
         :placeholder="$t('report.reason.description.placeholder')"
         type="textarea"
         rows="5"
-        class="reasonDescription"
+        class="reason-description"
       /> -->
     <ds-input
+      class="reason-description"
       :value="form.reasonDescription"
       :schema="formSchema.reasonDescription"
       :label="$t('report.reason.description.label')"
       :placeholder="$t('report.reason.description.placeholder')"
       type="textarea"
       rows="5"
-      class="reasonDescription"
     />
     <small class="smallTag">
       {{ form.reasonDescription.length }}/{{ formSchema.reasonDescription.max }}
@@ -214,15 +210,24 @@ export default {
 </script>
 
 <style lang="scss">
-.reasonDescription {
-  margin-top: $space-x-small;
-  margin-bottom: $space-xxx-small;
+.ds-modal {
+  max-width: 600px !important;
+}
+.ds-radio-option:not(.ds-button) {
+  width: 100% !important;
+}
+.ds-radio-option-label {
+  margin: 5px 20px 5px 5px !important;
+  width: 100% !important;
+}
+.reason-description {
+  margin-top: $space-x-small !important;
+  margin-bottom: $space-xx-small !important;
 }
 .smallTag {
   width: 100%;
   position: relative;
   left: 90%;
-  margin-top: $space-xxx-small;
 }
 .hc-modal-success {
   pointer-events: none;