tailwind implementation

resources/js/components/FilesView/InfoSidebar.vue

@@ -36,9 +36,9 @@
 				v-if="canShowAuthor"
 				:title="$t('Author')"
 			>
-                <div class="author-preview">
+                <div class="flex items-center">
 					<MemberAvatar :size="32" :member="singleFile.data.relationships.user" />
-                    <span class="name">{{ singleFile.data.relationships.user.data.attributes.name }}</span>
+                    <span class="ml-2 block">{{ singleFile.data.relationships.user.data.attributes.name }}</span>
                 </div>
             </ListInfoItem>
 
@@ -180,16 +180,6 @@
 
 <style scoped lang="scss">
 
-	.author-preview	{
-		display: flex;
-		align-items: center;
-
-		.name {
-			margin-left: 10px;
-			display: block;
-		}
-	}
-
 	.info-wrapper {
 		padding-bottom: 20px;
 		height: 100%;

resources/js/components/FilesView/MemberAvatar.vue

@@ -5,7 +5,7 @@
 			v-if="member.data.attributes.avatar"
 			:src="member.data.attributes.avatar"
 			:alt="member.data.attributes.name"
-			class="user-image"
+			class="rounded-lg"
 		>
 		<TypedAvatar
 			v-else
@@ -29,10 +29,3 @@
 		},
 	}
 </script>
-
-<style lang="scss">
-
-	.user-image {
-		border-radius: 10px;
-	}
-</style>