From bfa87d31ea6bf32fa313779cd3f8c5a0381d5c66 Mon Sep 17 00:00:00 2001
From: Gavin Suntop <206379+gvn@users.noreply.github.com>
Date: Mon, 6 Nov 2023 10:13:18 -0800
Subject: [PATCH] feat: Image upload improvements  [MOSOWEB-25]

---
 components/publish/PublishAttachment.vue | 48 ++++++++++++++++++++----
 components/status/StatusAttachment.vue   |  9 +++--
 locales/en.json                          | 11 +++++-
 3 files changed, 56 insertions(+), 12 deletions(-)

diff --git a/components/publish/PublishAttachment.vue b/components/publish/PublishAttachment.vue
index bce12be173..d6e317a4eb 100644
--- a/components/publish/PublishAttachment.vue
+++ b/components/publish/PublishAttachment.vue
@@ -41,8 +41,8 @@ function toggleApply() {
       </div>
     </div>
     <div absolute right-2 bottom-2>
-      <button class="bg-black/75" text-white px2 py1 rounded-2 @click="isEditDialogOpen = true">
-        {{ $t('action.edit') }}
+      <button class="bg-black/75 plusalt" text-white px2 py1 rounded-2 @click="isEditDialogOpen = true">
+        {{ $t('action.altplus') }}
       </button>
     </div>
     <ModalDialog
@@ -51,26 +51,60 @@ function toggleApply() {
       py-6
       px-6 max-w-300
     >
+      <div flex flex-justify-end mb>
+        <button btn-text p-0 @click="isEditDialogOpen = false">
+          <div i-ri:close-line />
+        </button>
+      </div>
       <div flex flex-col-reverse gap-5 md:flex-row>
         <div flex flex-col gap-2 justify-between>
           <h1 id="edit-attachment" font-bold>
             {{ $t('attachment.edit_title') }}
           </h1>
+          <div hidden md:block>
+            <p mb-4>
+              {{ $t('attachment.alt-text-p-1') }}
+            </p>
+            <p mb-4>
+              {{ $t('attachment.alt-text-p-2') }}
+            </p>
+            <ul mb-4 list-disc list-inside>
+              <li>{{ $t('attachment.alt-point-1') }}</li>
+              <li>{{ $t('attachment.alt-point-2') }}</li>
+              <li>{{ $t('attachment.alt-point-3') }}</li>
+              <li>{{ $t('attachment.alt-point-4') }}</li>
+              <li>{{ $t('attachment.alt-point-5') }}</li>
+            </ul>
+          </div>
           <div flex flex-col gap-2>
-            <textarea v-model="description" p-3 h-50 bg-base rounded-2 border-strong border-1 md:w-100 />
+            <textarea v-model="description" p-3 h-50 bg-base rounded-2 border-strong border-1 w-full :placeholder="$t('attachment.add_image_description')" />
             <div flex flex-row-reverse>
               <PublishCharacterCounter :length="description.length" :max="maxDescriptionLength" />
             </div>
-            <button btn-outline :disabled="description.length > maxDescriptionLength" @click="toggleApply">
+            <button class="apply-btn" btn-solid rounded-3 text-sm w-full :disabled="description.length > maxDescriptionLength" @click="toggleApply">
               {{ $t('action.apply') }}
             </button>
           </div>
-          <button btn-outline @click="isEditDialogOpen = false">
-            {{ $t('action.close') }}
-          </button>
         </div>
         <StatusAttachment :attachment="attachment" w-full is-preview />
       </div>
     </ModalDialog>
   </div>
 </template>
+
+<style>
+  .plusalt {
+    align-items: center;
+    padding: 4px 16px;
+    background: rgba(21, 20, 26, 0.8);
+    border-radius: 360px;
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 16px;
+    text-transform: uppercase;
+  }
+
+  .apply-btn {
+    border-radius: 360px;
+  }
+</style>
diff --git a/components/status/StatusAttachment.vue b/components/status/StatusAttachment.vue
index 39c56f4ac8..2abd74f008 100644
--- a/components/status/StatusAttachment.vue
+++ b/components/status/StatusAttachment.vue
@@ -118,7 +118,7 @@ watch(shouldLoadAttachment, () => {
 </script>
 
 <template>
-  <div relative ma flex :gap="isAudio ? '2' : ''">
+  <div relative flex flex-items-start :gap="isAudio ? '2' : ''">
     <template v-if="type === 'video'">
       <button
         type="button"
@@ -207,7 +207,6 @@ watch(shouldLoadAttachment, () => {
         focus:outline-none
         focus:ring="2 primary inset"
         rounded-lg
-        h-full
         w-full
         aria-label="Open image preview dialog"
         relative
@@ -227,9 +226,8 @@ watch(shouldLoadAttachment, () => {
           }"
           :should-load-image="shouldLoadAttachment"
           rounded-lg
-          h-full
           w-full
-          object-cover
+          object-contain
           :draggable="shouldLoadAttachment"
           :class="!shouldLoadAttachment ? 'brightness-60 hover:brightness-70 transition-filter' : ''"
         />
@@ -285,4 +283,7 @@ watch(shouldLoadAttachment, () => {
   top: 50%;
   translate: -50% -50%;
 }
+.status-attachment-image {
+  border-radius: 16px;
+}
 </style>
diff --git a/locales/en.json b/locales/en.json
index 91a891886c..a80faa99be 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -57,6 +57,7 @@
     "view_other_following": "Following from other instances may not be displayed."
   },
   "action": {
+    "altplus": "+ Alt",
     "apply": "Apply",
     "bookmark": "Bookmark",
     "bookmarked": "Bookmarked",
@@ -93,7 +94,15 @@
   "app_logo": "Mozilla Logo",
   "app_name": "Mozilla Social",
   "attachment": {
-    "edit_title": "Description",
+    "add_image_description": "Add image description",
+    "alt-point-1": "Capture important elements",
+    "alt-point-2": "Summarize text in images",
+    "alt-point-3": "Use regular sentence structure",
+    "alt-point-4": "Avoid redundant information",
+    "alt-point-5": "Focus on trends and key findings in complex visuals (like diagrams or maps)",
+    "alt-text-p-1": "Alt text provides image descriptions for people with vision impairments, low bandwidth connections, or those seeking extra context.",
+    "alt-text-p-2": "You can improve accessibility and understanding for everyone by writing clear, concise, and objective alt text.",
+    "edit_title": "Add alt text",
     "remove_label": "Remove attachment"
   },
   "command": {