From 38ffb80222ec20378795324d89ea9fb07d94e781 Mon Sep 17 00:00:00 2001
From: Matteo Cominetti <matteo@speckle.systems>
Date: Tue, 3 Aug 2021 19:37:31 +0200
Subject: [PATCH 1/3] fix: broked links & #367

---
 packages/frontend/src/components/ListItemActivity.vue | 2 +-
 packages/frontend/src/components/ListItemStream.vue   | 2 +-
 packages/frontend/src/views/stream/Branch.vue         | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/src/components/ListItemActivity.vue b/packages/frontend/src/components/ListItemActivity.vue
index 802d61a14..3f2cb49f3 100644
--- a/packages/frontend/src/components/ListItemActivity.vue
+++ b/packages/frontend/src/components/ListItemActivity.vue
@@ -88,7 +88,7 @@
                 text
                 class="px-0 ml-3"
                 small
-                :to="'/streams/' + stream.id + '/branches/main/commits'"
+                :to="'/streams/' + stream.id + '/branches/main'"
               >
                 <v-icon small class="mr-2 float-left">mdi-source-commit</v-icon>
                 {{ stream.commits.totalCount }}
diff --git a/packages/frontend/src/components/ListItemStream.vue b/packages/frontend/src/components/ListItemStream.vue
index 263eedc29..8a0c94a3d 100644
--- a/packages/frontend/src/components/ListItemStream.vue
+++ b/packages/frontend/src/components/ListItemStream.vue
@@ -45,7 +45,7 @@
           text
           class="px-0"
           small
-          :to="'/streams/' + stream.id + '/branches/main/commits'"
+          :to="'/streams/' + stream.id + '/branches/main'"
         >
           <v-icon small class="mr-2 float-left">mdi-source-commit</v-icon>
           {{ stream.commits.totalCount }}
diff --git a/packages/frontend/src/views/stream/Branch.vue b/packages/frontend/src/views/stream/Branch.vue
index 892bf6738..0d87e0bab 100644
--- a/packages/frontend/src/views/stream/Branch.vue
+++ b/packages/frontend/src/views/stream/Branch.vue
@@ -116,7 +116,7 @@ export default {
           //this.$router.push does not work, refresh entire window
 
           this.$router.push({
-            path: `/streams/${this.streamId}/branches/${encodeURIComponent(dialog.name)}/commits`
+            path: `/streams/${this.streamId}/branches/${encodeURIComponent(dialog.name)}`
           })
         } else {
           this.$apollo.queries.stream.refetch()

From 01efcd2a7e27226f46861ff56bbf66fb6d40f535 Mon Sep 17 00:00:00 2001
From: Matteo Cominetti <matteo@speckle.systems>
Date: Tue, 3 Aug 2021 21:18:49 +0200
Subject: [PATCH 2/3] feat(frontend): ticking off various items

---
 .../src/components/ListItemActivity.vue       | 80 ++++++++++++++-----
 .../src/components/SourceAppAvatar.vue        |  2 +-
 packages/frontend/src/views/Frontend.vue      |  7 +-
 packages/frontend/src/views/ProfileUser.vue   | 39 +++++++--
 .../frontend/src/views/stream/Activity.vue    |  4 +-
 .../frontend/src/views/stream/Details.vue     | 43 ++++++----
 6 files changed, 127 insertions(+), 48 deletions(-)

diff --git a/packages/frontend/src/components/ListItemActivity.vue b/packages/frontend/src/components/ListItemActivity.vue
index 3f2cb49f3..f69000e7a 100644
--- a/packages/frontend/src/components/ListItemActivity.vue
+++ b/packages/frontend/src/components/ListItemActivity.vue
@@ -25,35 +25,71 @@
           flat
         >
           <v-card-text class="pa-5 body-1">
-            <v-chip v-if="targetUser" pill :color="activityInfo.color">
-              <v-avatar left>
-                <user-avatar
-                  :id="targetUser.id"
-                  :avatar="targetUser.avatar"
-                  :size="30"
-                  :name="targetUser.name"
-                />
-              </v-avatar>
+            <v-container>
+              <v-row class="align-center">
+                <v-chip v-if="targetUser" pill :color="activityInfo.color">
+                  <v-avatar left>
+                    <user-avatar
+                      :id="targetUser.id"
+                      :avatar="targetUser.avatar"
+                      :size="30"
+                      :name="targetUser.name"
+                    />
+                  </v-avatar>
 
-              {{ targetUser.name }}
-            </v-chip>
+                  {{ targetUser.name }}
+                </v-chip>
 
-            <span class="ml-3 body-2 font-italic">{{ activityInfo.actionText }}</span>
-            <v-chip v-if="activity.info.role" small outlined class="ml-3">
-              <v-icon small left>mdi-account-key-outline</v-icon>
-              {{ activity.info.role.split(':')[1] }}
-            </v-chip>
+                <span class="ml-3 body-2 font-italic">{{ activityInfo.actionText }}</span>
+                <v-chip v-if="activity.info.role" small outlined class="ml-3">
+                  <v-icon small left>mdi-account-key-outline</v-icon>
+                  {{ activity.info.role.split(':')[1] }}
+                </v-chip>
+                <v-spacer />
+
+                <v-btn
+                  v-if="targetUser && activity.actionType === `stream_permissions_add`"
+                  text
+                  outlined
+                  small
+                  :to="'/profile/' + targetUser.id"
+                  color="primary"
+                >
+                  view
+                </v-btn>
+              </v-row>
+            </v-container>
           </v-card-text>
         </v-card>
 
         <!-- STREAM -->
         <v-card v-else-if="activity.resourceType === 'stream' && stream" class="activity-card" flat>
           <v-card-text class="pa-5 body-1">
-            <router-link :to="url" class="title">
-              <v-icon color="primary" small>mdi-compare-vertical</v-icon>
-              {{ stream.name }}
-            </router-link>
-            <span class="ml-3 body-2 font-italic">{{ activityInfo.actionText }}</span>
+            <v-container>
+              <v-row class="align-center">
+                <router-link :to="url" class="title">
+                  <v-icon color="primary" small>mdi-compare-vertical</v-icon>
+                  {{ stream.name }}
+                </router-link>
+                <span class="ml-3 body-2 font-italic">{{ activityInfo.actionText }}</span>
+
+                <v-spacer />
+
+                <v-btn
+                  v-if="
+                    activity.actionType === `stream_create` ||
+                    activity.actionType === `stream_update`
+                  "
+                  text
+                  outlined
+                  small
+                  color="primary"
+                >
+                  view
+                </v-btn>
+              </v-row>
+            </v-container>
+
             <div
               v-if="activityInfo.description"
               class="mt-3"
@@ -93,7 +129,7 @@
                 <v-icon small class="mr-2 float-left">mdi-source-commit</v-icon>
                 {{ stream.commits.totalCount }}
               </v-btn>
-              <v-chip small outlined class="ml-3">
+              <v-chip small outlined class="ml-3 no-hover">
                 <v-icon small left>mdi-account-key-outline</v-icon>
                 {{ stream.role.split(':')[1] }}
               </v-chip>
diff --git a/packages/frontend/src/components/SourceAppAvatar.vue b/packages/frontend/src/components/SourceAppAvatar.vue
index 0799709a2..e03e55881 100644
--- a/packages/frontend/src/components/SourceAppAvatar.vue
+++ b/packages/frontend/src/components/SourceAppAvatar.vue
@@ -3,7 +3,7 @@
     <template #activator="{ on, attrs }">
       <v-chip
         small
-        class="ma-1 caption white--text"
+        class="ma-1 caption white--text no-hover"
         :color="color"
         :size="size"
         v-bind="attrs"
diff --git a/packages/frontend/src/views/Frontend.vue b/packages/frontend/src/views/Frontend.vue
index 6a47e9f91..63b7cc5ac 100644
--- a/packages/frontend/src/views/Frontend.vue
+++ b/packages/frontend/src/views/Frontend.vue
@@ -104,13 +104,15 @@
           </v-list-item>
         </v-list-item-group>
       </v-list>
+      <div class="mx-5 m t-5">
       <v-btn
         v-if="stream.role === 'stream:owner'"
         outlined
         color="primary"
         rounded
+        block
         height="50"
-        class="ma-3 d-block"
+     
         @click="showStreamInviteDialog"
       >
         <v-icon small class="mr-2">mdi-email-send-outline</v-icon>
@@ -118,6 +120,7 @@
         <br />
         stream by email
       </v-btn>
+      </div>
       <stream-invite-dialog ref="streamInviteDialog" :stream-id="stream.id" />
     </v-navigation-drawer>
     <v-main :style="background">
@@ -329,4 +332,6 @@ export default {
 .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
   opacity: 0;
 }
+
+.no-hover:before {display: none}
 </style>
diff --git a/packages/frontend/src/views/ProfileUser.vue b/packages/frontend/src/views/ProfileUser.vue
index 135cbeb8d..de9537329 100644
--- a/packages/frontend/src/views/ProfileUser.vue
+++ b/packages/frontend/src/views/ProfileUser.vue
@@ -19,18 +19,26 @@
           </v-card-title>
         </v-card>
         <v-row>
-        <v-col cols="12" sm="12" md="6" lg="6" xl="4"  v-for="(stream, i) in user.streams.items" :key="i">
-          <list-item-stream :stream="stream"></list-item-stream>
-        </v-col >
+          <v-col
+            v-for="(stream, i) in user.streams.items"
+            :key="i"
+            cols="12"
+            sm="12"
+            md="6"
+            lg="6"
+            xl="4"
+          >
+            <list-item-stream :stream="stream"></list-item-stream>
+          </v-col>
         </v-row>
       </v-col>
     </v-row>
   </v-container>
 </template>
 <script>
-import userById from '../graphql/userById.gql'
 import UserInfoCard from '../components/UserInfoCard'
 import ListItemStream from '../components/ListItemStream'
+import gql from 'graphql-tag'
 
 export default {
   name: 'ProfileUser',
@@ -38,7 +46,28 @@ export default {
   data: () => ({}),
   apollo: {
     user: {
-      query: userById,
+      query: gql`
+        query User($id: String!) {
+          user(id: $id) {
+            id
+            email
+            name
+            bio
+            company
+            avatar
+            verified
+            profiles
+            role
+            suuid
+            streams {
+              totalCount
+            }
+            commits {
+              totalCount
+            }
+          }
+        }
+      `,
       variables() {
         return {
           id: this.$route.params.userId
diff --git a/packages/frontend/src/views/stream/Activity.vue b/packages/frontend/src/views/stream/Activity.vue
index d7b639401..dfbbf7d3f 100644
--- a/packages/frontend/src/views/stream/Activity.vue
+++ b/packages/frontend/src/views/stream/Activity.vue
@@ -5,7 +5,7 @@
       <h3 class="title font-italic font-weight-thin my-5">Recent activity on this Stream</h3>
     </v-col>
     <v-col cols="12">
-      <v-timeline v-if="stream" align-top :dense="$vuetify.breakpoint.mobile">
+      <v-timeline v-if="stream" align-top dense>
         <list-item-activity
           v-for="activity in stream.activity.items"
           :key="activity.time"
@@ -20,7 +20,7 @@
           <div slot="no-results">There are no ctivities to load</div>
         </infinite-loading>
       </v-timeline>
-      <v-timeline v-else-if="$apollo.loading" align-top :dense="$vuetify.breakpoint.mobile">
+      <v-timeline v-else-if="$apollo.loading" align-top dense>
         <v-timeline-item v-for="i in 6" :key="i" medium>
           <v-skeleton-loader type="article"></v-skeleton-loader>
         </v-timeline-item>
diff --git a/packages/frontend/src/views/stream/Details.vue b/packages/frontend/src/views/stream/Details.vue
index 05c0ce712..c559d7e42 100644
--- a/packages/frontend/src/views/stream/Details.vue
+++ b/packages/frontend/src/views/stream/Details.vue
@@ -7,9 +7,10 @@
     </v-col>
     <v-col v-if="stream" cols="12">
       <h1 class="display-1">{{ stream.name }}</h1>
-      <h3 class="title font-italic font-weight-thin my-5">
-        {{ truncate(stream.description) }}
-      </h3>
+      <h3
+        class="title font-italic font-weight-thin my-5"
+        v-html="hyperlink(truncate(stream.description))"
+      ></h3>
 
       <!-- <v-card class="mt-5 pa-4" elevation="0" rounded="lg"> -->
       <v-row v-if="stream">
@@ -87,7 +88,7 @@
                   </v-list-item-content>
                   <v-list-item-action>
                     <v-row align="center" justify="center">
-                      <v-chip small class="mr-2">
+                      <v-chip small class="mr-2 no-hover">
                         <v-icon small class="mr-2">mdi-source-commit</v-icon>
                         {{ latestCommit.id }}
                       </v-chip>
@@ -124,7 +125,7 @@
                     </v-list-item-content>
                     <v-list-item-action>
                       <v-row align="center" justify="center">
-                        <v-chip small class="mr-2">
+                        <v-chip small class="mr-2 no-hover">
                           <v-icon small class="mr-2">mdi-source-commit</v-icon>
                           {{ commit.id }}
                         </v-chip>
@@ -143,8 +144,8 @@
                   <v-row align="center" justify="center">
                     <span class="font-weight-bold primary--text py-3 my-4">
                       <v-icon class="mr-2 float-left" color="primary">mdi-source-commit</v-icon>
-                      SEE ALL ({{ selectedBranch.commits.totalCount }}) COMMITS ON
-                      {{ selectedBranch.name }}
+                      See all commits on
+                      {{ selectedBranch.name }} ({{ selectedBranch.commits.totalCount }})
                     </span>
                   </v-row>
                 </v-list-item>
@@ -159,20 +160,20 @@
         <v-col cols="12" sm="12" md="4" lg="3" xl="3">
           <h4 class="space-grotesk mb-3">About:</h4>
           <div>
-            <v-chip class="mr-3 mb-3">
+            <v-chip class="mr-3 mb-3 no-hover">
               <v-icon small left>mdi-source-branch</v-icon>
 
               {{ stream.branches.totalCount }}
               branch{{ stream.branches.totalCount === 1 ? '' : 'es' }}
             </v-chip>
-            <v-chip class="mr-3 mb-3">
+            <v-chip class="mr-3 mb-3 no-hover">
               <v-icon small left>mdi-source-commit</v-icon>
               &nbsp;
 
               {{ stream.commits.totalCount }}
               commit{{ stream.commits.totalCount === 1 ? '' : 's' }}
             </v-chip>
-            <v-chip class="mr-3 mb-3">
+            <v-chip class="mr-3 mb-3 no-hover">
               <span
                 v-if="stream.isPublic"
                 v-tooltip="`Anyone can view this stream. Only you and collaborators can edit it.`"
@@ -185,19 +186,23 @@
                 &nbsp; private
               </span>
             </v-chip>
-            <v-chip v-if="loggedIn" class="mr-3 mb-3">
+            <v-chip v-if="loggedIn" class="mr-3 mb-3 no-hover">
               <v-icon small left>mdi-account-key-outline</v-icon>
               {{ stream.role.split(':')[1] }}
             </v-chip>
           </div>
           <div class="my-3">
-            <div v-tooltip="formatDate(stream.createdAt)" class="caption mb-3">
-              Created
-              <timeago :datetime="stream.createdAt"></timeago>
+            <div class="caption mb-3">
+              <span v-tooltip="formatDate(stream.createdAt)">
+                Created
+                <timeago :datetime="stream.createdAt"></timeago>
+              </span>
             </div>
-            <div v-tooltip="formatDate(stream.updatedAt)" class="caption">
-              Updated
-              <timeago :datetime="stream.updatedAt"></timeago>
+            <div class="caption">
+              <span v-tooltip="formatDate(stream.updatedAt)">
+                Updated
+                <timeago :datetime="stream.updatedAt"></timeago>
+              </span>
             </div>
           </div>
           <h4 class="space-grotesk mt-7 mb-3">Collaborators:</h4>
@@ -356,6 +361,10 @@ export default {
   },
 
   methods: {
+    hyperlink(text) {
+      var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi
+      return text.replace(exp, '<a target="_blank" href="$1">$1</a>')
+    },
     truncate(input, length = 250) {
       if (!input) return ''
       if (input.length > length) {

From 72e202b92330fd0d3d5e46d1628e29a506dfb616 Mon Sep 17 00:00:00 2001
From: Matteo Cominetti <matteo@speckle.systems>
Date: Wed, 4 Aug 2021 10:11:16 +0200
Subject: [PATCH 3/3] feat(frontend): adds preview image to activity stream
 commits

---
 .../src/components/ListItemActivity.vue       | 84 ++++++++++++-------
 .../src/components/ListItemStream.vue         | 55 ++----------
 .../frontend/src/components/PreviewImage.vue  | 66 +++++++++++++++
 3 files changed, 125 insertions(+), 80 deletions(-)
 create mode 100644 packages/frontend/src/components/PreviewImage.vue

diff --git a/packages/frontend/src/components/ListItemActivity.vue b/packages/frontend/src/components/ListItemActivity.vue
index f69000e7a..6f1c28cf8 100644
--- a/packages/frontend/src/components/ListItemActivity.vue
+++ b/packages/frontend/src/components/ListItemActivity.vue
@@ -83,6 +83,7 @@
                   text
                   outlined
                   small
+                  :to="url"
                   color="primary"
                 >
                   view
@@ -159,37 +160,55 @@
 
         <!-- COMMITS -->
         <v-card v-else-if="activity.resourceType === 'commit'" class="activity-card" flat>
-          <v-card-text class="pa-5">
-            <div>
-              <v-chip :to="url" :color="activityInfo.color">
-                <v-icon small class="mr-2 float-left" light>{{ activityInfo.icon }}</v-icon>
-                {{ activity.resourceId }}
-              </v-chip>
-              <span class="mx-3 body-2 font-italic">{{ activityInfo.actionText }}</span>
-              <span v-if="activity.actionType !== 'commit_delete' && commit">
-                <v-chip
-                  :to="`/streams/${activity.streamId}/branches/${commit.branchName}`"
-                  small
-                  color="primary"
-                >
-                  <v-icon small class="float-left" light>mdi-source-branch</v-icon>
-                  {{ commit.branchName }}
-                </v-chip>
-                <span v-if="activity.actionType === 'commit_create'">
-                  <span class="mx-3 body-2 font-italic">from</span>
-                  <source-app-avatar :application-name="commit.sourceApplication" />
-                </span>
-              </span>
-              <span v-if="activity.actionType !== 'commit_delete' && !commit">
-                [commit deleted]
-              </span>
-            </div>
-            <div
-              v-if="activityInfo.description"
-              class="mt-3 body-1"
-              v-html="activityInfo.description"
-            ></div>
-          </v-card-text>
+          <v-container>
+            <v-row class="align-center">
+              <div class="float-left">
+                <v-card-text class="pa-5">
+                  <div>
+                    <v-chip :to="url" :color="activityInfo.color">
+                      <v-icon small class="mr-2 float-left" light>{{ activityInfo.icon }}</v-icon>
+                      {{ activity.resourceId }}
+                    </v-chip>
+                    <span class="mx-3 body-2 font-italic">{{ activityInfo.actionText }}</span>
+                    <span v-if="activity.actionType !== 'commit_delete' && commit">
+                      <v-chip
+                        :to="`/streams/${activity.streamId}/branches/${commit.branchName}`"
+                        small
+                        color="primary"
+                      >
+                        <v-icon small class="float-left" light>mdi-source-branch</v-icon>
+                        {{ commit.branchName }}
+                      </v-chip>
+                      <span v-if="activity.actionType === 'commit_create'">
+                        <span class="mx-3 body-2 font-italic">from</span>
+                        <source-app-avatar :application-name="commit.sourceApplication" />
+                      </span>
+                    </span>
+                    <span v-if="activity.actionType !== 'commit_delete' && !commit">
+                      [commit deleted]
+                    </span>
+                  </div>
+                  <div
+                    v-if="activityInfo.description"
+                    class="mt-3 body-1"
+                    v-html="activityInfo.description"
+                  ></div>
+                </v-card-text>
+              </div>
+
+              <v-spacer />
+              <v-hover v-if="activity.actionType !== 'commit_delete' && commit" v-slot="{ hover }">
+                <router-link :to="url">
+                  <preview-image
+                    :url="`/preview/${activity.streamId}/commits/${activity.resourceId}`"
+                    class="float-left"
+                    :height="100"
+                    :color="hover"
+                  />
+                </router-link>
+              </v-hover>
+            </v-row>
+          </v-container>
         </v-card>
       </v-col>
     </v-row>
@@ -199,10 +218,11 @@
 <script>
 import UserAvatar from './UserAvatar'
 import SourceAppAvatar from './SourceAppAvatar'
+import PreviewImage from './PreviewImage'
 import gql from 'graphql-tag'
 
 export default {
-  components: { UserAvatar, SourceAppAvatar },
+  components: { UserAvatar, SourceAppAvatar, PreviewImage },
   props: ['activity'],
   apollo: {
     you: {
diff --git a/packages/frontend/src/components/ListItemStream.vue b/packages/frontend/src/components/ListItemStream.vue
index 8a0c94a3d..579c6755b 100644
--- a/packages/frontend/src/components/ListItemStream.vue
+++ b/packages/frontend/src/components/ListItemStream.vue
@@ -6,11 +6,11 @@
       :elevation="hover ? 5 : 0"
       style="transition: all 0.2s ease-in-out"
     >
-      <img
-        ref="cover"
-        :class="`${hover ? '' : 'grasycale-img'} preview-img`"
-        :src="currentPreviewImg"
-      />
+      <preview-image
+        :url="`/preview/${stream.d}`"
+        :color="hover"
+        style="width: 100%"
+      ></preview-image>
       <v-card-title class="">{{ stream.name }}</v-card-title>
       <v-card-text>
         <span class="caption mb-2 font-italic">
@@ -72,9 +72,10 @@
 </template>
 <script>
 import UserAvatar from '../components/UserAvatar'
+import PreviewImage from '@/components/PreviewImage'
 
 export default {
-  components: { UserAvatar },
+  components: { UserAvatar, PreviewImage },
   props: {
     stream: {
       type: Object,
@@ -82,48 +83,6 @@ export default {
         return {}
       }
     }
-  },
-  data() {
-    return {
-      currentPreviewImg: '/loadingImage.png'
-    }
-  },
-  mounted() {
-    this.getPreviewImage().then().catch()
-  },
-  methods: {
-    async getPreviewImage() {
-      let previewUrl = `/preview/${this.stream.id}`
-      const res = await fetch(previewUrl, {
-        headers: localStorage.getItem('AuthToken')
-          ? { Authorization: `Bearer ${localStorage.getItem('AuthToken')}` }
-          : {}
-      })
-      const blob = await res.blob()
-      this.currentPreviewImg = URL.createObjectURL(blob)
-    }
   }
 }
 </script>
-<style scoped>
-.grasycale-img {
-  transition: all 0.3s;
-  filter: grayscale(100%);
-}
-
-.preview-img {
-  height: 180px;
-  width: 100%;
-  object-fit: cover;
-}
-
-.stream-link a {
-  /* color: inherit; */
-  text-decoration: none;
-  font-weight: 500;
-}
-
-.stream-link a:hover {
-  text-decoration: underline;
-}
-</style>
diff --git a/packages/frontend/src/components/PreviewImage.vue b/packages/frontend/src/components/PreviewImage.vue
new file mode 100644
index 000000000..3e534332e
--- /dev/null
+++ b/packages/frontend/src/components/PreviewImage.vue
@@ -0,0 +1,66 @@
+<template>
+  <img
+    ref="cover"
+    :height="height"
+    :class="`${color ? '' : 'grasycale-img'} preview-img`"
+    :src="currentPreviewImg"
+  />
+</template>
+<script>
+export default {
+  props: {
+    url: {
+      type: String,
+      default: ''
+    },
+    color: {
+      type: Boolean,
+      default: true
+    },
+    height: {
+      type: Number,
+      default: 180
+    }
+  },
+  data() {
+    return {
+      currentPreviewImg: '/loadingImage.png'
+    }
+  },
+  mounted() {
+    this.getPreviewImage().then().catch()
+  },
+  methods: {
+    async getPreviewImage() {
+      const res = await fetch(this.url, {
+        headers: localStorage.getItem('AuthToken')
+          ? { Authorization: `Bearer ${localStorage.getItem('AuthToken')}` }
+          : {}
+      })
+      const blob = await res.blob()
+      this.currentPreviewImg = URL.createObjectURL(blob)
+    }
+  }
+}
+</script>
+<style scoped>
+.grasycale-img {
+  transition: all 0.3s;
+  filter: grayscale(100%);
+}
+
+.preview-img {
+  /* width: 100%; */
+  object-fit: cover;
+}
+
+.stream-link a {
+  /* color: inherit; */
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.stream-link a:hover {
+  text-decoration: underline;
+}
+</style>