From 35ccb03c2b0fa56bc5f65a5874e8c9e1cfd43979 Mon Sep 17 00:00:00 2001
From: James Collins <james.collins@outlook.com.au>
Date: Fri, 29 Sep 2023 11:10:01 +1000
Subject: [PATCH] cleanup of styling

---
 resources/js/views/File.vue | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/resources/js/views/File.vue b/resources/js/views/File.vue
index 27b3b98..42f2de2 100644
--- a/resources/js/views/File.vue
+++ b/resources/js/views/File.vue
@@ -10,8 +10,9 @@
         <div
             class="max-w-2xl mx-auto border-1 bg-white rounded-xl mt-7xl text-gray-5 px-12 py-8">
             <h3 class="mb-4">Password Required</h3>
-            <p class="mb-2">
-                This file requires a password before it can be viewed
+            <p class="mb-2 text-sm">
+                The file <strong>{{ fileName }}</strong> requires a password
+                before you can view it:
             </p>
             <SMInput
                 class="mb-4"
@@ -22,7 +23,7 @@
             <div class="flex flex-justify-end">
                 <input
                     type="submit"
-                    class="font-medium px-6 py-3.1 rounded-2 hover:shadow-md text-lg transition bg-sky-600 hover:bg-sky-500 text-white cursor-pointer"
+                    class="font-medium block w-full md:inline-block md:w-auto px-6 py-1.5 rounded-md hover:shadow-md transition text-sm bg-sky-600 hover:bg-sky-500 text-white cursor-pointer"
                     value="Submit" />
             </div>
         </div>
@@ -68,6 +69,7 @@ const pageStatus = ref(200);
 const pageLoading = ref(true);
 const showForm = ref("");
 const fileUrl = ref("");
+const fileName = ref("");
 const userStore = useUserStore();
 
 const form: FormObject = reactive(
@@ -139,6 +141,7 @@ const handleLoad = async () => {
             if (result.status === 200) {
                 const data = result.data as MediaResponse;
                 const medium = data.medium as Media;
+                fileName.value = medium.name;
                 fileUrl.value = medium.url;
 
                 if (medium.security_type === "") {