Fix/bug bash issues 1 (#1787)

* fix: update hidden wording for custom logos in brand preview

* fix(preview): remove 2px margin; add overflow scroll for logos that are too wide

* chore(translation): update button text and add translation

* fix tests

* chore: formatting

* chore(translation): fix issues with apostrophes

* chore: formatting

* chore: fix broken translation

app/main/views/email_branding.py

@@ -299,15 +299,17 @@ def get_preview_template(email_branding=None):
             logo_with_background_colour = branding_type == "custom_logo_with_background_colour"
             brand_name = _("custom brand logo")
 
-    template = {
-        "subject": "foo",
-        "content": "# Email preview\n{}\n{}".format(
+    template_content = "# {}\n".format(_("Email preview"))
+
+    if email_branding is None and current_service.email_branding_id is None:
+        template_content += "{} {}".format(
             _("An example email showing the {} at the top left.").format(brand_name),
-            _("The canada wordmark is displayed at the bottom right")
-            if current_service.email_branding_id is None and email_branding is None
-            else "",
-        ),
-    }
+            _("The canada wordmark is displayed at the bottom right."),
+        )
+    else:
+        template_content += _("There's a custom logo at the top left and no logo at the bottom.")
+
+    template = {"subject": "foo", "content": template_content}
 
     html_template = str(
         HTMLEmailTemplate(

app/main/views/index.py

@@ -156,7 +156,7 @@ def email_template():
         "subject": "foo",
         "content": "# Email preview\n{}\n{}".format(
             _("An example email showing the {} at the top left.").format(brand_name),
-            _("The canada wordmark is displayed at the bottom right"),
+            _("The canada wordmark is displayed at the bottom right."),
         ),
     }
 

app/templates/views/email-branding/_preview.html

@@ -1,5 +1,5 @@
-<div class="max-w-5xl mx-2">
-  <div class="py-0 px-0 px-gutterHalf box-border border border-gray-300" id="template_preview">
+<div class="max-w-5xl">
+  <div class="py-0 px-0 px-gutterHalf box-border border border-gray-300 overflow-x-auto" id="template_preview">
     {% if '/_email' in request.base_url %}
       <link href="https://fonts.googleapis.com/css?family=Flow+Block&display=swap" rel="stylesheet" />
     {% endif %}

app/templates/views/email-branding/branding-request.html

@@ -48,7 +48,7 @@ <h2 class="heading-medium">{{ _('Prepare your logo') }}</h2>
               {% endif %}
 
               {{ form.file(**{ 'class': 'file-upload-field', 'accept': 'image/png', 'data_testid': 'brand_image', 'aria-labelledby': 'file-description' }) }}
-              <span aria-hidden="true" id="file-upload-button" class="button button-secondary font-normal"> {{ _('Choose file...') }} </span>
+              <span aria-hidden="true" id="file-upload-button" class="button button-secondary font-normal"> {{ _('Select a file') }} </span>
             </label>         
 
             <div class="mt-6 ml-2 pl-6 border-l-4 border-gray-200 preview font-normal relative" data-testid="brand_fileinfo">

app/translations/csv/fr.csv

@@ -1814,7 +1814,7 @@
 "An example email showing the {} at the top left.","Exemple d'un courriel avec le {}. Le logo est placé en haut à gauche."
 "French-first government of Canada logo","logo du gouvernement du canada, français en premier"
 "custom brand logo","FR"
-"The canada wordmark is displayed at the bottom right","Le mot-symbole canada est affiché en bas à droite"
+"The canada wordmark is displayed at the bottom right.","Le mot-symbole canada est affiché en bas à droite."
 "Email logo","Logo des courriels"
 "This preview shows how your logo will appear to recipients","Cet aperçu montre l’apparence qu’aura votre logo pour les destinataires."
 "Change logo","Modifier le logo"
@@ -1833,7 +1833,7 @@
 "Enter `the` name of the logo","Veuillez entrer le nom de votre logo"
 "You must select a file to continue","Vous devez sélectionner un fichier pour continuer."
 "Submit request","Soumettre la demande"
-"Logo preview","Aperçu"
+"Logo preview","Aperçu du logo"
 "We're reviewing your logo","Nous examinons votre logo"
 "Try creating a template.","Essayez de créer un gabarit"
 "Explore other settings","Découvrez les autres paramètres"
@@ -1842,4 +1842,7 @@
 "File name:","Nom du fichier :"
 "file size:","taille du fichier :"
 "display size:","taille d'affichage :"
-"Enter the name of the logo","Veuillez entrer le nom de votre logo"
+"Enter the name of the logo","Veuillez entrer le nom de votre logo"
+"Select a file","Sélectionner un fichier"
+"There's a custom logo at the top left and no logo at the bottom.","Un logo personnalisé apparaît en haut à gauche et aucun logo n’apparaît en bas."
+"Email preview","Aperçu du courriel"

tests/app/main/views/test_email_branding.py

@@ -586,7 +586,7 @@ class MockService:
         with app_.test_request_context():
             mocker.patch("app.main.views.email_branding.current_service", new=MockService)
             html_template = get_preview_template(email_branding)
-            assert "An example email showing the Example Brand at the top left" in html_template
+            assert "There’s a custom logo at the top left and no logo at the bottom." in html_template
             assert "The canada wordmark is displayed at the bottom right" not in html_template
 
     def test_get_preview_template_with_default_branding_is_french(self, mocker, app_):
@@ -631,5 +631,5 @@ class MockService:
             )
             mocker.patch("app.main.views.email_branding.current_service", new=MockService)
             html_template = get_preview_template(None)
-            assert "An example email showing the custom brand logo at the top left" in html_template
+            assert "There’s a custom logo at the top left and no logo at the bottom." in html_template
             assert "The canada wordmark is displayed at the bottom right" not in html_template