Skip to content

Commit 538c13b

Browse files
chambo-echambo-e
authored
feat(outdated-browser): revamped banner design + save preference (#1036)
* feat(outdated-browser): revamped banner design + save preference * fix: update tests * fix: update tests
1 parent 6d564eb commit 538c13b

File tree

3 files changed

+118
-59
lines changed

3 files changed

+118
-59
lines changed

‎packages/outdated-browser/src/__tests__/__snapshots__/index.ts.snap‎

Lines changed: 28 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,46 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`@outdated-browser render banner if SUPPORTED_BROWSER is defined and does not mtch userAgen 1`] = `
3+
exports[`@outdated-browser render banner if SUPPORTED_BROWSER is defined and does not match userAgent 1`] = `
44
"<head><style>
55
#outdated {
66
position: fixed;
77
z-index: 9999;
88
width: 100%;
99
display: flex;
10-
gap: 16px;
11-
background: rgba(242, 86, 72, 0.95);
12-
flex-direction: column;
10+
gap: 24px;
11+
background: #ff8c69;
1312
align-items: center;
14-
text-align: center;
15-
padding: 16px;
13+
padding: 16px 60px 16px 16px;
1614
color: white;
1715
font-family: 'Open Sans', 'Segoe UI', sans-serif;
16+
box-shadow: 0px 8px 40px 10px #151A2D5C;
1817
}
1918
20-
#outdated svg {
21-
max-width: 300px;
19+
@media (max-width: 768px) {
20+
#outdated {
21+
flex-direction: column;
22+
align-items: unset;
23+
}
2224
}
2325
24-
#outdated a {
25-
color: white;
26-
border: 1px solid white;
27-
border-radius: 4px;
28-
background: transparent;
29-
padding: 10px 20px;
30-
text-decoration: none;
31-
text-transform: uppercase;
32-
transition: all .3s ease-in;
26+
#outdated p {
27+
font-size: 12px;
3328
}
3429
35-
#outdated a:hover {
36-
color: rgb(242, 86, 72);
37-
background: white;
30+
#outdated svg {
31+
max-height: 28px;
32+
width: fit-content;
3833
}
3934
4035
#outdated button {
4136
color: white;
4237
background: transparent;
43-
font-size: 32px;
38+
font-size: 28px;
39+
line-height: 28px;
4440
position: absolute;
4541
border: 0;
46-
right: 60px;
47-
top: 10px;
42+
right: 20px;
43+
top: 16px;
4844
cursor: pointer;
4945
}
5046
</style></head><body><div id="outdated">
@@ -54,15 +50,18 @@ exports[`@outdated-browser render banner if SUPPORTED_BROWSER is defined and doe
5450
<path d="M18.937.616H7.333C3.283.616 0 3.949 0 8.06v17.82c0 7.756 6.192 14.043 13.83 14.043h12.243c3.51-.287 6.32-3.083 6.69-6.619v-18.65C32.763 6.9 26.573.616 18.937.616m0 4.492c5.184 0 9.402 4.282 9.402 9.546v18.358a2.915 2.915 0 0 1-2.483 2.419H13.83c-5.194 0-9.405-4.276-9.405-9.55V8.06c0-1.631 1.3-2.953 2.908-2.953h11.604m30.789 26.112c-1.495 0-2.967-.383-4.374-1.137a10.286 10.286 0 0 1-3.5-3.055.781.781 0 0 1 .103-1.04l1.68-1.51a.751.751 0 0 1 1.143.165 6.88 6.88 0 0 0 2.282 2.28 5.587 5.587 0 0 0 2.94.827c1.113 0 1.948-.234 2.483-.696.505-.438.751-1.027.751-1.804 0-.86-.262-1.49-.802-1.927-.64-.52-1.71-.993-3.177-1.41-4.318-1.078-6.51-3.172-6.51-6.223 0-1.892.63-3.38 1.872-4.423 1.2-1.008 2.853-1.52 4.917-1.52 1.48 0 2.835.289 4.025.857 1.19.568 2.265 1.448 3.196 2.612a.786.786 0 0 1-.097 1.077l-1.624 1.398a.755.755 0 0 1-.646.166.796.796 0 0 1-.472-.32c-.587-.806-1.23-1.407-1.91-1.785-.674-.373-1.506-.562-2.472-.562-.986 0-1.789.226-2.386.674-.534.4-.793.933-.793 1.63 0 .734.243 1.294.742 1.712.586.49 1.64.923 3.135 1.285 2.03.555 3.625 1.331 4.762 2.315 1.228 1.062 1.85 2.558 1.85 4.444 0 1.175-.302 2.23-.898 3.138-.593.903-1.446 1.612-2.538 2.108-1.058.48-2.297.724-3.682.724m16.105.078c-1.381 0-2.635-.339-3.723-1.006-1.088-.666-1.95-1.605-2.564-2.789-.606-1.168-.913-2.503-.913-3.964 0-1.46.302-2.793.897-3.96.603-1.185 1.462-2.125 2.553-2.794 1.087-.667 2.33-1.005 3.695-1.005 1.176 0 2.225.265 3.118.787.863.505 1.654 1.225 2.354 2.138a.778.778 0 0 1-.132 1.08l-1.377 1.09a.753.753 0 0 1-1.09-.169c-.756-1.112-1.695-1.652-2.873-1.652-.72 0-1.348.18-1.917.55-.566.367-1.016.892-1.338 1.561-.333.692-.501 1.49-.501 2.374 0 .884.168 1.682.501 2.373.326.679.764 1.19 1.338 1.562.57.37 1.197.55 1.917.55.751 0 1.363-.125 1.819-.371.464-.251.895-.629 1.28-1.124a.748.748 0 0 1 1.053-.183l1.458 1.034a.78.78 0 0 1 .157 1.115 7.545 7.545 0 0 1-2.492 2.035 6.98 6.98 0 0 1-3.22.768m13.924-12.244c-.72 0-1.34.179-1.9.547-.56.368-1.007.89-1.329 1.554-.332.68-.5 1.474-.5 2.356 0 .902.169 1.71.502 2.401.326.68.76 1.192 1.327 1.565.559.368 1.18.547 1.9.547.74 0 1.376-.18 1.945-.55.574-.372 1.012-.884 1.338-1.561.332-.692.5-1.49.5-2.374.001-.883-.167-1.682-.5-2.374-.322-.668-.772-1.194-1.338-1.562-.569-.37-1.205-.55-1.945-.55m.055 12.244c-1.364 0-2.607-.337-3.696-1.005-1.088-.666-1.95-1.604-2.564-2.788-.606-1.17-.913-2.512-.913-3.993 0-1.461.302-2.79.898-3.949.603-1.174 1.457-2.107 2.535-2.775 1.08-.668 2.32-1.007 3.685-1.007a6.12 6.12 0 0 1 2.93.719c.298.16.584.346.854.554v-.055c0-.426.34-.77.759-.77h1.872c.419 0 .759.344.759.77v13.082c0 .425-.34.77-.76.77h-1.872a.765.765 0 0 1-.759-.77v-.047a6.326 6.326 0 0 1-.837.544 5.965 5.965 0 0 1-2.891.72m10.308-.515a.765.765 0 0 1-.759-.77l.001-19.494c0-.425.34-.77.759-.77h1.872c.419 0 .759.345.759.77v19.494c0 .425-.34.77-.76.77h-1.872zm32.694.069a.757.757 0 0 1-.723-.538l-2.443-7.81-2.642 7.827a.76.76 0 0 1-.717.52h-1.872a.76.76 0 0 1-.721-.529l-4.24-13.083a.777.777 0 0 1 .444-.96.768.768 0 0 1 .296-.05h1.963a.76.76 0 0 1 .722.533l2.588 8.145 2.632-8.148a.76.76 0 0 1 .72-.53h1.818c.331 0 .621.215.723.536l2.528 8.05 2.551-8.052a.758.758 0 0 1 .722-.535h1.777c.1 0 .202.016.296.055.392.166.555.59.438.954l-4.185 13.082a.757.757 0 0 1-.72.533h-1.955zm14.437-11.797c-.72 0-1.341.18-1.9.547-.56.369-1.007.891-1.33 1.554-.33.681-.499 1.474-.499 2.356 0 .902.169 1.71.502 2.401.326.68.76 1.192 1.327 1.565.559.368 1.18.547 1.9.547.74 0 1.376-.18 1.945-.55.574-.373 1.011-.883 1.337-1.562.333-.69.501-1.49.501-2.373 0-.883-.168-1.682-.5-2.374-.323-.668-.772-1.194-1.338-1.561-.569-.37-1.205-.55-1.945-.55m.055 12.244c-1.364 0-2.608-.338-3.696-1.005-1.088-.667-1.95-1.605-2.564-2.79-.606-1.168-.913-2.512-.913-3.992 0-1.46.302-2.79.898-3.949.603-1.173 1.456-2.107 2.535-2.775 1.08-.668 2.32-1.007 3.685-1.007a6.117 6.117 0 0 1 3.783 1.273v-.055c0-.426.34-.77.76-.77h1.871c.42 0 .76.344.76.77v13.082c0 .426-.34.77-.76.77h-1.872a.765.765 0 0 1-.759-.77v-.047a6.373 6.373 0 0 1-.838.545 5.98 5.98 0 0 1-2.89.72m-37.823-11.31c.62-.628 1.403-.934 2.395-.934 1.04 0 1.825.266 2.4.812.426.404.743.985.944 1.729h-6.74a4.28 4.28 0 0 1 1.001-1.607zm7.12 6.239a.826.826 0 0 0-1.116.151c-.32.385-.762.86-1.217 1.118-.608.345-1.401.528-2.364.528-1.134 0-1.997-.377-2.64-1.152a4.702 4.702 0 0 1-1.02-2.172h9.745a.76.76 0 0 0 .755-.694c.02-.214.03-.512.03-.886 0-1.354-.299-2.602-.89-3.708a6.873 6.873 0 0 0-2.475-2.654c-1.053-.649-2.241-.978-3.533-.978-1.364 0-2.604.339-3.684 1.007-1.08.67-1.933 1.608-2.536 2.792-.596 1.167-.898 2.5-.898 3.96 0 1.462.308 2.796.914 3.965.614 1.184 1.476 2.122 2.564 2.788 1.088.668 2.342 1.006 3.724 1.006 1.479 0 2.795-.294 3.887-.919a7.619 7.619 0 0 0 2.284-1.984.862.862 0 0 0-.19-1.218l-1.34-.95zm52.815-9.893a.77.77 0 0 0-.41-.107h-1.74a.763.763 0 0 0-.707.494l-3.637 9.552-3.46-9.563a.754.754 0 0 0-.705-.485h-1.954a.754.754 0 0 0-.63.34.78.78 0 0 0-.074.718l5.078 13.578h.007c-.15.605-.395 1.021-.735 1.25-.478.321-1.375.364-1.87.396a.83.83 0 0 0-.775.833v1.308c0 .462.369.837.823.835.795-.003 2.066.077 3.058-.455 2.043-1.097 2.35-2.456 2.923-4l5.13-13.757a.778.778 0 0 0-.322-.937"></path>
5551
</g>
5652
</svg>
57-
<h6>We are sorry, this app can not be run with an old version of web browser.</h6>
58-
<p>
59-
<strong>Please update your browser to a more recent version.</strong>
60-
</p><p>The Scaleway Team</p>
61-
<a target="_blank" rel="noopener noreferrer" href="https://browsehappy.com/">Update my browser now</a>
62-
<button type="button" onclick="document.getElementById('outdated').remove()">×</button>
53+
<div>
54+
<p>Your web browser is out of date. This might results in unexpected behavior.</p>
55+
<p>Update your browser for a better user experience.</p>
56+
</div>
57+
<button type="button" onclick="closeOutdated()">×</button>
6358
</div></body>"
6459
`;
6560

61+
exports[`@outdated-browser render nothing if SUPPORTED_BROWSER is defined and does not match userAgent and user click on button 1`] = `"<head></head><body></body>"`;
62+
63+
exports[`@outdated-browser render nothing if SUPPORTED_BROWSER is defined and does not match userAgent and user has already ignored banner 1`] = `"<head></head><body></body>"`;
64+
6665
exports[`@outdated-browser render nothing if SUPPORTED_BROWSER is defined and match userAgent 1`] = `"<head></head><body></body>"`;
6766

6867
exports[`@outdated-browser render nothing if SUPPORTED_BROWSER is nil 1`] = `"<head></head><body></body>"`;

‎packages/outdated-browser/src/__tests__/index.ts‎

Lines changed: 51 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,25 @@
22
* @jest-environment jsdom
33
*/
44

5+
const localStorageMock = (() => {
6+
let store: Record<string, unknown> = {}
7+
8+
return {
9+
getItem(key: string): unknown {
10+
return store?.[key] || null
11+
},
12+
setItem(key: string, value: unknown) {
13+
store[key] = value?.toString()
14+
},
15+
removeItem(key: string) {
16+
delete store[key]
17+
},
18+
clear() {
19+
store = {}
20+
},
21+
}
22+
})()
23+
524
describe('@outdated-browser', () => {
625
const originUA = global.navigator.userAgent
726
let fakeUA: string | undefined
@@ -12,11 +31,18 @@ describe('@outdated-browser', () => {
1231
return fakeUA ?? originUA
1332
},
1433
})
34+
35+
Object.defineProperty(window, 'sessionStorage', {
36+
value: localStorageMock,
37+
})
1538
})
1639

1740
afterEach(() => {
1841
jest.resetModules()
1942
jest.restoreAllMocks()
43+
sessionStorage.clear()
44+
// Clear dom for next test
45+
document.getElementsByTagName('html')[0].innerHTML = ''
2046
fakeUA = undefined
2147
})
2248

@@ -39,10 +65,34 @@ describe('@outdated-browser', () => {
3965
})
4066
})
4167

42-
test('render banner if SUPPORTED_BROWSER is defined and does not mtch userAgen ', () => {
68+
test('render banner if SUPPORTED_BROWSER is defined and does not match userAgent', () => {
69+
fakeUA = 'b'
70+
// @ts-expect-error global mock
71+
global.SUPPORTED_BROWSERS = 'a'
72+
73+
return import('..').then(() => {
74+
expect(document.documentElement.innerHTML).toMatchSnapshot()
75+
})
76+
})
77+
78+
test('render nothing if SUPPORTED_BROWSER is defined and does not match userAgent and user has already ignored banner', () => {
79+
fakeUA = 'b'
80+
// @ts-expect-error global mock
81+
global.SUPPORTED_BROWSERS = 'a'
82+
sessionStorage.setItem('__outdated', 'true')
83+
84+
return import('..').then(() => {
85+
expect(document.documentElement.innerHTML).toMatchSnapshot()
86+
})
87+
})
88+
89+
test('render nothing if SUPPORTED_BROWSER is defined and does not match userAgent and user click on button', () => {
4390
fakeUA = 'b'
4491
// @ts-expect-error global mock
4592
global.SUPPORTED_BROWSERS = 'a'
93+
// @ts-expect-error injected globally by module
94+
// eslint-disable-next-line @typescript-eslint/no-unsafe-call
95+
closeOutdated()
4696

4797
return import('..').then(() => {
4898
expect(document.documentElement.innerHTML).toMatchSnapshot()

‎packages/outdated-browser/src/index.ts‎

Lines changed: 39 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,11 @@ const content = `
55
<path d="M18.937.616H7.333C3.283.616 0 3.949 0 8.06v17.82c0 7.756 6.192 14.043 13.83 14.043h12.243c3.51-.287 6.32-3.083 6.69-6.619v-18.65C32.763 6.9 26.573.616 18.937.616m0 4.492c5.184 0 9.402 4.282 9.402 9.546v18.358a2.915 2.915 0 0 1-2.483 2.419H13.83c-5.194 0-9.405-4.276-9.405-9.55V8.06c0-1.631 1.3-2.953 2.908-2.953h11.604m30.789 26.112c-1.495 0-2.967-.383-4.374-1.137a10.286 10.286 0 0 1-3.5-3.055.781.781 0 0 1 .103-1.04l1.68-1.51a.751.751 0 0 1 1.143.165 6.88 6.88 0 0 0 2.282 2.28 5.587 5.587 0 0 0 2.94.827c1.113 0 1.948-.234 2.483-.696.505-.438.751-1.027.751-1.804 0-.86-.262-1.49-.802-1.927-.64-.52-1.71-.993-3.177-1.41-4.318-1.078-6.51-3.172-6.51-6.223 0-1.892.63-3.38 1.872-4.423 1.2-1.008 2.853-1.52 4.917-1.52 1.48 0 2.835.289 4.025.857 1.19.568 2.265 1.448 3.196 2.612a.786.786 0 0 1-.097 1.077l-1.624 1.398a.755.755 0 0 1-.646.166.796.796 0 0 1-.472-.32c-.587-.806-1.23-1.407-1.91-1.785-.674-.373-1.506-.562-2.472-.562-.986 0-1.789.226-2.386.674-.534.4-.793.933-.793 1.63 0 .734.243 1.294.742 1.712.586.49 1.64.923 3.135 1.285 2.03.555 3.625 1.331 4.762 2.315 1.228 1.062 1.85 2.558 1.85 4.444 0 1.175-.302 2.23-.898 3.138-.593.903-1.446 1.612-2.538 2.108-1.058.48-2.297.724-3.682.724m16.105.078c-1.381 0-2.635-.339-3.723-1.006-1.088-.666-1.95-1.605-2.564-2.789-.606-1.168-.913-2.503-.913-3.964 0-1.46.302-2.793.897-3.96.603-1.185 1.462-2.125 2.553-2.794 1.087-.667 2.33-1.005 3.695-1.005 1.176 0 2.225.265 3.118.787.863.505 1.654 1.225 2.354 2.138a.778.778 0 0 1-.132 1.08l-1.377 1.09a.753.753 0 0 1-1.09-.169c-.756-1.112-1.695-1.652-2.873-1.652-.72 0-1.348.18-1.917.55-.566.367-1.016.892-1.338 1.561-.333.692-.501 1.49-.501 2.374 0 .884.168 1.682.501 2.373.326.679.764 1.19 1.338 1.562.57.37 1.197.55 1.917.55.751 0 1.363-.125 1.819-.371.464-.251.895-.629 1.28-1.124a.748.748 0 0 1 1.053-.183l1.458 1.034a.78.78 0 0 1 .157 1.115 7.545 7.545 0 0 1-2.492 2.035 6.98 6.98 0 0 1-3.22.768m13.924-12.244c-.72 0-1.34.179-1.9.547-.56.368-1.007.89-1.329 1.554-.332.68-.5 1.474-.5 2.356 0 .902.169 1.71.502 2.401.326.68.76 1.192 1.327 1.565.559.368 1.18.547 1.9.547.74 0 1.376-.18 1.945-.55.574-.372 1.012-.884 1.338-1.561.332-.692.5-1.49.5-2.374.001-.883-.167-1.682-.5-2.374-.322-.668-.772-1.194-1.338-1.562-.569-.37-1.205-.55-1.945-.55m.055 12.244c-1.364 0-2.607-.337-3.696-1.005-1.088-.666-1.95-1.604-2.564-2.788-.606-1.17-.913-2.512-.913-3.993 0-1.461.302-2.79.898-3.949.603-1.174 1.457-2.107 2.535-2.775 1.08-.668 2.32-1.007 3.685-1.007a6.12 6.12 0 0 1 2.93.719c.298.16.584.346.854.554v-.055c0-.426.34-.77.759-.77h1.872c.419 0 .759.344.759.77v13.082c0 .425-.34.77-.76.77h-1.872a.765.765 0 0 1-.759-.77v-.047a6.326 6.326 0 0 1-.837.544 5.965 5.965 0 0 1-2.891.72m10.308-.515a.765.765 0 0 1-.759-.77l.001-19.494c0-.425.34-.77.759-.77h1.872c.419 0 .759.345.759.77v19.494c0 .425-.34.77-.76.77h-1.872zm32.694.069a.757.757 0 0 1-.723-.538l-2.443-7.81-2.642 7.827a.76.76 0 0 1-.717.52h-1.872a.76.76 0 0 1-.721-.529l-4.24-13.083a.777.777 0 0 1 .444-.96.768.768 0 0 1 .296-.05h1.963a.76.76 0 0 1 .722.533l2.588 8.145 2.632-8.148a.76.76 0 0 1 .72-.53h1.818c.331 0 .621.215.723.536l2.528 8.05 2.551-8.052a.758.758 0 0 1 .722-.535h1.777c.1 0 .202.016.296.055.392.166.555.59.438.954l-4.185 13.082a.757.757 0 0 1-.72.533h-1.955zm14.437-11.797c-.72 0-1.341.18-1.9.547-.56.369-1.007.891-1.33 1.554-.33.681-.499 1.474-.499 2.356 0 .902.169 1.71.502 2.401.326.68.76 1.192 1.327 1.565.559.368 1.18.547 1.9.547.74 0 1.376-.18 1.945-.55.574-.373 1.011-.883 1.337-1.562.333-.69.501-1.49.501-2.373 0-.883-.168-1.682-.5-2.374-.323-.668-.772-1.194-1.338-1.561-.569-.37-1.205-.55-1.945-.55m.055 12.244c-1.364 0-2.608-.338-3.696-1.005-1.088-.667-1.95-1.605-2.564-2.79-.606-1.168-.913-2.512-.913-3.992 0-1.46.302-2.79.898-3.949.603-1.173 1.456-2.107 2.535-2.775 1.08-.668 2.32-1.007 3.685-1.007a6.117 6.117 0 0 1 3.783 1.273v-.055c0-.426.34-.77.76-.77h1.871c.42 0 .76.344.76.77v13.082c0 .426-.34.77-.76.77h-1.872a.765.765 0 0 1-.759-.77v-.047a6.373 6.373 0 0 1-.838.545 5.98 5.98 0 0 1-2.89.72m-37.823-11.31c.62-.628 1.403-.934 2.395-.934 1.04 0 1.825.266 2.4.812.426.404.743.985.944 1.729h-6.74a4.28 4.28 0 0 1 1.001-1.607zm7.12 6.239a.826.826 0 0 0-1.116.151c-.32.385-.762.86-1.217 1.118-.608.345-1.401.528-2.364.528-1.134 0-1.997-.377-2.64-1.152a4.702 4.702 0 0 1-1.02-2.172h9.745a.76.76 0 0 0 .755-.694c.02-.214.03-.512.03-.886 0-1.354-.299-2.602-.89-3.708a6.873 6.873 0 0 0-2.475-2.654c-1.053-.649-2.241-.978-3.533-.978-1.364 0-2.604.339-3.684 1.007-1.08.67-1.933 1.608-2.536 2.792-.596 1.167-.898 2.5-.898 3.96 0 1.462.308 2.796.914 3.965.614 1.184 1.476 2.122 2.564 2.788 1.088.668 2.342 1.006 3.724 1.006 1.479 0 2.795-.294 3.887-.919a7.619 7.619 0 0 0 2.284-1.984.862.862 0 0 0-.19-1.218l-1.34-.95zm52.815-9.893a.77.77 0 0 0-.41-.107h-1.74a.763.763 0 0 0-.707.494l-3.637 9.552-3.46-9.563a.754.754 0 0 0-.705-.485h-1.954a.754.754 0 0 0-.63.34.78.78 0 0 0-.074.718l5.078 13.578h.007c-.15.605-.395 1.021-.735 1.25-.478.321-1.375.364-1.87.396a.83.83 0 0 0-.775.833v1.308c0 .462.369.837.823.835.795-.003 2.066.077 3.058-.455 2.043-1.097 2.35-2.456 2.923-4l5.13-13.757a.778.778 0 0 0-.322-.937"/>
66
</g>
77
</svg>
8-
<h6>We are sorry, this app can not be run with an old version of web browser.</h6>
9-
<p>
10-
<strong>Please update your browser to a more recent version.</strong>
11-
</p><p>The Scaleway Team</p>
12-
<a target="_blank" rel="noopener noreferrer" href="https://browsehappy.com/">Update my browser now</a>
13-
<button type="button" onclick="document.getElementById('outdated').remove()">×</button>
8+
<div>
9+
<p>Your web browser is out of date. This might results in unexpected behavior.</p>
10+
<p>Update your browser for a better user experience.</p>
11+
</div>
12+
<button type="button" onclick="closeOutdated()">×</button>
1413
`
1514

1615
const style = `
@@ -19,53 +18,59 @@ const style = `
1918
z-index: 9999;
2019
width: 100%;
2120
display: flex;
22-
gap: 16px;
23-
background: rgba(242, 86, 72, 0.95);
24-
flex-direction: column;
21+
gap: 24px;
22+
background: #ff8c69;
2523
align-items: center;
26-
text-align: center;
27-
padding: 16px;
24+
padding: 16px 60px 16px 16px;
2825
color: white;
2926
font-family: 'Open Sans', 'Segoe UI', sans-serif;
27+
box-shadow: 0px 8px 40px 10px #151A2D5C;
3028
}
3129
32-
#outdated svg {
33-
max-width: 300px;
30+
@media (max-width: 768px) {
31+
#outdated {
32+
flex-direction: column;
33+
align-items: unset;
34+
}
3435
}
3536
36-
#outdated a {
37-
color: white;
38-
border: 1px solid white;
39-
border-radius: 4px;
40-
background: transparent;
41-
padding: 10px 20px;
42-
text-decoration: none;
43-
text-transform: uppercase;
44-
transition: all .3s ease-in;
37+
#outdated p {
38+
font-size: 12px;
4539
}
4640
47-
#outdated a:hover {
48-
color: rgb(242, 86, 72);
49-
background: white;
41+
#outdated svg {
42+
max-height: 28px;
43+
width: fit-content;
5044
}
5145
5246
#outdated button {
5347
color: white;
5448
background: transparent;
55-
font-size: 32px;
49+
font-size: 28px;
50+
line-height: 28px;
5651
position: absolute;
5752
border: 0;
58-
right: 60px;
59-
top: 10px;
53+
right: 20px;
54+
top: 16px;
6055
cursor: pointer;
6156
}
6257
`
6358

6459
declare const SUPPORTED_BROWSERS: string
6560

61+
const STORAGE_KEY = '__outdated'
62+
const ignore = sessionStorage.getItem(STORAGE_KEY) || 'false'
63+
64+
declare global {
65+
interface Window {
66+
closeOutdated: () => void
67+
}
68+
}
69+
6670
if (
6771
SUPPORTED_BROWSERS &&
68-
!new RegExp(SUPPORTED_BROWSERS).test(navigator.userAgent)
72+
!new RegExp(SUPPORTED_BROWSERS).test(navigator.userAgent) &&
73+
ignore === 'false'
6974
) {
7075
const styleElement = document.createElement('style')
7176
styleElement.innerHTML = style
@@ -75,6 +80,11 @@ if (
7580
element.setAttribute('id', 'outdated')
7681
element.innerHTML = content
7782
document.body.prepend(element)
83+
84+
window.closeOutdated = () => {
85+
element.remove()
86+
sessionStorage.setItem(STORAGE_KEY, 'true')
87+
}
7888
}
7989

8090
export {}

0 commit comments

Comments
 (0)