From df46ced4cac0539ab5cffbeabb62b4c0e5f340d2 Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Sat, 8 May 2021 20:16:06 +0100
Subject: [PATCH] feat(frontend): adds grayscale to stream previews

---
 .../src/components/ListItemStream.vue         | 29 ++++++++++++-------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/packages/frontend/src/components/ListItemStream.vue b/packages/frontend/src/components/ListItemStream.vue
index b324d1d35..40a139624 100644
--- a/packages/frontend/src/components/ListItemStream.vue
+++ b/packages/frontend/src/components/ListItemStream.vue
@@ -6,16 +6,12 @@
       :elevation="hover ? 5 : 1"
       style="transition: all 0.2s ease-in-out"
     >
-      <v-img
+      <img
         ref="cover"
+        :class="`${hover ? '' : 'grasycale-img'} preview-img`"
         :src="currentPreviewImg"
-        height="150px"
-        gradient="to bottom left, rgba(100,115,201,.10), rgba(25,32,72,0)"
-        class="align-end"
-      >
-      </v-img>
-        <v-card-title>{{ stream.name }}</v-card-title>
-
+      />
+      <v-card-title class="">{{ stream.name }}</v-card-title>
       <v-card-text>
         <span class="caption mb-2 font-italic">
           Updated
@@ -54,9 +50,9 @@
           <v-icon small class="mr-2 float-left">mdi-source-commit</v-icon>
           {{ stream.commits.totalCount }}
         </v-btn>
-<!--         <div class="mt-3 caption text-truncate">
+        <div class="mt-3 caption text-truncate">
           {{ stream.description }}
-        </div> -->
+        </div>
       </v-card-text>
       <v-card-text class="pt-0">
         <user-avatar
@@ -67,7 +63,7 @@
           :size="30"
           :name="user.name"
         />
-        <v-avatar v-if="stream.collaborators.length > 4" size="30" color="primary">
+        <v-avatar v-if="stream.collaborators.length > 4" size="30" color="grey">
           <span class="white--text">+{{ stream.collaborators.length - 4 }}</span>
         </v-avatar>
       </v-card-text>
@@ -118,6 +114,17 @@ export default {
 }
 </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;