style(todo): refactor some todo files

components/consultation/chat_window/chat_message_item.vue

@@ -22,10 +22,10 @@
 				<img v-if="chatMessage.data.subkind === 'image'" :src="fileURL"/>
 				<a
 					v-else
-					class="file-link flex items-center m-1"
+					class="file-link"
 					target="_blank"
 					:href="fileURL">
-					<span class="attachment-symbol material-icons bg-gray-300 text-black dark:bg-dark-100 dark:text-white rounded-full p-1 mr-2">
+					<span class="attachment-symbol material-icons">
 						attachment
 					</span>
 					<span class="file-name">{{ chatMessage.data.name }}</span>
@@ -75,13 +75,17 @@
 				@apply dark:border-opacity-100;
 
 				.file-link {
-					.file-name {
+					@apply flex items-center m-1;
+					&.file-name {
 						text-decoration: underline;
 					}
 				}
 			}
 		}
 
+		.attachment-symbol {
+			@apply bg-gray-300 text-black dark:bg-dark-100 dark:text-white rounded-full p-1 mr-2;
+		}
 		.other, .self {
 			@apply rounded-full border border-true-gray-600 border-opacity-50;
 			width: 40px;

components/consultation/chat_window/user_controller/file_upload.vue

@@ -40,21 +40,20 @@
 				</label>
 			</form>
 
-			<!-- TODO: Refactor all WindiCSS inline classes using @apply directive -->
-			<div v-if="hasExtracted" class="preview-file mt-5">
+			<div v-if="hasExtracted" class="preview-file">
 				<div v-if="isAcceptingImage" class="preview-img-container">
-					<img class="preview-img max-w-30" :src="previewFile"/>
-					<small class="preview-title max-w-30 text-xs">
+					<img class="preview-img" :src="previewFile"/>
+					<small class="preview-title">
 						{{ filename }}
 					</small>
 				</div>
 				<div
 					v-if="isAcceptingFile"
-					class="preview-file-container bg-true-gray-200 flex items-center px-3 py-2">
+					class="preview-file-container">
 					<span class="material-icons mr-2">
 						attachment
 					</span>
-					<small class="preview-title flex-1 text-xs">
+					<small class="preview-file-title">
 						{{ filename }}
 					</small>
 					<span class="remove-file-btn material-icons cursor-pointer">
@@ -81,13 +80,34 @@
 	</Overlay>
 </template>
 
-<style lang="scss">
+<style scoped lang="scss">
 @import "@styles/btn.scss";
 
 #choose-file-btn {
 	display:none;
 	appearance: none;
 }
+
+.preview-file{
+	@apply mt-5;
+}
+
+.preview-img{
+	@apply max-w-3;
+}
+
+.preview-title{
+	@apply max-w-30 text-xs;
+}
+
+.preview-file-container {
+	@apply bg-true-gray-200 flex items-center px-3 py-2;
+}
+
+.preview-file-title{
+	@apply flex-1 text-xs;
+}
+
 </style>
 
 <script setup lang="ts">

pages/consultation/index.page.vue

@@ -1,6 +1,5 @@
 <!--
 	General tasks for other members:
-	TODO(others): Refactor all WindiCSS inline classes using @apply directive
 	TODO(others): Refactor HTML to Vue Components if applicable
 	TODO(others): Make use of mixins if applicable
 -->