Alert user for low quota and video auto-block on upload page (#4336)

* Replace wording of instance contact

* Add contact-us button to no-quota alert on upload page

* Add alert for accounts with auto-blocked videos on upload page

* Add alert for accounts without enough quota + refacto on upload page

* Using ng-container and ng-template

* Add alert for daily quota

* Add hook filter for upload page alert messages

* Add instance name as subtitle in contact modal

* Fix eslint max-len on  string

* Fix missing word in quota left daily message - upload page

Co-authored-by: Kimsible <kimsible@users.noreply.github.com>

3 files changed, 8 insertions, 2 deletions

diff --git a/client/src/app/+about/about-instance/about-instance.component.html b/client/src/app/+about/about-instance/about-instance.component.html
index 436d486ab..1026c4e0d 100644
--- a/client/src/app/+about/about-instance/about-instance.component.html
+++ b/client/src/app/+about/about-instance/about-instance.component.html
@@ -4,7 +4,7 @@
     <div class="about-instance-title">
       <h1 i18n class="title">About {{ instanceName }}</h1>
 
-      <a routerLink="/about/contact" i18n *ngIf="isContactFormEnabled" class="contact-admin">Contact administrator</a>
+      <a routerLink="/about/contact" i18n *ngIf="isContactFormEnabled" class="contact-admin">Contact us</a>
     </div>
 
     <div class="instance-badges" *ngIf="categories.length !== 0 || languages.length !== 0">
diff --git a/client/src/app/+about/about-instance/contact-admin-modal.component.html b/client/src/app/+about/about-instance/contact-admin-modal.component.html
index 8b6b707af..ed027af44 100644
--- a/client/src/app/+about/about-instance/contact-admin-modal.component.html
+++ b/client/src/app/+about/about-instance/contact-admin-modal.component.html
@@ -1,6 +1,6 @@
 <ng-template #modal>
   <div class="modal-header">
-    <h1 i18n class="modal-title">Contact {{ instanceName }} administrator</h1>
+    <h1 i18n class="modal-title">Contact the administrator(s)<p class="modal-subtitle">{{ instanceName }}</p></h1>
     <my-global-icon iconName="cross" aria-label="Close" tabindex="0" role="button" (click)="hide()" (keydown.enter)="hide()"></my-global-icon>
   </div>
 
diff --git a/client/src/app/+about/about-instance/contact-admin-modal.component.scss b/client/src/app/+about/about-instance/contact-admin-modal.component.scss
index c0b451b4e..e143a9dc6 100644
--- a/client/src/app/+about/about-instance/contact-admin-modal.component.scss
+++ b/client/src/app/+about/about-instance/contact-admin-modal.component.scss
@@ -1,6 +1,12 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
+.modal-subtitle {
+  font-size: 16px;
+  line-height: 1rem;
+  margin-bottom: 0;
+}
+
 .modal-body {
   text-align: left;
 }