Skip to content

Commit 466eb20

Browse files
jmgasperjmgasper
authored
Merge pull request #250 from topcoder-platform/issues-149
Issues-149: Social login changes
2 parents 2c494f7 + 948d2d2 commit 466eb20

File tree

4 files changed

+220
-39
lines changed

4 files changed

+220
-39
lines changed

‎web-assets/css/styles.css‎

Lines changed: 185 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -414,6 +414,151 @@ 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 .icon-arrow g{
493+
fill: #AAAAAA;
494+
opacity: 1;
495+
}
496+
.center-align-card.signup-card .page-content .input-field .icon-arrow {
497+
transform: rotate(90deg);
498+
}
499+
500+
.center-align-card.signup-card .page-content .input-field .icon-arrow {
501+
position: absolute;
502+
top: 18px;
503+
width: 12px;
504+
height: 14px;
505+
right: 14px;
506+
pointer-events: none;
507+
508+
}
509+
510+
.center-align-card.signup-card .page-content .input-field select:focus,
511+
.center-align-card.signup-card .page-content .input-field input:focus,
512+
.center-align-card.signup-card .page-content .input-field select:hover,
513+
.center-align-card.signup-card .page-content .input-field input:hover {
514+
box-shadow: none;
515+
}
516+
.center-align-card.signup-card .page-content .input-field label{
517+
color: #AAAAAA;
518+
font-family: Roboto;
519+
font-size: 14px;
520+
line-height: 22px;
521+
width: 146px;
522+
text-align: left;
523+
}
524+
525+
.center-align-card.signup-card .page-content button.continue-btn
526+
{
527+
background-color: #137D60;
528+
border-radius: 4px;
529+
width: 100%;
530+
max-width: 405px;
531+
height: 48px;
532+
color: #FFFFFF;
533+
font-family: Roboto;
534+
font-size: 17px;
535+
line-height: 20px;
536+
font-weight: normal;
537+
text-transform: capitalize;
538+
}
539+
.center-align-card.signup-card .page-content .terms {
540+
text-align: left;
541+
padding-bottom: 25px;
542+
}
543+
544+
.center-align-card.signup-card .page-content .terms,
545+
.center-align-card.signup-card .page-content .terms a{
546+
color: #37373C;
547+
font-family: Roboto;
548+
font-size: 13px;
549+
line-height: 20px;
550+
}
551+
.center-align-card.signup-card .page-content .terms a,
552+
.center-align-card.signup-card .page-content .terms a:visited,
553+
.center-align-card.signup-card .page-content .terms a :active,
554+
.center-align-card.signup-card .page-content .terms a:focus {
555+
text-decoration: underline;
556+
font-size: 13px;
557+
line-height: 20px;
558+
color: #0D61BF;
559+
}
560+
/** End: Sign Up Card **/
561+
417562
/** Start : Input/select box - field area style **/
418563
.input-field {
419564
position: relative;
@@ -521,17 +666,6 @@ select::-ms-expand {
521666
width: 20px;
522667
}
523668

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-
535669
/** Desktop + tab - specific CSS **/
536670
@media (min-width: 768px) {
537671
.center-align-card .page-content {
@@ -543,4 +677,44 @@ select::-ms-expand {
543677
.confirmation-card.center-align-card .page-wrapper {
544678
max-width: 511px;
545679
}
680+
681+
.center-align-card.signup-card .page-content {
682+
width: 1139px;
683+
min-height: 820px;
684+
height: 820px;
685+
}
546686
}
687+
688+
@media (max-width: 1156px) {
689+
.center-align-card.signup-card .page-content {
690+
background-image: none;
691+
width: 90%;
692+
max-width: 495px;
693+
min-height: auto;
694+
height: auto;
695+
}
696+
.center-align-card.signup-card .page-content #signup-container {
697+
display: none;
698+
}
699+
}
700+
701+
/** Mobile - specific CSS **/
702+
@media (max-width: 767px) {
703+
.center-align-card.signup-card .page-wrapper {
704+
background-image: none;
705+
width: 90%;
706+
min-height: auto;
707+
height: auto;
708+
}
709+
.center-align-card.signup-card .page-content #signup-container {
710+
display: none;
711+
}
712+
713+
.footer {
714+
padding-bottom: 10px;
715+
}
716+
.footer .copyright-text,
717+
.footer .privacy-policy {
718+
margin-bottom: 10px;
719+
}
720+
}

‎web-assets/images/logo_dark_small.png‎

4.36 KB
Loading

‎web-assets/images/signup_bg.png‎

613 KB
Loading

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

Lines changed: 35 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap"
1111
rel="stylesheet"
1212
/>
13+
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500&display=swap" rel="stylesheet">
1314
<link rel="stylesheet" href="./styles.css" />
1415

1516
<script
@@ -20,27 +21,31 @@
2021
<script src="https://tc-public-static-files.topcoder.com/topcoder-auth/js/country.js"></script>
2122
<script type="text/javascript" src="signup.js"></script>
2223
</head>
23-
<body class="center-align-card">
24+
<body class="center-align-card signup-card">
2425
<!-- Page Wrapper -->
2526
<div class="page-wrapper">
2627
<!-- For ADA - Skip to Content Area -->
2728
<a class="action skip" href="#contentarea">Skip to Content</a>
2829
<!-- Page Content Area - Header + Main content -->
2930
<div class="page-content">
30-
<header class="header">
31-
<a href="/" class="logo-link">
32-
<img
33-
src="./images/logo.png"
34-
alt="Topcoder Logo"
35-
width="94"
36-
height="30"
37-
/>
38-
</a>
39-
</header>
31+
<div id="signup-container" name="signup-container">
32+
<div class="title">ONE MORE STEP</div>
33+
<div class="body">Create your username - it's how you will be known in the community by members and customers.</div>
34+
</div>
4035
<main id="main" class="page-main">
36+
<header class="header">
37+
<a href="/" class="logo-link">
38+
<img
39+
src="./images/logo_dark_small.png"
40+
alt="Topcoder Logo"
41+
width="85"
42+
height="30"
43+
/>
44+
</a>
45+
</header>
4146
<a id="contentarea" tabindex="-1"></a>
4247
<h1 id="page-title-heading" class="page-title-heading">
43-
JOIN TOPCODER
48+
Join Topcoder
4449
</h1>
4550
<div class="messages">
4651
<div role="alert" class="message error">
@@ -58,7 +63,7 @@ <h1 id="page-title-heading" class="page-title-heading">
5863
<input id="utmMedium" name="utmMedium" value="" type="hidden" />
5964
<input id="returnUrl" name="returnUrl" value="" type="hidden" />
6065
<div id="hd" class="input-field active">
61-
<label for="handle">Enter Username</label>
66+
<label for="handle">Username / Handle</label>
6267
<input
6368
id="handle"
6469
name="handle"
@@ -68,7 +73,7 @@ <h1 id="page-title-heading" class="page-title-heading">
6873
/>
6974
</div>
7075
<div id="fn" class="input-field active">
71-
<label for="firstName">Enter your First Name</label>
76+
<label for="firstName">First Name</label>
7277
<input
7378
id="firstName"
7479
name="firstName"
@@ -78,7 +83,7 @@ <h1 id="page-title-heading" class="page-title-heading">
7883
/>
7984
</div>
8085
<div id="ln" class="input-field active">
81-
<label for="lastName">Enter your Last Name</label>
86+
<label for="lastName">Last Name</label>
8287
<input
8388
id="lastName"
8489
name="lastName"
@@ -87,32 +92,34 @@ <h1 id="page-title-heading" class="page-title-heading">
8792
autocomplete="off"
8893
/>
8994
</div>
90-
<div id="cc" class="input-field active custom-dropdowm-arrow">
91-
<label for="country">Select your country </label>
95+
<div id="cc" class="input-field active">
96+
<label for="country">Choose your country</label>
9297
<select id="country" name="country" class="input-text"></select>
98+
<span><svg aria-hidden="true" focusable="false" width="5px" height="10px" viewBox="0 0 5 10" version="1.1"
99+
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-arrow">
100+
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Lock" transform="translate(-396.000000, -3521.000000)"
101+
fill="#000000" opacity="0.539999962">
102+
<g id="SMS" transform="translate(153.000000, 3207.000000)"><g transform="translate(35.000000, 299.000000)">
103+
<g transform="translate(210.000000, 20.000000) rotate(-90.000000) translate(-210.000000, -20.000000) translate(198.000000, 8.000000)">
104+
<path id="Shape" d="M7,10 L12,15 L17,10 L7,10 Z"></path></g></g></g></g></g></svg></span>
105+
</div>
106+
<div class="terms">
107+
<span>By clicking "Sign up", you agree to the <a href="https://www.topcoder.com/policy/terms-and-conditions" target="_blank" rel="noopener noreferrer">Terms</a> and <a href="https://www.topcoder.com/policy/privacy-policy" target="_blank" rel="noopener noreferrer">Privacy Policy</a> of Topcoder.</span>
93108
</div>
94109
<div id="sb" class="action-wrapper">
95110
<button
96111
type="submit"
97112
id="continueBtn"
98113
class="continue-btn"
99-
disabled="disabled"
100-
>
101-
Continue
114+
disabled="disabled">
115+
Sign Up
102116
</button>
103117
</div>
104118
</form>
105119
</main>
106120
</div>
107121
<footer class="footer">
108-
<div class="copyright-text">
109-
<strong>&copy;</strong> 2021 Topcoder. All Rights Reserved
110-
</div>
111-
<a
112-
class="privacy-policy"
113-
href="https://www.topcoder.com/privacy-policy/"
114-
>Privacy Policy</a
115-
>
122+
116123
</footer>
117124
</div>
118125

0 commit comments

Comments
 (0)