Skip to content

Commit f8ad0e7

Browse files
dedywahyudidedywahyudi
committed
fix: delete modal window style
1 parent 828bb95 commit f8ad0e7

File tree

3 files changed

+175
-98
lines changed

3 files changed

+175
-98
lines changed

‎src/shared/components/Settings/ConfirmationModal/index.jsx

Lines changed: 24 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,35 @@
11
import React from 'react';
22
import PT from 'prop-types';
3-
import { Modal, PrimaryButton, GhostButton } from 'topcoder-react-ui-kit';
4-
import modal from './styles.scss';
3+
import {
4+
Modal, PrimaryButton, Button, GhostButton,
5+
} from 'topcoder-react-ui-kit';
6+
import IconClose from 'assets/images/icon-close.svg';
7+
8+
import styles from './styles.scss';
59

610
export default function ConfirmationModal(props) {
711
const { onConfirm, onCancel, name } = props;
812
return (
9-
<Modal theme={modal}>
10-
<div styleName="modal.deletion-confirmation-container">
11-
<div styleName="modal.deletion-confirmation">
12-
<div styleName="modal.deletion-confirmation-title">HEADS UP!</div>
13-
<div styleName="modal.deletion-confirmation-message">
14-
Are you sure you want to delete `{name}`? This action can&apos;t be undone.
13+
<Modal theme={{ container: styles.modal, overlay: styles['modal-overlay'] }}>
14+
<div styleName="modal-dialog">
15+
<div styleName="modal-content">
16+
<div styleName="modal-header">
17+
HEADS UP!
18+
<GhostButton theme={{ button: styles.close }} onClick={onCancel}>
19+
<IconClose />
20+
</GhostButton>
21+
</div>
22+
<div styleName="modal-body">
23+
<span styleName="title">
24+
Are you sure you want to delete `{name}`? This action can&apos;t be undone.
25+
</span>
1526
</div>
16-
<div styleName="modal.deletion-confirmation-buttons">
17-
<div styleName="modal.deletion-confirmation-button-yes">
18-
<GhostButton onClick={onConfirm}>Yes, Delete</GhostButton>
27+
<div styleName="modal-footer">
28+
<div>
29+
<PrimaryButton theme={{ button: styles['button-save'] }} onClick={onConfirm}>Yes, Delete</PrimaryButton>
1930
</div>
20-
<div styleName="modal.deletion-confirmation-button-no">
21-
<PrimaryButton onClick={onCancel}>Cancel</PrimaryButton>
31+
<div>
32+
<Button theme={{ button: styles['button-save-ghost'] }} onClick={onCancel}>Cancel</Button>
2233
</div>
2334
</div>
2435
</div>

‎src/shared/components/Settings/ConfirmationModal/styles.scss

Lines changed: 149 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,120 +1,186 @@
11
@import "~styles/mixins";
22

3-
.overlay {
4-
background-color: #2a2a2a !important;
5-
opacity: 0.95;
3+
.modal-overlay {
4+
background-color: rgba($color-tc-black, 0.85);
65
}
76

8-
.container {
9-
@include roboto-regular;
10-
11-
padding: 0;
12-
position: fixed;
13-
overflow: auto;
14-
z-index: 10000;
7+
.modal {
8+
display: flex;
9+
flex-direction: column;
10+
align-items: center;
11+
justify-content: flex-start;
12+
width: 100%;
13+
height: 100%;
14+
max-width: none;
15+
max-height: none;
16+
border-radius: 8px;
17+
overflow-y: auto;
18+
background: none;
1519
top: 0;
16-
right: 0;
17-
bottom: 0;
1820
left: 0;
19-
box-sizing: border-box;
20-
width: auto;
21-
max-width: none;
2221
transform: none;
23-
background: transparent;
2422

25-
.deletion-confirmation-container {
26-
background: transparent;
27-
opacity: 1;
28-
position: relative;
29-
padding: 30px;
30-
width: 100%;
31-
height: 100%;
32-
display: flex;
33-
flex-direction: column;
34-
justify-content: center;
35-
align-items: center;
36-
border-radius: 0;
37-
color: #444;
38-
font-family: Helvetica, sans-serif;
39-
font-size: 1.1em;
40-
line-height: 1.5em;
41-
margin: 0 auto;
42-
max-width: 100%;
23+
.close {
24+
padding: 0;
25+
margin: 0 0 0 auto;
26+
min-height: 0;
4327
}
4428
}
4529

46-
.deletion-confirmation {
30+
.modal-dialog {
31+
flex: 0 0 auto;
4732
display: flex;
48-
flex-flow: column wrap;
49-
justify-content: space-around;
50-
align-items: center;
51-
background-color: $tc-white;
52-
opacity: 1;
53-
border-radius: 4px;
54-
padding: 40px;
55-
max-width: 100%;
33+
flex-direction: column;
34+
margin: auto;
5635
}
5736

58-
@media (min-width: 768px) {
59-
.deletion-confirmation {
60-
width: 520px;
61-
min-height: 256px;
62-
}
37+
.modal-content {
38+
flex: auto;
39+
display: flex;
40+
flex-direction: column;
41+
color: $color-black-100;
42+
max-width: 794px;
43+
background-color: $color-tc-white;
44+
border-radius: 8px;
45+
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
46+
margin: 32px;
47+
width: calc(100% - 64px);
6348
}
6449

65-
.deletion-confirmation-title {
66-
@include roboto-medium;
50+
.modal-header {
51+
@include roboto-bold;
6752

68-
font-size: 20px;
69-
line-height: 24px;
70-
color: $tc-gray-90;
53+
font-size: 34px;
54+
line-height: 32px;
55+
font-weight: 500;
7156
text-transform: uppercase;
57+
display: flex;
58+
align-items: center;
59+
padding: $pad-xxxl $pad-xxxxl $pad-xxxxl;
60+
border-radius: 8px 8px 0 0;
7261
}
7362

74-
.deletion-confirmation-message {
75-
@include merriweather-sans-light;
63+
.modal-body {
64+
@include roboto-bold;
7665

77-
margin: 10px 0;
78-
width: 100%;
79-
text-align: center;
66+
flex: auto;
67+
display: flex;
68+
padding: 0 $pad-xxxxl;
69+
70+
.title {
71+
font-size: 16px;
72+
line-height: 20px;
73+
letter-spacing: 0.5px;
74+
font-weight: 500;
75+
padding-bottom: 10px;
76+
text-transform: uppercase;
77+
display: flex;
78+
align-items: center;
79+
border-radius: 8px 8px 0 0;
8080

81-
.deletion-confirmation-account-title {
82-
font-style: italic;
83-
word-wrap: break-word;
81+
@include xs-to-sm {
82+
font-size: 16px;
83+
}
8484
}
8585
}
8686

87-
.deletion-confirmation-buttons {
87+
.modal-footer {
8888
display: flex;
89-
flex-flow: row wrap;
89+
flex-direction: row-reverse;
90+
align-items: flex-end;
91+
padding: $pad-xxxxl 0;
92+
margin: $margin-xxxl $margin-xxxxl 0;
93+
border-top: 2px solid $color-black-10;
94+
border-radius: 0 0 8px 8px;
95+
96+
@include xs-to-md {
97+
padding: $pad-lg;
98+
margin: 0 $margin-lg 0;
99+
}
100+
}
101+
102+
@include xs-to-md {
103+
.modal {
104+
padding: 0 20px;
105+
overflow-y: auto;
106+
height: 100%;
107+
max-height: 100%;
108+
border: none;
109+
box-shadow: none;
110+
border-radius: 0;
111+
z-index: 999999;
112+
}
90113

91-
.deletion-confirmation-button-no {
92-
margin-left: 10px;
114+
.modal-content {
115+
min-height: 120px;
116+
}
93117

94-
button {
95-
text-transform: uppercase;
96-
height: 40px;
118+
.modal-header {
119+
@include roboto-bold;
97120

98-
@include roboto-medium;
121+
font-size: 16px;
122+
line-height: 20px;
123+
padding: $pad-lg;
124+
border-radius: 0;
125+
}
99126

100-
font-size: 12px;
101-
}
127+
.modal-body {
128+
padding: 0 $pad-lg;
129+
flex-direction: column;
102130
}
103131

104-
.deletion-confirmation-button-yes {
105-
button {
106-
border: 1px solid $tc-dark-blue;
107-
text-transform: uppercase;
108-
height: 40px;
132+
.modal-footer {
133+
padding: $pad-lg;
134+
margin: 0 $margin-lg 0;
135+
border-radius: 0;
136+
}
137+
}
109138

110-
@include roboto-medium;
139+
@include xs-to-sm {
140+
.modal-content {
141+
width: 100%;
142+
margin: 0;
143+
border-radius: 0;
144+
}
145+
}
111146

112-
font-size: 12px;
147+
.button-save-ghost {
148+
@include roboto-bold;
113149

114-
&:hover {
115-
color: $tc-white;
116-
background-color: $tc-dark-blue;
117-
}
118-
}
150+
font-weight: 700;
151+
font-size: 16px;
152+
line-height: 24px;
153+
border-radius: 50px !important;
154+
color: #2a2a2a !important;
155+
text-transform: uppercase;
156+
background-color: #fff !important;
157+
border: 1px solid #2a2a2a !important;
158+
159+
&:hover {
160+
background-color: #fff !important;
161+
background-image: none !important;
162+
border-color: #2a2a2a !important;
163+
}
164+
165+
@include xs-to-md {
166+
font-size: 14px;
167+
line-height: 20px;
168+
}
169+
}
170+
171+
.button-save {
172+
@include roboto-bold;
173+
174+
font-weight: 700;
175+
font-size: 16px;
176+
line-height: 24px;
177+
border-radius: 50px !important;
178+
background: $color-turq-160 !important;
179+
color: $color-tc-white !important;
180+
text-transform: uppercase;
181+
182+
@include xs-to-md {
183+
font-size: 14px;
184+
line-height: 20px;
119185
}
120186
}

‎src/shared/components/Settings/ProfileSettings/index.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1049,8 +1049,8 @@ class ProfileSettings extends ConsentComponent {
10491049
showConfirmationHobby && (
10501050
<ConfirmationModal
10511051
onConfirm={() => this.showConsent(this.onDeleteHobby.bind(this, indexNoHobby))}
1052-
onCancel={() => this.setState({ showConfirmation: false, indexNoHobby: null })}
1053-
name={hobbyTrait.traits.data[indexNoHobby].hobby}
1052+
onCancel={() => this.setState({ showConfirmationHobby: false, indexNoHobby: null })}
1053+
name={indexNoHobby ? hobbyTrait.traits.data[indexNoHobby].hobby : ''}
10541054
/>
10551055
)
10561056
}

0 commit comments

Comments
 (0)