:recycle: cleaning up match view

frontend/.prettierrc

@@ -1,6 +1,8 @@
-trailingComma: "all"
-tabWidth: 4
-semi: false
-singleQuote: true
-bracketSpacing: true
-arrowParens: "avoid"
+{
+    "trailingComma": "all",
+    "tabWidth": 4,
+    "semi": false,
+    "singleQuote": true,
+    "bracketSpacing": true,
+    "arrowParens": "avoid"
+}

frontend/src/components/icon.vue

@@ -1,5 +1,5 @@
-<template>
-  <div class="icon"></div>
+<template lang="pug">
+.icon
 </template>
 
 <script>
@@ -8,16 +8,14 @@ export default {
 }
 </script>
 
-<style scoped>
-.icon {
-  display: block;
-  border-radius: 50%;
-  width: 48px;
-  height: 48px;
-  background-image: url('https://i.imgur.com/WFqSBgc.png');
-  background-color: rgba(20,20,20,0.3);
-  background-position: 50% 0;
-  background-size: auto 125%;
-  /* margin: 12px auto; */
-}
+<style lang="postcss">
+.icon
+  display: block
+  border-radius: 50%
+  width: 48px
+  height: 48px
+  background-image: url('https://i.imgur.com/WFqSBgc.png')
+  background-color: rgba(20,20,20,0.3)
+  background-position: 50% 0
+  background-size: auto 125%
 </style>

frontend/src/views/Chat.vue

@@ -18,7 +18,6 @@
 
   </div>
 
-
 </template>
 
 <script>

frontend/src/views/Match.vue

@@ -1,124 +1,59 @@
 <template>
-  <div class="match">
+<div class="match">
     <div class="matches">
-      <h1>Matches</h1>
-      <!-- <n-button>naive-ui</n-button> -->
-      <div class="row">
-        <card />
-        <card />
-        <card />
-        <!-- <card /> -->
-      </div>
+        <h1>Matches</h1>
+        <div class="row">
+            <card />
+            <card />
+            <card />
+        </div>
     </div>
 
     <div class="messages">
-      <h2>Messages</h2>
-      <div class="matched active">
-        <div class="icon">
-          <Icon />
-        </div>
-        <div class="messagecontent">
-            <h3>NSE Tropical</h3>
-            <span>
-              Recently active, match now!
-            </span>
+        <h2>Messages</h2>
+        <div class="matched active">
+            <icon />
+            <div class="messagecontent">
+                <h3>NSE Tropical</h3>
+                Recently active, match now!
+            </div>
         </div>
-            <!-- <template #cover>
-            
-            </template> -->
-
-      </div>
 
-      <div class="matched">
-        <div class="icon">
-          <Icon />
+        <div class="matched">
+            <icon />
+            <div class="messagecontent">
+                <h3>Golden Communications</h3>
+                Click to match now!
+            </div>
         </div>
-        <div class="messagecontent">
-            <h3>Golden Communications</h3>
-            Click to match now!
-        </div>
-      </div>
 
-      <div class="matched">
-        <div class="icon">
-          <Icon />
-        </div>
-        <div class="messagecontent">
-            <h3>Mojo Solutions</h3>
-            Click to match now!
+        <div class="matched">
+            <icon />
+            <div class="messagecontent">
+                <h3>Mojo Solutions</h3>
+                Click to match now!
+            </div>
         </div>
-      </div>
     </div>
-
-  </div>
-
-
+</div>
 </template>
 
 <script>
-  import icon from '@/components/icon'
-  import card from '@/components/card'
-  import { defineComponent } from 'vue'
-  import { NButton } from 'naive-ui'
+import { defineComponent } from 'vue'
 
-  export default defineComponent({
-    components: {
-      NButton,
-      card,
-      icon
-    }
-  })
-</script>
+import icon from '@/components/icon.vue'
+import card from '@/components/card.vue'
 
-<style scoped>
-h3 {
-  margin: 0;
-}
-  .match {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    padding: 20px;
-    text-align: left;
-  }
-
-  .row {
-    display: flex;
-    flex-direction: row;
-    /* width: 100vw; */
-    overflow:scroll;
-  }
-
-  .messagecontent {
-    width: 100%;
-    display: block;
-    text-align: left;
-    /* margin-bottom: 10px; */
-    background-color: transparent;
-    border: 0;
-    padding: 12px;
-    
-  }
-  .n-card__content {
-    padding-top: 0;
-  }
-
-  .matched {
-    display: flex;
-    flex-direction: row;
-    background-color: rgba(0,0,0,0.0);
-    margin-bottom: 12px;
-    border-bottom: 1px solid rgba(150,150,150,0.25);
+export default defineComponent({
+  components: {
+    card,
+    icon
   }
+})
+</script>
 
-  .icon {
-    /* display: inline-block; */
-    padding: 8px 12px;
-    margin: -1px;
-    /* flex-grow: 0; */
-    border-bottom: 1px solid rgba(250,250,250,0.95);
-  }
-  .active {
-    /* background-color: rgba(250,50,50,0.3); */
-  }
+<style lang="postcss">
+.row
+    display: flex
+    flex-direction: row
 </style>

frontend/src/views/home.vue

@@ -8,7 +8,8 @@
 <script>
 // @ is an alias to /src
 import HelloWorld from '@/components/HelloWorld.vue'
-  import { NButton } from 'naive-ui'
+import { NButton } from 'naive-ui'
+
 export default {
   name: 'Home',
   components: {