:fire: adjusting bad css | rename friends to matches

frontend/src/App.vue

@@ -15,24 +15,11 @@ export default {
 @import './sss/theme.sss'
 
 #app
-    -webkit-font-smoothing: antialiased
-    -moz-osx-font-smoothing: grayscale
+    width: 100%
     text-align: center
     color: $primary
     font-family: $sans
     padding: $ms-0
     background-color: $secondary
     overflow-x: hidden
-
-::-webkit-scrollbar
-    width: 10px
-
-::-webkit-scrollbar-track
-    background: #f1f1f1
-
-::-webkit-scrollbar-thumb
-    background: #888
-
-::-webkit-scrollbar-thumb:hover
-    background: #555
 </style>

frontend/src/router/index.js

@@ -1,11 +1,10 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import home from '../views/home.vue'
 import Profile from '../views/Profile.vue'
-import Friends from '../views/Friends.vue'
+import Matches from '../views/Matches.vue'
 import Chats from '../views/Chats.vue'
 import Login from '../views/Login.vue'
 import Register from '../views/Register.vue'
-import Forget from '../views/Forget.vue'
 
 const routes = [
     {
@@ -21,9 +20,9 @@ const routes = [
         meta: { requiresAuth: true },
     },
     {
-        path: '/friends',
-        component: Friends,
-        name: 'friends',
+        path: '/matches',
+        component: Matches,
+        name: 'matches',
         meta: { requiresAuth: true, requiresProfile: true },
     },
     {
@@ -43,11 +42,6 @@ const routes = [
         component: Register,
         name: `register`,
     },
-    {
-        path: `/forget`,
-        component: Forget,
-        name: 'forget',
-    },
 ]
 
 const router = createRouter({

frontend/src/shared/Sidebar.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-.sidebar__messages
+aside.sidebar__messages
     h4.message__title {{ title }}
     router-link(
         :class='[uid == user.uid ? "active" : "", "sidebar__message"]'

frontend/src/sss/import.css

@@ -1,2 +1,4 @@
-@import './partials/_reset.sss' @import './partials/_ratios.sss' @import
-    './partials/_helpers.sss' @import './partials/_typography.sss';
+@import './partials/_reset.sss'
+@import './partials/_ratios.sss'
+@import './partials/_helpers.sss'
+@import './partials/_typography.sss'

frontend/src/views/Chats.vue

@@ -161,14 +161,6 @@ html
   padding: 0
   box-sizing: inherit
 
-body
-  display: flex
-  justify-content: center
-  align-items: center
-  height: 100vh
-  background-image: var(--body-bg)
-  font-family: Helvetica, sans-serif
-
 .msger
   height: calc(100% - 50px)
   border: var(--border)

frontend/src/views/Forget.vue

@@ -1,191 +0,0 @@
-<template lang="pug">
-.forget__box
-    h2 Forget
-    form(@submit.prevent='onSubmit')
-        .user__box
-            input(required='' type='email' v-model='form.email')
-            label Email
-        button(type='submit')
-            span
-            span
-            span
-            span {{ requesting ? "Log..." : "Send" }}
-        router-link(to='/login') Login
-</template>
-
-<script>
-export default {
-    data: () => ({
-        valid: true,
-        requesting: false,
-        form: {
-            email: '',
-        },
-    }),
-    methods: {
-        onSubmit() {
-            this.requesting = true
-        },
-    },
-}
-</script>
-
-<style lang="postcss">
-html
-  background-color: #e90d77
-
-.content
-  background: none
-
-.wrapper
-  position: unset
-
-.forget__box
-  position: absolute
-  top: 50%
-  left: 50%
-  width: 300px
-  padding: 40px
-  transform: translate(-50%, -50%)
-  background: rgba(0, 0, 0, 0.5)
-  box-sizing: border-box
-  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.6)
-  border-radius: 10px
-
-.forget__box h2
-  margin: 0 0 30px
-  padding: 0
-  color: #fff
-  text-align: center
-
-.forget__box .user__box
-  position: relative
-
-.forget__box .user__box input
-  width: 100%
-  padding: 10px 0
-  font-size: 16px
-  color: #fff
-  margin-bottom: 30px
-  border: none
-  border-bottom: 1px solid #fff
-  outline: none
-  background: transparent
-
-.forget__box .user__box label
-  position: absolute
-  top: 0
-  left: 0
-  padding: 10px 0
-  font-size: 16px
-  color: #fff
-  pointer-events: none
-  transition: 0.5s
-
-.forget__box .user__box input:focus ~ label,
-.forget__box .user__box input:valid ~ label
-  top: -20px
-  left: 0
-  color: #e90d77
-  font-size: 12px
-
-.forget__box form button
-  position: relative
-  display: inline-block
-  padding: 10px 20px
-  color: #e90d77
-  font-size: 16px
-  text-decoration: none
-  text-transform: uppercase
-  overflow: hidden
-  transition: 0.5s
-  margin-top: 40px
-  letter-spacing: 4px
-  background: none
-  border: none
-
-.forget__box button:hover
-  background: #e90d77
-  color: #fff
-  border-radius: 5px
-  box-shadow: 0 0 5px #e90d77, 0 0 25px #e90d77, 0 0 50px #e90d77, 0 0 100px #e90d77
-
-.forget__box button span
-  position: absolute
-  display: block
-
-.forget__box button span:nth-child(1)
-  top: 0
-  left: -100%
-  width: 100%
-  height: 2px
-  background: linear-gradient(90deg, transparent, #e90d77)
-  animation: btn-anim1 1s linear infinite
-
-.forget__box form a
-  color: white
-  text-decoration: none
-  margin-left: 5px
-  padding: 10px
-
-.forget__box form a:hover
-  background: #e90d77
-  color: #fff
-  border-radius: 5px
-  box-shadow: 0 0 5px #e90d77, 0 0 25px #e90d77, 0 0 50px #e90d77, 0 0 100px #e90d77
-
-@keyframes btn-anim1
-  0%
-    left: -100%
-  50%,
-  100%
-    left: 100%
-
-.forget__box button span:nth-child(2)
-  top: -100%
-  right: 0
-  width: 2px
-  height: 100%
-  background: linear-gradient(180deg, transparent, #e90d77)
-  animation: btn-anim2 1s linear infinite
-  animation-delay: 0.25s
-
-@keyframes btn-anim2
-  0%
-    top: -100%
-  50%,
-  100%
-    top: 100%
-
-.forget__box button span:nth-child(3)
-  bottom: 0
-  right: -100%
-  width: 100%
-  height: 2px
-  background: linear-gradient(270deg, transparent, #e90d77)
-  animation: btn-anim3 1s linear infinite
-  animation-delay: 0.5s
-
-@keyframes btn-anim3
-  0%
-    right: -100%
-  50%,
-  100%
-    right: 100%
-
-.forget__box a span:nth-child(4)
-  bottom: -100%
-  left: 0
-  width: 2px
-  height: 100%
-  background: linear-gradient(360deg, transparent, #e90d77)
-  animation: btn-anim4 1s linear infinite
-  animation-delay: 0.75s
-
-@keyframes btn-anim4
-  0%
-    bottom: -100%
-  50%,
-  100%
-    bottom: 100%
-</style>

frontend/src/views/Friends.vue

@@ -1,13 +0,0 @@
-<template>
-    <!-- <CometChatUserListWithMessages /> -->
-</template>
-
-<script>
-// import { CometChatUserListWithMessages } from "../cometchat-pro-vue-ui-kit";
-export default {
-    name: 'friends',
-    components: {
-        // CometChatUserListWithMessages,
-    },
-}
-</script>

frontend/src/views/Match.vue

@@ -1,49 +0,0 @@
-<template lang="pug">
-.match
-    .matches
-        h1 Matches
-        .row
-            card
-                card
-                    card
-    .messages
-        h2 Messages
-        .matched.active
-            icon
-                .messagecontent
-                    h3 NSE Tropical
-                    |
-                    | Recently active, match now!
-        .matched
-            icon
-                .messagecontent
-                    h3 Golden Communications
-                    |
-                    | Click to match now!
-        .matched
-            icon
-                .messagecontent
-                    h3 Mojo Solutions
-                    |
-                    | Click to match now!
-</template>
-
-<script>
-import { defineComponent } from 'vue'
-
-import icon from '@/components/icon.vue'
-import card from '@/components/card.vue'
-
-export default defineComponent({
-    components: {
-        card,
-        icon,
-    },
-})
-</script>
-
-<style lang="postcss">
-.row
-    display: flex
-    flex-direction: row
-</style>

frontend/src/views/Matches.vue

@@ -0,0 +1,43 @@
+<template lang="pug">
+.match
+    .matches
+        h1 Matches
+        .row
+    .messages
+        h2 Messages
+        .matched.active
+            .messagecontent
+                h3 NSE Tropical
+                |
+                | Recently active, match now!
+        .matched
+            .messagecontent
+                h3 Golden Communications
+                |
+                | Click to match now!
+        .matched
+            .messagecontent
+                h3 Mojo Solutions
+                |
+                | Click to match now!
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+
+// import icon from '@/components/icon.vue'
+// import card from '@/components/card.vue'
+
+export default defineComponent({
+    components: {
+        // card,
+        // icon,
+    },
+})
+</script>
+
+<style lang="postcss">
+.row
+    display: flex
+    flex-direction: row
+</style>

frontend/src/views/home.vue

@@ -1,10 +1,8 @@
 <template lang="pug">
-#home
-    .content-wrapper
-        .content
-            main-header
-            profile-cards(:uid='uid' :users='swipables')
-    sidebar
+article#home
+    main-header
+    profile-cards(:uid='uid' :users='swipables')
+sidebar
 </template>
 
 <script>
@@ -17,7 +15,7 @@ export default {
     data() {
         return {
             swipables: [],
-            uid: '',
+            uid: null,
         }
     },
     created() {
@@ -27,30 +25,23 @@ export default {
     },
     methods: {
         getUsers() {
-            const users = []
-            this.swipables = users.filter(
-                u => (u.id = Date.now() + (Math.random() * 100000).toFixed()),
-            )
+            const users = [
+                {
+                    name: "bob",
+                    id: 1234,
+                    metadata: { age: '21', rawMetadata: 'Some Text Here!' }
+                },
+                {
+                    name: "rob",
+                    id: 1235,
+                    metadata: { age: '21', rawMetadata: 'Some Text Here!' }
+                }
+            ]
+            this.swipables = users
         },
     },
 }
 </script>
-<style lang="postcss">
-html
-  background-color: #f9f9f9
-.wrapper
-  position: relative
-.content
-  margin-left: 320px
-  clear: both
-  overflow: auto
-  background: #f9f9ff
-  min-height: 100vh
-  &-wrapper
-    float: right
-    width: 100%
 
-@media only screen and (max-width: 768px)
-  .content
-    margin-left: 0
+<style lang="postcss">
 </style>