Merge pull request #164 from topcoder-platform/dev

Supporting Release for Connect 2.4.16

Author: vikasrohit

emails/src/partials/project-team.html

@@ -104,25 +104,55 @@
     <td class="main-td">
         <table class="main-child">
         <tr>
-            <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
-                    </a>
+            {{#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" 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-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}}
-                  {{#if notifications.[0].[isSSO]}}
-                    <a href="{{@root.accountsAppURL}}/sso-login/?app=connect&retUrl={{@root.connectURL}}/projects/{{notifications.[0].projectId}}">
-                        SSO Login
-                    </a>
-                  {{else}}
-                    <a href="{{@root.connectURL}}/projects/{{notifications.[0].projectId}}">
-                        View project on Connect
-                    </a>
-                  {{/if}}
+                    <td class="second-child" align="center">
+                        <a href="{{@root.connectURL}}/projects/{{notifications.[0].projectId}}?invitation=accept">
+                            Join Project
+                        </a>
+                    </td>
+                    <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>
-            <td class="empty-child-one"></td>
+                <td class="empty-child-one for-two-buttons"></td>
+            {{else}}
+                <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
+                        </a>
+                    {{else}}
+                        {{#if notifications.[0].[isSSO]}}
+                            <a href="{{@root.accountsAppURL}}/sso-login/?app=connect&retUrl={{@root.connectURL}}/projects/{{notifications.[0].projectId}}">
+                                SSO Login
+                            </a>
+                        {{else}}
+                            <a href="{{@root.connectURL}}/projects/{{notifications.[0].projectId}}">
+                                View project on Connect
+                            </a>
+                        {{/if}}
+                    {{/if}}
+                </td>
+                <td class="empty-child-one"></td>
+            {{/if}}
         </tr>
         </table>
     </td>

emails/src/styles/main.css

@@ -148,6 +148,9 @@ table.container, table.footer-container {
     height: 15px;
     background-color: #FFFFFF; }
 
+.empty-width-10 {
+  width: 10px; }
+
 .post-details .main-child {
   background-color: #FFFFFF; }
   .post-details .main-child .empty-child-one {
@@ -207,22 +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 a.second-btn {
+        color: #555555;
+        border: 1px solid #808080;
+        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/modules/_color.scss

@@ -8,3 +8,4 @@ $grey-color: #888894;
 $blue-color: #006DEA;
 $grey-hyperlink: #808080;
 $button-color: #0681FF;
+$tc-gray-70: #555555;

emails/src/styles/partials/_base.scss

@@ -206,6 +206,10 @@ table.container, table.footer-container {
   }
 }
 
+.empty-width-10 {
+  width: 10px;
+}
+
 // emptys end
 
 // post details
@@ -306,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;
@@ -315,12 +318,22 @@ 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;
       }
+      a {
+        &.second-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
+        }
+      }
     }
   }
 }
@@ -332,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;