Update email layout

H2-invent · Feb 12, 2024 · 82e4fed · 82e4fed
1 parent 7eb12d9
commit 82e4fed
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 84 deletions.
diff --git a/templates/email/addUser/resetting.html.twig b/templates/email/addUser/resetting.html.twig
@@ -4,20 +4,11 @@
 {% block body_text %}
     {% autoescape false %}
         {% trans %}body.passwordReset{% endtrans %}
-
         {{ link }}
-
-
-        {% trans %}salutation{% endtrans %}
+        {% trans %}salutation.kindRegards{% endtrans %}
     {% endautoescape %}
-
 {% endblock %}
 
 {% block body_html %}
-    {#
-        You can of course render the html directly here.
-        Including a template as done here allows keeping things DRY by using
-        the template inheritance in it
-    #}
     {% include 'email/addUser/resetting_html.html.twig' %}
-{% endblock %}
+{% endblock %}
diff --git a/templates/email/addUser/resetting_html.html.twig b/templates/email/addUser/resetting_html.html.twig
@@ -5,8 +5,7 @@
 {% endblock %}
 {% block content %}
     {% trans %}body.passwordResetHtml{% endtrans %}
-    <button style="color: #00e676"><a href="{{ link }}">{{ link }}</a></button>
-
-    <br><br>
+    <a href="{{ link }}">{{ link }}</a>
+    <spacer size="32"></spacer>
     {% trans %}salutation.kindRegards{% endtrans %}
-{% endblock %}
+{% endblock %}
diff --git a/templates/email/base.html.twig b/templates/email/base.html.twig
@@ -4,64 +4,64 @@
         body,
         html,
         .body {
-            background: #f3f3f3 !important;
+            background-color: #f8fafc;
         }
-
-        .container.header {
-            background: #f3f3f3;
+        body {
+            padding: 40px 0px !important;
         }
-
-        .body-border {
-            border-top: 8px solid #ff002a;
+        .container {
+            border: 1px solid #e2e8f0;
+        }
+        .columns {
+            padding: 30px !important;
+            border-radius: 10px;
+        }
+        .text-muted {
+            color: #9ca3af;
+        }
+        h4 {
+            margin-bottom: 30px !important;
+        }
+        p {
+            line-height: 1.5 !important;
+        }
+        .border-t {
+            border-top: 1px solid #e2e8f0;
         }
     </style>
-
+    <div style="text-align: center;">
+        <small class="text-muted">{% block header %}{% endblock %}</small>
+    </div>
     <spacer size="16"></spacer>
-
     <container>
         <row>
             <columns>
-                <h1>
-                    {% block header %}
-
-
-                    {% endblock %}
-                </h1>
-
+                {% block content %}{% endblock %}
+                {% if team is defined %}
+                    <spacer size="16"></spacer>
+                    <p>{{ team.signature|nl2br }}</p>
+                {% endif %}
             </columns>
         </row>
-    </container>
-
-    <container>
-        <row>
+        <row class="border-t">
             <columns>
-
-                <spacer size="32"></spacer>
-
-                <spacer size="16"></spacer>
-                {% block content %}
-
-                {% endblock %}
-                <spacer size="16"></spacer>
-                <p style="text-align: center">
-                    {% if team is defined %}{{ team.signature|nl2br }}{% endif %}
-                </p>
-                <spacer size="16"></spacer>
-                <p style="text-align: center">
-                    <a href="{{ dataPrivacy }}">Datenschutzhinweis</a><br>
-                    {% if team is defined and team is not null %}
-                        {% trans %}footer.standard{% endtrans %}<br>
-                        {{ team.name }} - {{ team.strasse }}, {{ team.plz }} {{ team.stadt }}
-                    {% endif %}
-                </p>
-
+                <a href="{{ dataPrivacy }}">Datenschutzhinweis</a>
+                {% if team is defined and team is not null %}
+                    <br>
+                    <p>
+                    {% trans %}footer.standard{% endtrans %}<br>
+                    {{ team.name }} - {{ team.strasse }}, {{ team.plz }} {{ team.stadt }}
+                    </p>
+                {% endif %}
             </columns>
         </row>
-        <center>
-            <small>
-                <a href="https://open-datenschutzcenter.de">Powered by Open Datenschutzcenter</a>
-            </small>
-        </center>
-
     </container>
+    <spacer size="16"></spacer>
+    <div style="text-align: center;">
+        <small class="text-muted">
+            <a href="https://open-datenschutzcenter.de" class="text-muted">Powered by Open Datenschutzcenter</a>
+            •
+            <a href="https://h2-invent.com/software/odc" class="text-muted">Made with ❤ by H2 invent</a>
+        </small>
+    </div>
 {% endapply %}
diff --git a/translations/email/email.de.yaml b/translations/email/email.de.yaml
@@ -1,38 +1,36 @@
 subject:
   passwordReset: Passwort zurücksetzen
-  passwordResetHtml: Open-Datenschutz Center
-  notificationComment: -- Ein neuer Kommentar zu Ihrer Anfrage --
-  newCustomerRequest: -- Neue Kundenanfrage --
-  verifyEmail: -- Bestätigen Sie Ihre Email Adresse --
+  passwordResetHtml: Open Datenschutzcenter
+  notificationComment: Ein neuer Kommentar zu Ihrer Anfrage
+  newCustomerRequest:  Neue Kundenanfrage
+  verifyEmail:  Bestätigen Sie Ihre Email Adresse
   invite: Einladung zum ODC
 body:
   passwordReset: '
     Passwort neu setzen
 
-    <h3>
-        Hallo!
-    </h3>
+    Hallo!
 
     Sie wurden gerade von einem Administrator zu einem Datenschutz Team auf Ihrem Datenschutz Center hinzugefügt.
 
     Um ihr Passwort nun festzulegen klicken Sie den nachfolgenden Link.'
   passwordResetHtml: '
-    <h4 class="text-center">
-        -- Einladung zum Datenschutz Center Team --
+    <h4>
+        Einladung zum Datenschutz Center Team
     </h4>
-    <b>
+    <p>
         Hallo!
-    </b>
+    </p>
     <p>
         Sie wurden gerade von einem Administrator zu einem Datenschutz Team auf Ihrem Datenschutz Center hinzugefügt.
     </p>'
   notificationComment: '
-  <h4 class="text-center">
+  <h4>
     {title}
   </h4>
-  <b>
+  <p>
     Hallo!
-  </b>
+  </p>
   <p>
     Es gibt eine neue Nachricht in Ihrer Anfrage {dataTitle}.
   </p>
@@ -61,12 +59,12 @@ body:
   
   Sie erhalten diese E-Mail, weil Sie eine Anfrage über den Datenschutzcenter {teamName} gestellt haben.'
   notificationCommentInternal: '
-  <h4 class="text-center">
+  <h4>
     {title}
   </h4>
-  <b>
+  <p>
     Hallo!
-  </b>
+  </p>
   <p>
     Es ist ein neuer Kommentar zu {dataTitle} vorhanden.
   </p>
@@ -83,9 +81,9 @@ body:
   </p>
   <spacer size="16"></spacer>'
   notificationNew: '
-  <b>
+  <p>
     Hallo!
-  </b>
+  </p>
   <p>
     Im Datenschutzcenter ist eine neue Kundeanfrage bezüglich {subject} eingegangen.
   </p>
@@ -102,9 +100,9 @@ body:
   </p>
   <spacer size="16"></spacer>'
   notificationVerify: '
-  <b>
+  <p>
     Hallo {name}!
-  </b>
+  </p>
   <p>
     Bevor wir Ihre Anfrage weiter bearbeiten können, müssen Sie Ihre Email Adresse bestätigen. Klicken Sie dazu auf
     den Link in dieser Email.<br>
@@ -160,8 +158,8 @@ body:
 
 salutation:
   kindRegards: '
-  Mit freundlichen Grüßen<br>
-  Ihr Datenschutz Center'
+  <p>Mit freundlichen Grüßen<br>
+  Ihr Datenschutz Center</p>'
   signature:
     plain: '
     Wenn Sie Fragen zum Datenschutz und den Hintergründen diese Nachricht, melden Sie sich bei dem Datenschutzbeauftragten.