emoji component refactoring

2026-04-18 08:12:15 +00:00 · 2022-01-20 09:19:14 +01:00
parent 34fcbdc55c
commit e1de316774
14 changed files with 552 additions and 390 deletions
--- a/resources/js/components/FilesView/FolderIcon.vue
+++ b/resources/js/components/FilesView/FolderIcon.vue
@@ -1,127 +1,27 @@
 <template>
-    <div :class="[{'is-apple': $isApple()}, location]">
-        <Emoji
-            v-if="emoji"
-            :emoji="emoji"
-            class="emoji-icon"
-        />
+    <div>
 		<VueFolderIcon
-			v-if="!emoji && !item.data.attributes.isTeamFolder"
-			:class="[{'is-deleted':isDeleted},{'default-color': ! color && ! isDeleted}, 'folder-icon' ]"
-			:style="{fill: color}"
+			v-if="!item.data.attributes.isTeamFolder"
 		/>
 		<VueFolderTeamIcon
-			v-if="!emoji && item.data.attributes.isTeamFolder"
-			:class="[{'is-deleted':isDeleted},{'default-color': ! color && ! isDeleted}, 'folder-icon' ]"
-			:style="{fill: color}"
+			v-if="item.data.attributes.isTeamFolder"
 			style="width: 53px; height: 52px"
 		/>
    </div>
 </template>

 <script>
-    import Emoji from '/resources/js/components/Others/Emoji'
-	import VueFolderIcon from "./Icons/VueFolderIcon"
 	import VueFolderTeamIcon from "./Icons/VueFolderTeamIcon"
+	import VueFolderIcon from "./Icons/VueFolderIcon"

    export default {
        name: 'FolderIcon',
        props: [
-            'folderIcon',
-            'location',
            'item',
        ],
        components: {
 			VueFolderTeamIcon,
 			VueFolderIcon,
-            Emoji,
        },
-        computed: {
-            isDeleted() {
-                return this.item.data.attributes.deleted_at
-            },
-            emoji() {
-                // Return emoji if is changed from rename popup
-                if (this.folderIcon)
-                    return this.folderIcon.emoji ? this.folderIcon.emoji : false
-
-                // Return emoji if is already set
-                return this.item.data.attributes.emoji ? this.item.data.attributes.emoji : false
-            },
-            color() {
-                // Return color if is changed from rename popup
-                if (this.folderIcon)
-                    return this.folderIcon.color ? this.folderIcon.color : false
-
-                // Return color if is already set
-                return this.item.data.attributes.color ? this.item.data.attributes.color : false
-            }
-        }
    }
-</script>
-
-<style lang="scss" scoped>
-@import '/resources/sass/vuefilemanager/_variables';
-@import '/resources/sass/vuefilemanager/_mixins';
-
-// Locations
-.file-item-list {
-    &.is-apple .emoji-icon {
-        font-size: 50px;
-        line-height: 1.1;
-    }
-}
-
-.file-item-grid {
-    &.is-apple .emoji-icon {
-        font-size: 80px;
-        line-height: 1.1;
-    }
-}
-
-.thumbnail-item {
-    &.is-apple .emoji-icon {
-        font-size: 36px;
-        line-height: 1.1;
-    }
-}
-
-.emoji-picker-preview {
-    &.is-apple .emoji-icon {
-        font-size: 22px;
-        line-height: 1.1;
-    }
-}
-
-.folder-icon {
-
-    path {
-        fill: inherit;
-    }
-
-    &.is-deleted {
-        path {
-            fill: $dark_background;
-        }
-    }
-
-	&.is-team {
-		path {
-			fill: transparent;
-			stroke-width: 26px;
-			stroke: inherit;
-		}
-	}
-}
-
-.dark {
-
-    .folder-icon {
-        &.is-deleted {
-            path {
-                fill: lighten($dark_mode_foreground, 5%);
-            }
-        }
-    }
-}
-</style>
+</script>
--- a/resources/js/components/FilesView/ItemGrid.vue
+++ b/resources/js/components/FilesView/ItemGrid.vue
@@ -13,8 +13,15 @@
 			<!--Item thumbnail-->
 			<div class="relative mx-auto">

+				<!--Emoji Icon-->
+				<Emoji
+					v-if="entry.data.attributes.emoji"
+					:emoji="entry.data.attributes.emoji"
+					class="text-5xl transform scale-150 inline-block mb-10"
+				/>
+
 				<!--Folder Icon-->
-				<FolderIcon v-if="isFolder" :item="entry" location="file-item-list" class="inline-block transform scale-150 lg:mt-2 lg:mb-8 mt-3 mb-5" />
+				<FolderIcon v-if="isFolder && !entry.data.attributes.emoji" :item="entry" class="inline-block transform scale-150 lg:mt-2 lg:mb-8 mt-3 mb-5" />

 				<!--File Icon-->
 				<div v-if="isFile || isVideo || isAudio || (isImage && !entry.data.attributes.thumbnail)" class="relative w-24 mx-auto">
@@ -92,12 +99,13 @@
 <script>
 	import FolderIcon from '/resources/js/components/FilesView/FolderIcon'
 	import {LinkIcon, MoreHorizontalIcon, EyeIcon} from 'vue-feather-icons'
-	import FileIconThumbnail from "./FileIconThumbnail";
-	import MemberAvatar from "./MemberAvatar";
-	import CheckBox from "./CheckBox";
-	import {debounce} from "lodash";
-	import {mapGetters} from "vuex";
-	import {events} from "../../bus";
+	import FileIconThumbnail from "./FileIconThumbnail"
+	import MemberAvatar from "./MemberAvatar"
+	import Emoji from "../Others/Emoji"
+	import CheckBox from "./CheckBox"
+	import {debounce} from "lodash"
+	import {mapGetters} from "vuex"
+	import {events} from "../../bus"

 	export default {
 		name: 'ItemList',
@@ -109,6 +117,7 @@
 			CheckBox,
 			LinkIcon,
 			EyeIcon,
+			Emoji,
 		},
 		props: [
 			'mobileHandler',
--- a/resources/js/components/FilesView/ItemList.vue
+++ b/resources/js/components/FilesView/ItemList.vue
@@ -16,8 +16,15 @@
 				class="absolute right-1.5 -bottom-2 z-10"
 			/>

+			<!--Emoji Icon-->
+			<Emoji
+				v-if="entry.data.attributes.emoji"
+				:emoji="entry.data.attributes.emoji"
+				class="text-5xl ml-1 transform scale-110"
+			/>
+
 			<!--Folder Icon-->
-			<FolderIcon v-if="isFolder" :item="entry" location="file-item-list" />
+			<FolderIcon v-if="isFolder && !entry.data.attributes.emoji" :item="entry" />

 			<!--File Icon-->
 			<FileIconThumbnail v-if="isFile || isVideo || isAudio || (isImage && !entry.data.attributes.thumbnail)" :entry="entry" class="pr-2" />
@@ -67,6 +74,7 @@
 </template>

 <script>
+	import Emoji from "../Others/Emoji";
 	import FolderIcon from '/resources/js/components/FilesView/FolderIcon'
 	import {LinkIcon, MoreVerticalIcon, EyeIcon} from 'vue-feather-icons'
 	import FileIconThumbnail from "./FileIconThumbnail";
@@ -86,6 +94,7 @@
 			CheckBox,
 			LinkIcon,
 			EyeIcon,
+			Emoji,
 		},
 		props: [
 			'mobileHandler',
--- a/resources/js/components/FilesView/MobileContextMenu.vue
+++ b/resources/js/components/FilesView/MobileContextMenu.vue
@@ -1,6 +1,6 @@
 <template>
    <MenuMobile name="file-menu">
-        <ThumbnailItem class="mb-5" :item="clipboard[0]" info="metadata" />
+        <ThumbnailItem class="m-5" :item="clipboard[0]" />

 		<MenuMobileGroup v-if="$slots.default">
 			<slot></slot>
@@ -36,13 +36,3 @@ export default {
    },
 }
 </script>
-
-<style scoped lang="scss">
-@import "resources/sass/vuefilemanager/_variables";
-@import "resources/sass/vuefilemanager/_mixins";
-
-.item-thumbnail {
-    padding: 20px 20px 10px;
-    margin-bottom: 0;
-}
-</style>
--- a/resources/js/components/Others/Emoji.vue
+++ b/resources/js/components/Others/Emoji.vue
@@ -1,69 +1,53 @@
 <template>
-    <div :class="[location, 'emoji-container', {'is-apple': $isApple}]">
-        <span v-if="!$isApple()" class="twemoji-emoji emoji-icon" v-html="transferEmoji"></span>
-        <span v-if="$isApple()" class="apple-emoji emoji-icon">{{ this.emoji.char }}</span>
+    <div v-if="emoji">
+        <div
+			v-if="!isApple"
+			v-html="transferEmoji"
+			style="font-size: inherit; transform: scale(0.95)"
+		></div>
+        <div
+			v-if="isApple"
+			style="font-size: inherit"
+		>
+			{{ emoji.char }}
+		</div>
    </div>
 </template>

 <script>
-import twemoji from 'twemoji'
+	import twemoji from 'twemoji'

-export default {
-    name: 'Emoji',
-    props: [
-        'emoji',
-        'location',
-    ],
-    computed: {
-        transferEmoji() {
-            return twemoji.parse(this.emoji.char, {
-                folder: 'svg',
-                ext: '.svg',
-                attributes: () => ({
-                    loading: 'lazy'
-                })
-            })
-        }
-    },
-}
+	export default {
+		name: 'Emoji',
+		props: [
+			'emoji',
+		],
+		data() {
+			return {
+				isApple: false,
+				sizeClass: undefined,
+			}
+		},
+		computed: {
+			transferEmoji() {
+				//if (! this.apple) return
+
+				return twemoji.parse(this.emoji.char, {
+					folder: 'svg',
+					ext: '.svg',
+					attributes: () => ({
+						loading: 'lazy'
+					})
+				})
+			}
+		},
+	}
 </script>

-<style lang="scss" scoped>
-@import "resources/sass/vuefilemanager/_inapp-forms.scss";
-@import '/resources/sass/vuefilemanager/_forms';
-
-.emoji-container {
-    font-size: inherit;
-
-    .emoji-icon {
-        font-size: inherit;
-    }
-}
-
-.emoji-picker {
-    .apple-emoji {
-        font-size: 34px;
-        line-height: 1.1;
-        font-family: "Apple Color Emoji";
-    }
-}
-
-.emoji-picker-preview {
-    .apple-emoji {
-        font-size: 28px;
-        line-height: 0.85;
-        font-family: "Apple Color Emoji";
-    }
-}
-
-@media only screen and (max-width: 690px) {
-    .groups-list .emoji-picker {
-        .apple-emoji {
-            font-size: 34px;
-            line-height: 1.1;
-        }
-    }
-}
-
-</style>
-
+<style lang="css">
+	.emoji {
+		height: 1em;
+		width: 1em;
+		font-size: inherit;
+	}
+</style>
--- a/resources/js/components/Others/EmojiPicker.vue
+++ b/resources/js/components/Others/EmojiPicker.vue
@@ -5,7 +5,7 @@

 			<!-- Selected emoji preview -->
 			<div v-if="defaultEmoji" class="select-none mr-3">
-				<Emoji :emoji="defaultEmoji" location="emoji-picker" />
+				<Emoji :emoji="defaultEmoji" class="text-5xl" />
 			</div>

 			<!-- Search input -->
@@ -21,9 +21,9 @@
 		<div v-if="isOpen && isLoaded && emojis" @scroll="checkGroupInView" id="group-box" class="2xl:h-96 lg:h-60 h-96 overflow-y-auto select-none relative">

 			<!-- Navigation of Emojis Groups -->
-			<ul v-if="! query" class="flex items-center justify-between space-x-1 sticky top-0 sm:dark:bg-4x-dark-foreground dark:bg-dark-background bg-white" id="group-bar">
+			<ul v-if="! query" class="flex items-center justify-between space-x-1 sticky top-0 sm:dark:bg-4x-dark-foreground dark:bg-dark-background bg-white z-10" id="group-bar">
 				<li @click.stop="scrollToGroup(group.name)" v-for="(group,i) in emojis.groups" :key="i" class="w-14 h-14 flex items-center justify-center rounded-xl cursor-pointer dark:hover:bg-2x-dark-foreground hover:bg-light-background" :class="{'dark:bg-2x-dark-foreground bg-light-background': group.name === groupInView}">
-					<Emoji :emoji="group.emoji" location="emoji-picker" />
+					<Emoji :emoji="group.emoji" class="text-3xl" />
 				</li>
 			</ul>

@@ -34,7 +34,7 @@
 				</label>
 				<ul class="grid md:grid-cols-9 grid-cols-7 gap-4 space-between">
 					<li @click="setEmoji( emoji )" v-for="(emoji,i) in group" :key="i" class="flex items-center justify-center cursor-pointer">
-						<Emoji :emoji="emoji" location="emoji-picker" />
+						<Emoji :emoji="emoji" class="text-4xl" />
 					</li>
 				</ul>
 			</div>
@@ -42,7 +42,7 @@
 			<!-- Searched emojis -->
 			<ul v-if="query" class="grid md:grid-cols-9 grid-cols-7 gap-4 space-between">
 				<li @click="setEmoji( emoji )" v-for="(emoji,i) in filteredEmojis" :key="i" class="flex items-center justify-center cursor-pointer">
-					<Emoji :emoji="emoji" location="emoji-picker" />
+					<Emoji :emoji="emoji" class="text-4xl" />
 				</li>
 			</ul>

--- a/resources/js/components/Others/MoveItemPopup.vue
+++ b/resources/js/components/Others/MoveItemPopup.vue
@@ -11,7 +11,7 @@

 			<!--Folder tree-->
            <div v-if="! isLoadingTree && navigation">
-                <ThumbnailItem v-if="clipboard.length < 2 || isSelectedItem" class="mb-5" :item="pickedItem" info="location" />
+                <ThumbnailItem v-if="clipboard.length < 2 || isSelectedItem" class="mb-5" :item="pickedItem" />

                <TitlePreview
 					class="mb-4"
--- a/resources/js/components/Others/RenameItemPopup.vue
+++ b/resources/js/components/Others/RenameItemPopup.vue
@@ -7,7 +7,7 @@
        <PopupContent>

            <!--Item Thumbnail-->
-            <ThumbnailItem class="mb-5" :item="pickedItem" info="metadata" :setFolderIcon="{emoji: emoji, color: null}" />
+            <ThumbnailItem class="mb-5" :item="pickedItem" :setFolderIcon="{emoji: emoji, color: null}" />

            <!--Form to set sharing-->
            <ValidationObserver @submit.prevent="changeName" ref="renameForm" v-slot="{ invalid }" tag="form">
--- a/resources/js/components/Others/ShareCreatePopup.vue
+++ b/resources/js/components/Others/ShareCreatePopup.vue
@@ -7,7 +7,7 @@
        <PopupContent>

            <!--Item Thumbnail-->
-            <ThumbnailItem class="mb-5" :item="pickedItem" info="metadata" />
+            <ThumbnailItem class="mb-5" :item="pickedItem" />

            <!--Form to set sharing-->
            <ValidationObserver v-if="! isGeneratedShared" @submit.prevent ref="shareForm" v-slot="{ invalid }" tag="form">
--- a/resources/js/components/Others/ShareEditPopup.vue
+++ b/resources/js/components/Others/ShareEditPopup.vue
@@ -34,7 +34,7 @@
 		<div v-if="pickedItem && activeSection === 'email-sharing'">
 			<PopupContent>
 				<!--Item Thumbnail-->
-				<ThumbnailItem class="mb-4" :item="pickedItem" info="metadata" />
+				<ThumbnailItem class="mb-4" :item="pickedItem" />

 				<ValidationObserver @submit.prevent v-slot="{ invalid }" ref="shareEmail" tag="form">
 					<ValidationProvider tag="div" mode="passive" name="Email" rules="required" v-slot="{ errors }">
@@ -69,7 +69,7 @@
 		<div v-if="pickedItem && ! activeSection">
 			<PopupContent>
 				<!--Item Thumbnail-->
-				<ThumbnailItem class="mb-5" :item="pickedItem" info="metadata" />
+				<ThumbnailItem class="mb-5" :item="pickedItem" />

 				<!--Get share link-->
 				<AppInputText :title="$t('shared_form.label_share_vie_email')">
--- a/resources/js/components/Others/ThumbnailItem.vue
+++ b/resources/js/components/Others/ThumbnailItem.vue
@@ -1,209 +1,135 @@
 <template>
-    <div class="file-item" v-if="item">
+	<div class="flex items-center rounded-xl select-none" spellcheck="false">

-        <!--Thumbnail for item-->
-        <div class="icon-item">
+		<!--Item thumbnail-->
+		<div class="w-16 relative">

-            <!--If is file or image, then link item-->
-            <span v-if="isFile || (isImage && !item.data.attributes.thumbnail) " class="file-icon-text text-theme">{{ item.data.attributes.mimetype }}</span>
+			<!--Member thumbnail for team folders-->
+			<MemberAvatar
+				v-if="user && canShowAuthor"
+				:size="28"
+				:is-border="true"
+				:member="item.data.relationships.owner"
+				class="absolute right-1.5 -bottom-2 z-10"
+			/>

-            <!--Folder thumbnail-->
-            <FontAwesomeIcon v-if="isFile || (isImage && !item.data.attributes.thumbnail)" class="file-icon" :class="{'file-icon-mobile' : $isMobile()}" icon="file"/>
+			<!--Emoji Icon-->
+			<Emoji
+				v-if="item.data.attributes.emoji"
+				:emoji="item.data.attributes.emoji"
+				class="text-5xl ml-1 transform scale-110"
+			/>

-            <!--Image thumbnail-->
-            <img v-if="isImage && item.data.attributes.thumbnail" class="image" :src="item.data.attributes.thumbnail.xs"/>
+			<!--Folder Icon-->
+			<FolderIcon v-if="isFolder && !item.data.attributes.emoji" :item="item" />

-            <!--Else show only folder icon-->
-            <FolderIcon v-if="isFolder" :item="item" :folder-icon="setFolderIcon" location="thumbnail-item" class="folder svg-color-theme" />
-        </div>
+			<!--File Icon-->
+			<FileIconThumbnail v-if="isFile || isVideo || isAudio || (isImage && !item.data.attributes.thumbnail)" :item="item" class="pr-2" />

-        <!--Name-->
-        <div class="item-name">
+			<!--Image thumbnail-->
+			<img v-if="isImage && item.data.attributes.thumbnail" class="w-12 h-12 rounded ml-0.5 object-cover" :src="item.data.attributes.thumbnail.xs" :alt="item.data.attributes.name" loading="lazy" />
+		</div>

-            <!--Name-->
-            <span class="name">{{ item.data.attributes.name }}</span>
+		<!--Item Info-->
+		<div class="pl-2">

-            <div v-if="info === 'location'">
-                <span class="subtitle">{{ $t('item_thumbnail.original_location') }}: {{ itemLocation }}</span>
-            </div>
+			<!--Item Title-->
+			<b class="block text-sm mb-0.5 overflow-ellipsis overflow-hidden hover:underline whitespace-nowrap" style="max-width: 240px">
+				{{ item.data.attributes.name }}
+			</b>

-            <div v-if="info === 'metadata'">
-                <span v-if="! isFolder" class="item-size">{{ item.data.attributes.filesize }}, {{ item.data.attributes.created_at }}</span>
+			<!--Item sub line-->
+			<div class="flex items-center">

-                <span v-if="isFolder" class="item-length">
-                    {{ item.data.attributes.items === 0 ? $t('folder.empty') : $tc('folder.item_counts', item.data.attributes.items) }}, {{ item.data.attributes.created_at }}
-                </span>
-            </div>
+				<!--Shared Icon-->
+				<div v-if="$checkPermission('master') && item.data.relationships.shared">
+					<link-icon size="12" class="mr-1.5 text-theme dark-text-theme vue-feather"/>
+				</div>

-        </div>
-    </div>
+				<!--File & Image sub line-->
+				<small v-if="! isFolder" class="block text-xs text-gray-500">
+					{{ item.data.attributes.filesize }}, {{ timeStamp }}
+				</small>
+
+				<!--Folder sub line-->
+				<small v-if="isFolder" class="block text-xs text-gray-500">
+					{{ folderItems === 0 ? $t('folder.empty') : $tc('folder.item_counts', folderItems) }}, {{ timeStamp }}
+				</small>
+			</div>
+		</div>
+	</div>
 </template>

 <script>
+	import {LinkIcon, EyeIcon} from 'vue-feather-icons'
+	import FileIconThumbnail from "../FilesView/FileIconThumbnail";
+	import MemberAvatar from "../FilesView/MemberAvatar";
+	import Emoji from "./Emoji";
    import {mapGetters} from 'vuex'
    import FolderIcon from '/resources/js/components/FilesView/FolderIcon'

    export default {
        name: 'ThumbnailItem',
-        props: ['item', 'info', 'setFolderIcon'],
-        components: {FolderIcon},
+        props: [
+			'setFolderIcon',
+			'item',
+			'info',
+		],
+        components: {
+			FileIconThumbnail,
+			MemberAvatar,
+			FolderIcon,
+			Emoji,
+			LinkIcon,
+			EyeIcon,
+		},
        computed: {
-            ...mapGetters(['currentFolder']),
-            isFolder() {
-                return this.item.data.type === 'folder'
-            },
-            isFile() {
-                return this.item.data.type !== 'folder' && this.item.data.type !== 'image'
-            },
-            isImage() {
-                return this.item.data.type === 'image'
-            },
-            itemLocation() {
-                return this.item.data.attributes.parent ? this.item.data.attributes.parent.name : this.$t('locations.home')
-            }
+			...mapGetters([
+				'isMultiSelectMode',
+				'clipboard',
+				'user',
+			]),
+			isClicked() {
+				return this.clipboard.some(element => element.data.id === this.item.data.id)
+			},
+			isVideo() {
+				return this.item.data.type === 'video'
+			},
+			isAudio() {
+				return this.item.data.type === 'audio'
+			},
+			isFile() {
+				return this.item.data.type === 'file'
+			},
+			isImage() {
+				return this.item.data.type === 'image'
+			},
+			isFolder() {
+				return this.item.data.type === 'folder'
+			},
+			timeStamp() {
+				return this.item.data.attributes.deleted_at
+					? this.$t('item_thumbnail.deleted_at', {time: this.item.data.attributes.deleted_at})
+					: this.item.data.attributes.created_at
+			},
+			canEditName() {
+				return !this.$isMobile()
+					&& !this.$isThisRoute(this.$route, ['Trash'])
+					&& !this.$checkPermission('visitor')
+					&& !(this.sharedDetail && this.sharedDetail.attributes.type === 'file')
+			},
+			folderItems() {
+				return this.item.data.attributes.deleted_at
+					? this.item.data.attributes.trashed_items
+					: this.item.data.attributes.items
+			},
+			canShowAuthor() {
+				return !this.isFolder
+					&& this.user.data.id !== this.item.data.relationships.owner.data.id
+			},
+			canDrag() {
+				return !this.isDeleted && this.$checkPermission(['master', 'editor'])
+			},
        },
    }
 </script>
-
-<style scoped lang="scss">
-    @import '/resources/sass/vuefilemanager/_variables';
-    @import '/resources/sass/vuefilemanager/_mixins';
-
-    .file-item {
-        display: flex;
-        align-items: center;
-
-        .item-name {
-            display: block;
-            margin-left: 10px;
-            width: 100%;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-
-            .item-size,
-            .item-length,
-            .subtitle {
-                @include font-size(12);
-                font-weight: 400;
-                color: $text-muted;
-                display: block;
-            }
-
-            .name {
-                white-space: nowrap;
-                color: $text;
-                @include font-size(14);
-                font-weight: 700;
-                max-height: 40px;
-                overflow: hidden;
-                text-overflow: ellipsis;
-            }
-        }
-
-        .icon-item {
-            position: relative;
-            min-width: 52px;
-            display: flex;
-            text-align: center;
-            justify-content: center;
-            line-height: 0;
-
-            .file-icon {
-                @include font-size(35);
-
-                path {
-                    fill: #fafafc;
-                    stroke: #dfe0e8;
-                    stroke-width: 1;
-                }
-            }
-
-            .folder {
-                width: 36px;
-                height: 36px;
-
-                /deep/ .folder-icon {
-					transform: scale(0.8) translate(-10px, -11px);
-                }
-            }
-
-            .file-icon-text {
-                line-height: 1;
-                top: 40%;
-                @include font-size(8);
-                margin: 0 auto;
-                position: absolute;
-                text-align: center;
-                left: 0;
-                right: 0;
-                font-weight: 600;
-                user-select: none;
-                max-width: 20px;
-                max-height: 20px;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-            }
-
-            .image {
-                object-fit: cover;
-                user-select: none;
-                max-width: 100%;
-                border-radius: 5px;
-                width: 52px;
-                height: 52px;
-            }
-        }
-    }
-
-    .dark {
-        .file-item {
-            .icon-item .file-icon {
-                path {
-                    fill: $dark_mode_foreground;
-                    stroke: #2F3C54;
-                }
-            }
-
-            .icon-item .file-icon-mobile {
-                path {
-                    fill: $dark_mode_background !important;
-                    // stroke: ;
-                }
-            }
-
-            .item-name {
-                .name {
-                    color: $dark_mode_text_primary;
-                }
-
-                .item-size,
-                .item-length,
-                .subtitle {
-                    color: $dark_mode_text_secondary;
-                }
-            }
-        }
-
-        .popup-wrapper {
-            .file-item {
-                .icon-item .file-icon {
-                    path {
-                        fill: lighten($dark_mode_foreground, 3%);
-                    }
-                }
-            }
-        }
-    }
-
-    @media (max-width: 690px) {
-		.dark .file-item {
-            .icon-item .file-icon {
-                path {
-                    fill: $dark_mode_foreground;
-                }
-            }
-        }
-    }
-</style>
--- a/resources/js/components/Teams/CreateTeamFolderPopup.vue
+++ b/resources/js/components/Teams/CreateTeamFolderPopup.vue
@@ -8,7 +8,7 @@
        <PopupContent>

 			<!--Item Thumbnail-->
-            <ThumbnailItem v-if="! isNewFolderTeamCreation" class="mb-5" :item="item" info="metadata" />
+            <ThumbnailItem v-if="! isNewFolderTeamCreation" class="mb-5" :item="item" />

 			<!--Form to set team folder-->
            <ValidationObserver @submit.prevent="createTeamFolder" ref="teamFolderForm" v-slot="{ invalid }" tag="form">
--- a/resources/js/components/Teams/EditTeamFolderPopup.vue
+++ b/resources/js/components/Teams/EditTeamFolderPopup.vue
@@ -8,7 +8,7 @@
        <PopupContent>

 			<!--Item Thumbnail-->
-            <ThumbnailItem class="mb-5" :item="item" info="metadata" />
+            <ThumbnailItem class="mb-5" :item="item" />

 			<!--Form to set team folder-->
            <ValidationObserver @submit.prevent="updateTeamFolder" ref="teamFolderForm" v-slot="{ invalid }" tag="form">