Skip to content

Commit f659653

Browse files
MaryWyldeMaryWylde
authored
Merge pull request #119 from keepsimpleio/chore/minor-improvements
minor improvements
2 parents b2d7c5b + e154781 commit f659653

15 files changed

Lines changed: 257 additions & 63 deletions

File tree

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -160,3 +160,5 @@ docker-compose.override.yml
160160
# gitignore only blocks new untracked files. Move docs you want
161161
# shared into README/AGENTS/CLAUDE.md or a dedicated published path.)
162162
/docs/
163+
164+
.codegraph/

‎public/assets/cookies/close.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎public/assets/landingPage/dark-bg.png‎

334 KB
Loading

‎public/assets/landingPage/dark-theme-bg.png‎

327 KB
Loading

‎public/assets/landingPage/dark.png‎

231 KB
Loading

‎public/assets/landingPage/image.png‎

1.81 MB
Loading

‎public/assets/landingPage/used-by-dark.png‎

573 KB
Loading

‎src/components/Box/Box.module.scss‎

Lines changed: 128 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -5,56 +5,150 @@
55
unchanged. Pairs with `viewport-fit=cover` in SeoGenerator. */
66
bottom: max(15px, env(safe-area-inset-bottom));
77
right: 15px;
8-
position: -webkit-fixed;
9-
height: auto;
108
width: 100%;
11-
max-width: 450px;
12-
background-color: #fff;
9+
max-width: 480px;
10+
padding: 20px;
11+
display: flex;
12+
flex-direction: column;
13+
gap: 24px;
14+
background-color: #ffffff;
15+
background-image: url('/keepsimple_/assets/landingPage/landing-bg.webp');
16+
background-repeat: repeat;
1317
z-index: 2147483647;
14-
border-radius: 8px;
1518
box-shadow:
1619
0px 8px 17px 0px rgba(0, 0, 0, 0.05),
1720
0px 30px 30px 0px rgba(0, 0, 0, 0.04),
1821
0px 68px 41px 0px rgba(0, 0, 0, 0.03),
1922
0px 122px 49px 0px rgba(0, 0, 0, 0.01),
2023
0px 190px 53px 0px rgba(0, 0, 0, 0);
24+
}
25+
26+
.header {
27+
display: flex;
28+
flex-direction: column;
29+
gap: 20px;
30+
}
31+
32+
.headerRow {
33+
display: flex;
34+
justify-content: space-between;
35+
align-items: center;
36+
gap: 16px;
37+
}
38+
39+
.title {
40+
font-family: 'Aboreto-Regular', serif;
41+
font-weight: 400;
42+
font-size: 20px;
43+
line-height: 1.16;
44+
letter-spacing: 0;
45+
text-transform: uppercase;
46+
color: rgba(0, 0, 0, 0.85);
47+
}
48+
49+
.closeBtn {
50+
display: inline-flex;
51+
align-items: center;
52+
justify-content: center;
53+
width: 26px;
54+
height: 26px;
55+
padding: 0;
56+
background: none;
57+
border: none;
58+
cursor: pointer;
59+
transition: opacity 0.2s ease;
60+
61+
&:hover {
62+
opacity: 0.7;
63+
}
64+
}
65+
66+
.closeIcon {
67+
width: 26px;
68+
height: 26px;
69+
}
70+
71+
.divider {
72+
display: block;
73+
width: 100%;
74+
height: 0;
75+
border-top: 2px solid #9d9d9d;
76+
}
77+
78+
.txt {
79+
margin: 0;
80+
font-family: 'Source-Serif-Regular', serif;
81+
font-weight: 400;
82+
font-size: 14px;
83+
line-height: 1.5;
84+
color: #000000;
85+
}
86+
87+
.btnWrapper {
88+
display: flex;
89+
justify-content: flex-end;
90+
}
91+
92+
.acceptBtn {
93+
padding: 9px 24px;
94+
font-family: 'Source-Serif-Regular', serif;
95+
font-weight: 400;
96+
font-size: 16px;
97+
line-height: 1.4;
98+
text-align: center;
99+
background-color: #242424;
100+
color: #ffffff;
101+
border: none;
102+
border-radius: 0;
103+
cursor: pointer;
104+
transition:
105+
background-color 0.2s ease,
106+
color 0.2s ease,
107+
opacity 0.2s ease;
108+
109+
&:hover {
110+
opacity: 0.88;
111+
}
112+
}
113+
114+
.ruLang .title {
115+
font-family: 'Source-Serif-Regular', serif;
116+
}
117+
118+
.hyLang {
119+
.title,
120+
.txt,
121+
.acceptBtn {
122+
font-family: 'NotoSansArmenian-Regular', sans-serif;
123+
}
124+
}
125+
126+
// Dark theme — body.darkTheme class is toggled by useGlobals.
127+
:global(.darkTheme) {
128+
.content {
129+
background-color: #1b1e26;
130+
background-image: url('/keepsimple_/assets/landingPage/landing-dark-bg.webp');
131+
}
132+
133+
.title {
134+
color: rgba(255, 255, 255, 0.85);
135+
}
21136

22-
.header {
23-
border-bottom: 1px solid #d9d9d9;
24-
width: 100%;
25-
justify-content: space-between;
26-
padding-top: 13px;
27-
padding-bottom: 8px;
28-
display: flex;
29-
align-items: center;
30-
31-
.title {
32-
padding: 10px;
33-
font-size: 16px;
34-
color: #28587b;
35-
font-family: 'Lato', sans-serif;
36-
}
137+
.closeIcon {
138+
filter: brightness(0) invert(1);
37139
}
38140

39-
.closeBtn {
40-
padding-right: 15px;
41-
cursor: pointer;
141+
.divider {
142+
border-top-color: #5b5b5b;
42143
}
43144

44145
.txt {
45-
padding: 5px 15px;
46-
font-size: 16px;
47-
line-height: 150%;
48-
font-family: 'Lato', sans-serif;
49-
color: #252626;
146+
color: #ffffff;
50147
}
51148

52-
.btnWrapper {
53-
display: flex;
54-
justify-content: flex-end;
55-
gap: 15px;
56-
padding-right: 15px;
57-
padding-bottom: 15px;
149+
.acceptBtn {
150+
background-color: #ffffff;
151+
color: rgba(0, 0, 0, 0.85);
58152
}
59153
}
60154

‎src/components/Box/Box.tsx‎

Lines changed: 36 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
import cn from 'classnames';
2+
import Image from 'next/image';
23
import { useRouter } from 'next/router';
34
import { FC } from 'react';
45

56
import { TRouter } from '@local-types/global';
67

78
import cookieData from '@data/cookies';
89

9-
import Button from '@components/Button';
10-
1110
import styles from './Box.module.scss';
1211

1312
interface CookiesBoxProps {
@@ -20,25 +19,44 @@ const Box: FC<CookiesBoxProps> = ({ setIsSeen }) => {
2019
const { title, description, ok } = cookieData[locale];
2120

2221
return (
23-
<div>
24-
<div
25-
data-cy="cookie-box"
26-
className={cn(styles.content, {
27-
[styles.hyLang]: locale === 'hy',
28-
})}
29-
>
30-
<div className={styles.header}>
22+
<div
23+
data-cy="cookie-box"
24+
className={cn(styles.content, {
25+
[styles.hyLang]: locale === 'hy',
26+
[styles.ruLang]: locale === 'ru',
27+
})}
28+
>
29+
<div className={styles.header}>
30+
<div className={styles.headerRow}>
3131
<span className={styles.title}>{title}</span>
32-
</div>
33-
<p className={styles.txt}>{description}</p>
34-
<div className={styles.btnWrapper}>
35-
<Button
36-
label={ok}
32+
<button
33+
type="button"
34+
aria-label="Close"
3735
onClick={setIsSeen}
38-
variant={'primary'}
39-
dataCy="cookie-box-accept"
40-
/>
36+
className={styles.closeBtn}
37+
data-cy="cookie-box-close"
38+
>
39+
<Image
40+
src="/keepsimple_/assets/cookies/close.svg"
41+
alt=""
42+
width={26}
43+
height={26}
44+
className={styles.closeIcon}
45+
/>
46+
</button>
4147
</div>
48+
<span className={styles.divider} aria-hidden />
49+
</div>
50+
<p className={styles.txt}>{description}</p>
51+
<div className={styles.btnWrapper}>
52+
<button
53+
type="button"
54+
data-cy="cookie-box-accept"
55+
onClick={setIsSeen}
56+
className={styles.acceptBtn}
57+
>
58+
{ok}
59+
</button>
4260
</div>
4361
</div>
4462
);

‎src/components/Headline/Headline.module.scss‎

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,14 +39,19 @@
3939
max-height: 100%;
4040

4141
.videoContainer {
42+
position: absolute;
43+
inset: 0;
44+
pointer-events: none;
45+
overflow: hidden;
46+
z-index: -1;
47+
4248
.poster {
4349
width: 100%;
4450
height: 100%;
4551
object-fit: cover;
4652
position: absolute;
4753
top: 0;
4854
left: 0;
49-
z-index: -1;
5055
}
5156

5257
.video {
@@ -56,7 +61,6 @@
5661
position: absolute;
5762
top: 0;
5863
left: 0;
59-
z-index: -1;
6064
background-color: unset;
6165
opacity: 0;
6266
transition: opacity 300ms ease;
@@ -181,6 +185,22 @@
181185
padding-top: 5px;
182186
align-items: center;
183187

188+
a {
189+
display: inline-flex;
190+
transition:
191+
opacity 0.2s ease,
192+
transform 0.2s ease;
193+
194+
img {
195+
transition: filter 0.2s ease;
196+
}
197+
198+
&:hover {
199+
opacity: 0.75;
200+
transform: translateY(-2px);
201+
}
202+
}
203+
184204
.btn {
185205
border-radius: 2px;
186206
width: 100px;
@@ -208,6 +228,7 @@
208228
.serenityBtn {
209229
color: #fafafa;
210230
}
231+
background-image: url('/keepsimple_/assets/landingPage/dark-theme-bg.png');
211232

212233
.leaf {
213234
filter: brightness(0) invert(1);
@@ -328,6 +349,7 @@
328349
max-width: 100%;
329350
height: 55vh;
330351
position: relative;
352+
overflow: hidden;
331353

332354
&::after {
333355
content: '';

0 commit comments

Comments
 (0)