Skip to content

Commit 94f84ca

Browse files
maxceemmaxceem
authored
Merge pull request #160 from maxceem/dev
fix: improved "Join Project" and "Decline" link styles in emails
2 parents 7e7397f + 605500a commit 94f84ca

File tree

3 files changed

+39
-32
lines changed

3 files changed

+39
-32
lines changed

‎emails/src/partials/project-team.html‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -104,35 +104,37 @@
104104
<td class="main-td">
105105
<table class="main-child">
106106
<tr>
107-
<td class="empty-child-one"></td>
108107
{{#if notifications.[0].[connect.notification.project.member.invite.created]}}
108+
<td class="empty-child-one for-two-buttons"></td>
109109
{{#if notifications.[0].[isSSO]}}
110-
<td class="second-child project-team" align="center">
110+
<td class="second-child" align="center">
111111
<a href="{{@root.accountsAppURL}}/sso-login/?app=connect&retUrl={{@root.connectURL}}/projects/{{notifications.[0].projectId}}%3Finvitation%3Daccept">
112112
Join Project
113113
</a>
114114
</td>
115-
<td class="empty-child-10"></td>
116-
<td class="second-child project-team decline-sec" align="center">
117-
<a class="decline-btn" href="{{@root.accountsAppURL}}/sso-login/?app=connect&retUrl={{@root.connectURL}}/projects/{{notifications.[0].projectId}}%3Finvitation%3Ddecline">
115+
<td class="empty-width-10"></td>
116+
<td class="second-child" align="center">
117+
<a class="second-btn" href="{{@root.accountsAppURL}}/sso-login/?app=connect&retUrl={{@root.connectURL}}/projects/{{notifications.[0].projectId}}%3Finvitation%3Ddecline">
118118
Decline
119119
</a>
120120
</td>
121121
{{else}}
122-
<td class="second-child project-team" align="center">
122+
<td class="second-child" align="center">
123123
<a href="{{@root.connectURL}}/projects/{{notifications.[0].projectId}}?invitation=accept">
124124
Join Project
125125
</a>
126126
</td>
127-
<td class="empty-child-10"></td>
128-
<td class="second-child project-team decline-sec" align="center">
129-
<a class="decline-btn" href="{{@root.connectURL}}/projects/{{notifications.[0].projectId}}?invitation=decline">
127+
<td class="empty-width-10"></td>
128+
<td class="second-child" align="center">
129+
<a class="second-btn" href="{{@root.connectURL}}/projects/{{notifications.[0].projectId}}?invitation=decline">
130130
Decline
131131
</a>
132132
</td>
133133
{{/if}}
134+
<td class="empty-child-one for-two-buttons"></td>
134135
{{else}}
135-
<td class="second-child project-team" align="center">
136+
<td class="empty-child-one"></td>
137+
<td class="second-child" align="center">
136138
{{#if notifications.[0].[connect.notification.project.member.invite.requested]}}
137139
<a href="{{@root.connectURL}}/projects/{{notifications.[0].projectId}}#manageTopcoderTeam">
138140
Manage project team
@@ -149,8 +151,8 @@
149151
{{/if}}
150152
{{/if}}
151153
</td>
154+
<td class="empty-child-one"></td>
152155
{{/if}}
153-
<td class="empty-child-one"></td>
154156
</tr>
155157
</table>
156158
</td>

‎emails/src/styles/main.css‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -148,7 +148,7 @@ table.container, table.footer-container {
148148
height: 15px;
149149
background-color: #FFFFFF; }
150150

151-
.empty-child-10 {
151+
.empty-width-10 {
152152
width: 10px; }
153153

154154
.post-details .main-child {
@@ -210,28 +210,30 @@ table.container, table.footer-container {
210210
.button-row .main-child .second-child {
211211
border-radius: 4px;
212212
vertical-align: middle;
213-
background-color: #0681FF;
214213
height: 30px; }
215214
.button-row .main-child .second-child a {
216215
border-radius: 4px;
217216
text-align: center;
218217
text-decoration: none;
219218
display: block;
220219
background-color: #0681FF;
221-
padding-top: 6px;
222-
padding-bottom: 5px;
220+
padding-top: 8px;
221+
padding-bottom: 7px;
223222
text-align: center;
224223
color: #FFFFFF;
225224
font-size: 13px; }
226-
.button-row .main-child .second-child.project-team.decline-sec {
227-
background-color: #FFFFFF; }
228-
.button-row .main-child .second-child.project-team a.decline-btn {
225+
.button-row .main-child .second-child a.second-btn {
229226
color: #555555;
230227
border: 1px solid #808080;
231-
background-color: #FFFFFF; }
228+
background-color: #FFFFFF;
229+
padding-top: 7px;
230+
padding-bottom: 6px;
231+
width: 165px; }
232232

233233
.button-one .main-child .empty-child-one, .button-three .main-child .empty-child-one {
234234
width: 216px; }
235+
.button-one .main-child .empty-child-one.for-two-buttons, .button-three .main-child .empty-child-one.for-two-buttons {
236+
width: 128px; }
235237

236238
.button-one .main-child .second-child, .button-three .main-child .second-child {
237239
width: 167px; }

‎emails/src/styles/partials/_base.scss‎

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -206,7 +206,7 @@ table.container, table.footer-container {
206206
}
207207
}
208208

209-
.empty-child-10 {
209+
.empty-width-10 {
210210
width: 10px;
211211
}
212212

@@ -310,7 +310,6 @@ table.container, table.footer-container {
310310
// width: 167px;
311311
border-radius: 4px;
312312
vertical-align: middle;
313-
background-color: $button-color;
314313
height: 30px;
315314
a {
316315
// width: 167px;
@@ -319,22 +318,20 @@ table.container, table.footer-container {
319318
text-decoration: none;
320319
display: block;
321320
background-color: $button-color;
322-
padding-top: 6px;
323-
padding-bottom: 5px;
321+
padding-top: 8px;
322+
padding-bottom: 7px;
324323
text-align: center;
325324
color: $white-background;
326325
font-size: 13px;
327326
}
328-
&.project-team {
329-
&.decline-sec {
327+
a {
328+
&.second-btn {
329+
color: $tc-gray-70;
330+
border: 1px solid $grey-hyperlink;
330331
background-color: $white-background;
331-
}
332-
a {
333-
&.decline-btn {
334-
color: $tc-gray-70;
335-
border: 1px solid $grey-hyperlink;
336-
background-color: $white-background;
337-
}
332+
padding-top: 7px; // minus 1px border-top
333+
padding-bottom: 6px; // minus 1px border-bottom
334+
width: 165px; // minus 2px borders
338335
}
339336
}
340337
}
@@ -348,6 +345,12 @@ table.container, table.footer-container {
348345
.main-child {
349346
.empty-child-one {
350347
width: 216px;
348+
349+
// if we have two buttons in one row with 10px spacing between:
350+
// space=128px + button=167px + space=10px + button=167px + space=128px
351+
&.for-two-buttons {
352+
width: 128px;
353+
}
351354
}
352355
.second-child {
353356
width: 167px;

0 commit comments

Comments
 (0)