More work on attachment details

src/assets/css/sendattachments.scss

@@ -614,22 +614,6 @@ $hiliteColor: #4642f1;
       }
     }
 
-    .detail-subtitle {
-      font-family: "Inter", sans-serif;
-      font-weight: 400;
-      font-size: 14px;
-      line-height: 125%;
-      letter-spacing: 0.4px;
-      margin-top: 22px;
-      padding-bottom: 4px;
-      a, a:visited {
-        font-weight: 700;
-        color: white;
-        text-decoration: underline !important;
-        margin-right: 4px;
-      }
-    }
-
     .detail-row {
       margin-top: 12px;
       font-family: "Inter", sans-serif;
@@ -667,6 +651,24 @@ $hiliteColor: #4642f1;
     }
   }
 
+  .attachment-info__verify-info {
+    font-family: "Inter", sans-serif;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 125%;
+    letter-spacing: 0.4px;
+    margin-top: 22px;
+    padding-bottom: 4px;
+  
+    a,
+    a:visited {
+      font-weight: 700;
+      color: white;
+      text-decoration: underline !important;
+      margin-right: 4px;
+    }
+  }
+
   .attachment-info__download-button {
     font-family: 'Poppins', sans-serif;
     font-weight: 700;

src/assets/translations/en.json

@@ -518,6 +518,7 @@
     "details": "Details",
     "cc_info": "More information is available. Upload the image to {link}",
     "cc_info_link": "Content Credentials Verify",
+    "cc_no_info": "Details for this image cannot be verified.",
     "metadata-stripped": "The image has been compressed and its metadata removed. If you’d like more context, ask the sender for the original file.",
     "download_image": "Download image"
   }

src/components/content-credentials/C2PAInfo.vue

@@ -13,16 +13,22 @@
         <a :href="d.link">{{ d.value }}</a>
       </template>
     </CCProperty>
-
-    <div class="detail-subtitle" v-if="hasC2PA">
-      <i18n-t keypath="cc.cc_info" tag="span">
-        <template v-slot:link>
-          <a href="https://contentcredentials.org/verify" target="_blank">{{ $t("cc.cc_info_link") }}</a>
-          <v-icon>$vuetify.icons.ic_copy</v-icon>
-        </template>
-      </i18n-t>
-    </div>
   </div>
+  <div class="attachment-info__verify-info" v-if="hasC2PA">
+    <i18n-t keypath="cc.cc_info" tag="span">
+      <template v-slot:link>
+        <a href="https://contentcredentials.org/verify" target="_blank">{{ $t("cc.cc_info_link") }}</a>
+        <v-icon>$vuetify.icons.ic_copy</v-icon>
+      </template>
+    </i18n-t>
+  </div>
+  <div class="attachment-info__verify-info" v-else-if="flags">
+    {{ t("cc.cc_no_info") }}
+  </div>
+  <div class="attachment-info__verify-info" v-else-if="props.metaStripped">
+    {{ t("cc.metadata-stripped") }}
+  </div>
+
 </template>
 
 <script setup lang="ts">
@@ -137,7 +143,7 @@ const updateDetails = () => {
           link: link,
         });
       }
-    } catch (error) {}
+    } catch (error) { }
   }
 
   details.value = d;
@@ -175,14 +181,9 @@ watch(
         if (date && dayjs().diff(date, "month") >= 3) {
           result += t("file_mode.old_photo");
         }
-
-        if (props.metaStripped) {
-          result += t("cc.metadata-stripped");
-        }
-
         infoText.value = result === "" ? undefined : result;
       }
-    } catch (error) {}
+    } catch (error) { }
 
     updateDetails();
   },