From 54969ff6727d98e5d0cd455c6ec5068a56384c76 Mon Sep 17 00:00:00 2001
From: Chibuotu Amadi <chibuotu@gmail.com>
Date: Tue, 23 Mar 2021 02:53:31 +0100
Subject: [PATCH] alignment work + footer

---
 .../grants/successful_contribution.html       | 53 +------------
 .../grants/thank_you_for_supporting.html      | 43 +---------
 app/retail/templates/emails/template.html     | 79 +++++++++++--------
 3 files changed, 52 insertions(+), 123 deletions(-)

diff --git a/app/retail/templates/emails/grants/successful_contribution.html b/app/retail/templates/emails/grants/successful_contribution.html
index 201df088b3d..df5ada18985 100644
--- a/app/retail/templates/emails/grants/successful_contribution.html
+++ b/app/retail/templates/emails/grants/successful_contribution.html
@@ -21,30 +21,8 @@
 {% block content %}
 
 <style>
-  hr {
-    width: 80%;
-    height: 2px;
-    border-radius: 25px;
-    border: none;
-    background-color: #D2D2D2;
-  }
-
   .grant-header {
     width: 100%;
-    text-align: center;
-  }
-
-  .left-grant-Header {
-    display: inline-block;
-  }
-
-  .right-grant-header {
-    display: inline-block;
-  }
-
-  .right-grant-header>h2 {
-    font-size: 20px;
-    line-height: 1.5em;
   }
 
   .grant-info {
@@ -65,7 +43,6 @@
   .grant-description {
     max-width: 50rem;
     margin: 1.5rem auto;
-    text-align: center;
   }
 
   .grant-contribution {
@@ -74,16 +51,6 @@
     font-size: 1rem;
   }
 
-  .grant-button {
-    padding: 12px 36px;
-    font-size: 12px;
-    border-radius: 3px;
-    text-decoration: none;
-    background-color: #0D0764;
-    color: white;
-    font-weight: 600;
-  }
-
   #grow-oss {
     margin-top: 50px;
     margin-bottom: 50px;
@@ -93,27 +60,13 @@
     max-width: 25rem;
     width: 100%;
   }
-
-  @media screen and (min-width: 598px) {
-    .right-grant-header {
-      padding-left: 40px;
-      transform: translateY(-12.5%);
-      text-align: left;
-    }
-
-    .left-grant-Header>img {
-      transform: translateY(13.5%);
-    }
-  }
 </style>
 
 <div id="content-body">
   <img class="center-img bounties-img" src="{% static 'v2/images/emails/grants.png' %}">
   <div class="grant-header">
-    <div class="left-grant-Header">
-      <img src="{% static "v2/images/heart-robot.png" %}" alt="{% trans " Gitcoin Heart Robot" %}" title="{% trans "Gitcoin Heart Robot" %}">
-    </div>
-    <div class="right-grant-header" style="margin-top: 4em;">
+    <img src="{% static "v2/images/heart-robot.png" %}" alt="{% trans " Gitcoin Heart Robot" %}" title="{% trans "Gitcoin Heart Robot" %}">
+    <div style="margin-top: 4em;">
       <h1 style="text-transform: none;">{% trans "Your contribution of" %} {{ subscription.amount_per_period|floatformat:3|intcomma }} {{ subscription.token_symbol }} {% trans "to " %} {{ grant.title }} {% trans " was successful" %}!
       </h1>
       <h2 style="text-transform: none;">{% trans "The world of open source is a better place because of you." %}
@@ -155,7 +108,7 @@ <h2 style="text-transform: none;">{% trans "The world of open source is a better
   </div>
 
   <br>
-  <a class="grant-button" href="{% url 'grants:details' grant.id grant.slug %}?{{ utm_tracking }}">{% trans "View Grant" %}</a>
+  <a class="button" href="{% url 'grants:details' grant.id grant.slug %}?{{ utm_tracking }}">{% trans "View Grant" %}</a>
   <br>
   <br>
   <p>{% trans "If you ever need to, you can cancel your support" %}
diff --git a/app/retail/templates/emails/grants/thank_you_for_supporting.html b/app/retail/templates/emails/grants/thank_you_for_supporting.html
index 0e50c288a33..153afb5575d 100644
--- a/app/retail/templates/emails/grants/thank_you_for_supporting.html
+++ b/app/retail/templates/emails/grants/thank_you_for_supporting.html
@@ -21,30 +21,8 @@
 {% block content %}
 
 <style>
-  hr {
-    width: 80%;
-    height: 2px;
-    border-radius: 25px;
-    border: none;
-    background-color: #D2D2D2;
-  }
-
   .grant-header {
     width: 100%;
-    text-align: center;
-  }
-
-  .left-grant-header {
-    display: inline-block;
-  }
-
-  .right-grant-header {
-    display: inline-block;
-  }
-
-  .right-grant-header>h2 {
-    font-size: 20px;
-    line-height: 1.5em;
   }
 
   .grant-info {
@@ -65,7 +43,6 @@
   .grant-description {
     max-width: 50rem;
     margin: 1.5rem auto;
-    text-align: center;
   }
 
   .grant-button {
@@ -86,30 +63,14 @@
     max-width: 25rem;
     width: 100%;
   }
-
-  @media (min-width : 1386px) {
-    .left-grant-header>img {
-      transform: translateY(13.5%);
-    }
-  }
-
-  @media screen and (min-width: 598px) {
-    .right-grant-header {
-      padding-left: 40px;
-      transform: translateY(-12.5%);
-      text-align: left;
-    }
-  }
 </style>
 <div id="content-body">
   <img class="center-img bounties-img" src="{% static 'v2/images/emails/grants.png' %}">
   {% for grant_with_subscription in grants_with_subscription %}
   {% with subscription=grant_with_subscription.subscription grant=grant_with_subscription.grant %}
   <div class="grant-header">
-    <div class="left-grant-header">
-      <img src="{% static "v2/images/heart-robot.png" %}" alt="{% trans "Gitcoin Heart Robot" %}" title="{% trans "Gitcoin Heart Robot" %}">
-    </div>
-    <div class="right-grant-header">
+    <img src="{% static "v2/images/heart-robot.png" %}" alt="{% trans "Gitcoin Heart Robot" %}" title="{% trans "Gitcoin Heart Robot" %}">
+    <div style="margin-top: 4em;">
       <h1 style="text-transform: none;">{% trans "Thank you for supporting" %} {{ grant.title }}!
       </h1>
       <h2 style="text-transform: none;">{% trans "The world of open source is a better place because of you." %}
diff --git a/app/retail/templates/emails/template.html b/app/retail/templates/emails/template.html
index a613b785850..7ead71c5653 100644
--- a/app/retail/templates/emails/template.html
+++ b/app/retail/templates/emails/template.html
@@ -100,7 +100,6 @@
   }
 
   h4, .h4 {
-    text-align: center;
     padding-top: 40px;
   }
 
@@ -768,8 +767,27 @@
       width: 100%;
     }
 
+    #footer {
+      padding-top: 40px;
+      color: #757087 !important;
+    }
+
     .footer-links {
-      margin: 3em 1.4em;
+      margin: -53px 0px 110px 20px;
+    }
+
+    .footer-links div {
+      width: 25%;
+      float: left;
+    }
+
+    .footer-links div img {
+      float: right;
+    }
+
+    .footer-socials {
+      width: 3em;
+      height: auto;
     }
   }
 
@@ -798,8 +816,28 @@
       width: 90%;
     }
 
+    #footer {
+      padding-top: 40px;
+      margin: 0px 180px 0px 180px;
+      color: #757087 !important;
+    }
+
     .footer-links {
-      margin: auto;
+      margin: -53px 0px 110px 0px;
+    }
+
+    .footer-links div {
+      width: 25%;
+      float: left;
+    }
+
+    .footer-links div img {
+      float: right;
+    }
+
+    .footer-socials {
+      width: 3em;
+      height: auto;
     }
   }
 
@@ -813,29 +851,6 @@
     margin: 0.5em auto 0.5em auto;
   }
 
-  #footer {
-    color: #757087 !important;
-  }
-
-  .footer-links {
-    max-width: 800px;
-    text-align: justify;
-    /* margin: auto; */
-    margin-top: 3em;
-    margin-bottom: 2em;
-  }
-
-  .footer-links:after {
-    content: "";
-    display: inline-block;
-    width: 100%;
-  }
-
-  .footer-socials {
-    width: 3em;
-    height: auto;
-  }
-
   .bounties-img {
     max-width: 20em;
     height: auto;
@@ -852,17 +867,17 @@
     {% endblock %}
   </div>
   <div id="footer">
+    <a href="https://www.facebook.com/GetGitcoin"><img class="footer-socials" src="{% static "v2/images/emails/facebook.png" %}"></a>
     <div class="footer-links">
       {% block footer_links %}
-        <a href="https://www.facebook.com/GetGitcoin"><img class="footer-socials" src="{% static "v2/images/emails/facebook.png" %}"></a>
 
-        <a href="https://www.youtube.com/channel/UCeKRqRjzSzq5yP-zUPwc6_w"><img class="footer-socials" src="{% static "v2/images/emails/youtube.png" %}"></a>
+        <div><a href="https://www.youtube.com/channel/UCeKRqRjzSzq5yP-zUPwc6_w"><img class="footer-socials" src="{% static "v2/images/emails/youtube.png" %}"></a></div>
     
-        <a href="https://www.twitter.com/gitcoin"><img class="footer-socials" src="{% static "v2/images/emails/twitter.png" %}"></a>
+        <div><a href="https://www.twitter.com/gitcoin"><img class="footer-socials" src="{% static "v2/images/emails/twitter.png" %}"></a></div>
     
-        <a href="https://github.com/gitcoinco/"><img class="footer-socials" src="{% static "v2/images/emails/github.png" %}"></a>
+        <div><a href="https://github.com/gitcoinco/"><img class="footer-socials" src="{% static "v2/images/emails/github.png" %}"></a></div>
         
-        <a href="mailto:team@gitcoin.co"><img class="footer-socials" src="{% static "v2/images/emails/email.png" %}"></a>
+        <div><a href="mailto:team@gitcoin.co"><img class="footer-socials" src="{% static "v2/images/emails/email.png" %}"></a></div>
       {% endblock %}
     </div>
     <center style="margin-bottom: 80px;">
@@ -874,7 +889,7 @@
         <p>
           {% trans "Want to change how you receive these emails?" %}
           <br>
-          {% trans "You can update your " %} <a href="{% url "email_settings" subscriber.priv %}{% if email_type %}?type={{email_type}}{% endif %}">{% trans "preferences" %}</a> or <a href="{% url "email_settings" subscriber.priv %}{% if email_type %}?type={{email_type}}{% endif %}">{% trans "unsubscribe" %}</a> {% trans "from this list." %}
+          {% trans "You can update your " %} <a href="{% url 'email_settings' subscriber.priv %}{% if email_type %}?type={{email_type}}{% endif %}">{% trans "preferences" %}</a> or <a href="{% url 'email_settings' subscriber.priv %}{% if email_type %}?type={{email_type}}{% endif %}">{% trans "unsubscribe" %}</a> {% trans "from this list." %}
         </p>
     </center>
   </div>