Update table styling

webapp/components/_new/generic/FiledTable/FiledTable.vue

@@ -1,30 +1,31 @@
 <template>
-  <ds-table v-if="filed && filed.length" :data="filed" :fields="reportFields" condensed>
-    <template #submitter="scope">
-      <ds-space margin-bottom="base">
-        <hc-user
-          :user="scope.row.submitter"
-          :showAvatar="false"
-          :trunc="30"
-          :date-time="scope.row.createdAt"
-          :position-date-time="'below'"
-        />
-      </ds-space>
-    </template>
-    <template #reasonCategory="scope">
-      {{ $t('report.reason.category.options.' + scope.row.reasonCategory) }}
-    </template>
-    <template #reasonDescription="scope">
-      {{ scope.row.reasonDescription.length ? scope.row.reasonDescription : '—' }}
-    </template>
-  </ds-table>
+  <ds-space margin-bottom="base">
+    <ds-table v-if="filed && filed.length" :data="filed" :fields="reportFields" condensed>
+      <template #submitter="scope">
+        <hc-user :user="scope.row.submitter" :showAvatar="false" :trunc="30" />
+      </template>
+      <template #reportedOn="scope">
+        <ds-text size="small">
+          <hc-relative-date-time :date-time="scope.row.createdAt" />
+        </ds-text>
+      </template>
+      <template #reasonCategory="scope">
+        {{ $t('report.reason.category.options.' + scope.row.reasonCategory) }}
+      </template>
+      <template #reasonDescription="scope">
+        {{ scope.row.reasonDescription.length ? scope.row.reasonDescription : '—' }}
+      </template>
+    </ds-table>
+  </ds-space>
 </template>
 <script>
 import HcUser from '~/components/User/User'
+import HcRelativeDateTime from '~/components/RelativeDateTime'
 
 export default {
   components: {
     HcUser,
+    HcRelativeDateTime,
   },
   props: {
     filed: { type: Array, default: () => [] },
@@ -32,9 +33,22 @@ export default {
   computed: {
     reportFields() {
       return {
-        submitter: this.$t('moderation.reports.submitter'),
-        reasonCategory: this.$t('moderation.reports.reasonCategory'),
-        reasonDescription: this.$t('moderation.reports.reasonDescription'),
+        submitter: {
+          label: this.$t('moderation.reports.submitter'),
+          width: '15%',
+        },
+        reportedOn: {
+          label: this.$t('moderation.reports.reportedOn'),
+          width: '20%',
+        },
+        reasonCategory: {
+          label: this.$t('moderation.reports.reasonCategory'),
+          width: '30%',
+        },
+        reasonDescription: {
+          label: this.$t('moderation.reports.reasonDescription'),
+          width: '35%',
+        },
       }
     },
   },

webapp/components/_new/generic/ReportsTable/ReportsTable.vue

@@ -133,8 +133,7 @@
           </td>
         </tr>
         <tr>
-          <td class="ds-table-col ds-table-head-col-border"></td>
-          <td class="ds-table-col ds-table-head-col-border" colspan="3">
+          <td class="ds-table-col ds-table-head-col-border filed-table" colspan="4">
             <ds-space margin-bottom="base" />
             <filed-table :filed="report.filed" v-if="showFiledReports" />
           </td>
@@ -188,3 +187,8 @@ export default {
   },
 }
 </script>
+<style lang="scss">
+.filed-table {
+  padding-left: $space-xx-large;
+}
+</style>

webapp/locales/en.json

@@ -506,6 +506,7 @@
         "reviewed": "Reviewed",
         "closed": "Closed"
       },
+      "reportedOn": "Date",
       "moreDetails": "Report Details",
       "decideModal": {
         "submit": "Confirm decision",

webapp/pages/notifications/index.vue

@@ -6,11 +6,7 @@
       </ds-flex-item>
       <ds-flex-item width="110px">
         <client-only>
-          <dropdown-filter
-            @filter="filter"
-            :filterOptions="filterOptions"
-            :selected="selected"
-          />
+          <dropdown-filter @filter="filter" :filterOptions="filterOptions" :selected="selected" />
         </client-only>
       </ds-flex-item>
     </ds-flex>