From b0975672c1c06ace364cf47bfcfa39db9c3b712b Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Fri, 26 May 2023 18:17:27 +0200
Subject: [PATCH] fix(front): various UI improvements for group page

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 .../Discussion/DiscussionListItem.vue         |  2 +-
 .../Group/Sections/ResourcesSection.vue       |  5 ++-
 js/src/components/Post/MultiPostListItem.vue  |  4 +--
 js/src/components/Resource/FolderItem.vue     |  2 +-
 js/src/components/Resource/ResourceItem.vue   | 36 +++++++------------
 5 files changed, 19 insertions(+), 30 deletions(-)

diff --git a/js/src/components/Discussion/DiscussionListItem.vue b/js/src/components/Discussion/DiscussionListItem.vue
index 970961c4d..08808bcae 100644
--- a/js/src/components/Discussion/DiscussionListItem.vue
+++ b/js/src/components/Discussion/DiscussionListItem.vue
@@ -1,6 +1,6 @@
 <template>
   <router-link
-    class="flex gap-1 w-full items-center p-2 border-b-stone-200 border-b"
+    class="flex gap-1 w-full items-center p-2 border-b-stone-200 border-b bg-white dark:bg-transparent"
     dir="auto"
     :to="{
       name: RouteName.DISCUSSION,
diff --git a/js/src/components/Group/Sections/ResourcesSection.vue b/js/src/components/Group/Sections/ResourcesSection.vue
index ff07f5a60..332bf7761 100644
--- a/js/src/components/Group/Sections/ResourcesSection.vue
+++ b/js/src/components/Group/Sections/ResourcesSection.vue
@@ -8,7 +8,10 @@
     }"
   >
     <template #default>
-      <div v-if="group?.resources?.elements?.length ?? 0 > 0" class="p-1">
+      <div
+        v-if="group?.resources?.elements?.length ?? 0 > 0"
+        class="p-1 bg-white dark:bg-transparent"
+      >
         <div
           v-for="resource in group?.resources?.elements ?? []"
           :key="resource.id"
diff --git a/js/src/components/Post/MultiPostListItem.vue b/js/src/components/Post/MultiPostListItem.vue
index 3812e0f88..c57604853 100644
--- a/js/src/components/Post/MultiPostListItem.vue
+++ b/js/src/components/Post/MultiPostListItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="posts-wrapper">
+  <div class="posts-wrapper grid gap-4">
     <post-list-item
       v-for="post in posts"
       :key="post.id"
@@ -22,8 +22,6 @@ withDefaults(
 </script>
 <style lang="scss" scoped>
 .posts-wrapper {
-  display: grid;
-  grid-gap: 20px;
   grid-template: 1fr;
 }
 </style>
diff --git a/js/src/components/Resource/FolderItem.vue b/js/src/components/Resource/FolderItem.vue
index 003628e64..63a71c4e5 100644
--- a/js/src/components/Resource/FolderItem.vue
+++ b/js/src/components/Resource/FolderItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="resource-wrapper" dir="auto">
+  <div class="resource-wrapper bg-white dark:bg-transparent" dir="auto">
     <router-link
       :to="{
         name: RouteName.RESOURCE_FOLDER,
diff --git a/js/src/components/Resource/ResourceItem.vue b/js/src/components/Resource/ResourceItem.vue
index c8627442a..809de4c98 100644
--- a/js/src/components/Resource/ResourceItem.vue
+++ b/js/src/components/Resource/ResourceItem.vue
@@ -1,7 +1,12 @@
 <template>
-  <div class="flex flex-1 items-center w-full" dir="auto">
+  <div
+    class="flex flex-1 items-center w-full bg-white dark:bg-transparent"
+    dir="auto"
+  >
     <a :href="resource.resourceUrl" target="_blank">
-      <div class="preview text-mbz-purple dark:text-mbz-purple-300">
+      <div
+        class="min-w-fit relative flex items-center justify-center text-mbz-purple dark:text-mbz-purple-300"
+      >
         <div
           v-if="
             resource.type &&
@@ -14,10 +19,12 @@
             customSize="48"
           />
         </div>
-        <div
-          class="preview-image"
+        <img
           v-else-if="resource.metadata && resource.metadata.imageRemoteUrl"
-          :style="`background-image: url(${resource.metadata.imageRemoteUrl})`"
+          :src="resource.metadata.imageRemoteUrl"
+          alt=""
+          height="48"
+          width="48"
         />
         <div class="preview-type" v-else>
           <Link :size="48" />
@@ -99,25 +106,6 @@ a {
   overflow: hidden;
   flex: 1;
 
-  .preview {
-    flex: 0 0 50px;
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    .preview-image {
-      border-radius: 4px 0 0 4px;
-      display: block;
-      margin: 0;
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      background-size: cover;
-      background-position: 50%;
-    }
-  }
-
   .body {
     img.favicon {
       display: inline-block;