Skip to content

Commit 117712b

Browse files
author
sachin-maheshwari
authored
Merge pull request #254 from topcoder-platform/dev
Intermediate signup page (UI changes)
2 parents eec5dd6 + 80d873c commit 117712b

File tree

8 files changed

+243
-44
lines changed

8 files changed

+243
-44
lines changed

‎build.sh‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ SIGNUPFILENAME="./web-assets/js/signup.js"
1111
perl -pi -e "s/\{\{DOMAIN\}\}/$DOMAIN/g" $SIGNUPFILENAME
1212
perl -pi -e "s/\{\{AUTH0DOMAIN\}\}/$AUTH0DOMAIN/g" $SIGNUPFILENAME
1313

14+
CHECKEMAIL="./web-assets/static-pages/check_email.html"
15+
perl -pi -e "s/\{\{DOMAIN\}\}/$DOMAIN/g" $CHECKEMAIL
1416

1517
mkdir dist
1618
cp -rv ./web-assets/css/* ./dist/

‎web-assets/auth0/css/custom.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -461,6 +461,12 @@ div.auth0-lock-error::before{
461461
width: auto;
462462
margin: 0px 20px 10px 20px;
463463
}
464+
div.auth0-lock-error-msg {
465+
white-space:normal;
466+
}
467+
div.auth0-lock-error::before {
468+
left: calc(100% + 5px)
469+
}
464470
/* end: form */
465471

466472
/* terms */

‎web-assets/css/styles.css‎

Lines changed: 194 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -414,6 +414,160 @@ select::-ms-expand {
414414
}
415415
/** End: Confirmation Card **/
416416

417+
/** Start: Sign Up Card **/
418+
.center-align-card.signup-card .page-wrapper {
419+
margin-left: auto;
420+
margin-right: auto;
421+
padding: 0px;
422+
text-align: center;
423+
max-width: 1139px;
424+
}
425+
426+
.center-align-card.signup-card .page-content {
427+
margin-top: 60px;
428+
min-height: 820px;
429+
height: clamp(820px, 100%, 820px);
430+
border-radius: 10px 10px;
431+
width: 1139px;
432+
background-repeat: no-repeat;
433+
background-position: top right;
434+
background-image: url(./images/signup_bg.png);
435+
}
436+
437+
.center-align-card.signup-card .page-main {
438+
padding: 0px 50px 40px 40px;
439+
width: 100%;
440+
max-width:495px;
441+
}
442+
443+
.center-align-card.signup-card .page-main header{
444+
background: transparent;
445+
border-radius: 0px;
446+
padding: 28px 0px 17px 0px;
447+
}
448+
.center-align-card.signup-card .page-main .page-title-heading{
449+
color: #2A2A2A;
450+
font-family: Roboto, sans-serif;
451+
font-weight: 500 ;
452+
font-size: 28px;
453+
line-height: 38px;
454+
text-transform: capitalize;
455+
padding-bottom: 46px;
456+
}
457+
458+
459+
.center-align-card.signup-card .page-content #signup-container {
460+
color: white;
461+
text-align: left;
462+
position: absolute;
463+
margin-left:495px;
464+
465+
}
466+
467+
.center-align-card.signup-card .page-content #signup-container .title{
468+
font-weight: 500;
469+
font-family: 'Barlow Condensed', sans-serif;
470+
font-size: 34px;
471+
line-height: 38px;
472+
padding: 81px 0px 20px 143px;
473+
}
474+
475+
.center-align-card.signup-card .page-content #signup-container .body{
476+
font-weight: normal;
477+
font-family: 'Roboto';
478+
font-size: 18px;
479+
line-height: 27px;
480+
padding: 0px 88px 0px 143px;
481+
}
482+
.center-align-card.signup-card .page-content .input-field {
483+
margin-bottom: 10px;
484+
}
485+
.center-align-card.signup-card .page-content .input-field select, .center-align-card.signup-card .page-content .input-field input{
486+
border: 1px solid #D4D4D4;
487+
border-radius: 4px;
488+
color: #2A2A2A;
489+
font-family: Roboto;
490+
font-size: 14px;
491+
}
492+
.center-align-card.signup-card .page-content .input-field select{
493+
background: none;
494+
}
495+
496+
.center-align-card.signup-card .page-content .input-field .icon-arrow g{
497+
fill: #AAAAAA;
498+
opacity: 1;
499+
}
500+
.center-align-card.signup-card .page-content .input-field .icon-arrow {
501+
transform: rotate(90deg);
502+
}
503+
504+
.center-align-card.signup-card .page-content .input-field .icon-arrow {
505+
position: absolute;
506+
top: 18px;
507+
width: 12px;
508+
height: 14px;
509+
right: 14px;
510+
pointer-events: none;
511+
}
512+
513+
.center-align-card.signup-card .page-content .input-field select:focus,
514+
.center-align-card.signup-card .page-content .input-field input:focus,
515+
.center-align-card.signup-card .page-content .input-field select:hover,
516+
.center-align-card.signup-card .page-content .input-field input:hover {
517+
box-shadow: none;
518+
}
519+
.center-align-card.signup-card .page-content .input-field label {
520+
color: #AAAAAA;
521+
font-family: Roboto;
522+
font-size: 14px;
523+
line-height: 22px;
524+
width: 146px;
525+
text-align: left;
526+
}
527+
528+
.center-align-card.signup-card .page-content button.continue-btn:not(:disabled):hover {
529+
background-image: none;
530+
}
531+
.center-align-card.signup-card .page-content button.continue-btn:focus{
532+
outline: 0px;
533+
}
534+
535+
.center-align-card.signup-card .page-content button.continue-btn {
536+
background-color: #137D60;
537+
border-radius: 4px;
538+
width: 100%;
539+
max-width: 405px;
540+
height: 48px;
541+
color: #FFFFFF;
542+
font-family: Roboto;
543+
font-size: 17px;
544+
line-height: 20px;
545+
font-weight: normal;
546+
text-transform: capitalize;
547+
}
548+
.center-align-card.signup-card .page-content .terms {
549+
text-align: left;
550+
padding-bottom: 25px;
551+
}
552+
553+
.center-align-card.signup-card .page-content .terms,
554+
.center-align-card.signup-card .page-content .terms a{
555+
color: #37373C;
556+
font-family: Roboto;
557+
font-size: 13px;
558+
line-height: 20px;
559+
}
560+
.center-align-card.signup-card .page-content .terms a,
561+
.center-align-card.signup-card .page-content .terms a:visited,
562+
.center-align-card.signup-card .page-content .terms a :active,
563+
.center-align-card.signup-card .page-content .terms a:focus {
564+
text-decoration: underline;
565+
font-size: 13px;
566+
line-height: 20px;
567+
color: #0D61BF;
568+
}
569+
/** End: Sign Up Card **/
570+
417571
/** Start : Input/select box - field area style **/
418572
.input-field {
419573
position: relative;
@@ -521,17 +675,6 @@ select::-ms-expand {
521675
width: 20px;
522676
}
523677

524-
/** Mobile - specific CSS **/
525-
@media (max-width: 767px) {
526-
.footer {
527-
padding-bottom: 10px;
528-
}
529-
.footer .copyright-text,
530-
.footer .privacy-policy {
531-
margin-bottom: 10px;
532-
}
533-
}
534-
535678
/** Desktop + tab - specific CSS **/
536679
@media (min-width: 768px) {
537680
.center-align-card .page-content {
@@ -543,4 +686,44 @@ select::-ms-expand {
543686
.confirmation-card.center-align-card .page-wrapper {
544687
max-width: 511px;
545688
}
689+
690+
.center-align-card.signup-card .page-content {
691+
width: 1139px;
692+
min-height: 820px;
693+
height: 820px;
694+
}
546695
}
696+
697+
@media (max-width: 1156px) {
698+
.center-align-card.signup-card .page-content {
699+
background-image: none;
700+
width: 90%;
701+
max-width: 495px;
702+
min-height: auto;
703+
height: auto;
704+
}
705+
.center-align-card.signup-card .page-content #signup-container {
706+
display: none;
707+
}
708+
}
709+
710+
/** Mobile - specific CSS **/
711+
@media (max-width: 767px) {
712+
.center-align-card.signup-card .page-wrapper {
713+
background-image: none;
714+
width: 90%;
715+
min-height: auto;
716+
height: auto;
717+
}
718+
.center-align-card.signup-card .page-content #signup-container {
719+
display: none;
720+
}
721+
722+
.footer {
723+
padding-bottom: 10px;
724+
}
725+
.footer .copyright-text,
726+
.footer .privacy-policy {
727+
margin-bottom: 10px;
728+
}
729+
}

‎web-assets/images/logo_dark_small.png‎

4.36 KB
Loading

‎web-assets/images/signup_bg.png‎

613 KB
Loading

‎web-assets/js/signup.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ var qs = (function (a) {
1212
return b;
1313
})(window.location.search.substr(1).split("&"));
1414
$(document).ready(function () {
15+
window.history.forward();
1516
$.each(countryObjs, function () {
1617
$("#country").append(
1718
$("<option></option>").text(this.name).val(JSON.stringify(this))
@@ -20,14 +21,14 @@ $(document).ready(function () {
2021
//first name & last name div
2122
var firstname = qs['firstName'];
2223
if (firstname !== 'undefined') {
23-
$("#firstName").val(firstname);
24+
$("#firstName").val(firstname);
2425
$("#fn").hide();
25-
}
26+
}
2627
var lastname = qs['lastName'];
2728
if (lastname !== 'undefined') {
28-
$("#lastName").val(lastname);
29+
$("#lastName").val(lastname);
2930
$("#ln").hide();
30-
}
31+
}
3132
$("#continueBtn").click(function () {
3233
var handle = $("#handle").val();
3334
var country = $("#country").val();

‎web-assets/static-pages/check_email.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
if (state) {
2828
document.querySelector("#resend").addEventListener("click", e => {
2929
e.preventDefault();
30-
window.location = 'https://auth.topcoder.com/continue?state=' + state + '&resend=1';
30+
window.location = 'https://auth.{{DOMAIN}}/continue?state=' + state + '&resend=1';
3131
});
3232
} else {
3333
document.querySelector("#resend-text").style.display = "none";

0 commit comments

Comments
 (0)