new option to change icon packs!

html/rise-and-shine.html

@@ -25,7 +25,7 @@
 		<img class="snoozz-logo hoverable" src="../icons/main-icon.png">
 		<img class="snoozz-text" src="../icons/snoozz.png">
 	</div>
-	<div tabindex="0" class="nap-room" data-hover="See your sleeping tabs"><img src="../icons/sheep.png"></div>
+	<div tabindex="0" class="nap-room" data-hover="See your sleeping tabs"><img src="../icons/human/nap-room.png"></div>
 	<div class="container">
 		<div id="when">This window was snoozed at <span>---</span></div>
 		<div id="till">It was scheduled to wake up <span>---</span>.</div>

html/settings.html

@@ -14,7 +14,7 @@
 		<img class="snoozz-logo hoverable" src="../icons/main-icon.png">
 		<img class="snoozz-text" src="../icons/snoozz.png">
 	</div>
-	<div tabindex="0" class="nap-room" data-href="/html/nap-room.html" data-hover="See your sleeping tabs"><img data-href="/html/nap-room.html" src="../icons/sheep.png"></div>
+	<div tabindex="0" class="nap-room" data-href="/html/nap-room.html" data-hover="See your sleeping tabs"><img data-href="/html/nap-room.html" src="../icons/human/nap-room.png"></div>
 	<div class="settings-container">
 		<h2><span>Settings</span></h2><br>
 		<div class="input-container flex">
@@ -80,6 +80,15 @@ <h4>Close popup automatically after</h4>
 				<option value="2000">2 seconds</option>
 			</select></div>
 		</div>
+		<div class="input-container flex">
+			<div>
+				<h4>Icon Theme</h4>
+			</div>
+			<div class="select-wrapper"><select id="icons">
+				<option value="human">Humans</option>
+				<option value="animal">Animals</option>
+			</select></div>
+		</div>
 		<div class="input-container flex">
 			<div>
 				<h4>Extension Theme</h4>

scripts/background.js

@@ -161,6 +161,7 @@ async function setUpExtension() {
 	await saveOptions(Object.assign({
 		morning: 9,
 		evening: 18,
+		icons: 'human',
 		timeOfDay: 'morning',
 		history: 14,
 		theme: 'light',

scripts/popup.js

@@ -3,7 +3,7 @@ async function init() {
 	isInEditMode = getUrlParam('edit') && getUrlParam('edit') == 'true';
 
 	await buildChoices();
-	buildCustomChoice();
+	await buildCustomChoice();
 	if (isInEditMode) {
 		initEditMode();
 	} else {
@@ -111,6 +111,9 @@ async function generatePreview(type) {
 	var previewText = document.getElementById('preview-text');
 	var previewIcon = document.getElementById('preview-favicon');
 
+	var iconTheme = await getOptions('icons');
+	if (!iconTheme) iconTheme = 'human';
+
 	var allTabs = await getTabsInWindow();
 	if (!allTabs || !allTabs.length) return;
 
@@ -120,11 +123,11 @@ async function generatePreview(type) {
 	} else if (type == 'window') {
 		var validTabs = allTabs.filter(t => !isDefault(t) && isValid(t));
 		previewText.innerText = `${getTabCountLabel(validTabs)} from ${getSiteCountLabel(validTabs)}`;
-		previewIcon.src = '../icons/window.png';
+		previewIcon.src = `../icons/${iconTheme}/window.png`;
 	} else if (type == 'selection') {
 		var validTabs = allTabs.filter(t => !isDefault(t) && isValid(t) && t.highlighted);
 		previewText.innerText = `${validTabs.length} selected tabs from ${getSiteCountLabel(validTabs)}`;
-		previewIcon.src = '../icons/magnet.png';
+		previewIcon.src = `../icons/${iconTheme}/selection.png`;
 	// } else if (type == 'group') {
 	// 	var currentTabGroup = allTabs.find(at => at.active).groupId;
 	// 	var validTabs = allTabs.filter(t => currentTabGroup && currentTabGroup != -1 && !isDefault(t) && isValid(t) && t.groupId && t.groupId == currentTabGroup);
@@ -137,9 +140,11 @@ async function generatePreview(type) {
 
 async function buildChoices() {
 	var choices = await getChoices();
+	var iconTheme = await getOptions('icons');
+	if (!iconTheme) iconTheme = 'human';
 	colorList = gradientSteps('#F3B845', '#DF4E76', Math.ceil(Object.keys(choices).length / 2) + 1);
 	document.querySelector('.section.choices').append(...(Object.entries(choices).map(([name, o], i) => {
-		var icon = Object.assign(document.createElement('img'), {src: `../icons/${name}.png`});
+		var icon = Object.assign(document.createElement('img'), {src: `../icons/${iconTheme}/${name}.png`});
 		var label = wrapInDiv({classList: 'label', innerText: o.label});
 		var date = wrapInDiv({classList: 'date', innerText: o.timeString});
 		var time = wrapInDiv({classList: 'time', innerText: dayjs(o.time).format(`h${dayjs(o.time).minute() !== 0 ? ':mm ':''}A`)});
@@ -155,7 +160,7 @@ async function buildChoices() {
 	})));
 }
 
-function buildCustomChoice() {
+async function buildCustomChoice() {
 	var date = flatpickr('#date', {
 		inline: true,
 		defaultDate: dayjs().format('YYYY-MM-DD'),
@@ -202,7 +207,9 @@ function buildCustomChoice() {
 		}
 	});
 
-	var icon = Object.assign(document.createElement('img'), {src: `../icons/alarm.png`})
+	var iconTheme = await getOptions('icons');
+	if (!iconTheme) iconTheme = 'human';
+	var icon = Object.assign(document.createElement('img'), {src: `../icons/${iconTheme}/custom.png`})
 	var label = wrapInDiv({classList: 'label', innerText: 'Choose your own time'})
 	var customChoice = wrapInDiv({
 		classList: 'custom-choice',

scripts/rise.js

@@ -3,6 +3,9 @@ async function init() {
 	document.querySelector('.nap-room').addEventListener('click', _ => openExtensionTab('/html/nap-room.html'), {once:true});
 	showIconOnScroll();
 
+	var options = await getOptions();
+	if (options.icons) document.querySelector('.nap-room img').src = `../icons/${options.icons}/nap-room.png`;
+
 	var found = await fetchTabFromStorage();
 	populate(found);
 	mapTabs();

scripts/settings.js

@@ -10,6 +10,7 @@ async function initialize() {
 	}
 	var options = await getOptions();
 	try {updateFormValues(options)} catch(e) {}
+	if (options.icons) document.querySelector('.nap-room img').src = `../icons/${options.icons}/nap-room.png`;
 	addListeners();
 
 	document.querySelector('#shortcut .btn').addEventListener('click', toggleShortcuts);
@@ -62,7 +63,7 @@ async function calculateStorage() {
 }
 
 function updateFormValues(storage) {
-	['morning', 'evening', 'timeOfDay', 'history', 'theme', 'badge', 'closeDelay'].forEach(o => {
+	['morning', 'evening', 'timeOfDay', 'history', 'icons', 'theme', 'badge', 'closeDelay'].forEach(o => {
 		if (storage[o] !== undefined && document.querySelector(`#${o} option[value="${storage[o]}"]`)) {
 			document.getElementById(o).value = storage[o].toString()
 			document.getElementById(o).setAttribute('data-orig-value', storage[o]);
@@ -114,6 +115,7 @@ Would you like to update ${tabsToChange.length > 1 ? 'them' : 'it'} to snooze ti
 	options.contextMenu = Array.from(document.querySelectorAll('#contextMenu input:checked')).map(c => c.id);
 	await saveOptions(options);
 	await setTheme();
+	await changeIcons(options.icons);
 	if (e && e.target.tagName.toLowerCase() === 'select') e.target.setAttribute('data-orig-value', e.target.value);
 }
 
@@ -176,6 +178,7 @@ async function resetSettings() {
 		morning: 9,
 		evening: 18,
 		timeOfDay: 'morning',
+		icons: 'human',
 		theme: 'light',
 		history: 14,
 		badge: 'today',
@@ -187,6 +190,12 @@ async function resetSettings() {
 	await setTheme();
 }
 
+async function changeIcons(name) {
+	if (!name) name = await getOptions('icons');
+	if (!name || !name.length) name = 'human';
+	document.querySelector('.nap-room img').src = `../icons/${name}/nap-room.png`;
+}
+
 async function exportTabs() {
 	var tabs = await getSnoozedTabs();
 	var now = dayjs();