schoolbox web extension :)
refactor: remove bloat
+24
-24
+2
-2
src/options/pages/Plugins.svelte
+2
-2
src/options/pages/Plugins.svelte
···
42
42
<div class="plugins-container">
43
43
{#each populatedPlugins as plugin (plugin.id)}
44
44
<div class="my-4 group">
45
-
<label class="relative flex justify-between items-center group py-2 text-xl text-ctp-text">
45
+
<label class="slider-label group">
46
46
<h4 class="text-ctp-text">{plugin.name}</h4>
47
47
<input
48
48
plugin-id={plugin.id}
···
52
52
on:change={() => togglePlugin(plugin.id, plugin.toggled)} />
53
53
<span class="slider small"></span>
54
54
</label>
55
-
<div class="text-ctp-overlay1 group-hover:text-ctp-subtext0 transition-colors duration-500 ease-in-out">
55
+
<div class="slider-description">
56
56
{plugin.description}
57
57
</div>
58
58
</div>
+10
-6
src/options/pages/Snippets.svelte
+10
-6
src/options/pages/Snippets.svelte
···
73
73
74
74
async function removeSnippet(snippetId) {
75
75
delete snippets.user[snippetId];
76
-
snippets.user = {...snippets.user}; // force reactivity
76
+
snippets.user = snippets.user; // force reactivity
77
77
await browser.storage.local.set({ snippets: snippets });
78
78
}
79
79
</script>
···
84
84
<div class="snippets-container w-full">
85
85
{#each defaultSnippets as snippet (snippet.id)}
86
86
<div class="my-4 group w-full">
87
-
<label class="relative flex justify-between items-center group py-2 text-xl text-ctp-text">
87
+
<label class="slider-label group">
88
88
<h4 class="text-ctp-text">{snippet.name}</h4>
89
89
<input
90
90
snippet-id={snippet.id}
···
94
94
on:change={() => toggleSnippet(snippet.id, snippet.toggled)} />
95
95
<span class="slider small"></span>
96
96
</label>
97
-
<div class="text-ctp-overlay1 group-hover:text-ctp-subtext0 transition-colors duration-500 ease-in-out">
97
+
<div class="slider-description">
98
98
{snippet.description}
99
99
</div>
100
100
</div>
···
125
125
<div class="user-snippets-container w-full">
126
126
{#each Object.entries(snippets.user) as [key, snippet] (key)}
127
127
<div class="my-4 group w-full">
128
-
<label class="relative flex justify-between items-center group py-2 text-xl text-ctp-text">
128
+
<label class="slider-label group">
129
129
<h4 class="text-ctp-text">{snippet.name}</h4>
130
130
<input
131
131
bind:checked={snippet.toggled}
···
134
134
on:change={() => toggleSnippet(key, snippet.toggled, true)} />
135
135
<span class="slider small"></span>
136
136
</label>
137
-
<div class="text-ctp-overlay1 group-hover:text-ctp-subtext0 transition-colors duration-500 ease-in-out">
137
+
<div class="slider-description">
138
138
{snippet.description}
139
139
</div>
140
-
<button class="xsmall hover:bg-ctp-red" on:click={() => { removeSnippet(key); }}>Remove</button>
140
+
<button
141
+
class="xsmall hover:bg-ctp-red"
142
+
on:click={() => {
143
+
removeSnippet(key);
144
+
}}>Remove</button>
141
145
<a href={snippet.url} target="_blank"><button class="xsmall">Gist</button></a>
142
146
</div>
143
147
{/each}
+9
-1
src/options/popup.css
+9
-1
src/options/popup.css
···
24
24
@apply absolute left-1/2 h-full w-full -translate-x-1/2 appearance-none rounded-md;
25
25
}
26
26
27
+
.slider-label {
28
+
@apply relative flex items-center justify-between py-2 text-xl text-ctp-text;
29
+
}
30
+
31
+
.slider-description {
32
+
@apply text-ctp-overlay1 transition-colors duration-500 ease-in-out group-hover:text-ctp-subtext0;
33
+
}
34
+
27
35
#flavours button {
28
36
@apply bg-ctp-surface0;
29
37
}
···
73
81
}
74
82
75
83
button {
76
-
@apply transition duration-500 ease-in-out bg-ctp-surface0 text-ctp-text hover:text-ctp-crust hover:bg-ctp-pink;
84
+
@apply bg-ctp-surface0 text-ctp-text transition duration-500 ease-in-out hover:bg-ctp-pink hover:text-ctp-crust;
77
85
}
78
86
79
87
#palette {