Merge pull request #160 from maxceem/dev

fix: improved "Join Project" and "Decline" link styles in emails

Author: maxceem

emails/src/partials/project-team.html

@@ -104,35 +104,37 @@
     <td class="main-td">
         <table class="main-child">
         <tr>
-            <td class="empty-child-one"></td>
             {{#if notifications.[0].[connect.notification.project.member.invite.created]}}
+                <td class="empty-child-one for-two-buttons"></td>
                 {{#if notifications.[0].[isSSO]}}
-                    <td class="second-child project-team" align="center">
+                    <td class="second-child" align="center">
                         <a href="{{@root.accountsAppURL}}/sso-login/?app=connect&retUrl={{@root.connectURL}}/projects/{{notifications.[0].projectId}}%3Finvitation%3Daccept">
                             Join Project
                         </a>
                     </td>
-                    <td class="empty-child-10"></td>
-                    <td class="second-child project-team decline-sec" align="center">
-                        <a class="decline-btn" href="{{@root.accountsAppURL}}/sso-login/?app=connect&retUrl={{@root.connectURL}}/projects/{{notifications.[0].projectId}}%3Finvitation%3Ddecline">
+                    <td class="empty-width-10"></td>
+                    <td class="second-child" align="center">
+                        <a class="second-btn" href="{{@root.accountsAppURL}}/sso-login/?app=connect&retUrl={{@root.connectURL}}/projects/{{notifications.[0].projectId}}%3Finvitation%3Ddecline">
                             Decline
                         </a>
                     </td>
                 {{else}}
-                    <td class="second-child project-team" align="center">
+                    <td class="second-child" align="center">
                         <a href="{{@root.connectURL}}/projects/{{notifications.[0].projectId}}?invitation=accept">
                             Join Project
                         </a>
                     </td>
-                    <td class="empty-child-10"></td>
-                    <td class="second-child project-team decline-sec" align="center">
-                        <a class="decline-btn" href="{{@root.connectURL}}/projects/{{notifications.[0].projectId}}?invitation=decline">
+                    <td class="empty-width-10"></td>
+                    <td class="second-child" align="center">
+                        <a class="second-btn" href="{{@root.connectURL}}/projects/{{notifications.[0].projectId}}?invitation=decline">
                             Decline
                         </a>
                     </td>
                 {{/if}}
+                <td class="empty-child-one for-two-buttons"></td>
             {{else}}
-                <td class="second-child project-team" align="center">
+                <td class="empty-child-one"></td>
+                <td class="second-child" align="center">
                     {{#if notifications.[0].[connect.notification.project.member.invite.requested]}}
                         <a href="{{@root.connectURL}}/projects/{{notifications.[0].projectId}}#manageTopcoderTeam">
                             Manage project team
@@ -149,8 +151,8 @@
                         {{/if}}
                     {{/if}}
                 </td>
+                <td class="empty-child-one"></td>
             {{/if}}
-            <td class="empty-child-one"></td>
         </tr>
         </table>
     </td>

emails/src/styles/main.css

@@ -148,7 +148,7 @@ table.container, table.footer-container {
     height: 15px;
     background-color: #FFFFFF; }
 
-.empty-child-10 {
+.empty-width-10 {
   width: 10px; }
 
 .post-details .main-child {
@@ -210,28 +210,30 @@ table.container, table.footer-container {
     .button-row .main-child .second-child {
       border-radius: 4px;
       vertical-align: middle;
-      background-color: #0681FF;
       height: 30px; }
       .button-row .main-child .second-child a {
         border-radius: 4px;
         text-align: center;
         text-decoration: none;
         display: block;
         background-color: #0681FF;
-        padding-top: 6px;
-        padding-bottom: 5px;
+        padding-top: 8px;
+        padding-bottom: 7px;
         text-align: center;
         color: #FFFFFF;
         font-size: 13px; }
-      .button-row .main-child .second-child.project-team.decline-sec {
-        background-color: #FFFFFF; }
-      .button-row .main-child .second-child.project-team a.decline-btn {
+      .button-row .main-child .second-child a.second-btn {
         color: #555555;
         border: 1px solid #808080;
-        background-color: #FFFFFF; }
+        background-color: #FFFFFF;
+        padding-top: 7px;
+        padding-bottom: 6px;
+        width: 165px; }
 
 .button-one .main-child .empty-child-one, .button-three .main-child .empty-child-one {
   width: 216px; }
+  .button-one .main-child .empty-child-one.for-two-buttons, .button-three .main-child .empty-child-one.for-two-buttons {
+    width: 128px; }
 
 .button-one .main-child .second-child, .button-three .main-child .second-child {
   width: 167px; }

emails/src/styles/partials/_base.scss

@@ -206,7 +206,7 @@ table.container, table.footer-container {
   }
 }
 
-.empty-child-10 {
+.empty-width-10 {
   width: 10px;
 }
 
@@ -310,7 +310,6 @@ table.container, table.footer-container {
       // width: 167px;
       border-radius: 4px;
       vertical-align: middle;
-      background-color: $button-color;
       height: 30px;
       a {
         // width: 167px;
@@ -319,22 +318,20 @@ table.container, table.footer-container {
         text-decoration: none;
         display: block;
         background-color: $button-color;
-        padding-top: 6px;
-        padding-bottom: 5px;
+        padding-top: 8px;
+        padding-bottom: 7px;
         text-align: center;
         color: $white-background;
         font-size: 13px;
       }
-      &.project-team {
-        &.decline-sec {
+      a {
+        &.second-btn {
+          color: $tc-gray-70;
+          border: 1px solid $grey-hyperlink;
           background-color: $white-background;
-        }
-        a {
-          &.decline-btn {
-            color: $tc-gray-70;
-            border: 1px solid $grey-hyperlink;
-            background-color: $white-background;
-          }
+          padding-top: 7px; // minus 1px border-top
+          padding-bottom: 6px; // minus 1px border-bottom
+          width: 165px; // minus 2px borders
         }
       }
     }
@@ -348,6 +345,12 @@ table.container, table.footer-container {
   .main-child {
     .empty-child-one {
       width: 216px;
+
+      // if we have two buttons in one row with 10px spacing between:
+      // space=128px + button=167px + space=10px + button=167px + space=128px
+      &.for-two-buttons {
+        width: 128px;
+      }
     }
     .second-child {
       width: 167px;