Skip to content

Commit f1a1415

Browse files
yudax42yudax42
committed
Design tweaks
1 parent 3bb2bb5 commit f1a1415

File tree

5 files changed

+92
-29
lines changed

5 files changed

+92
-29
lines changed

‎js/content.js

-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@ const getTheme = async () => {
2727
let { path, name, style } = await getStorageData(["path", "name", "style"]);
2828

2929
if (path && name && style) {
30-
console.log("www");
3130
const global = await sendMessage({
3231
query: "getTheme",
3332
url: `${BASE_URL}/${style}/global.min.css?random=${Math.random()}`,

‎js/options.js

+24-11
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,21 @@ const getThemes = async () => {
1111
}
1212
};
1313

14+
// get Storage Data
15+
const getStorageData = async (params) => {
16+
return new Promise((resolve, reject) => {
17+
try {
18+
chrome.storage.sync.get(params, async (result) => {
19+
resolve(result);
20+
});
21+
} catch (err) {
22+
reject(err);
23+
}
24+
});
25+
};
26+
1427
// Set theme
1528
const setTheme = async (theme) => {
16-
console.log("setting theme");
17-
console.log(theme);
1829
chrome.storage.sync.set(
1930
{
2031
path: theme.path,
@@ -23,19 +34,22 @@ const setTheme = async (theme) => {
2334
style: theme.style,
2435
},
2536
function () {
26-
console.log("saved!");
37+
window.location.reload();
2738
}
2839
);
2940
};
3041

3142
// Preview Themes
32-
const previewThemes = (data) => {
43+
const previewThemes = async (data) => {
3344
const themes = Object.entries(data).map((theme) => {
3445
return {
3546
name: theme[0],
3647
...theme[1],
3748
};
3849
});
50+
51+
let { name } = await getStorageData(["name"]);
52+
3953
// Filter themes with style type
4054
const dark = themes.filter((theme) => theme.style.toLowerCase() === "dark");
4155
const ligth = themes.filter((theme) => theme.style.toLowerCase() === "light");
@@ -46,33 +60,32 @@ const previewThemes = (data) => {
4660

4761
dark.forEach((theme) => {
4862
const li = document.createElement("li");
49-
li.setAttribute("class", "theme");
63+
li.setAttribute("id", theme.name);
64+
li.setAttribute("class", `theme ${name === theme.name ? "selected" : ""}`);
5065
darkThemesContainer.appendChild(li);
5166
li.innerHTML = `<img src="${BASE_URL}${theme.img}" alt="${theme.name}" />
5267
<div class="description">
5368
<span class="name">${theme.name}</span>
54-
<span class="tag">${theme.style}</span>
69+
5570
</div>`;
5671
li.addEventListener("click", () => {
5772
setTheme(theme);
5873
});
5974
});
6075
ligth.forEach((theme) => {
6176
const li = document.createElement("li");
62-
li.setAttribute("class", "theme");
77+
li.setAttribute("id", theme.name);
78+
li.setAttribute("class", `theme ${name === theme.name ? "selected" : ""}`);
6379
ligthThemesContainer.appendChild(li);
6480
li.innerHTML = `<img src="${BASE_URL}${theme.img}" alt="${theme.name}" />
6581
<div class="description">
6682
<span class="name">${theme.name}</span>
67-
<span class="tag">${theme.style}</span>
83+
6884
</div>`;
6985
li.addEventListener("click", () => {
7086
setTheme(theme);
7187
});
7288
});
73-
74-
console.log(dark);
75-
console.log(ligth);
7689
};
7790

7891
// Load Themes

‎options.html

+49-9
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,40 @@
11
<html>
22
<head>
3-
<title>Option Page</title>
3+
<title>Choose a Notion theme</title>
4+
45
<style>
56
body {
7+
padding: 5% 10%;
68
background-color: #ffffff;
79
}
10+
h1 {
11+
font-size: 25pt;
12+
margin-bottom: 3%;
13+
}
14+
h2 {
15+
font-size: 15pt;
16+
}
817
.container {
9-
max-width: 1000px;
18+
max-width: 1300px;
1019
margin: auto;
1120
align-items: center;
1221
}
1322
.theme {
14-
padding: 15px;
15-
width: 181px;
23+
overflow: hidden;
24+
width: 250px;
1625
display: inline-block;
1726
margin-right: 25px;
18-
background-color: #ededed;
19-
color: #4a4040;
20-
border: 1px solid #d5d5d5;
27+
margin-bottom: 20px;
28+
background-color: #ffffff;
29+
color: #323232;
30+
border: 2px solid #e9e9e9;
2131
border-radius: 15px;
32+
padding-bottom: 10px;
33+
cursor: pointer;
34+
font-size: 11px;
2235
}
2336
.theme img {
24-
width: 100px;
37+
width: 100%;
2538
display: block;
2639
margin: auto;
2740
}
@@ -42,11 +55,29 @@
4255
font-size: 20px;
4356
display: block;
4457
}
58+
.selected {
59+
border: 5px solid #41bfe5;
60+
}
61+
.copyright {
62+
margin: auto;
63+
text-align: center;
64+
position: fixed;
65+
bottom: 30px;
66+
font-size: 13pt;
67+
left: 0;
68+
right: 0;
69+
}
4570
</style>
4671
</head>
4772

4873
<body>
4974
<div class="container">
75+
<h1>Choose a theme</h1>
76+
<p style="font-size: 15px">
77+
Follow me on Twitter <a href="https://twitter.com/_yudax">@_yudax</a> to
78+
get updated when new themes are added.
79+
</p>
80+
<br />
5081
<div>
5182
<h2>Light</h2>
5283
<ul id="lightThemes"></ul>
@@ -57,7 +88,16 @@ <h2>Dark</h2>
5788
<ul id="darkThemes"></ul>
5889
</div>
5990
</div>
60-
91+
<div class="copyright">
92+
<a href="https://ko-fi.com/M4M37F1UV" target="_blank"
93+
><img
94+
height="50"
95+
style="border: 0px; height: 50px"
96+
src="https://cdn.ko-fi.com/cdn/kofi1.png?v=3"
97+
border="0"
98+
alt="Buy Me a Coffee at ko-fi.com"
99+
/></a>
100+
</div>
61101
<script src="js/options.js"></script>
62102
</body>
63103
</html>

‎popup.html

+18-7
Original file line numberDiff line numberDiff line change
@@ -3,27 +3,38 @@
33
<title>Notion Build</title>
44
<style>
55
html {
6-
width: 400px;
7-
min-height: 500px;
6+
width: 300px;
7+
min-height: 100px;
88
padding: 10px;
9+
text-align: center;
10+
}
11+
#go-to-options {
12+
margin: 20px;
13+
background-color: #41bfe5;
14+
border-radius: 5px;
15+
color: #ffffff;
16+
font-weight: bold;
17+
border: none;
18+
padding: 10px;
19+
cursor: pointer;
920
}
1021
</style>
1122
</head>
1223

1324
<body>
1425
<div class="container">
1526
<header>
16-
<img src="/assets/48.png" alt="Notion Web Themes" />
27+
<img src="/icons/128.png" width="50px" alt="Notion Web Themes" />
1728
</header>
1829

1930
<main id="app">
20-
<p>Hello World</p>
21-
<button id="go-to-options">Go to options</button>
31+
<button id="go-to-options">Choose a theme</button>
2232
</main>
2333
<br />
2434
<footer>
25-
&copy; Notion Web Themes | Made By
26-
<a href="https://twitter.com/_yudax">Yudax</a>
35+
NotionThemes &bull; Made By
36+
<a href="https://twitter.com/_yudax" target="_blank">Yudax</a> &bull;
37+
<a href="https://ko-fi.com/yudax" target="_blank">Donate</a>
2738
</footer>
2839
</div>
2940
<script src="js/popup.js"></script>

‎themes

Submodule themes updated 1 file

0 commit comments

Comments
 (0)