From da96c9711eac19a48894db5f21e829199c632fa3 Mon Sep 17 00:00:00 2001
From: rais0005 <yassine.rais@etudiant.univ-reims.fr>
Date: Tue, 28 Sep 2021 22:48:34 +0200
Subject: [PATCH 1/3] =?UTF-8?q?=F0=9F=A7=BE=20File:=20Comments=20Section?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   2 +
 src/common/components/Progress.vue            | 167 ++------
 src/common/components/content/PageContent.vue |   4 +-
 .../elements/activity/ShortFollower.vue       |   6 +-
 .../components/elements/button/BtnFollow.vue  |  36 +-
 src/common/components/partials/Sidebar.vue    |   7 +-
 src/middlewares/log.js                        |   5 +
 src/middlewares/scan.js                       |   8 +-
 src/modules/scan/components/Comment.vue       |  91 ++++
 src/modules/scan/components/Tiptap.vue        |  30 ++
 src/modules/scan/pages/Comments.vue           |  32 +-
 src/router/routes.js                          |  12 +-
 src/state/helpers.js                          |   4 +-
 src/state/modules/scan.js                     |  47 +-
 yarn.lock                                     | 401 ++++++++++++++++++
 15 files changed, 689 insertions(+), 163 deletions(-)
 create mode 100644 src/middlewares/log.js
 create mode 100644 src/modules/scan/components/Comment.vue
 create mode 100644 src/modules/scan/components/Tiptap.vue

diff --git a/package.json b/package.json
index 1d42e32..f9a3263 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,8 @@
   },
   "dependencies": {
     "@tailwindcss/postcss7-compat": "^2.1.2",
+    "@tiptap/starter-kit": "^2.0.0-beta.112",
+    "@tiptap/vue-3": "^2.0.0-beta.64",
     "axios": "^0.21.1",
     "core-js": "^3.6.5",
     "dateformat": "^4.5.1",
diff --git a/src/common/components/Progress.vue b/src/common/components/Progress.vue
index 3ab4287..8c25451 100644
--- a/src/common/components/Progress.vue
+++ b/src/common/components/Progress.vue
@@ -1,39 +1,44 @@
 <template>
-  <div class="progress grid grid-cols-10 gap-2">
-    <div class="circle col-span-1">
-      <strong class="rate">{{ rate.value }}</strong>
-      <span>/{{ rate.count }}</span>
-      <svg :height="radius * 2" :width="radius * 2" class="circle-rate">
-        <circle
-          :class="`type${getRateColor}`"
-          :stroke-dasharray="circumference + ' ' + circumference"
-          :style="{ strokeDashoffset: strokeDashoffset }"
-          :stroke-width="stroke"
-          fill="rgba(25,25,25,0.05)"
-          :r="normalizedRadius"
-          :cx="radius"
-          :cy="radius"
-        />
-      </svg>
-    </div>
+  <div class="progress grid grid-cols-11 gap-2">
+    <div
+      class="flex md:flex-row flex-col items-center col-span-6"
+      :class="`type${getRateColor}`"
+    >
+      <div class="circle">
+        <strong class="rate">{{ rate.value }}</strong>
+        <span>/{{ rate.count }}</span>
+        <svg :height="radius * 2" :width="radius * 2" class="circle-rate">
+          <circle
+            :class="`type${getRateColor}`"
+            :stroke-dasharray="circumference + ' ' + circumference"
+            :style="{ strokeDashoffset: strokeDashoffset }"
+            :stroke-width="stroke"
+            fill="rgba(25,25,25,0.05)"
+            :r="normalizedRadius"
+            :cx="radius"
+            :cy="radius"
+          />
+        </svg>
+      </div>
 
-    <div class="message col-span-5" :class="`type${getRateColor}`">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        class="h-6 w-6 mr-2"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke="currentColor"
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-        />
-      </svg>
+      <div class="message">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-6 w-6 mr-2"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+          />
+        </svg>
 
-      {{ message }}
+        <span>{{ message }}</span>
+      </div>
     </div>
 
     <div class="submission grid col-span-2">
@@ -41,100 +46,12 @@
       <time class="font-bold">{{ getDateSubmission }}</time>
     </div>
 
-    <div class="buttons col-span-2">
+    <div class="buttons col-span-3">
       <Btn class="btn-circle h-20 w-20 flex items-center justify-center">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="25.219"
-          height="31.798"
-          viewBox="0 0 25.219 31.798"
-        >
-          <g transform="translate(0)">
-            <path
-              d="M93.929,55.8H75.289A3.289,3.289,0,0,1,72,52.508V27.289A3.289,3.289,0,0,1,75.289,24H90.64l6.579,6.579V52.508A3.289,3.289,0,0,1,93.929,55.8Z"
-              transform="translate(-72 -24)"
-              fill="#ebedff"
-            />
-            <path
-              d="M72,360H97.219v5.482a3.289,3.289,0,0,1-3.289,3.289H75.289A3.289,3.289,0,0,1,72,365.482Z"
-              transform="translate(-72 -336.974)"
-              fill="#3b3cb2"
-            />
-            <path
-              d="M350.579,30.579h-3.289A3.289,3.289,0,0,1,344,27.289V24Z"
-              transform="translate(-325.36 -24)"
-              fill="#8c8ac9"
-            />
-            <path
-              d="M180.061,126.579v-2.193h-2.353a3.817,3.817,0,0,0-.3-.729l1.663-1.663-1.551-1.551-1.663,1.663a3.816,3.816,0,0,0-.729-.3V120h-2.193v1.8a3.815,3.815,0,0,0-.729.3l-1.663-1.663-1.551,1.551,1.663,1.663a3.817,3.817,0,0,0-.3.729H168v2.193h2.353a3.817,3.817,0,0,0,.3.729l-1.663,1.663,1.551,1.551,1.663-1.663a3.815,3.815,0,0,0,.729.3v1.8h2.193v-1.8a3.816,3.816,0,0,0,.729-.3l1.663,1.663,1.551-1.551-1.663-1.663a3.816,3.816,0,0,0,.3-.729Zm-6.031.548a1.645,1.645,0,1,1,1.645-1.645A1.645,1.645,0,0,1,174.031,127.127Z"
-              transform="translate(-161.421 -113.421)"
-              fill="#8c8ac9"
-            />
-            <path
-              d="M152,216h14.254v5.482H152Z"
-              transform="translate(-146.518 -202.842)"
-              fill="#babdeb"
-            />
-            <g transform="translate(6.579 14.802)">
-              <path
-                d="M220.934,241.1h-4.386a.548.548,0,0,1,0-1.1h4.386a.548.548,0,1,1,0,1.1Z"
-                transform="translate(-212.711 -240)"
-                fill="#fff"
-              />
-              <path
-                d="M170.741,385.1a.548.548,0,1,0,0-1.1h-2.193a.548.548,0,0,0-.548.548v4.386a.548.548,0,0,0,.548.548h2.193a.548.548,0,0,0,0-1.1H169.1v-1.1h.548a.548.548,0,0,0,0-1.1H169.1v-1.1Z"
-                transform="translate(-168 -374.132)"
-                fill="#fff"
-              />
-              <path
-                d="M298.741,385.1a.548.548,0,1,0,0-1.1h-2.193a.548.548,0,0,0-.548.548v4.386a.548.548,0,0,0,.548.548h2.193a.548.548,0,0,0,0-1.1H297.1v-1.1h.548a.548.548,0,0,0,0-1.1H297.1v-1.1Z"
-                transform="translate(-287.228 -374.132)"
-                fill="#fff"
-              />
-              <path
-                d="M234.985,384.056a.548.548,0,0,0-.736.245l-.606,1.212-.606-1.212a.548.548,0,0,0-.981.49l.974,1.948-.974,1.948a.548.548,0,1,0,.981.49l.606-1.212.606,1.212a.548.548,0,1,0,.981-.49l-.974-1.948.974-1.948A.548.548,0,0,0,234.985,384.056Z"
-                transform="translate(-227.612 -374.13)"
-                fill="#fff"
-              />
-            </g>
-          </g>
-        </svg>
+        Z
       </Btn>
       <Btn class="btn-circle h-20 w-20 flex items-center justify-center">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="25.303"
-          height="28.114"
-          viewBox="0 0 25.303 28.114"
-        >
-          <path
-            d="M12.686,26.274V17.84a.94.94,0,0,1,.937-.937H29.554V8.937A.94.94,0,0,0,28.617,8H14.091v4.686a.937.937,0,0,1-.937.937H8V34.24a.94.94,0,0,0,.937.937h19.68a.94.94,0,0,0,.937-.937V27.211H13.623A.94.94,0,0,1,12.686,26.274Zm0,0"
-            transform="translate(-7.531 -7.531)"
-            fill="#9bc9ff"
-          />
-          <g>
-            <path
-              d="M23.9,8.9H22.492v-7.5A1.406,1.406,0,0,0,21.086,0H6.56c-.01,0-.018,0-.028.005A.474.474,0,0,0,6.42.026L6.376.04a.461.461,0,0,0-.134.084L.151,5.748a.455.455,0,0,0-.1.14.43.43,0,0,0-.018.047.46.46,0,0,0-.027.131c0,.01-.006.019-.006.029V26.709a1.406,1.406,0,0,0,1.406,1.406h19.68a1.406,1.406,0,0,0,1.406-1.406v-6.56H23.9A1.406,1.406,0,0,0,25.3,18.743V10.309A1.406,1.406,0,0,0,23.9,8.9ZM6.091,1.539V5.154a.469.469,0,0,1-.469.469H1.667Zm15.463,25.17a.469.469,0,0,1-.469.469H1.406a.469.469,0,0,1-.469-.469V6.56H5.623A1.406,1.406,0,0,0,7.029,5.154V.937H21.086a.469.469,0,0,1,.469.469V8.9H6.091a1.406,1.406,0,0,0-1.406,1.406v8.434a1.406,1.406,0,0,0,1.406,1.406H21.554Zm2.811-7.966a.469.469,0,0,1-.469.469H6.091a.469.469,0,0,1-.469-.469V10.309a.469.469,0,0,1,.469-.469H23.9a.469.469,0,0,1,.469.469Zm0,0"
-              transform="translate(0)"
-              fill="#1e81ce"
-            />
-            <path
-              d="M122.343,192h-1.874a.469.469,0,0,0-.469.469v5.623a.469.469,0,0,0,.469.469h1.874a2.346,2.346,0,0,0,2.343-2.343v-1.874A2.346,2.346,0,0,0,122.343,192Zm1.406,4.217a1.406,1.406,0,0,1-1.406,1.406h-1.406v-4.686h1.406a1.406,1.406,0,0,1,1.406,1.406Zm0,0"
-              transform="translate(-112.971 -180.754)"
-              fill="#1e81ce"
-            />
-            <path
-              d="M220.217,197.623h-3.28v-5.154a.469.469,0,1,0-.937,0v5.623a.469.469,0,0,0,.469.469h3.749a.469.469,0,0,0,0-.937Zm0,0"
-              transform="translate(-203.349 -180.754)"
-              fill="#1e81ce"
-            />
-            <path
-              d="M316.217,197.623h-3.28v-5.154a.469.469,0,1,0-.937,0v5.623a.469.469,0,0,0,.469.469h3.749a.469.469,0,0,0,0-.937Zm0,0"
-              transform="translate(-293.726 -180.754)"
-              fill="#1e81ce"
-            />
-          </g>
-        </svg>
+        X
       </Btn>
     </div>
   </div>
@@ -209,7 +126,7 @@ export default {
   @apply content-center items-center;
 
   .message {
-    @apply flex text-danger font-bold pl-4;
+    @apply flex text-danger font-bold;
   }
   .circle {
     @apply p-0 m-0 rounded-full  bg-light flex flex-col items-center justify-center content-center;
diff --git a/src/common/components/content/PageContent.vue b/src/common/components/content/PageContent.vue
index 16c3ef3..7d1d20b 100644
--- a/src/common/components/content/PageContent.vue
+++ b/src/common/components/content/PageContent.vue
@@ -140,8 +140,8 @@ export default {
       });
     },
     async refreshContent() {
-      this.file = await this.getFileSummary;
-      this.hash = this.file.properties.SHA256;
+      this.file = await this.getFile;
+      this.hash = this.file.sha256;
       this.downloadLink = `${APP_CONFIGS.apiURL}files/${this.hash}/download/`;
     },
   },
diff --git a/src/common/components/elements/activity/ShortFollower.vue b/src/common/components/elements/activity/ShortFollower.vue
index dd71d18..a387012 100644
--- a/src/common/components/elements/activity/ShortFollower.vue
+++ b/src/common/components/elements/activity/ShortFollower.vue
@@ -15,7 +15,7 @@
     </div>
     <div class="actions">
       <btn-follow
-        v-if="notSelfUser"
+        v-if="!isSelfUser"
         :followed="dfollowed"
         v-on:toggleFollow="toggleFollow"
       />
@@ -58,8 +58,8 @@ export default {
     getRegistredTimeAgo() {
       return timeAgo(this.member_since);
     },
-    notSelfUser() {
-      return this.username !== this.getUser && this.getUser.username;
+    isSelfUser() {
+      return this.getUser && this.username === this.getUser.username;
     },
   },
   methods: {
diff --git a/src/common/components/elements/button/BtnFollow.vue b/src/common/components/elements/button/BtnFollow.vue
index 57b971f..03f1ab2 100644
--- a/src/common/components/elements/button/BtnFollow.vue
+++ b/src/common/components/elements/button/BtnFollow.vue
@@ -1,27 +1,31 @@
 <template>
-    <btn :class="followed ? 'btn-active':''" @click="$emit('toggleFollow', $target)">
-        {{ followed ?  'UnFollow' : 'Follow' }}
-    </btn>
+  <btn
+    :class="followed ? 'btn-active' : ''"
+    @click="$emit('toggleFollow', $target)"
+  >
+    {{ followed ? "UnFollow" : "Follow" }}
+  </btn>
 </template>
 
 <script>
-import Btn from './Btn.vue'
+import Btn from "./Btn.vue";
+
 export default {
-    components: {
-        Btn
-    },
-    props : {
-        followed: {
-            default: false,
-            type: Boolean
-        }
+  components: {
+    Btn,
+  },
+  props: {
+    followed: {
+      default: false,
+      type: Boolean,
     },
-    emits: [ 'toggleFollow' ]
-}
+  },
+  emits: ["toggleFollow"],
+};
 </script>
 
 <style scoped>
-.btn-active{
-    @apply bg-primary bg-opacity-10 border-none font-medium;
+.btn-active {
+  @apply bg-primary bg-opacity-10 border-none font-medium;
 }
 </style>
\ No newline at end of file
diff --git a/src/common/components/partials/Sidebar.vue b/src/common/components/partials/Sidebar.vue
index db637a1..84d4533 100644
--- a/src/common/components/partials/Sidebar.vue
+++ b/src/common/components/partials/Sidebar.vue
@@ -139,6 +139,9 @@
             </svg>
 
             Comments
+            {{
+              (file && file.comments_count && `(${file.comments_count}) `) || ""
+            }}
           </router-link>
         </li>
       </ul>
@@ -175,8 +178,8 @@ export default {
     },
   },
   async beforeMount() {
-    this.file = await this.getFileSummary;
-    this.hash = this.file.properties.SHA256;
+    this.file = await this.getFile;
+    this.hash = this.file.sha256;
   },
 };
 </script>
diff --git a/src/middlewares/log.js b/src/middlewares/log.js
new file mode 100644
index 0000000..ae73fdf
--- /dev/null
+++ b/src/middlewares/log.js
@@ -0,0 +1,5 @@
+export default function log({ next, to }) {
+    console.log(to);
+
+    return next();
+}
\ No newline at end of file
diff --git a/src/middlewares/scan.js b/src/middlewares/scan.js
index b81c1fb..7203770 100644
--- a/src/middlewares/scan.js
+++ b/src/middlewares/scan.js
@@ -1,10 +1,12 @@
 import { createToast } from 'mosha-vue-toastify';
 
 export default async ({ store, to, next }) => {
-    let selectedFile = await store.getters['scan/getFileSummary'];
+    let fileHash = to.params.id;
 
-    if (!selectedFile) {
-        selectedFile = store.dispatch('scan/fetchFileSummary', to.params.id);
+    let selectedFile = await store.getters['scan/getFile'];
+
+    if (!selectedFile || selectedFile.sha256 != fileHash) {
+        selectedFile = store.dispatch('scan/fetchFile', fileHash);
 
         await selectedFile.catch(err => {
             if (err) {
diff --git a/src/modules/scan/components/Comment.vue b/src/modules/scan/components/Comment.vue
new file mode 100644
index 0000000..d07f7a8
--- /dev/null
+++ b/src/modules/scan/components/Comment.vue
@@ -0,0 +1,91 @@
+<template>
+  <div :id="id" class="comment">
+    <div class="profile">
+      <router-link :to="getProfileRoute">
+        <avatar :username="username" height="60px" width="60px" />
+        <div>
+          <b>{{ username }}</b>
+          <p class="text-gray-medium">Member since 2021</p>
+        </div>
+        <btn-follow
+          v-if="!isSelfUser"
+          :followed="dfollowed"
+          v-on:toggleFollow="toggleFollow"
+        ></btn-follow>
+      </router-link>
+    </div>
+    <div class="content" v-html="comment"></div>
+    <time class="date">{{ getCommentDate }}</time>
+  </div>
+</template>
+
+<script>
+import Avatar from "@/common/components/elements/Avatar.vue";
+import BtnFollow from "@/common/components/elements/button/BtnFollow.vue";
+
+import { followActions, userGetters } from "@/state/helpers";
+import { timestampToDate } from "@/common/utils/date-format";
+
+export default {
+  components: {
+    Avatar,
+    BtnFollow,
+  },
+  data() {
+    return {
+      dfollowed: false,
+    };
+  },
+  props: ["id", "comment", "username", "date", "follow"],
+  computed: {
+    ...userGetters,
+    getCommentDate() {
+      return timestampToDate(this.date);
+    },
+    isSelfUser() {
+      return this.getUser && this.username === this.getUser.username;
+    },
+    getProfileRoute() {
+      return `/user/${this.username}`;
+    },
+  },
+  methods: {
+    ...followActions,
+    async toggleFollow() {
+      if (this.dfollowed) {
+        return this.doUnFollow({ id: this.username }).then(() => {
+          this.dfollowed = false;
+        });
+      }
+      this.doFollow({ id: this.username }).then(() => {
+        this.dfollowed = true;
+      });
+    },
+  },
+  created() {
+    this.dfollowed = this.follow;
+  },
+};
+</script>
+
+
+<style lang="scss" scoped>
+.comment {
+  @apply md:rounded-lg shadow-sm content-center justify-center;
+  @apply bg-light py-6 px-6 w-full flex flex-col space-y-2;
+
+  .profile {
+    @apply justify-start;
+
+    a {
+      @apply flex items-center space-x-4;
+    }
+  }
+  .content {
+    @apply max-w-max break-words px-4 pt-4;
+  }
+  .date {
+    @apply text-gray-medium px-4;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/modules/scan/components/Tiptap.vue b/src/modules/scan/components/Tiptap.vue
new file mode 100644
index 0000000..b4e6bde
--- /dev/null
+++ b/src/modules/scan/components/Tiptap.vue
@@ -0,0 +1,30 @@
+<template>
+  <editor-content :editor="editor" />
+</template>
+
+<script>
+import { Editor, EditorContent } from "@tiptap/vue-3";
+import StarterKit from "@tiptap/starter-kit";
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    };
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      content: "<p>I’m running tiptap with Vue.js. 🎉</p>",
+    });
+  },
+
+  beforeUnmount() {
+    this.editor.destroy();
+  },
+};
+</script>
\ No newline at end of file
diff --git a/src/modules/scan/pages/Comments.vue b/src/modules/scan/pages/Comments.vue
index 60ff4f7..98b84f3 100644
--- a/src/modules/scan/pages/Comments.vue
+++ b/src/modules/scan/pages/Comments.vue
@@ -1,5 +1,31 @@
 <template>
-  <div class="w-full h-full flex items-center justify-center">
-    <h2>Comming Soon</h2>
+  <div class="w-full h-full flex flex-col items-center justify-center">
+    <div class="flex flex-col space-y-4 w-full" v-if="comments.length > 0">
+      <comment v-for="comment in comments" :key="comment.id" v-bind="comment" />
+    </div>
+    <div v-else>
+      <h2>No comments available.</h2>
+    </div>
   </div>
-</template>
\ No newline at end of file
+</template>
+
+<script>
+import { scanGetters } from "@/state/helpers";
+import Comment from "../components/Comment.vue";
+
+export default {
+  components: { Comment },
+  data() {
+    return {
+      title: "Comments",
+      comments: [],
+    };
+  },
+  computed: {
+    ...scanGetters,
+  },
+  async beforeMount() {
+    this.comments = await this.getFileComments;
+  },
+};
+</script>
diff --git a/src/router/routes.js b/src/router/routes.js
index f934d25..5a14196 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -1,5 +1,6 @@
 import authMiddleware, { noAuthMiddleware } from '@/middlewares/auth';
 import scanMiddleware from '@/middlewares/scan';
+import logMiddleware from '@/middlewares/log';
 
 /**
  * Tags Module routes
@@ -29,6 +30,9 @@ const scanModuleRoutes = [
         component: () => import('@/modules/scan/pages/Summary.vue'),
         meta: {
             title: 'File Summary',
+            middleware: [
+                async ({ store, to, next }) => { await store.dispatch('scan/fetchFileSummary', to.params.id), next() }
+            ]
         }
     },
     {
@@ -77,6 +81,9 @@ const scanModuleRoutes = [
         component: () => import('@/modules/scan/pages/Comments.vue'),
         meta: {
             title: 'Comments',
+            middleware: [
+                async ({ store, to, next }) => { await store.dispatch('scan/fetchFileComments', to.params.id), next() }
+            ]
         }
     },
 ].map(route => {
@@ -85,9 +92,12 @@ const scanModuleRoutes = [
         layout: 'SidebarLayout',
         ...route.meta,
         middleware: [
-            scanMiddleware
+            logMiddleware,
+            scanMiddleware,
+            ...(route.meta && route.meta.middleware || []),
         ],
     }
+
     return route;
 });
 
diff --git a/src/state/helpers.js b/src/state/helpers.js
index 8004cb0..970b373 100644
--- a/src/state/helpers.js
+++ b/src/state/helpers.js
@@ -30,8 +30,8 @@ const followActions = mapActions('actions', ['doFollow', 'doUnFollow']);
 /**
  * Scan
  */
-const scanMethods = mapActions('scan', []);
-const scanGetters = mapGetters('scan', ['getFileSummary']);
+const scanMethods = mapActions('scan', ['fetchFileSummary', 'fetchFileComments']);
+const scanGetters = mapGetters('scan', ['getFile', 'getFileSummary', 'getFileComments']);
 
 
 export {
diff --git a/src/state/modules/scan.js b/src/state/modules/scan.js
index 5ddc990..c575ea2 100644
--- a/src/state/modules/scan.js
+++ b/src/state/modules/scan.js
@@ -1,30 +1,56 @@
 import axios from '@/services/axios'
 
 export const fields = {
-    summary: [
-
-    ]
+    file: ['sha256', 'size', 'comments_count', 'submissions'],
+    summary: []
 }
 
 export const state = {
-    selectedFile: null
+    file: null,
+    summary: {},
+    comments: []
 }
 
 
 export const getters = {
+    getFile(state) {
+        return state.file;
+    },
     getFileSummary(state) {
-        return state.selectedFile;
+        return state.summary;
+    },
+    getFileComments(state) {
+        return state.comments;
     }
 }
 
 export const mutations = {
+    SET_FILE(state, file) {
+        state.file = file;
+    },
+    SET_FILE_COMMENTS(state, comments) {
+        state.comments = comments;
+    },
     SET_FILE_SUMMARY(state, file) {
-        state.selectedFile = file;
+        state.summary = file;
     }
 }
 
 
 export const actions = {
+    async fetchFile({ commit }, id) {
+        return axios.get(`/files/${id}?fields=` + fields.file.join(','))
+            .then(res => {
+                let data = res.data;
+                data.lastupdate = (data.submissions || []).reduce((bg, sub) => {
+                    if (sub.timestamp > bg) return sub.timestamp;
+                    return bg;
+                }, 0);
+
+                commit('SET_FILE', data);
+                return data;
+            });
+    },
     async fetchFileSummary({ commit }, id) {
         return axios.get(`/files/${id}/summary`)
             .then(res => {
@@ -33,5 +59,14 @@ export const actions = {
                 commit('SET_FILE_SUMMARY', data);
                 return data;
             });
+    },
+    async fetchFileComments({ commit }, id) {
+        return axios.get(`/files/${id}/comments`)
+            .then(res => {
+                let data = res.data.items || [];
+
+                commit('SET_FILE_COMMENTS', data);
+                return data;
+            });
     }
 }
diff --git a/yarn.lock b/yarn.lock
index e8f9d82..ea6b937 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -978,6 +978,11 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@popperjs/core@^2.8.3":
+  version "2.10.1"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.10.1.tgz#728ecd95ab207aab8a9a4e421f0422db329232be"
+  integrity sha512-HnUhk1Sy9IuKrxEMdIRCxpIqPw6BFsbYSEUO9p/hNw5sMld/+3OLMWQP80F8/db9qsv3qUjs7ZR5bS/R+iinXw==
+
 "@soda/friendly-errors-webpack-plugin@^1.7.1":
   version "1.8.0"
   resolved "https://registry.npmjs.org/@soda/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.8.0.tgz"
@@ -1033,6 +1038,192 @@
     resolve "^1.20.0"
     tmp "^0.2.1"
 
+"@tiptap/core@^2.0.0-beta.113":
+  version "2.0.0-beta.113"
+  resolved "https://registry.yarnpkg.com/@tiptap/core/-/core-2.0.0-beta.113.tgz#c0e475ea8f0f87ec79037b702e2f6c694be6a942"
+  integrity sha512-vKQ2gYIzimBOcOjZlc8CBKzSdKbZcVsa+r+t1Lvsbc6ynm7IFEbYhG1VPTV3S6DmFy+apLwhmXKbMCf8PN9xDQ==
+  dependencies:
+    "@types/prosemirror-commands" "^1.0.4"
+    "@types/prosemirror-inputrules" "^1.0.4"
+    "@types/prosemirror-keymap" "^1.0.4"
+    "@types/prosemirror-model" "^1.13.2"
+    "@types/prosemirror-schema-list" "^1.0.3"
+    "@types/prosemirror-state" "^1.2.7"
+    "@types/prosemirror-transform" "^1.1.4"
+    "@types/prosemirror-view" "^1.19.1"
+    prosemirror-commands "^1.1.10"
+    prosemirror-inputrules "^1.1.3"
+    prosemirror-keymap "^1.1.3"
+    prosemirror-model "^1.14.3"
+    prosemirror-schema-list "^1.1.6"
+    prosemirror-state "^1.3.4"
+    prosemirror-transform "^1.3.2"
+    prosemirror-view "^1.20.1"
+
+"@tiptap/extension-blockquote@^2.0.0-beta.15":
+  version "2.0.0-beta.15"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-blockquote/-/extension-blockquote-2.0.0-beta.15.tgz#40be203f7db47e027ea1a5ba42bbb0e33bb6c004"
+  integrity sha512-Cso44KsYsqKqaNveQmx5KVaLy9krq5AzE9WhGVDBSFqWhvuIJkQYrTRBbOTfUDs/st9VuwJrbjTDD65ow50wEw==
+  dependencies:
+    prosemirror-inputrules "^1.1.3"
+
+"@tiptap/extension-bold@^2.0.0-beta.15":
+  version "2.0.0-beta.15"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-bold/-/extension-bold-2.0.0-beta.15.tgz#cf9ddb3fc316be9707753ad4e497bfb8a3ebb0c2"
+  integrity sha512-jKyV6iiwhxwa0+7uuKD74jNDVNLNOS1GmU14MgaA95pY5e1fyaRBPPX8Gtt89niz2CLOY711AV17RPZTe/e60w==
+
+"@tiptap/extension-bubble-menu@^2.0.0-beta.36":
+  version "2.0.0-beta.36"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-bubble-menu/-/extension-bubble-menu-2.0.0-beta.36.tgz#11da1dc733253f5ac4761a5da0ec56618914ddeb"
+  integrity sha512-z2l326tDGHlgF0yFMxqG6cSJALkP8nvVRJL8r2cRjs/DaYTCCyjSGiz1TSwZXuwLkEOt2zyR71IOE42m4bpcNA==
+  dependencies:
+    prosemirror-state "^1.3.4"
+    prosemirror-view "^1.20.1"
+    tippy.js "^6.3.1"
+
+"@tiptap/extension-bullet-list@^2.0.0-beta.15":
+  version "2.0.0-beta.15"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-bullet-list/-/extension-bullet-list-2.0.0-beta.15.tgz#74876851a8d227ba1a031d031631ed621c175e05"
+  integrity sha512-5i44JzsZOh8Ci6CuYRQy6W3jCpYgX0+VuJKeHvZ6Aomy4Qqrtc9Jk43PBmCj91lNUUtH6Io9l+kDrLCumEFnEg==
+  dependencies:
+    prosemirror-inputrules "^1.1.3"
+
+"@tiptap/extension-code-block@^2.0.0-beta.18":
+  version "2.0.0-beta.18"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-code-block/-/extension-code-block-2.0.0-beta.18.tgz#3b43730cfca1ba26171530951b3cc324a500cb11"
+  integrity sha512-E2gz7ovl9nXLZzheqLyN3hi7A10fCaodDn4DvIl4wiEbKZpF7WFBNeb+FQetWNay9UWNeDO94SCX9+rT9H+yHA==
+  dependencies:
+    prosemirror-inputrules "^1.1.3"
+
+"@tiptap/extension-code@^2.0.0-beta.16":
+  version "2.0.0-beta.16"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-code/-/extension-code-2.0.0-beta.16.tgz#b258ff90ebe703a4d36ff0c650e6b2cab634028d"
+  integrity sha512-Kakg/RMiVrxjzIkLVDXtbCzRh/9W8dgSG04IhMZNOI8N9vWn8Z78jdUyxEEDTcL/JyWWcMxn9AsJw2U5ajO3pA==
+
+"@tiptap/extension-document@^2.0.0-beta.13":
+  version "2.0.0-beta.13"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-document/-/extension-document-2.0.0-beta.13.tgz#8cfb29d4de64bf4a790817f730c05b4f9b7167b2"
+  integrity sha512-nrufdKziA/wovaY4DjGkc8OGuIZi8CH8CW3+yYfeWbruwFKkyZHlZy9nplFWSEqBHPAeqD+px9r91yGMW3ontA==
+
+"@tiptap/extension-dropcursor@^2.0.0-beta.19":
+  version "2.0.0-beta.19"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-dropcursor/-/extension-dropcursor-2.0.0-beta.19.tgz#8a37ffe27e484eb44dd18297830d1fd8ce0c50ce"
+  integrity sha512-rslIcVvD42NNh5sEbkCkG03DWMFBrS5KoK+lDOdIcC1DjmTtpVgcLvvE01btzaB3ljx+UVqI2Zaxa6VOiTeEMw==
+  dependencies:
+    "@types/prosemirror-dropcursor" "^1.0.3"
+    prosemirror-dropcursor "^1.3.5"
+
+"@tiptap/extension-floating-menu@^2.0.0-beta.30":
+  version "2.0.0-beta.30"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-floating-menu/-/extension-floating-menu-2.0.0-beta.30.tgz#0da60ef7e417a8a0f367514bdf82306160942f75"
+  integrity sha512-/JEk9BCurglUQtL83UI6NNS2buBL0wnVKXPPFFqQJ+7YzrKLZnz/ZW180UdJ2hN0J2waLfr1F65OgyLCK4073A==
+  dependencies:
+    prosemirror-state "^1.3.4"
+    prosemirror-view "^1.20.1"
+    tippy.js "^6.3.1"
+
+"@tiptap/extension-gapcursor@^2.0.0-beta.21":
+  version "2.0.0-beta.21"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-gapcursor/-/extension-gapcursor-2.0.0-beta.21.tgz#7cd668d6ac1dd843a267194a1175646cb2d1b20a"
+  integrity sha512-CWOddG/Lt/0BcJ55TJrnOQdj84EAfumUPbGwmsAPsWX4WH7wTMNy6ET679K3/2EDpDDdrb8sOzsaDCtJhcD/vw==
+  dependencies:
+    "@types/prosemirror-gapcursor" "^1.0.4"
+    prosemirror-gapcursor "^1.2.0"
+
+"@tiptap/extension-hard-break@^2.0.0-beta.18":
+  version "2.0.0-beta.18"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-hard-break/-/extension-hard-break-2.0.0-beta.18.tgz#b379bc8ac625fa886b40acd3edcdbbb94f7b0b19"
+  integrity sha512-9wXXAMGrD9bxcQYj74ps9G/dkbDhra5dU5fqZgw7C2Y6VtHdk350S5BMXm1LYez6rEBQWVZENeDEePe1fJHIgA==
+
+"@tiptap/extension-heading@^2.0.0-beta.15":
+  version "2.0.0-beta.15"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-heading/-/extension-heading-2.0.0-beta.15.tgz#d62f32a2ec8ce5a6d4e716aa7a45dfb707283848"
+  integrity sha512-UoXDwEdCV9KiPh0wj0jj2Jt6VDqkoTaSU3d9bmEBLwg1Gjgbuv39JDst7oxSqbf9rgbl3txbeOy35wVBKe9CqA==
+  dependencies:
+    prosemirror-inputrules "^1.1.3"
+
+"@tiptap/extension-history@^2.0.0-beta.16":
+  version "2.0.0-beta.16"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-history/-/extension-history-2.0.0-beta.16.tgz#f40317bab795e2daf981aa1a01d6025f306be72c"
+  integrity sha512-nrNwV8a7zUt1t2I/kPX5Y6N9vZ8mrugimJIQmPGIp/4mmw1SEUzkaPpIsv6+ELmqMHSDktQ0ofb3pXeWDXWZvw==
+  dependencies:
+    "@types/prosemirror-history" "^1.0.3"
+    prosemirror-history "^1.2.0"
+
+"@tiptap/extension-horizontal-rule@^2.0.0-beta.19":
+  version "2.0.0-beta.19"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-horizontal-rule/-/extension-horizontal-rule-2.0.0-beta.19.tgz#d98d0070a2cead32a497b62586c0e259d31f3f2e"
+  integrity sha512-RrU7+inExgC+rRmFWoTxALbu/IgRGRik11LPhMhqrCB+n0XFRUMyVEb/jbfgHWVrPmTXq0MbSWW6LYw3iREzRA==
+  dependencies:
+    prosemirror-state "^1.3.4"
+
+"@tiptap/extension-italic@^2.0.0-beta.15":
+  version "2.0.0-beta.15"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-italic/-/extension-italic-2.0.0-beta.15.tgz#9a81f686cf221110478935596f0b47a76d4c2f45"
+  integrity sha512-ZCz1vCysLdvOUrwODuyBP0BDaemCLh6ib7qTYoSDKdive9kfn0Vc5Fg3o8xgHrtrUfwKIJz/sWOknjDEGIc9cw==
+
+"@tiptap/extension-list-item@^2.0.0-beta.14":
+  version "2.0.0-beta.14"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-list-item/-/extension-list-item-2.0.0-beta.14.tgz#65a9ff9daa11bc9ca8bc2989a891abe68081cfbd"
+  integrity sha512-t6xwEqP+d5443Ul2Jvqz9kXb3ro7bA7yY9HA0vskm3120WxxHW9jxgxZN+82Ot5Tm7nXOAlsN6vuqnt4idnxZQ==
+
+"@tiptap/extension-ordered-list@^2.0.0-beta.16":
+  version "2.0.0-beta.16"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-ordered-list/-/extension-ordered-list-2.0.0-beta.16.tgz#3ef25a8dd8ddbd2b1aa5ce89d5a2e5a3ecafcf4e"
+  integrity sha512-3n0h5FBfQqBrN/zqF/Ngoyd1bZxeIRLwWI7ak4KulpvOg5V/yw3sw5CSxr2f13ZI9AgGaTq8yOsTYs9dkCCnsQ==
+  dependencies:
+    prosemirror-inputrules "^1.1.3"
+
+"@tiptap/extension-paragraph@^2.0.0-beta.17":
+  version "2.0.0-beta.17"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-paragraph/-/extension-paragraph-2.0.0-beta.17.tgz#f8f0263359b95dec9c10078699697908568d9be9"
+  integrity sha512-qCQVCf9c2hgaeIdfy22PaoZyW5Vare/1aGkOEAaZma5RjrUbV9hrRKwoW9LsDjnh1EN1fIeKdg02yEhnHWtG8A==
+
+"@tiptap/extension-strike@^2.0.0-beta.17":
+  version "2.0.0-beta.17"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-strike/-/extension-strike-2.0.0-beta.17.tgz#2280ea4e8c50189c2729814d2ae484e58c712a36"
+  integrity sha512-+WRd0RuCK4+jFKNVN+4rHTa5VMqqGDO2uc+TknkqhFqWp/z96OAGlpHJOwPrnW1fLbpjEBBQIr1vVYSw6KgcZg==
+
+"@tiptap/extension-text@^2.0.0-beta.13":
+  version "2.0.0-beta.13"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-text/-/extension-text-2.0.0-beta.13.tgz#da0af8d9a3f149d20076e15d88c6af21fb6d940f"
+  integrity sha512-0EtAwuRldCAoFaL/iXgkRepEeOd55rPg5N4FQUN1xTwZT7PDofukP0DG/2jff/Uj17x4uTaJAa9qlFWuNnDvjw==
+
+"@tiptap/starter-kit@^2.0.0-beta.112":
+  version "2.0.0-beta.112"
+  resolved "https://registry.yarnpkg.com/@tiptap/starter-kit/-/starter-kit-2.0.0-beta.112.tgz#3dddeab1d78b453cb0c36822a43c17df677ae352"
+  integrity sha512-PmGHd4dhtYbl3+lnFOs6slER2wwtscQkZHd7/e91Gpaow7C9KpZ6g589F6yyN9BNfoN4qJsEPUI4upZwhan0ZQ==
+  dependencies:
+    "@tiptap/core" "^2.0.0-beta.113"
+    "@tiptap/extension-blockquote" "^2.0.0-beta.15"
+    "@tiptap/extension-bold" "^2.0.0-beta.15"
+    "@tiptap/extension-bullet-list" "^2.0.0-beta.15"
+    "@tiptap/extension-code" "^2.0.0-beta.16"
+    "@tiptap/extension-code-block" "^2.0.0-beta.18"
+    "@tiptap/extension-document" "^2.0.0-beta.13"
+    "@tiptap/extension-dropcursor" "^2.0.0-beta.19"
+    "@tiptap/extension-gapcursor" "^2.0.0-beta.21"
+    "@tiptap/extension-hard-break" "^2.0.0-beta.18"
+    "@tiptap/extension-heading" "^2.0.0-beta.15"
+    "@tiptap/extension-history" "^2.0.0-beta.16"
+    "@tiptap/extension-horizontal-rule" "^2.0.0-beta.19"
+    "@tiptap/extension-italic" "^2.0.0-beta.15"
+    "@tiptap/extension-list-item" "^2.0.0-beta.14"
+    "@tiptap/extension-ordered-list" "^2.0.0-beta.16"
+    "@tiptap/extension-paragraph" "^2.0.0-beta.17"
+    "@tiptap/extension-strike" "^2.0.0-beta.17"
+    "@tiptap/extension-text" "^2.0.0-beta.13"
+
+"@tiptap/vue-3@^2.0.0-beta.64":
+  version "2.0.0-beta.64"
+  resolved "https://registry.yarnpkg.com/@tiptap/vue-3/-/vue-3-2.0.0-beta.64.tgz#d181d9ccf8111a4d80f309458a8eafce232a638d"
+  integrity sha512-BT+DJaMthZpt1VSa74z/R3Pcii0fyKhuNEKhOGmEKlr8eypKcfhrnhENcyusM9ayVW8DGO01AFjQ/tZnY6i5rA==
+  dependencies:
+    "@tiptap/extension-bubble-menu" "^2.0.0-beta.36"
+    "@tiptap/extension-floating-menu" "^2.0.0-beta.30"
+    prosemirror-state "^1.3.4"
+    prosemirror-view "^1.20.1"
+
 "@types/body-parser@*":
   version "1.19.1"
   resolved "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.1.tgz"
@@ -1130,11 +1321,107 @@
   resolved "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz"
   integrity sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==
 
+"@types/orderedmap@*":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@types/orderedmap/-/orderedmap-1.0.0.tgz#807455a192bba52cbbb4517044bc82bdbfa8c596"
+  integrity sha512-dxKo80TqYx3YtBipHwA/SdFmMMyLCnP+5mkEqN0eMjcTBzHkiiX0ES118DsjDBjvD+zeSsSU9jULTZ+frog+Gw==
+
 "@types/parse-json@^4.0.0":
   version "4.0.0"
   resolved "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz"
   integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
 
+"@types/prosemirror-commands@*", "@types/prosemirror-commands@^1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@types/prosemirror-commands/-/prosemirror-commands-1.0.4.tgz#d08551415127d93ae62e7239d30db0b5e7208e22"
+  integrity sha512-utDNYB3EXLjAfYIcRWJe6pn3kcQ5kG4RijbT/0Y/TFOm6yhvYS/D9eJVnijdg9LDjykapcezchxGRqFD5LcyaQ==
+  dependencies:
+    "@types/prosemirror-model" "*"
+    "@types/prosemirror-state" "*"
+    "@types/prosemirror-view" "*"
+
+"@types/prosemirror-dropcursor@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@types/prosemirror-dropcursor/-/prosemirror-dropcursor-1.0.3.tgz#49250849b8a0b86e8c29eb1ba70a463e53e46947"
+  integrity sha512-b0/8njnJ4lwyHKcGuCMf3x7r1KjxyugB1R/c2iMCjplsJHSC7UY9+OysqgJR5uUXRekUSGniiLgBtac/lvH6wg==
+  dependencies:
+    "@types/prosemirror-state" "*"
+
+"@types/prosemirror-gapcursor@^1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@types/prosemirror-gapcursor/-/prosemirror-gapcursor-1.0.4.tgz#7df7d373edb33ea8da12084bfd462cf84cd69761"
+  integrity sha512-9xKjFIG5947dzerFvkLWp6F53JwrUYoYwh3SgcTFEp8SbSfNNrez/PFYVZKPnoqPoaK5WtTdQTaMwpCV9rXQIg==
+  dependencies:
+    "@types/prosemirror-model" "*"
+    "@types/prosemirror-state" "*"
+
+"@types/prosemirror-history@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@types/prosemirror-history/-/prosemirror-history-1.0.3.tgz#f1110efbe758129b5475e466ff077f0a8d9b964f"
+  integrity sha512-5TloMDRavgLjOAKXp1Li8u0xcsspzbT1Cm9F2pwHOkgvQOz1jWQb2VIXO7RVNsFjLBZdIXlyfSLivro3DuMWXg==
+  dependencies:
+    "@types/prosemirror-model" "*"
+    "@types/prosemirror-state" "*"
+
+"@types/prosemirror-inputrules@^1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@types/prosemirror-inputrules/-/prosemirror-inputrules-1.0.4.tgz#4cb75054d954aa0f6f42099be05eb6c0e6958bae"
+  integrity sha512-lJIMpOjO47SYozQybUkpV6QmfuQt7GZKHtVrvS+mR5UekA8NMC5HRIVMyaIauJLWhKU6oaNjpVaXdw41kh165g==
+  dependencies:
+    "@types/prosemirror-model" "*"
+    "@types/prosemirror-state" "*"
+
+"@types/prosemirror-keymap@^1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@types/prosemirror-keymap/-/prosemirror-keymap-1.0.4.tgz#f73c79810e8d0e0a20d153d84f998f02e5afbc0c"
+  integrity sha512-ycevwkqUh+jEQtPwqO7sWGcm+Sybmhu8MpBsM8DlO3+YTKnXbKA6SDz/+q14q1wK3UA8lHJyfR+v+GPxfUSemg==
+  dependencies:
+    "@types/prosemirror-commands" "*"
+    "@types/prosemirror-model" "*"
+    "@types/prosemirror-state" "*"
+    "@types/prosemirror-view" "*"
+
+"@types/prosemirror-model@*", "@types/prosemirror-model@^1.13.2":
+  version "1.13.2"
+  resolved "https://registry.yarnpkg.com/@types/prosemirror-model/-/prosemirror-model-1.13.2.tgz#2adad3ec478f83204f155d7fb94c9dfde2fc3296"
+  integrity sha512-a2rDB0aZ+7aIP7uBqQq1wLb4Hg4qqEvpkCqvhsgT/gG8IWC0peCAZfQ24sgTco0qSJLeDgIbtPeU6mgr869/kg==
+  dependencies:
+    "@types/orderedmap" "*"
+
+"@types/prosemirror-schema-list@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@types/prosemirror-schema-list/-/prosemirror-schema-list-1.0.3.tgz#bdf1893a7915fbdc5c49b3cac9368e96213d70de"
+  integrity sha512-uWybOf+M2Ea7rlbs0yLsS4YJYNGXYtn4N+w8HCw3Vvfl6wBAROzlMt0gV/D/VW/7J/LlAjwMezuGe8xi24HzXA==
+  dependencies:
+    "@types/orderedmap" "*"
+    "@types/prosemirror-model" "*"
+    "@types/prosemirror-state" "*"
+
+"@types/prosemirror-state@*", "@types/prosemirror-state@^1.2.7":
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/@types/prosemirror-state/-/prosemirror-state-1.2.7.tgz#cd55062e4043a31e3426f47668f1d7038b5d8dfb"
+  integrity sha512-clJf5uw3/XQnBJtl2RqYXoLMGBySnLYl43xtDvFfQZKkLnnYcM1SDU8dcz7lWjl2Dm+H98RpLOl44pp7DYT+wA==
+  dependencies:
+    "@types/prosemirror-model" "*"
+    "@types/prosemirror-transform" "*"
+    "@types/prosemirror-view" "*"
+
+"@types/prosemirror-transform@*", "@types/prosemirror-transform@^1.1.4":
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/@types/prosemirror-transform/-/prosemirror-transform-1.1.4.tgz#c3565e81b2ef3ce3254e6927d6f63eb8d7bb20d0"
+  integrity sha512-HP1PauvkqSgDquZut8HaLOTUDQ6jja/LAy4OA7tTS1XG7wqRnX3gLUyEj0mD6vFd4y8BPkNddNdOh/BeGHlUjg==
+  dependencies:
+    "@types/prosemirror-model" "*"
+
+"@types/prosemirror-view@*", "@types/prosemirror-view@^1.19.1":
+  version "1.19.1"
+  resolved "https://registry.yarnpkg.com/@types/prosemirror-view/-/prosemirror-view-1.19.1.tgz#f12309ef07dfb701d20c2e4d0292d42ba34a081b"
+  integrity sha512-fyQ4NVxAdfISWrE2qT8cpZdosXoH/1JuVYMBs9CdaXPbvi/8R2L2tkkcMRM314piKrO8nfYH5OBZKzP2Ax3jtA==
+  dependencies:
+    "@types/prosemirror-model" "*"
+    "@types/prosemirror-state" "*"
+    "@types/prosemirror-transform" "*"
+
 "@types/q@^1.5.1":
   version "1.5.5"
   resolved "https://registry.npmjs.org/@types/q/-/q-1.5.5.tgz"
@@ -6312,6 +6599,11 @@ ora@^3.4.0:
     strip-ansi "^5.2.0"
     wcwidth "^1.0.1"
 
+orderedmap@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/orderedmap/-/orderedmap-1.1.1.tgz#c618e77611b3b21d0fe3edc92586265e0059c789"
+  integrity sha512-3Ux8um0zXbVacKUkcytc0u3HgC0b0bBLT+I60r2J/En72cI0nZffqrA7Xtf2Hqs27j1g82llR5Mhbd0Z1XW4AQ==
+
 original@^1.0.0:
   version "1.0.2"
   resolved "https://registry.npmjs.org/original/-/original-1.0.2.tgz"
@@ -7096,6 +7388,98 @@ promise-inflight@^1.0.1:
   resolved "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz"
   integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM=
 
+prosemirror-commands@^1.1.10:
+  version "1.1.10"
+  resolved "https://registry.yarnpkg.com/prosemirror-commands/-/prosemirror-commands-1.1.10.tgz#406a6589966e6cd80809cea2d801fb998639b37d"
+  integrity sha512-IWyBBXNAd44RM6NnBPljwq+/CM2oYCQJkF+YhKEAZNwzW0uFdGf4qComhjbKZzqFdu6Iub2ZhNsXgwPibA0lCQ==
+  dependencies:
+    prosemirror-model "^1.0.0"
+    prosemirror-state "^1.0.0"
+    prosemirror-transform "^1.0.0"
+
+prosemirror-dropcursor@^1.3.5:
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/prosemirror-dropcursor/-/prosemirror-dropcursor-1.3.5.tgz#d2808c17089df0e441ad66016aecc2b6457c8a1f"
+  integrity sha512-tNUwcF2lPAkwKBZPZRtbxpwljnODRNZ3eiYloN1DSUqDjMT1nBZm0nejaEMS1TvNQ+3amibUSAiV4hX+jpASFA==
+  dependencies:
+    prosemirror-state "^1.0.0"
+    prosemirror-transform "^1.1.0"
+    prosemirror-view "^1.1.0"
+
+prosemirror-gapcursor@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/prosemirror-gapcursor/-/prosemirror-gapcursor-1.2.0.tgz#28fb60bf3d9baf1f920907d2c3e613137204e8f3"
+  integrity sha512-yCLy5+0rVqLir/KcHFathQj4Rf8aRHi80FmEfKtM0JmyzvwdomslLzDZ/pX4oFhFKDgjl/WBBBFNqDyNifWg7g==
+  dependencies:
+    prosemirror-keymap "^1.0.0"
+    prosemirror-model "^1.0.0"
+    prosemirror-state "^1.0.0"
+    prosemirror-view "^1.0.0"
+
+prosemirror-history@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/prosemirror-history/-/prosemirror-history-1.2.0.tgz#04cc4df8d2f7b2a46651a2780de191ada6d465ea"
+  integrity sha512-B9v9xtf4fYbKxQwIr+3wtTDNLDZcmMMmGiI3TAPShnUzvo+Rmv1GiUrsQChY1meetHl7rhML2cppF3FTs7f7UQ==
+  dependencies:
+    prosemirror-state "^1.2.2"
+    prosemirror-transform "^1.0.0"
+    rope-sequence "^1.3.0"
+
+prosemirror-inputrules@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/prosemirror-inputrules/-/prosemirror-inputrules-1.1.3.tgz#93f9199ca02473259c30d7e352e4c14022d54638"
+  integrity sha512-ZaHCLyBtvbyIHv0f5p6boQTIJjlD6o2NPZiEaZWT2DA+j591zS29QQEMT4lBqwcLW3qRSf7ZvoKNbf05YrsStw==
+  dependencies:
+    prosemirror-state "^1.0.0"
+    prosemirror-transform "^1.0.0"
+
+prosemirror-keymap@^1.0.0, prosemirror-keymap@^1.1.3:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/prosemirror-keymap/-/prosemirror-keymap-1.1.4.tgz#8b481bf8389a5ac40d38dbd67ec3da2c7eac6a6d"
+  integrity sha512-Al8cVUOnDFL4gcI5IDlG6xbZ0aOD/i3B17VT+1JbHWDguCgt/lBHVTHUBcKvvbSg6+q/W4Nj1Fu6bwZSca3xjg==
+  dependencies:
+    prosemirror-state "^1.0.0"
+    w3c-keyname "^2.2.0"
+
+prosemirror-model@^1.0.0, prosemirror-model@^1.14.3:
+  version "1.14.3"
+  resolved "https://registry.yarnpkg.com/prosemirror-model/-/prosemirror-model-1.14.3.tgz#a9c250d3c4023ddf10ecb41a0a7a130e9741d37e"
+  integrity sha512-yzZlBaSxfUPIIP6U5Edh5zKxJPZ5f7bwZRhiCuH3UYkWhj+P3d8swHsbuAMOu/iDatDc5J/Qs5Mb3++mZf+CvQ==
+  dependencies:
+    orderedmap "^1.1.0"
+
+prosemirror-schema-list@^1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/prosemirror-schema-list/-/prosemirror-schema-list-1.1.6.tgz#c3e13fe2f74750e4a53ff88d798dc0c4ccca6707"
+  integrity sha512-aFGEdaCWmJzouZ8DwedmvSsL50JpRkqhQ6tcpThwJONVVmCgI36LJHtoQ4VGZbusMavaBhXXr33zyD2IVsTlkw==
+  dependencies:
+    prosemirror-model "^1.0.0"
+    prosemirror-transform "^1.0.0"
+
+prosemirror-state@^1.0.0, prosemirror-state@^1.2.2, prosemirror-state@^1.3.4:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/prosemirror-state/-/prosemirror-state-1.3.4.tgz#4c6b52628216e753fc901c6d2bfd84ce109e8952"
+  integrity sha512-Xkkrpd1y/TQ6HKzN3agsQIGRcLckUMA9u3j207L04mt8ToRgpGeyhbVv0HI7omDORIBHjR29b7AwlATFFf2GLA==
+  dependencies:
+    prosemirror-model "^1.0.0"
+    prosemirror-transform "^1.0.0"
+
+prosemirror-transform@^1.0.0, prosemirror-transform@^1.1.0, prosemirror-transform@^1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/prosemirror-transform/-/prosemirror-transform-1.3.2.tgz#5620ebe7379e6fae4f34ecc881886cb22ce96579"
+  integrity sha512-/G6d/u9Mf6Bv3H1XR8VxhpjmUO75LYmnvj+s3ZfZpakU1hnQbsvCEybml1B3f2IWUAAQRFkbO1PnsbFhLZsYsw==
+  dependencies:
+    prosemirror-model "^1.0.0"
+
+prosemirror-view@^1.0.0, prosemirror-view@^1.1.0, prosemirror-view@^1.20.1:
+  version "1.20.1"
+  resolved "https://registry.yarnpkg.com/prosemirror-view/-/prosemirror-view-1.20.1.tgz#174ba8ca358c73cc05e9a92a3d252bcf181ea337"
+  integrity sha512-djWORhy3a706mUH4A2dgEEV0IPZqQd1tFyz/ZVHJNoqhSgq82FwG6dq7uqHeUB2KdVSNfI2yc3rwfqlC/ll2pA==
+  dependencies:
+    prosemirror-model "^1.14.3"
+    prosemirror-state "^1.0.0"
+    prosemirror-transform "^1.1.0"
+
 proxy-addr@~2.0.5:
   version "2.0.7"
   resolved "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz"
@@ -7561,6 +7945,11 @@ ripemd160@^2.0.0, ripemd160@^2.0.1:
     hash-base "^3.0.0"
     inherits "^2.0.1"
 
+rope-sequence@^1.3.0:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/rope-sequence/-/rope-sequence-1.3.2.tgz#a19e02d72991ca71feb6b5f8a91154e48e3c098b"
+  integrity sha512-ku6MFrwEVSVmXLvy3dYph3LAMNS0890K7fabn+0YIRQ2T96T9F4gkFf0vf0WW0JUraNWwGRtInEpH7yO4tbQZg==
+
 run-async@^2.4.0:
   version "2.4.1"
   resolved "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz"
@@ -8364,6 +8753,13 @@ timsort@^0.3.0:
   resolved "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz"
   integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
 
+tippy.js@^6.3.1:
+  version "6.3.1"
+  resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-6.3.1.tgz#3788a007be7015eee0fd589a66b98fb3f8f10181"
+  integrity sha512-JnFncCq+rF1dTURupoJ4yPie5Cof978inW6/4S6kmWV7LL9YOSEVMifED3KdrVPEG+Z/TFH2CDNJcQEfaeuQww==
+  dependencies:
+    "@popperjs/core" "^2.8.3"
+
 tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz"
@@ -8840,6 +9236,11 @@ vuex@^4.0.0-0:
   dependencies:
     "@vue/devtools-api" "^6.0.0-beta.11"
 
+w3c-keyname@^2.2.0:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/w3c-keyname/-/w3c-keyname-2.2.4.tgz#4ade6916f6290224cdbd1db8ac49eab03d0eef6b"
+  integrity sha512-tOhfEwEzFLJzf6d1ZPkYfGj+FWhIpBux9ppoP3rlclw3Z0BZv3N7b7030Z1kYth+6rDuAsXUFr+d0VE6Ed1ikw==
+
 watchpack-chokidar2@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npmjs.org/watchpack-chokidar2/-/watchpack-chokidar2-2.0.1.tgz"

From 6ec84f3299f878c199a96898e6488d4733539059 Mon Sep 17 00:00:00 2001
From: rais0005 <yassine.rais@etudiant.univ-reims.fr>
Date: Wed, 29 Sep 2021 00:27:25 +0200
Subject: [PATCH 2/3] =?UTF-8?q?=F0=9F=92=A7=20Logo=20Update=20,=20rescale?=
 =?UTF-8?q?=20paddings?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/logo.svg                    | 100 ++++++++++++++++++
 src/common/components/Progress.vue            |  13 +--
 .../components/elements/ActivityBlock.vue     |   7 +-
 src/common/components/elements/Card.vue       |  35 +++---
 src/common/components/elements/Logo.vue       |  13 ++-
 .../elements/activity/ShortFollower.vue       |   2 +-
 src/common/components/partials/Footer.vue     |  42 +++++---
 src/common/functions.js                       |  61 -----------
 src/common/utils/date-format.js               |  61 +++++++++++
 src/layouts/SidebarLayout.vue                 |  26 +++++
 src/modules/profile/components/ProfileBox.vue |   4 +-
 src/modules/profile/pages/Profile.vue         |   3 +
 src/modules/scan/components/Comment.vue       |  30 ++++--
 tailwind.config.js                            |   4 +-
 14 files changed, 275 insertions(+), 126 deletions(-)
 create mode 100644 src/assets/images/logo.svg

diff --git a/src/assets/images/logo.svg b/src/assets/images/logo.svg
new file mode 100644
index 0000000..bb1cab9
--- /dev/null
+++ b/src/assets/images/logo.svg
@@ -0,0 +1,100 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1664.89" height="389" viewBox="0 0 1664.89 389">
+  <defs>
+    <style>
+      .cls-1 {
+        clip-path: url(#clip-logo);
+      }
+
+      .cls-2 {
+        fill: #449b23;
+        stroke: #fca01f;
+        stroke-width: 4px;
+      }
+
+      .cls-2, .cls-9 {
+        stroke-miterlimit: 10;
+      }
+
+      .cls-3 {
+        fill: #e13510;
+      }
+
+      .cls-4 {
+        fill: #ae0018;
+        opacity: 0.3;
+      }
+
+      .cls-4, .cls-8 {
+        mix-blend-mode: multiply;
+        isolation: isolate;
+      }
+
+      .cls-5 {
+        fill: #161615;
+      }
+
+      .cls-6 {
+        fill: #61bab7;
+      }
+
+      .cls-7, .cls-8 {
+        fill: #009289;
+      }
+
+      .cls-9 {
+        stroke: #fff;
+        fill-rule: evenodd;
+      }
+
+      .cls-10 {
+        fill: rgba(44,47,59,0);
+      }
+    </style>
+    <clipPath id="clip-logo">
+      <rect width="1664.89" height="389" />
+    </clipPath>
+  </defs>
+  t
+  <g id="logo" class="cls-1">
+    <rect class="cls-10" width="1664.89" height="389" />
+    <g transform="translate(-208.026 -66.688)">
+      <path class="cls-2" d="M600.723,300.8c-7.327-2.273-9.13-7.484-8.973-14.222.628-28.288-9.324-52.19-29.971-71.5-4.155-3.88-6.937-8.15-5.525-13.909.233-12.225-4.546-18.572-16.105-21.2-4.427-1.018-9.167-1.489-13.323.547-5.326,2.586-10.066,1.569-15.358-.195-12.929-4.271-26.248-6.934-39.962-5.445a107.253,107.253,0,0,1-25.547-.509c-.471-.042-.9-.08-1.37-.157-1.144-.157-2.162-.184-3.222-.256-.788-4.389-3.383-6.49-9.749-9.149-6.819-2.82-13.829-5.131-20.685-7.955-10.541-4.384-11.131-6.267-6.39-16.609,4.469-9.795,11.4-18.026,17.165-26.956,2.154-3.409,5.364-7.056,2.739-11.246-2.23-3.566-6.462-2.9-10.185-2.823-2.04.08-4.114.08-6.153.118-25.938.746-51.915,1.45-77.853,1.764q-23.8.292-47.6.038c-6.505-.038-11.949,1.489-15.125,8.189-10.97,22.961-22.644,45.609-33.186,68.765-6.466,14.142.433,26.053,15.792,29.7,7.166,1.726,14.417,3.176,19.785,4.351,3.524.314,5.169.432,6.818.627,12.887,1.569,13.438,2.744,8.579,14.456-5.8,14.027-11.479,28.135-16.927,42.276-6.777,17.632-.938,28.449,17.631,32.757,9.6,2.235,19.238,4.308,28.919,6.153,21.469,4.113,23.742,4.465,18.921,30.128-3.015,16.1-5.992,32.286-11.008,48-2.392,7.484-3.172,15.244-3.41,23.08-.233,6.776,3.253,10.342,9.4,12.692,7.209,2.705,11.559-.624,15.906-5.678q13.7-15.87,27.545-31.7,5.338-6.129,10.66-12.274a34.733,34.733,0,0,0,7.519,2.479,31.507,31.507,0,0,0,9.757.826c7.679-.826,14.459,1.29,21.274,4.661,10.3,5.134,20.922,8.9,32.875,9.167,1.565.039,3.172.119,4.74.238,10.932.861,21.041,4.033,28.835,14.26,7.014,9.13,16.652,8.7,26.409,2.039a25.031,25.031,0,0,0,10.5-14.654,14.69,14.69,0,0,1,7.014-9.481c16.262-9.953,30.878-21.669,40.317-38.829.394-.705.785-1.332,1.217-1.959a15.275,15.275,0,0,1,13.79-6.975c4.625.2,8.9-1.489,13.009-3.41,7.993-3.761,8.425-11.716,9.6-18.806C610.908,305.776,606.091,302.443,600.723,300.8Z" />
+      <g>
+        <g>
+          <path class="cls-3" d="M443.138,245.826c6.505,2.273,8.541,6.975,7.836,13.518-.665,6.31-3.214,11.754-6.309,17.2-12.5,21.821-27.817,41.61-43.374,61.239-11.322,14.261-22.8,28.406-34.75,42.12-7.171,8.226-14.5,16.338-22.062,24.212-3.448,3.566-6.9,10.423-12.773,7.366-6.542-3.409-2.192-10.343-1.526-15.634a116.244,116.244,0,0,1,4.231-19.235,318.857,318.857,0,0,0,11.323-51.643c2.31-16.338-.276-19.981-16.847-23.157-9.677-1.84-19.357-3.68-28.916-6.072-27.977-7.09-23.7-12.81-18.182-31.382a171.791,171.791,0,0,1,15.714-37.3c1.451-2.51,3.016-4.9,4.389-7.446,4.5-8.463,3.448-10.7-5.682-12.3-2.039-.394-4.075-.551-6.114-.823-2.036-.313-4.075-.589-7.327-1.1-9.558-.314-19.591-4.469-29.933-6.975-7.484-1.8-10.461-6.467-7.874-13.79,8.345-24.021,17.084-47.92,32.086-68.923,3.058-4.27,7.094-4.974,11.755-5.325,13.832-1.018,27.7-1.374,41.572-1.531,8.7-.115,17.4-.115,26.1-.115,13.556,0,27.113-.314,40.631-.237,10.266.08,11.6,2.391,6.856,11.8-3.1,6.229-6.737,12.221-9.913,18.412-6.857,13.4-4.037,20.57,9.833,25.51,5.407,1.917,10.855,3.761,16.262,5.72,12.068,4.465,13.947,7.874,10.3,20.413-2.9,9.834-5.682,19.705-9.638,29.229-5.017,12.144-2.82,16.728,9.6,21.664C434.6,242.887,438.868,244.338,443.138,245.826Z" />
+          <path class="cls-4" d="M319.914,268.279c-15.672-7.837,19.591-39.181,11.754-66.608-7.836-19.59-35.262-11.754-39.18-27.426-6.146-24.581,4.583-44.343,17.053-64.951-6.922.237-13.832.578-20.738,1.087-4.661.351-8.7,1.055-11.755,5.325-15,21-23.741,44.9-32.086,68.923-2.587,7.323.39,11.987,7.874,13.79,10.342,2.506,20.375,6.661,29.933,6.975,3.252.509,5.291.785,7.327,1.1,2.039.272,4.075.429,6.114.823,9.13,1.6,10.186,3.838,5.682,12.3-1.373,2.548-2.938,4.936-4.389,7.446a171.791,171.791,0,0,0-15.714,37.3c-5.521,18.572-9.8,24.292,18.182,31.382,9.559,2.392,19.239,4.232,28.916,6.072,16.571,3.176,19.157,6.819,16.847,23.157a318.857,318.857,0,0,1-11.323,51.643,116.244,116.244,0,0,0-4.231,19.235c-.666,5.291-5.016,12.225,1.526,15.634,5.877,3.057,9.325-3.8,12.773-7.366,7.564-7.874,14.891-15.986,22.062-24.212,7.35-8.437,14.49-17.066,21.557-25.755C382.588,317.572,359.435,290.861,319.914,268.279Z" />
+          <path class="cls-5" d="M451.56,238.07c9.952,4.817,12.462,9.52,11.012,20.532-1.1,8.383-5.407,15.4-9.481,22.529-12.929,22.567-28.682,43.1-45.452,62.846-11.674,13.752-23.509,27.347-35.34,40.941l-5.758-5.012c11.949-13.714,23.428-27.859,34.75-42.12,15.557-19.629,30.877-39.418,43.374-61.239,3.1-5.449,5.644-10.893,6.309-17.2.7-6.543-1.331-11.245-7.836-13.518-4.27-1.488-8.543-2.939-12.733-4.584-12.42-4.936-14.617-9.52-9.6-21.664,3.956-9.524,6.738-19.4,9.638-29.229,3.643-12.539,1.764-15.948-10.3-20.413-5.407-1.959-10.855-3.8-16.262-5.72-13.87-4.94-16.69-12.11-9.833-25.51,3.176-6.191,6.818-12.183,9.913-18.412,4.741-9.4,3.41-11.716-6.856-11.8-13.518-.077-27.075.237-40.631.237-8.7,0-17.4,0-26.1.115l-.119-7.756c25.938-.314,51.915-1.018,77.853-1.764,2.039-.038,4.113-.038,6.153-.118,3.723-.077,7.955-.743,10.185,2.823,2.625,4.19-.585,7.837-2.739,11.246-5.763,8.93-12.7,17.161-17.165,26.956-4.741,10.342-4.151,12.225,6.39,16.609,6.856,2.824,13.866,5.135,20.685,7.955,9.01,3.762,10.541,6.31,9.952,15.986-.743,12.459-4.817,24.1-8.816,35.772-3.761,10.932-3.252,11.991,7.523,16.533C444.038,234.7,447.841,236.268,451.56,238.07Z" />
+          <path class="cls-5" d="M281.789,264.361c-5.521,18.572-9.8,24.292,18.182,31.382,9.559,2.392,19.239,4.232,28.916,6.072,16.571,3.176,19.157,6.819,16.847,23.157a318.857,318.857,0,0,1-11.323,51.643,116.244,116.244,0,0,0-4.231,19.235c-.666,5.291-5.016,12.225,1.526,15.634,5.877,3.057,9.325-3.8,12.773-7.366,7.564-7.874,14.891-15.986,22.062-24.212l5.758,5.012q-13.815,15.87-27.545,31.7c-4.347,5.054-8.7,8.383-15.906,5.678-6.152-2.35-9.638-5.916-9.4-12.692.238-7.836,1.018-15.6,3.41-23.08,5.016-15.71,7.993-31.892,11.008-48,4.821-25.663,2.548-26.015-18.921-30.128-9.681-1.845-19.319-3.918-28.919-6.153-18.569-4.308-24.408-15.125-17.631-32.757,5.448-14.141,11.13-28.249,16.927-42.276,4.859-11.712,4.308-12.887-8.579-14.456-1.649-.2-3.294-.313-6.818-.627-5.368-1.175-12.619-2.625-19.785-4.351-15.359-3.642-22.258-15.553-15.792-29.7,10.542-23.156,22.216-45.8,33.186-68.765,3.176-6.7,8.62-8.227,15.125-8.189q23.8.292,47.6-.038l.119,7.756c-13.87.157-27.74.513-41.572,1.531-4.661.351-8.7,1.055-11.755,5.325-15,21-23.741,44.9-32.086,68.923-2.587,7.323.39,11.987,7.874,13.79,10.342,2.506,20.375,6.661,29.933,6.975,3.252.509,5.291.785,7.327,1.1,2.039.272,4.075.429,6.114.823,9.13,1.6,10.186,3.838,5.682,12.3-1.373,2.548-2.938,4.936-4.389,7.446A171.791,171.791,0,0,0,281.789,264.361Z" />
+        </g>
+        <g>
+          <path id="Tracé_15" class="cls-6" d="M600.333,314.748c.47,5.564-2.939,9.91-6.819,10.186-5.758.352-6.975-2.273-7.094-6.072-.153-6,2.2-9.168,7.132-9.4C597.275,309.3,599.98,310.474,600.333,314.748Z" />
+          <path id="Tracé_16" class="cls-6" d="M530.744,248.688c7.328.157,11.992,5.25,11.8,12.852-.2,9.05-5.212,14.575-13.205,14.418-7.8-.157-12.538-5.407-12.343-13.6C517.23,253.352,522.166,248.493,530.744,248.688Z" />
+          <path id="Tracé_17" class="cls-6" d="M444.822,183.607c6.424.746,9.677,3.6,9.52,8.387-.2,6.073-5.445,10.186-12.891,10.224l-.979-.038c-6.738-.276-11.165-4.113-10.775-9.482.394-5.6,5.33-9.324,12.267-9.248C442.982,183.45,443.923,183.531,444.822,183.607Z" />
+          <path id="Tracé_18" class="cls-6" d="M433.539,280.071c.076,5.487-2.977,9.168-7.561,9.129-4.86,0-9.21-4.151-9.719-9.244a8.23,8.23,0,0,1,7.955-8.934C429.345,270.708,433.462,274.7,433.539,280.071Z" />
+          <path id="Tracé_19" class="cls-6" d="M512.252,390.642A7.774,7.774,0,0,1,513,393.03c-.707,4.779-4.312,6.581-8.387,7.484-4.465.98-7.993-.666-10.067-4.821a3.236,3.236,0,0,1,0-2.349C496.032,389.544,509.708,387.428,512.252,390.642Z" />
+          <path class="cls-6" d="M393.183,339.745c6.386.471,11.559,7.993,11.441,16.533-.158,8.464-3.8,12.187-11.835,11.95-8.265-.233-13.438-5.759-13.243-14.222C379.741,345.974,386.246,339.194,393.183,339.745Z" />
+          <path class="cls-5" d="M600.723,300.8c5.368,1.645,10.185,4.978,9.091,11.4-1.175,7.09-1.607,15.045-9.6,18.806-4.113,1.921-8.384,3.6-13.009,3.41a15.275,15.275,0,0,0-13.79,6.975l-7.836-2.43c10.342-15.4,16.219-33.694,15.554-52.619-.743-20.845-3.291-34.245-10.657-44.943-15.634-22.8-35.97-40.394-61.438-51.482-10.656-4.622-22.173-5.682-33.812-4.466-5.288.509-8.579,2.507-10.224,8.541-3.291,12.3-12.7,19.433-24.764,16.3l.234-8.112.979.038c7.446-.038,12.7-4.151,12.891-10.224.157-4.783-3.1-7.641-9.52-8.387l1.137-9.244a107.253,107.253,0,0,0,25.547.509c13.714-1.489,27.033,1.174,39.962,5.445,5.292,1.764,10.032,2.781,15.358.195,4.156-2.036,8.9-1.565,13.323-.547,11.559,2.625,16.338,8.972,16.105,21.2-1.412,5.759,1.37,10.029,5.525,13.909,20.647,19.315,30.6,43.217,29.971,71.5C591.593,293.314,593.4,298.525,600.723,300.8Zm-7.209,24.136c3.88-.276,7.289-4.622,6.819-10.186-.353-4.274-3.058-5.448-6.781-5.291-4.936.237-7.285,3.409-7.132,9.4C586.539,322.661,587.756,325.286,593.514,324.934Z" />
+          <path class="cls-7" d="M581.133,286.342c.665,18.925-5.212,37.222-15.554,52.619-14.379,21.393-37.341,37.183-63.474,41.335a164.139,164.139,0,0,1-42.158,1.412,172.05,172.05,0,0,1-22.529-3.528,68.732,68.732,0,0,1-14.93-5.525c-6.191-2.9-9.4-6.972-9.011-14.337.7-12.933-5.639-21.943-17.474-26.841-4.546-1.879-8.188-4.427-8.778-9.363-4.465-36.2-4.974-71.505,23.2-100.225,8.269-8.464,15.986-15.164,29.818-11.6,12.068,3.133,21.473-4,24.764-16.3,1.645-6.034,4.936-8.032,10.224-8.541,11.639-1.216,23.156-.156,33.812,4.466,25.468,11.088,45.8,28.681,61.438,51.482C577.842,252.1,580.39,265.5,581.133,286.342Zm-28.8-26.489c.2-10.932-9.482-19.705-21.863-19.824-14.066-.157-24.331,9.13-24.255,21.94.119,12.7,10.228,21.707,24.488,21.825C544.106,283.913,552.061,275.1,552.336,259.853Zm-34.872,81.224c.118-7.993-4.78-12.929-12.891-13.048-10.893-.157-19.824,7.76-19.786,17.437.039,7.756,6.738,13.361,15.986,13.319C509.746,358.746,517.307,350.715,517.464,341.077ZM426.957,297.9c9.6-.233,16.258-8.853,16.1-20.879-.076-8.778-8.264-15.83-18.373-15.871-9.639-.077-18.141,8.306-18.1,17.788C406.659,288.535,416.963,298.135,426.957,297.9Z" />
+          <path class="cls-8" d="M570.476,241.4a144.54,144.54,0,0,0-48.995-45.23,135.47,135.47,0,0,1,3.4,44.339,29.034,29.034,0,0,1,5.587-.479c12.381.119,22.058,8.892,21.863,19.824-.275,15.244-8.23,24.06-21.63,23.941a27.437,27.437,0,0,1-15.033-4.3c-8.127,20.3-21.228,38.412-39.035,51.471-20.238,12.65-48.629,17.107-70.434,7.1,5.131,5.05,7.732,11.8,7.273,20.252-.39,7.365,2.82,11.441,9.011,14.337a68.732,68.732,0,0,0,14.93,5.525,172.05,172.05,0,0,0,22.529,3.528,164.139,164.139,0,0,0,42.158-1.412c26.133-4.152,49.1-19.942,63.474-41.335,10.342-15.4,16.219-33.694,15.554-52.619C580.39,265.5,577.842,252.1,570.476,241.4Zm-69.7,117.386c-9.248.042-15.947-5.563-15.986-13.319-.038-9.677,8.893-17.594,19.786-17.437,8.111.119,13.009,5.055,12.891,13.048C517.307,350.715,509.746,358.746,500.773,358.785Z" />
+          <path class="cls-8" d="M387.5,323.43c.941,3.688,3.784,5.9,7.373,7.542A50.1,50.1,0,0,1,387.5,323.43Z" />
+          <path class="cls-5" d="M565.579,338.961l7.836,2.43c-.432.627-.823,1.254-1.217,1.959-9.439,17.16-24.055,28.876-40.317,38.829a14.69,14.69,0,0,0-7.014,9.481,25.031,25.031,0,0,1-10.5,14.654c-9.757,6.658-19.395,7.091-26.409-2.039-7.794-10.227-17.9-13.4-28.835-14.26l.823-8.307a164.139,164.139,0,0,0,42.158-1.412C528.238,376.144,551.2,360.354,565.579,338.961ZM513,393.03a7.774,7.774,0,0,0-.746-2.388c-2.544-3.214-16.22-1.1-17.708,2.7a3.236,3.236,0,0,0,0,2.349c2.074,4.155,5.6,5.8,10.067,4.821C508.686,399.611,512.291,397.809,513,393.03Z" />
+          <path class="cls-5" d="M530.473,240.029c12.381.119,22.058,8.892,21.863,19.824-.275,15.244-8.23,24.06-21.63,23.941-14.26-.118-24.369-9.129-24.488-21.825C506.142,249.159,516.407,239.872,530.473,240.029Zm12.068,21.511c.2-7.6-4.469-12.7-11.8-12.852-8.578-.2-13.514,4.664-13.751,13.675-.2,8.188,4.545,13.438,12.343,13.6C537.329,276.115,542.342,270.59,542.541,261.54Z" />
+          <path class="cls-5" d="M504.573,328.029c8.111.119,13.009,5.055,12.891,13.048-.157,9.638-7.718,17.669-16.691,17.708-9.248.042-15.947-5.563-15.986-13.319C484.749,335.789,493.68,327.872,504.573,328.029Z" />
+          <path class="cls-5" d="M459.947,381.708l-.823,8.307c-1.568-.119-3.175-.2-4.74-.238-11.953-.271-22.571-4.033-32.875-9.167-6.815-3.371-13.6-5.487-21.274-4.661a31.507,31.507,0,0,1-9.757-.826c-19.082-3.995-25.977-19.591-15.4-35.967,3.447-5.288,4.075-9.914,3.214-16.024-1.607-11.322-3.88-22.724-2.862-34.283.471-5.288-1.332-9.482-5.131-13.243-5.525-5.525-7.641-12.539-7.171-20.256.628-10.657,5.759-17.085,16.338-18.221,6.582-.666,10.737-3.409,13.633-8.778,4.389-8.107,10.66-14.535,17.712-20.256A23.548,23.548,0,0,0,419.55,192.5c2.391-14.93,9.913-20.375,25.039-18.3.47.077.9.115,1.37.157l-1.137,9.244c-.9-.076-1.84-.157-2.858-.157-6.937-.076-11.873,3.647-12.267,9.248-.39,5.369,4.037,9.206,10.775,9.482l-.234,8.112c-13.832-3.567-21.549,3.133-29.818,11.6-28.169,28.72-27.66,64.021-23.2,100.225.59,4.936,4.232,7.484,8.778,9.363,11.835,4.9,18.178,13.908,17.474,26.841-.39,7.365,2.82,11.441,9.011,14.337a68.732,68.732,0,0,0,14.93,5.525A172.05,172.05,0,0,0,459.947,381.708Zm-55.323-25.43c.118-8.54-5.055-16.062-11.441-16.533-6.937-.551-13.442,6.229-13.637,14.261-.195,8.463,4.978,13.989,13.243,14.222C400.824,368.465,404.466,364.742,404.624,356.278Z" />
+          <path class="cls-5" d="M443.058,277.018c.157,12.026-6.5,20.646-16.1,20.879-9.994.238-20.3-9.362-20.374-18.962-.039-9.482,8.463-17.865,18.1-17.788C434.794,261.188,442.982,268.24,443.058,277.018ZM425.978,289.2c4.584.039,7.637-3.642,7.561-9.129-.077-5.368-4.194-9.363-9.325-9.049a8.23,8.23,0,0,0-7.955,8.934C416.768,285.049,421.118,289.2,425.978,289.2Z" />
+        </g>
+      </g>
+    </g>
+    <g transform="translate(321 -389.644)">
+      <path class="cls-9" d="M358.772,600.874c.474,4.9,1.054,9.02,1.23,13.163.915,21.675-1.075,23.215-20.333,12.893-6.893-3.687-12.584-1.726-19.042-.542-13.009,2.384-25.662,6.784-39.175,6.389-21.387-.619-31.454-7.427-37.462-25.987-6.389-19.73-1.334-37.758,13.464-49.219,9.579-7.4,20.855-10.075,32.346-11.8,6.519-.976,13.24-.534,19.87-.806,8.061-.326,17.771,1.836,20.428-9.2,2.321-9.593-1.117-18.259-8.69-24.516-15.919-13.163-33.963-11.507-51.9-5.7-10.206,3.307-19.724,8.674-29.782,12.507-4.554,1.726-10.206,2.578-12.946-3.106-2.076-4.28.929-7.85,3.809-10.973,20.521-22.24,71.264-28.884,97.284-13.1,16.64,10.1,22.936,26.429,24.624,43.945C354.645,557.083,360.043,579.068,358.772,600.874Zm-52.362-36.4c-12.343,1.224-24.075,1.836-34.358,8.008-9.882,5.916-12,15.075-9.9,25.832,1.874,9.548,7.743,15.239,17.144,14.667,17.5-1.06,34.366-5.365,49.443-14.828,7.162-4.493,8.658-11.617,7.866-19.592-1-10.012-8.9-10.793-16.184-12.226C315.57,565.369,310.6,565,306.41,564.47Z" transform="translate(86.762 44.561)" />
+      <path class="cls-9" d="M231.835,546.236c29.434,1.317,49.822,26.451,42.311,54.561-7.1,26.552-24.9,46.128-51.41,53.074-28.24,7.4-54.523.666-74.16-23.207a38.958,38.958,0,0,1-5.436-8.271c-1.378-2.989-2.028-6.559.652-9.261,3.863-3.91,7.8-1.712,10.825,1.123,4.22,3.957,7.557,8.874,11.815,12.792,15.82,14.519,34.692,16.749,53.432,8.787,17.445-7.4,29.448-21.665,33.374-40.761,3.1-15.107-2.773-23.138-17.919-27.777-8.943-2.74-18.119-1.989-27.226-1.789-4.151.085-8.271.822-12.414,1.162-24.864,2.038-45.718-6.165-51.348-21.875-7.573-21.155-.045-38.95,14.885-54.444,32.213-33.459,67.2-27.165,98.28-12.877,6.529,3,10.346,8.417,9.866,15.9-.512,8.022-4.7,12.932-12.993,10.346-7.047-2.2-13.406-6.521-20.289-9.354-26.236-10.779-54.282-3.113-68.686,18.53-11.849,17.826-4.849,32.771,16.656,34.637C191.1,548.31,224.371,545.9,231.835,546.236Z" transform="translate(0 27.872)" />
+      <path class="cls-9" d="M632.064,531.808c.107-13.2-2.872-27.839-5.924-42.506-.921-4.483-2.2-10.795,4.165-12.544s8.488,3.453,9.573,8.587c6.466,30.835,15.286,61.368,6.179,93.441-3.422,12.042-9.781,20.894-19.793,27.584-16.694,11.173-29.92,9.8-44.517-4.4-12.537-12.2-12.537-12.2-25.925-.107-19.414,17.516-35.528,16.47-49.164-5.97-19.453-32.043-22.6-67.154-13.877-103.408a24.47,24.47,0,0,1,2.044-4.531c2.6-5.4,5.94-11.623,12.592-9.508,5.946,1.89,7.395,8.666,6.721,14.806-.635,5.754-2.052,11.42-2.957,17.16-3.284,20.908-2.511,41.605,5.557,61.343,3.285,8.038,5.731,18.647,17.455,18.554,10.337-.093,12.683-9.524,16.154-16.85,7.184-15.193,12.527-30.812,9.585-48.134a49.012,49.012,0,0,1-.038-12.367c.3-3.39,1.882-6.411,5.707-7.154,4.663-.9,8.348.844,9.743,5.381,1.951,6.32,3.329,12.825,4.861,19.258,3.657,15.349,6.863,30.82,11.066,46.013,1.959,7.053,4.748,14.768,14.581,14.418,9.247-.324,15.6-5.157,19.321-13.412C631.452,563.517,633.79,548.881,632.064,531.808Z" transform="translate(355.078 38.614)" />
+      <path class="cls-9" d="M435.233,616.441c-42.356-.666-74.431-30.146-78.7-69.313-3.469-31.911,22.5-65.658,54.266-70.381,7.559-1.123,15.148-.573,21.908,3.113,21.286,11.617,36,29.349,44.487,51.728,4.584,12.086.735,17.508-14.031,20.3-18.771,3.54-37.867,5.3-56.7,8.5-6.984,1.186-16.935.737-18.927,8.828-2.214,9.022,6.63,14.48,12.669,19.916,12.685,11.414,27.955,8.433,42.761,6.545,4.847-.619,9.425-3.113,14.231-4.361,6.923-1.787,15.921-6.209,18.943,3.665,2.625,8.532-5.715,12.744-12.529,16.122C453.6,616.077,442.676,615.844,435.233,616.441Zm-36.5-75.259c14.233.285,28.086-2.5,41.955-5.143,11.4-2.184,12.428-9.1,8.425-18.445-6.318-14.784-18.787-22.921-33-21.365-17.562,1.929-36.285,16.587-38.956,30.495-1.479,7.7.658,13.272,9.16,14.357C390.406,541.607,394.6,541.174,398.738,541.182Z" transform="translate(219.988 38.424)" />
+      <path class="cls-9" d="M638.676,615.623c-4.491-.293-12.691-.455-20.351-4.683-17.67-9.751-27.945-27.429-25.4-44.689,2.5-16.966,17.569-33.281,35.72-37.331,8.008-1.789,16.51-1.255,24.67-2.485,12.77-1.921,15.373-6.674,11.167-18.9-4.732-13.754-12.886-20.173-27.582-20.94-11-.565-21.294,2.364-31.144,7.249-5.9,2.935-11.623,6.822-18.576,6.5-2.317-.1-5.351-.921-6.668-2.548-2.293-2.811-1.409-6.434,1.224-8.82,18.073-16.37,39.213-25.136,63.667-22.154,21.853,2.663,32.113,18.979,38.766,37.758,9.275,26.174,7.7,54.035,11.716,81.037,1.091,7.332-3.447,12.45-9.107,16.555C673.538,611.752,658.825,616.491,638.676,615.623Zm11.4-71.464c-20.582-.2-38.624,13.025-38,27.876.595,14.094,14.146,24.812,31.895,25.223,19.119.447,28.319-8.814,28.853-29.048C673.335,549.154,668.8,544.353,650.074,544.159Z" transform="translate(448.258 28.207)" />
+      <path class="cls-9" d="M382.55,486.81c.937,12.88-12.7,9.5-20.971,11.121-4.042.806-8.245.874-12.3,1.666-18.591,3.617-20.078,5.3-20.689,24.346-.271,8.277-.372,16.593.061,24.856.931,17.856,3.965,20.489,20.979,18.653,4.932-.526,9.749-2.184,14.667-2.578,7.371-.581,16.322-1.71,17.763,8.255,1.263,8.617-7.031,10.151-13.327,11.776-6.389,1.658-13.126,1.992-19.513,3.665-16.834,4.4-20.576,8.8-19.352,26.35,1.2,17.307,3.973,34.514,6.132,51.759,1.131,9.036,3.9,20.946-8.022,22.409-12.3,1.518-12.171-11.143-12.784-19.924-1.973-28.086-4.329-56.187-4.784-84.311-.411-24.949-3.471-49.559-5.622-74.316-1.564-17.949,1.184-21.294,18.56-26.536a111.9,111.9,0,0,1,16.935-3.9C346.822,479.207,381.588,473.538,382.55,486.81Z" transform="translate(166.934 40.378)" />
+      <path class="cls-9" d="M680.225,451.872c.14-6.1,1.348-11.113,7.031-12.653,6.567-1.773,11.538,1.315,13.8,7.488a110.781,110.781,0,0,1,6.521,31.508c2.8,43.835,6,87.64,9.293,131.446.68,9.06,2.167,18.091,3.716,27.064,1.022,5.877,1.425,11.515-1.548,16.921-2.477,4.491-5.537,8.6-11.3,8.208-6.351-.427-7.792-5.584-8.2-10.587-1.734-21.5-4.422-43.008-4.468-64.518-.077-43.342-5.732-85.938-13.776-128.349C680.828,455.968,680.488,453.513,680.225,451.872Z" transform="translate(551.699 0.027)" />
+      <path class="cls-9" d="M649.959,455.461a64.3,64.3,0,0,1,.387-6.946c.783-5.313,3.052-9.579,9.17-9.811,4.639-.17,7.634,2.354,9.384,6.612,3.206,7.8,4.2,15.96,4.91,24.3q6.855,80.634,14.1,161.246c.587,6.628,1.781,13.256-.4,19.752a9.943,9.943,0,0,1-9.091,7.249c-4.784.378-7.982-1.967-9.368-6.343-1.241-3.934-2.509-8.022-2.68-12.08-2.6-59.75-7.063-119.321-16.115-178.489C650.014,459.318,650.068,457.637,649.959,455.461Z" transform="translate(520.713 0)" />
+      <path class="cls-9" d="M433.271,511.543c-.3-5.8-.874-11.584-.836-17.376.047-6.513-1.5-14.3,4.4-18.546,7.441-5.373,11.414,2.866,16.664,6.227,7.17,4.576,14.389,1.238,21.45-1.063,12.809-4.151,25.8-6.009,39.167-3.121,4.244.923,8.022,2.564,8.348,7.6.372,5.691-2.261,9.779-8.006,10.609-6.537.937-13.258.6-19.77,1.641-30.377,4.839-41.142,18.87-38.153,49.195,1.8,18.113,7.565,35.769,6.644,54.167-.31,6.132,1.649,14.921-7.642,15.688-8.557.7-10.34-7.211-11.113-13.806C440.86,572.338,434.34,542.27,433.271,511.543Z" transform="translate(297.86 35.988)" />
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/src/common/components/Progress.vue b/src/common/components/Progress.vue
index 8c25451..797a179 100644
--- a/src/common/components/Progress.vue
+++ b/src/common/components/Progress.vue
@@ -41,26 +41,15 @@
       </div>
     </div>
 
-    <div class="submission grid col-span-2">
+    <div class="submission grid col-span-5">
       <strong class="uppercase text-gray"> First Submission </strong>
       <time class="font-bold">{{ getDateSubmission }}</time>
     </div>
-
-    <div class="buttons col-span-3">
-      <Btn class="btn-circle h-20 w-20 flex items-center justify-center">
-        Z
-      </Btn>
-      <Btn class="btn-circle h-20 w-20 flex items-center justify-center">
-        X
-      </Btn>
-    </div>
   </div>
 </template>
 
 <script>
-import Btn from "@/common/components/elements/button/Btn.vue";
 export default {
-  components: { Btn },
   props: {
     message: {
       default: "A certificate was explicitly revoked by its issuer",
diff --git a/src/common/components/elements/ActivityBlock.vue b/src/common/components/elements/ActivityBlock.vue
index d75f58f..03b90f5 100644
--- a/src/common/components/elements/ActivityBlock.vue
+++ b/src/common/components/elements/ActivityBlock.vue
@@ -71,9 +71,10 @@
 </template>
 
 <script>
-import { timeAgoCounts, timeAgo, isAnAVG } from "@/common/functions";
-import { followActions, userGetters } from "@/state/helpers";
+import { isAnAVG } from "@/common/functions";
 import { getClass } from "@/common/classification";
+import { followActions, userGetters } from "@/state/helpers";
+import { timeAgoCounts, timeAgo } from "@/common/utils/date-format";
 
 import HashInput from "./HashInput.vue";
 import FileMeta from "./FileMeta.vue";
@@ -229,7 +230,7 @@ export default {
   }
 
   > * {
-    @apply py-4 px-6 lg:p-10;
+    @apply py-4 px-6 lg:p-8;
   }
 
   .activity-content {
diff --git a/src/common/components/elements/Card.vue b/src/common/components/elements/Card.vue
index 3e11274..aebc162 100644
--- a/src/common/components/elements/Card.vue
+++ b/src/common/components/elements/Card.vue
@@ -1,29 +1,28 @@
 <template>
-    <div class="card">
-        <h2 class="title" v-if="title">
-            {{ title }}
-        </h2>
-        <slot />
-    </div>
+  <div class="card">
+    <h2 class="title" v-if="title">
+      {{ title }}
+    </h2>
+    <slot />
+  </div>
 </template>
 
 <script>
 export default {
-    props: {
-        title: {
-            type: String
-        }
-    }
-}
+  props: {
+    title: {
+      type: String,
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-.card{
-    @apply bg-light py-6 px-6 md:rounded-lg shadow-sm content-center items-center;
-
+.card {
+  @apply bg-light py-3 px-3 md:rounded-lg shadow-sm content-center items-center;
 
-    .title{
-        @apply text-3xl m-4;
-    }
+  .title {
+    @apply text-3xl m-4;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/common/components/elements/Logo.vue b/src/common/components/elements/Logo.vue
index d868ca0..cf50dc4 100644
--- a/src/common/components/elements/Logo.vue
+++ b/src/common/components/elements/Logo.vue
@@ -1,5 +1,12 @@
 <template>
-    <router-link class="text-white no-underline hover:text-white hover:no-underline p-1" to="/">
-        <img src="@/assets/images/logo.png" class=" h-full max-h-20 w-auto mx-auto p-2" alt="Saferwall">
-    </router-link>
+  <router-link
+    class="text-white no-underline hover:text-white hover:no-underline p-1"
+    to="/"
+  >
+    <img
+      src="@/assets/images/logo.svg"
+      class="h-full max-h-20 w-auto mx-auto p-2"
+      alt="Saferwall"
+    />
+  </router-link>
 </template>
diff --git a/src/common/components/elements/activity/ShortFollower.vue b/src/common/components/elements/activity/ShortFollower.vue
index a387012..882b01e 100644
--- a/src/common/components/elements/activity/ShortFollower.vue
+++ b/src/common/components/elements/activity/ShortFollower.vue
@@ -24,7 +24,7 @@
 </template>
 
 <script>
-import { timeAgo } from "@/common/functions";
+import { timeAgo } from "@/common/utils/date-format";
 import { followActions, userGetters } from "@/state/helpers";
 
 import Avatar from "../Avatar.vue";
diff --git a/src/common/components/partials/Footer.vue b/src/common/components/partials/Footer.vue
index b6b6e57..ad19cea 100644
--- a/src/common/components/partials/Footer.vue
+++ b/src/common/components/partials/Footer.vue
@@ -6,23 +6,32 @@
       </div>
       <div></div>
       <div class="media flex items-center justify-end">
-        <p>Developed with ❤ by {{ name }}.</p>
+        <p>Developed with <span class="love">❤</span> by {{ name }}.</p>
         <a :href="media?.github" class="ml-2">
-          <svg width="20" height="20">
-            <image
-              width="20"
-              height="20"
-              xlink:href="/assets/icons/github.svg"
-            />
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+          >
+            <path
+              d="M12,2.2467A10.00042,10.00042,0,0,0,8.83752,21.73419c.5.08752.6875-.21247.6875-.475,0-.23749-.01251-1.025-.01251-1.86249C7,19.85919,6.35,18.78423,6.15,18.22173A3.636,3.636,0,0,0,5.125,16.8092c-.35-.1875-.85-.65-.01251-.66248A2.00117,2.00117,0,0,1,6.65,17.17169a2.13742,2.13742,0,0,0,2.91248.825A2.10376,2.10376,0,0,1,10.2,16.65923c-2.225-.25-4.55-1.11254-4.55-4.9375a3.89187,3.89187,0,0,1,1.025-2.6875,3.59373,3.59373,0,0,1,.1-2.65s.83747-.26251,2.75,1.025a9.42747,9.42747,0,0,1,5,0c1.91248-1.3,2.75-1.025,2.75-1.025a3.59323,3.59323,0,0,1,.1,2.65,3.869,3.869,0,0,1,1.025,2.6875c0,3.83747-2.33752,4.6875-4.5625,4.9375a2.36814,2.36814,0,0,1,.675,1.85c0,1.33752-.01251,2.41248-.01251,2.75,0,.26251.1875.575.6875.475A10.0053,10.0053,0,0,0,12,2.2467Z"
+            ></path>
           </svg>
         </a>
         <a :href="media?.twitter" class="ml-2">
-          <svg width="20" height="20">
-            <image
-              width="20"
-              height="20"
-              xlink:href="/assets/icons/twitter.svg"
-            />
+          <svg
+            class="twitter"
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="black"
+          >
+            <path
+              d="M22,5.8a8.49,8.49,0,0,1-2.36.64,4.13,4.13,0,0,0,1.81-2.27,8.21,8.21,0,0,1-2.61,1,4.1,4.1,0,0,0-7,3.74A11.64,11.64,0,0,1,3.39,4.62a4.16,4.16,0,0,0-.55,2.07A4.09,4.09,0,0,0,4.66,10.1,4.05,4.05,0,0,1,2.8,9.59v.05a4.1,4.1,0,0,0,3.3,4A3.93,3.93,0,0,1,5,13.81a4.9,4.9,0,0,1-.77-.07,4.11,4.11,0,0,0,3.83,2.84A8.22,8.22,0,0,1,3,18.34a7.93,7.93,0,0,1-1-.06,11.57,11.57,0,0,0,6.29,1.85A11.59,11.59,0,0,0,20,8.45c0-.17,0-.35,0-.53A8.43,8.43,0,0,0,22,5.8Z"
+            ></path>
           </svg>
         </a>
       </div>
@@ -62,5 +71,12 @@ footer {
   &.sactive .content {
     @apply w-full;
   }
+
+  .love {
+    @apply text-red-500 font-extrabold;
+  }
+  .twitter {
+    @apply fill-blue-500;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/common/functions.js b/src/common/functions.js
index 74d76e5..c2a1331 100644
--- a/src/common/functions.js
+++ b/src/common/functions.js
@@ -1,66 +1,5 @@
 import { avgList } from '@/common/data/avg'
 
-/**
- * Get Time ago 
- * 
- * @param {object|string} dateParam 
- * @returns {string}
- */
-export function timeAgo(dateParam) {
-    if (!dateParam) {
-        return null;
-    }
-
-    const date = typeof dateParam === 'object' ? dateParam : new Date(dateParam);
-    const DAY_IN_MS = 86400000; // 24 * 60 * 60 * 1000
-    const today = new Date();
-    const yesterday = new Date(today - DAY_IN_MS);
-    const seconds = Math.round((today - date) / 1000);
-    const minutes = Math.round(seconds / 60);
-    const isToday = today.toDateString() === date.toDateString();
-    const isYesterday = yesterday.toDateString() === date.toDateString();
-
-
-    if (seconds < 5) {
-        return 'now';
-    } else if (seconds < 60) {
-        return `${seconds} seconds ago`;
-    } else if (seconds < 90) {
-        return 'about a minute ago';
-    } else if (minutes < 60) {
-        return `${minutes} minutes ago`;
-    } else if (isToday) {
-        return 'Today'
-    } else if (isYesterday) {
-        return 'Yesterday'
-    }
-    return today.getFullYear();
-}
-
-/**
- * Get time ago 
- * Return only one of : (year||month||day||hour||minute||second)
- * 
- * @param {Number|String} dateParam 
- * @returns {string}
- */
-export function timeAgoCounts(dateParam) {
-    const time = typeof dateParam === 'number' ? dateParam : Date.parse(dateParam);
-
-    let seconds = Math.floor((Date.now() - time * 1000) / 1000);
-
-    let intervals = { 'year': 31536000, 'month': 2592000, 'day': 86400, 'hours': 3600, 'minutes': 60, 'second': 1 };
-    let interval = 0;
-
-    let intkey = Object.keys(intervals).find(_key => {
-        interval = seconds / intervals[_key];
-        return interval > 1;
-    });
-
-    let fi = Math.floor(interval);
-    return `${fi} ${intkey}${fi === 1 ? '' : 's'}`;
-}
-
 /**
  * Check if name in the list of avg
  * @param {String} name 
diff --git a/src/common/utils/date-format.js b/src/common/utils/date-format.js
index 029caab..13e3518 100644
--- a/src/common/utils/date-format.js
+++ b/src/common/utils/date-format.js
@@ -4,4 +4,65 @@ export const DATE_FORMAT = "MMMM Do YYYY";
 
 export function timestampToDate(timestamp) {
     return moment(timestamp * 1000).format(DATE_FORMAT);
+}
+
+/**
+ * Get Time ago 
+ * 
+ * @param {object|string} dateParam 
+ * @returns {string}
+ */
+export function timeAgo(dateParam) {
+    if (!dateParam) {
+        return null;
+    }
+
+    const date = typeof dateParam === 'object' ? dateParam : new Date(dateParam);
+    const DAY_IN_MS = 86400000; // 24 * 60 * 60 * 1000
+    const today = new Date();
+    const yesterday = new Date(today - DAY_IN_MS);
+    const seconds = Math.round((today - date) / 1000);
+    const minutes = Math.round(seconds / 60);
+    const isToday = today.toDateString() === date.toDateString();
+    const isYesterday = yesterday.toDateString() === date.toDateString();
+
+
+    if (seconds < 5) {
+        return 'now';
+    } else if (seconds < 60) {
+        return `${seconds} seconds ago`;
+    } else if (seconds < 90) {
+        return 'about a minute ago';
+    } else if (minutes < 60) {
+        return `${minutes} minutes ago`;
+    } else if (isToday) {
+        return 'Today'
+    } else if (isYesterday) {
+        return 'Yesterday'
+    }
+    return today.getFullYear();
+}
+
+/**
+ * Get time ago 
+ * Return only one of : (year||month||day||hour||minute||second)
+ * 
+ * @param {Number|String} dateParam 
+ * @returns {string}
+ */
+export function timeAgoCounts(dateParam) {
+    const time = typeof dateParam === 'number' ? dateParam : Date.parse(dateParam);
+
+    let seconds = Math.floor((Date.now() - time * 1000) / 1000);
+
+    let intervals = { 'year': 31536000, 'month': 2592000, 'day': 86400, 'hours': 3600, 'minutes': 60, 'second': 1 };
+    let interval = 0;
+
+    let intkey = Object.keys(intervals).find(_key => {
+        interval = seconds / intervals[_key];
+        return interval > 1;
+    });
+
+    let fi = Math.floor(interval);
+    return `${fi} ${intkey}${fi === 1 ? '' : 's'}`;
 }
\ No newline at end of file
diff --git a/src/layouts/SidebarLayout.vue b/src/layouts/SidebarLayout.vue
index 175cf8d..b86caef 100644
--- a/src/layouts/SidebarLayout.vue
+++ b/src/layouts/SidebarLayout.vue
@@ -12,6 +12,13 @@
       >
         <slot />
       </Content>
+      <div class="sidebar-footer" :class="sidebarActive ? 'sactive' : ''">
+        <Footer />
+      </div>
+    </template>
+
+    <template v-slot:footer>
+      <div></div>
     </template>
   </base-layout>
 </template>
@@ -22,6 +29,7 @@ import BaseLayout from "@/layouts/BaseLayout.vue";
 import Navbar from "@/common/components/partials/Navbar.vue";
 import Sidebar from "@/common/components/partials/Sidebar.vue";
 import Content from "@/common/components/content/PageContent.vue";
+import Footer from "@/common/components/partials/Footer.vue";
 
 export default {
   components: {
@@ -29,6 +37,7 @@ export default {
     Content,
     Sidebar,
     Navbar,
+    Footer,
   },
   data: () => ({
     title: "Summary",
@@ -65,3 +74,20 @@ export default {
   @apply md:w-scontent md:m-0 md:ml-auto md:px-16;
 }
 </style>
+
+<style lang="scss">
+.sidebar-footer {
+  @apply h-full pb-6;
+  > * {
+    @apply shadow rounded-md;
+  }
+
+  .content {
+    width: 100% !important;
+
+    > div {
+      @apply flex px-8;
+    }
+  }
+}
+</style>
diff --git a/src/modules/profile/components/ProfileBox.vue b/src/modules/profile/components/ProfileBox.vue
index 3d2d9ef..d0cfdde 100644
--- a/src/modules/profile/components/ProfileBox.vue
+++ b/src/modules/profile/components/ProfileBox.vue
@@ -40,7 +40,7 @@
 </template>
 
 <script>
-import { timeAgoCounts } from "@/common/functions";
+import { timeAgoCounts } from "@/common/utils/date-format";
 
 import Card from "@/common/components/elements/Card.vue";
 import Avatar from "@/common/components/elements/Avatar.vue";
@@ -83,7 +83,7 @@ export default {
 
 <style lang="scss" scoped>
 .profile-box {
-  @apply flex flex-wrap justify-between px-4 py-12 md:px-14 md:py-16;
+  @apply flex flex-wrap justify-between px-4 py-12 md:px-14 md:py-8;
 
   .profile-avatar {
     @apply flex px-8 md:px-0;
diff --git a/src/modules/profile/pages/Profile.vue b/src/modules/profile/pages/Profile.vue
index c132248..2b581db 100644
--- a/src/modules/profile/pages/Profile.vue
+++ b/src/modules/profile/pages/Profile.vue
@@ -279,6 +279,9 @@ export default {
 
 <style lang="scss">
 .profile-stats {
+  > div {
+    @apply pt-2;
+  }
   .empty-tab {
     @apply flex justify-center items-center text-center py-8 mt-4 text-gray text-sm;
   }
diff --git a/src/modules/scan/components/Comment.vue b/src/modules/scan/components/Comment.vue
index d07f7a8..9cb8b40 100644
--- a/src/modules/scan/components/Comment.vue
+++ b/src/modules/scan/components/Comment.vue
@@ -2,17 +2,20 @@
   <div :id="id" class="comment">
     <div class="profile">
       <router-link :to="getProfileRoute">
-        <avatar :username="username" height="60px" width="60px" />
+        <avatar :username="author.username" height="60px" width="60px" />
         <div>
-          <b>{{ username }}</b>
-          <p class="text-gray-medium">Member since 2021</p>
+          <b>{{ author.username }}</b>
+          <p class="text-gray-medium">Member since {{ getMemberSince }}</p>
         </div>
+      </router-link>
+
+      <div>
         <btn-follow
           v-if="!isSelfUser"
           :followed="dfollowed"
           v-on:toggleFollow="toggleFollow"
         ></btn-follow>
-      </router-link>
+      </div>
     </div>
     <div class="content" v-html="comment"></div>
     <time class="date">{{ getCommentDate }}</time>
@@ -23,6 +26,7 @@
 import Avatar from "@/common/components/elements/Avatar.vue";
 import BtnFollow from "@/common/components/elements/button/BtnFollow.vue";
 
+import { timeAgoCounts } from "@/common/utils/date-format";
 import { followActions, userGetters } from "@/state/helpers";
 import { timestampToDate } from "@/common/utils/date-format";
 
@@ -36,34 +40,37 @@ export default {
       dfollowed: false,
     };
   },
-  props: ["id", "comment", "username", "date", "follow"],
+  props: ["id", "comment", "author", "date"],
   computed: {
     ...userGetters,
     getCommentDate() {
       return timestampToDate(this.date);
     },
     isSelfUser() {
-      return this.getUser && this.username === this.getUser.username;
+      return this.getUser && this.author.username === this.getUser.username;
     },
     getProfileRoute() {
-      return `/user/${this.username}`;
+      return `/user/${this.author.username}`;
+    },
+    getMemberSince() {
+      return timeAgoCounts(this.author.member_since);
     },
   },
   methods: {
     ...followActions,
     async toggleFollow() {
       if (this.dfollowed) {
-        return this.doUnFollow({ id: this.username }).then(() => {
+        return this.doUnFollow({ id: this.author.username }).then(() => {
           this.dfollowed = false;
         });
       }
-      this.doFollow({ id: this.username }).then(() => {
+      this.doFollow({ id: this.author.username }).then(() => {
         this.dfollowed = true;
       });
     },
   },
   created() {
-    this.dfollowed = this.follow;
+    this.dfollowed = this.author.author;
   },
 };
 </script>
@@ -75,8 +82,9 @@ export default {
   @apply bg-light py-6 px-6 w-full flex flex-col space-y-2;
 
   .profile {
-    @apply justify-start;
+    @apply flex justify-start;
 
+    &,
     a {
       @apply flex items-center space-x-4;
     }
diff --git a/tailwind.config.js b/tailwind.config.js
index a59afd4..72069d7 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -56,10 +56,10 @@ module.exports = {
         'scontent': 'calc(100% - 280px)',
       },
       height: {
-        'navbar': '4.6rem',
+        'navbar': '4.3rem',
       },
       inset: {
-        'navbar': '4.6rem',
+        'navbar': '4.3rem',
       },
     },
     minWidth: theme => ({

From a6950f4775d58e696b0ff6003f94ce2ec1b715a2 Mon Sep 17 00:00:00 2001
From: rais0005 <yassine.rais@etudiant.univ-reims.fr>
Date: Wed, 29 Sep 2021 00:34:48 +0200
Subject: [PATCH 3/3] =?UTF-8?q?=F0=9F=8C=8A=20github=20workflow=20:=20on?=
 =?UTF-8?q?=20push/merge=20main=20build=20run?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/workflows/build.yaml | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/build.yaml b/.github/workflows/build.yaml
index 1716d1d..4d6c88a 100644
--- a/.github/workflows/build.yaml
+++ b/.github/workflows/build.yaml
@@ -1,5 +1,9 @@
 name: UI CI
-on: [push]
+on:
+  push:
+    branches:
+      - main
+      - build
 env:
   IMAGE: saferwall/ui
 jobs: