Skip to content

Commit 354b15f

Browse files
ninom5ninom5
authored
Update app_closed UI (#270)
1 parent b5c38c6 commit 354b15f

File tree

3 files changed

+170
-122
lines changed

3 files changed

+170
-122
lines changed

‎apps/web/src/constants/paths.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
export enum Path {
2+
DUMP_Internship_Subscribe = 'https://dump.hr/internship?section=subscribe_form',
23
Home = '/',
34
ApplicationForm = '/application-form',
45
ScheduleInterview = '/schedule-interview/:internId',

‎apps/web/src/pages/ApplicationFormPage/ApplicationFormPage.tsx‎

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {
44
Logo,
55
SortableDisciplinesContainer,
66
} from '@components/index';
7-
import { disciplineLabel } from '@constants/index';
7+
import { disciplineLabel, Path } from '@constants/index';
88
import {
99
Discipline,
1010
EducationOrEmploymentStatus,
@@ -115,20 +115,26 @@ export const ApplicationFormPage = () => {
115115
setValue('disciplines', updatedDisciplines, { shouldValidate: true });
116116
};
117117

118+
const handleClick = () => {
119+
console.log(Path.DUMP_Internship_Subscribe);
120+
window.location.replace(Path.DUMP_Internship_Subscribe);
121+
};
122+
118123
if (!isOpened) {
119124
return (
120125
<div className={classes.applicationFormPageWrapper}>
121126
<div className={classes.applicationFormIntroSection}>
122127
<Logo />
123-
<h1 className={classes.applicationFormTitle}>Postani dumpovac!</h1>
124-
<img
125-
className={classes.applicationFormWelcomeImage}
126-
src={formWelcomeImage}
127-
alt="form-welcome-image"
128-
/>
129-
</div>
130-
<div className={classes.applicationForm}>
131-
<h2 className={classes.applicationFormSubtitle}>Prijave zatvorene</h2>
128+
<p className={classes.applicationDescription}>
129+
PRIJAVI SE NA NEWSLETTER I BUDI U TOKU
130+
</p>
131+
<h1 className={classes.applicationFormTitle}>
132+
Prijave za Internship su{' '}
133+
<span className={classes.redText}>zatvorene.</span>
134+
</h1>
135+
<button onClick={handleClick} className={classes.subscribeButton}>
136+
Primi obavijest o idućem Internshipu
137+
</button>
132138
</div>
133139
</div>
134140
);

‎apps/web/src/pages/ApplicationFormPage/index.module.css‎

Lines changed: 153 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -1,183 +1,224 @@
11
* {
2-
box-sizing: border-box;
2+
box-sizing: border-box;
33
}
44

55
body {
6-
margin: 0;
7-
background-color: white;
8-
font-family: 'FuseV2Display-Regular', sans-serif;
6+
margin: 0;
7+
background-color: white;
8+
font-family: 'FuseV2Display-Regular', sans-serif;
99
}
1010

1111
.applicationFormPageWrapper {
12-
display: flex;
13-
margin-top: 80px;
14-
justify-content: center;
12+
display: flex;
13+
margin-top: 80px;
14+
justify-content: flex-start;
15+
padding: 20px 250px;
16+
}
17+
18+
.applicationDescription {
19+
font-size: 16px;
20+
font-family: FuseV2Display-Regular;
21+
line-height: 100%;
22+
font-weight: 600;
23+
color: #282d30;
24+
margin-top: 55%;
25+
}
26+
27+
.redText {
28+
color: #c42635;
29+
}
30+
31+
.subscribeButton {
32+
background-color: #c42635;
33+
color: white;
34+
padding: 14px 24px;
35+
border-radius: 8px;
36+
border: none;
37+
cursor: pointer;
38+
font-family: 'Fuse V.2 Display';
39+
font-style: normal;
40+
font-weight: 800;
41+
font-size: 16px;
42+
line-height: 16px;
1543
}
1644

1745
.applicationFormTitle {
18-
margin-top: 44px;
19-
font-family: FuseV2Display-ExtraBold;
20-
font-size: 96px;
21-
font-style: normal;
22-
font-weight: 800;
23-
line-height: 100%;
24-
color: #282d30;
25-
margin-bottom: 40px;
46+
margin-top: 44px;
47+
font-family: FuseV2Display-ExtraBold;
48+
font-size: 96px;
49+
font-weight: 800;
50+
line-height: 100%;
51+
letter-spacing: 0%;
52+
color: #282d30;
53+
margin-bottom: 40px;
2654
}
2755

2856
.formQuestionWrapper {
29-
padding: 20px;
30-
width: 100%;
31-
background-color: #fff;
32-
border-radius: 5px;
33-
margin-bottom: 20px;
57+
padding: 20px;
58+
width: 100%;
59+
background-color: #fff;
60+
border-radius: 5px;
61+
margin-bottom: 20px;
3462
}
3563

3664
.formQuestionSubtitleText {
37-
font-size: 14px;
38-
font-weight: 500;
39-
color: #000;
40-
margin-bottom: 10px;
41-
font-style: italic;
42-
margin-top: 5px;
65+
font-size: 14px;
66+
font-weight: 500;
67+
color: #000;
68+
margin-bottom: 10px;
69+
font-style: italic;
70+
margin-top: 5px;
4371
}
4472

4573
.marginBottom30px {
46-
margin-bottom: 30px;
74+
margin-bottom: 30px;
4775
}
4876

4977
.warningText {
50-
font-size: 12px;
51-
font-weight: 500;
52-
color: #ff0000;
53-
font-style: italic;
54-
margin-bottom: 0px;
78+
font-size: 12px;
79+
font-weight: 500;
80+
color: #ff0000;
81+
font-style: italic;
82+
margin-bottom: 0px;
5583
}
5684

5785
.warningTextPlaceholder {
58-
height: 26px;
86+
height: 26px;
5987
}
6088

6189
.disciplinesChoiceWrapper {
62-
position: relative;
90+
position: relative;
6391
}
6492

6593
label {
66-
display: block;
94+
display: block;
6795
}
6896

6997
input {
70-
display: block;
98+
display: block;
7199
}
72100

73101
.submitButton {
74-
width: 161px !important;
75-
height: 44px !important;
76-
border-radius: 8px !important;
77-
background: #5cc2a0 !important;
78-
box-shadow: none !important;
102+
width: 161px !important;
103+
height: 44px !important;
104+
border-radius: 8px !important;
105+
background: #5cc2a0 !important;
106+
box-shadow: none !important;
79107
}
80108

81109
.applicationFooterText {
82-
font-size: 14px;
83-
font-weight: 700;
84-
color: #444444;
85-
margin-bottom: 10px;
86-
font-style: italic;
87-
margin-top: 5px;
110+
font-size: 14px;
111+
font-weight: 700;
112+
color: #444444;
113+
margin-bottom: 10px;
114+
font-style: italic;
115+
margin-top: 5px;
88116
}
89117

90118
.cursorGrab {
91-
cursor: grab;
119+
cursor: grab;
92120
}
93121

94122
.formActionsWrapper {
95-
display: flex;
96-
justify-content: space-between;
97-
align-items: center;
123+
display: flex;
124+
justify-content: space-between;
125+
align-items: center;
98126
}
99127

100128
.applicationFormWelcomeImage {
101-
object-fit: contain;
102-
aspect-ratio: unset;
103-
width: unset;
129+
object-fit: contain;
130+
aspect-ratio: unset;
131+
width: unset;
104132
}
105133

106134
.applicationFormIntroSection {
107-
width: 592px;
108-
position: sticky;
109-
top: 80px;
110-
height: 100%;
135+
width: 592px;
136+
position: sticky;
137+
top: 80px;
138+
height: 100%;
111139
}
112140

113141
.applicationForm {
114-
width: 584px;
115-
display: inline-flex;
116-
padding: 64px;
117-
flex-direction: column;
118-
align-items: flex-start;
119-
gap: 16px;
120-
border-radius: 24px;
121-
box-shadow: 0px 8px 40px 0px rgba(214, 224, 233, 0.31),
142+
width: 584px;
143+
display: inline-flex;
144+
padding: 64px;
145+
flex-direction: column;
146+
align-items: flex-start;
147+
gap: 16px;
148+
border-radius: 24px;
149+
box-shadow:
150+
0px 8px 40px 0px rgba(214, 224, 233, 0.31),
122151
0px 4px 16px 0px rgba(214, 224, 233, 0.12),
123152
0px 2px 6px 0px rgba(214, 224, 233, 0.06);
124-
margin-bottom: 80px;
153+
margin-bottom: 80px;
125154
}
126155

127156
.applicationFormSubtitle {
128-
color: #242731;
129-
font-family: FuseV2Display-ExtraBold;
130-
font-size: 32px;
131-
font-style: normal;
132-
font-weight: 800;
133-
line-height: 36px;
157+
color: #242731;
158+
font-family: FuseV2Display-ExtraBold;
159+
font-size: 32px;
160+
font-style: normal;
161+
font-weight: 800;
162+
line-height: 36px;
134163
}
135164

136165
.applicationFormAdditional {
137-
color: #575f6e;
138-
font-size: 16px;
139-
font-style: normal;
140-
font-weight: 400;
141-
line-height: 22px;
166+
color: #575f6e;
167+
font-size: 16px;
168+
font-style: normal;
169+
font-weight: 400;
170+
line-height: 22px;
142171
}
143172

144173
@media screen and (max-width: 1054px) {
145-
.applicationFormPageWrapper {
146-
flex-direction: column;
147-
align-items: center;
148-
}
174+
.applicationFormPageWrapper {
175+
flex-direction: column;
176+
align-items: center;
177+
}
149178

150-
.applicationFormIntroSection {
151-
position: unset;
152-
margin-bottom: 44px;
153-
}
179+
.applicationFormIntroSection {
180+
position: unset;
181+
margin-bottom: 44px;
182+
}
154183
}
155184

156185
@media screen and (max-width: 630px) {
157-
.applicationFormTitle {
158-
display: none;
159-
}
160-
161-
.applicationFormWelcomeImage {
162-
display: none;
163-
}
164-
165-
.applicationFormPageWrapper {
166-
margin-top: 8px;
167-
margin-left: 24px;
168-
margin-right: 24px;
169-
}
170-
171-
.applicationForm {
172-
box-shadow: unset;
173-
width: 100%;
174-
padding: 0;
175-
}
176-
177-
.applicationFormIntroSection {
178-
width: 100%;
179-
margin-left: 24px;
180-
margin-top: 20px;
181-
overflow-x: hidden;
182-
}
186+
.applicationFormTitle {
187+
font-size: 50px;
188+
width: 95%;
189+
}
190+
191+
.applicationDescription {
192+
font-size: 12px;
193+
margin-top: 70%;
194+
}
195+
196+
.subscribeButton {
197+
width: 90%;
198+
padding: 18px 20px;
199+
}
200+
201+
.applicationFormWelcomeImage {
202+
display: none;
203+
}
204+
205+
.applicationFormPageWrapper {
206+
margin-top: 8px;
207+
margin-left: 24px;
208+
margin-right: 24px;
209+
padding: 0;
210+
}
211+
212+
.applicationForm {
213+
box-shadow: unset;
214+
width: 100%;
215+
padding: 0;
216+
}
217+
218+
.applicationFormIntroSection {
219+
width: 100%;
220+
margin-left: 24px;
221+
margin-top: 20px;
222+
overflow-x: hidden;
223+
}
183224
}

0 commit comments

Comments
 (0)