Skip to content

Commit 2707cf2

Browse files
birdofpreyrubirdofpreyru
committed
FIX: Style of buttons on submission page (especially for TopGear community)
1 parent 47dc11c commit 2707cf2

File tree

11 files changed

+194
-57
lines changed

11 files changed

+194
-57
lines changed

‎__tests__/shared/components/tc-communities/communities/wipro/__snapshots__/Learn.jsx.snap

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,9 @@ exports[`Snapshot match 1`] = `
5050
</strong>
5151
” to access the platform.
5252
</p>
53-
<p>
53+
<p
54+
className="src-shared-components-tc-communities-communities-wipro-Learn-___style__button-container___10Uat"
55+
>
5456
<ThemedGenericButton
5557
composeAdhocTheme="deeply"
5658
composeContextTheme="softly"
@@ -61,11 +63,6 @@ exports[`Snapshot match 1`] = `
6163
openNewTab={true}
6264
replace={false}
6365
size={null}
64-
theme={
65-
Object {
66-
"button": "src-shared-components-tc-communities-communities-wipro-Learn-___style__continueButton___2UpkU",
67-
}
68-
}
6966
themePriority="adhoc-context-default"
7067
to="https://topgear-app.wipro.com"
7168
>
@@ -89,6 +86,7 @@ exports[`Snapshot match 1`] = `
8986
<li>
9087
Send an email to
9188
<a
89+
className="src-shared-components-tc-communities-communities-wipro-Learn-___style__link___2Nxko"
9290
href="mailto:[email protected]?subject=Internet%20TopGear%20portal%20access"
9391
>
9492
[email protected]
@@ -111,6 +109,7 @@ exports[`Snapshot match 1`] = `
111109
<li>
112110
Using Virtual Desktop you can access
113111
<a
112+
className="src-shared-components-tc-communities-communities-wipro-Learn-___style__link___2Nxko"
114113
href="https://topgear-app.wipro.com/"
115114
>
116115
https://topgear-app.wipro.com

‎src/shared/components/SubmissionPage/Uploading/index.jsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,11 +43,14 @@ const Uploading = ({
4343
}
4444
{
4545
isSubmitting &&
46-
<h3>{'"'}{challengeName }{'"'}</h3>
46+
<h3>&ldquo;{challengeName }&rdquo;</h3>
4747
}
4848
{
4949
(submitDone || error) &&
50-
<Link to={`${challengesUrl}/${challengeId}`}>{challengeName }</Link>
50+
<Link
51+
styleName="link"
52+
to={`${challengesUrl}/${challengeId}`}
53+
>{challengeName}</Link>
5154
}
5255
{
5356
(isSubmitting || submitDone) &&

‎src/shared/components/SubmissionPage/Uploading/styles.scss

Lines changed: 7 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,13 @@
1414
justify-content: center;
1515
}
1616

17+
.link,
18+
.link:visited {
19+
font-size: 20px;
20+
line-height: 30px;
21+
color: #1a85ff;
22+
}
23+
1724
.uploading {
1825
display: flex;
1926
flex-direction: column;
@@ -53,12 +60,6 @@
5360
color: #3d3d3d;
5461
}
5562

56-
a {
57-
font-size: 20px;
58-
line-height: 30px;
59-
color: #1a85ff;
60-
}
61-
6263
svg {
6364
margin-top: 50px;
6465
}
@@ -84,17 +85,5 @@
8485
flex-wrap: wrap;
8586
display: flex;
8687
justify-content: center;
87-
88-
a {
89-
font-size: 15px;
90-
}
91-
92-
a:last-child {
93-
color: white;
94-
}
95-
96-
a:first-child {
97-
color: #37373c;
98-
}
9988
}
10089
}

‎src/shared/components/buttons/outline/round/akkurat/_mixin.scss

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
/**
2+
* Template mixin for all buttons of similar style (outlined, round-shaped
3+
* with Open Sans font.
4+
*/
5+
6+
@mixin button($color, $shade-1, $shade-2, $shade-3) {
7+
.button {
8+
align-items: center;
9+
background: white;
10+
border: 1px solid $color;
11+
border-radius: 20px;
12+
color: $color;
13+
display: inline-flex;
14+
font: 16px 'Akkurat regular';
15+
justify-content: center;
16+
line-height: 16px;
17+
min-height: 40px;
18+
margin: 5px;
19+
padding: 5px 23px 3px;
20+
vertical-align: middle;
21+
}
22+
23+
/* Additional styling for a disabled button. */
24+
.disabled {
25+
cursor: not-allowed;
26+
opacity: 0.3;
27+
}
28+
29+
/* To prevent different styling of the button-like link once it has been
30+
* visited. */
31+
.link:visited {
32+
color: $color;
33+
}
34+
35+
/* .link and .regular classes are applied only to active button-like links,
36+
* and real buttons (rendered as <button> elements). */
37+
.link,
38+
.regular {
39+
&:focus {
40+
box-shadow: 0 0 2px 2px $shade-2;
41+
outline: none;
42+
}
43+
44+
&:hover {
45+
background-image: linear-gradient(to top, $shade-3, white 49%, white);
46+
border-color: $shade-1;
47+
color: $shade-1;
48+
}
49+
50+
&:active {
51+
background-color: $shade-3;
52+
background-image: linear-gradient(to bottom, $shade-3, white 49%, white);
53+
box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.2);
54+
}
55+
}
56+
57+
/* And a few extra classes to support XS, SM and LG sizes. */
58+
59+
.xs {
60+
border-radius: 20px;
61+
font-size: 12px;
62+
line-height: 12px;
63+
min-height: 20px;
64+
padding: 2px 13px 0;
65+
}
66+
67+
.sm {
68+
border-radius: 30px;
69+
font-size: 14px;
70+
line-height: 14px;
71+
min-height: 30px;
72+
padding: 2px 18px;
73+
}
74+
75+
.lg {
76+
border-radius: 50px;
77+
font-size: 20px;
78+
line-height: 20px;
79+
min-height: 50px;
80+
padding: 7px 28px 5px;
81+
}
82+
}

‎src/shared/components/buttons/outline/round/akkurat/danger.scss

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/**
2+
* Theme for a gray outline button with Open Sans label font.
3+
*/
4+
5+
@import "_mixin";
6+
7+
$color: #ff5b52;
8+
9+
@include button(
10+
$color,
11+
red,
12+
lighten($color, 30%),
13+
lighten($color, 32%));

‎src/shared/components/buttons/outline/round/akkurat/default.scss

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/**
2+
* Theme for a gray outline button with Open Sans label font.
3+
*/
4+
5+
@import "_mixin";
6+
7+
$color: gray;
8+
9+
@include button(
10+
$color,
11+
lighten($color, 10%),
12+
lighten($color, 40%),
13+
lighten($color, 47%));

‎src/shared/components/buttons/outline/round/akkurat/primary.scss

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/**
2+
* Theme for a gray outline button with Open Sans label font.
3+
*/
4+
5+
@import "_mixin";
6+
7+
$color: #00a2e0;
8+
9+
@include button(
10+
$color,
11+
lighten($color, 10%),
12+
lighten($color, 44%),
13+
lighten($color, 53%));

‎src/shared/components/examples/Buttons/index.jsx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,13 @@ import {
88
SecondaryButton,
99
} from 'components/buttons';
1010

11+
import outlineRoundAkkuratDanger from
12+
'components/buttons/outline/round/akkurat/danger.scss';
13+
import outlineRoundAkkuratDefault from
14+
'components/buttons/outline/round/akkurat/default.scss';
15+
import outlineRoundAkkuratPrimary from
16+
'components/buttons/outline/round/akkurat/primary.scss';
17+
1118
import outlineRoundOpenSansDefault from
1219
'components/buttons/outline/round/open-sans/default.scss';
1320
import outlineRoundOpenSansBlueUppercase from
@@ -49,6 +56,22 @@ export default function Buttons() {
4956
elsewhere.
5057
</p>
5158

59+
<Sample
60+
Button={GenericButton}
61+
theme={outlineRoundAkkuratDefault}
62+
title="outline/round/akkurat/default"
63+
/>
64+
<Sample
65+
Button={GenericButton}
66+
theme={outlineRoundAkkuratDanger}
67+
title="outline/round/akkurat/danger"
68+
/>
69+
<Sample
70+
Button={GenericButton}
71+
theme={outlineRoundAkkuratPrimary}
72+
title="outline/round/akkurat/primary"
73+
/>
74+
5275
<Sample
5376
Button={GenericButton}
5477
theme={outlineRoundOpenSansDefault}

‎src/shared/components/tc-communities/communities/wipro/Learn/index.jsx

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import LinksCard from 'components/tc-communities/LinksCard';
2121
import Text from 'components/tc-communities/Text';
2222
*/
2323

24-
import { Button } from 'components/buttons';
24+
import { PrimaryButton } from 'components/buttons';
2525

2626
import style from './style.scss';
2727

@@ -41,23 +41,22 @@ export default function Learn() {
4141
<Section>
4242
<div styleName="message">
4343
<p>If you are accessing TopGear <span styleName="highlighted">Learning</span> Platform from <strong>Wipro backbone network</strong>, click on &ldquo;<strong>CONTINUE</strong>&rdquo; to access the platform.</p>
44-
<p>
45-
<Button
44+
<p styleName="button-container">
45+
<PrimaryButton
4646
openNewTab
47-
theme={{ button: style.continueButton }}
4847
to="https://topgear-app.wipro.com"
49-
>Continue</Button>
48+
>Continue</PrimaryButton>
5049
</p>
5150
<p>To access TopGear <span styleName="highlighted">Learning</span> Platform <strong>outside of Wipro network</strong>, please follow the below instructions:</p>
5251
<ol>
5352
<li>
54-
Send an email to <a href="mailto:[email protected]?subject=Internet%20TopGear%20portal%20access">[email protected]</a> with subject line <em>Internet TopGear portal access</em>.
53+
Send an email to <a href="mailto:[email protected]?subject=Internet%20TopGear%20portal%20access" styleName="link">[email protected]</a> with subject line <em>Internet TopGear portal access</em>.
5554
</li>
5655
<li>
5756
You will receive an email <span styleName="ddashUnderline">within 24 hours</span> with details for accessing TopGear portal through Virtual Desktop.
5857
</li>
5958
<li>
60-
Using Virtual Desktop you can access <a href="https://topgear-app.wipro.com/">https://topgear-app.wipro.com</a> to <span styleName="highlighted">learn</span> new technologies.
59+
Using Virtual Desktop you can access <a href="https://topgear-app.wipro.com/" styleName="link">https://topgear-app.wipro.com</a> to <span styleName="highlighted">learn</span> new technologies.
6160
</li>
6261
</ol>
6362
</div>

‎src/shared/components/tc-communities/communities/wipro/Learn/style.scss

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
@import '~styles/mixins';
22

3-
.continueButton {
4-
display: block;
5-
margin: auto;
3+
.button-container {
4+
text-align: center;
65
}
76

87
.coursesContainer {
@@ -96,24 +95,24 @@
9695
}
9796
}
9897

98+
.link {
99+
&,
100+
&:hover,
101+
&:active,
102+
&:focus,
103+
&:visited {
104+
color: #0092ff;
105+
font-family: 'Times New Roman', Times, serif;
106+
outline: none;
107+
text-decoration: underline;
108+
}
109+
}
110+
99111
.message {
100112
color: #333;
101113
font: 16px/22px 'Akkurat regular', sans-serif;
102114
opacity: 0.7;
103115

104-
a {
105-
&,
106-
&:hover,
107-
&:active,
108-
&:focus,
109-
&:visited {
110-
color: #0092ff;
111-
font-family: 'Times New Roman', Times, serif;
112-
outline: none;
113-
text-decoration: underline;
114-
}
115-
}
116-
117116
em {
118117
font-family: 'Times New Roman', Times, serif;
119118
font-style: italic;

‎src/shared/components/tc-communities/communities/wipro/theme/index.js

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
1-
import primaryButtonStyle from 'components/buttons/outline/round/open-sans/green-uppercase.scss';
2-
import secondaryButtonStyle from 'components/buttons/outline/round/open-sans/blue-uppercase.scss';
3-
import defaultButtonStyle from './buttons/default.scss';
4-
import headerStyle from './header.scss';
1+
import dangerButtonTheme from
2+
'components/buttons/outline/round/akkurat/danger.scss';
3+
import primaryButtonTheme from
4+
'components/buttons/outline/round/akkurat/primary.scss';
5+
import defaultButtonTheme from
6+
'components/buttons/outline/round/akkurat/default.scss';
7+
import headerTheme from './header.scss';
58

69
export default {
7-
CommunityHeader: headerStyle,
8-
DefaultButton: defaultButtonStyle,
9-
PrimaryButton: primaryButtonStyle,
10-
SecondaryButton: secondaryButtonStyle,
10+
CommunityHeader: headerTheme,
11+
DangerButton: dangerButtonTheme,
12+
DefaultButton: defaultButtonTheme,
13+
PrimaryButton: primaryButtonTheme,
14+
SecondaryButton: primaryButtonTheme,
1115
};

0 commit comments

Comments
 (0)