Skip to content

Commit 44a4cda

Browse files
RoshanjosseyRoshanjossey
committed
fix tag filter dropdown
1 parent 93e6786 commit 44a4cda

5 files changed

Lines changed: 63 additions & 38 deletions

File tree

‎src/app.css‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,18 @@
1-
@import "tailwindcss";
1+
@import "tailwindcss";
2+
@theme {
3+
--color-green-50: #F2FAF8;
4+
--color-green-100: #E6F5F0;
5+
--color-green-200: #C3E6D9;
6+
--color-green-300: #4AB475;
7+
--color-green-400: #6BB590;
8+
--color-green-500: #3D9561;
9+
--color-green-600: #318552;
10+
--color-green-700: #2D804E;
11+
--color-green-800: #16592D;
12+
--color-green-900: #0C421C;
13+
--color-green-950: #052B0F;
14+
15+
--primaryColor: #3D9561;
16+
--primaryColorDark: #2D804E;
17+
--primaryColorLight: #4AB475;
18+
}

‎src/components/Header.svelte‎

Lines changed: 42 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,43 @@
11
<script>
2-
import DarkModeToggle from "../components/DarkModeToggle.svelte";
3-
import { icons, totalVersions, isDarkMode } from "$lib/stores/iconStore";
2+
import { icons, totalVersions } from "$lib/stores/iconStore";
3+
4+
const copyToClipboard = async (text) => {
5+
if (navigator.clipboard) {
6+
navigator.clipboard.writeText(text);
7+
}
8+
}
49
</script>
510

611
<header
712
class="flex flex-col justify-center items-center py-8 px-4 bg-base-300 bg-white dark:bg-gray-800 dark:text-white"
813
>
914
<div
1015
id="title"
11-
class="mb-2 text-center text-8xl sm:text-9xl font-damion text-green-600"
16+
class="mb-2 text-center text-8xl sm:text-9xl font-damion text-green-500"
1217
>
1318
Devicon
1419
<span class="block text-5xl -mt-6 sm:text-6xl sm:inline sm:mt-auto">
1520
v2.15.1
1621
</span>
1722
</div>
18-
<p class="mt-4 text-xl text-center sm:mt-auto text-gray-400">
23+
<p class="mt-4 text-xl text-center sm:mt-auto dark:text-gray-400">
1924
Icons about programming languages, software development, and graphic design
2025
tools.
2126
</p>
22-
<div class="flex flex-row my-2 text-gray-400">
27+
<div class="flex flex-row my-2 text-black dark:text-gray-400">
2328
<p class="flex flex-row items-center mr-2">
2429
<i class="devicon-github-original text-2xl mr-1"></i>
2530
<a href="https://github.com/devicons/devicon/" target="_blank">
2631
Github
2732
</a>
2833
</p>
2934
<p class="flex flex-row items-center ml-2">
30-
<svg viewBox="0 0 200 100" width="37" height="25" class="-mr-2">
35+
<svg
36+
viewBox="0 0 200 100"
37+
width="37"
38+
height="25"
39+
class="-mr-2 fill-current"
40+
>
3141
<path
3242
d="M108.357 8.20656C100.199 4.4081 91.4506 1.60956 82.3035 0.0067237C82.1369 -0.0242106 81.9705 0.0530959 81.8847 0.207712C80.7595 2.23831 79.5132 4.88739 78.6405 6.96955C68.8022 5.47498 59.0143 5.47498 49.3777 6.96955C48.5048 4.84111 47.2133 2.23831 46.0831 0.207712C45.9973 0.0582546 45.8308 -0.0190518 45.6643 0.0067237C36.5222 1.60444 27.7737 4.40298 19.6103 8.20656C19.5396 8.23748 19.4791 8.28906 19.4389 8.35602C2.84476 33.5121 -1.70107 58.0499 0.528961 82.2835C0.539051 82.402 0.604639 82.5154 0.695456 82.5875C11.6438 90.746 22.2491 95.699 32.6575 98.982C32.8241 99.0335 33.0006 98.9717 33.1066 98.8325C35.5687 95.4208 37.7634 91.8233 39.6452 88.0403C39.7563 87.8187 39.6503 87.5558 39.4233 87.4682C35.942 86.1282 32.6272 84.4944 29.4386 82.6391C29.1863 82.4896 29.1662 82.1236 29.3982 81.9483C30.0692 81.4381 30.7404 80.9073 31.3811 80.3713C31.497 80.2734 31.6585 80.2527 31.7948 80.3146C52.7429 90.0194 75.4216 90.0194 96.1224 80.3146C96.2587 80.2476 96.4202 80.2683 96.5412 80.3661C97.1821 80.9021 97.8531 81.4381 98.5292 81.9483C98.7612 82.1236 98.7461 82.4896 98.4938 82.6391C95.3052 84.5305 91.9904 86.1282 88.5041 87.4631C88.2771 87.5507 88.1761 87.8187 88.2872 88.0403C90.2094 91.818 92.4041 95.4155 94.8208 98.8274C94.9217 98.9717 95.1033 99.0335 95.2699 98.982C105.729 95.699 116.334 90.746 127.282 82.5875C127.378 82.5154 127.439 82.4071 127.449 82.2886C130.118 54.2719 122.979 29.9354 108.524 8.36114C108.488 8.28906 108.428 8.23748 108.357 8.20656ZM42.7735 67.5278C36.4667 67.5278 31.27 61.6524 31.27 54.4369C31.27 47.2214 36.3659 41.3461 42.7735 41.3461C49.2313 41.3461 54.3776 47.273 54.2767 54.4369C54.2767 61.6524 49.1808 67.5278 42.7735 67.5278ZM85.3053 67.5278C78.9987 67.5278 73.8021 61.6524 73.8021 54.4369C73.8021 47.2214 78.8978 41.3461 85.3053 41.3461C91.7634 41.3461 96.9095 47.273 96.8087 54.4369C96.8087 61.6524 91.7634 67.5278 85.3053 67.5278Z"
3343
fill="#A6ADBB"
@@ -37,38 +47,41 @@
3747
>
3848
</p>
3949
</div>
40-
<div class="stats mt-2 mb-8 flex rounded-2xl dark:bg-gray-700">
41-
<div class="stat place-items-center p-4 border-r border-gray-600">
42-
<div class="stat-title text-gray-400">Total Icons</div>
43-
<div class="stat-value text-4xl font-bold text-green-600">
50+
<div class="stats mt-2 mb-8 flex rounded-2xl bg-gray-200 dark:bg-gray-700">
51+
<div
52+
class="stat place-items-center p-4 border-r border-gray-50 dark:border-gray-600"
53+
>
54+
<div class="stat-title dark:text-gray-400">Total Icons</div>
55+
<div class="stat-value text-4xl font-bold text-green-500">
4456
{$icons.length}
4557
</div>
4658
</div>
4759
<div class="stat place-items-center p-4">
48-
<div class="stat-title text-gray-400">Total Versions</div>
49-
<div class="stat-value text-4xl font-bold text-green-600">{$totalVersions}</div>
60+
<div class="stat-title dark:text-gray-400">Total Versions</div>
61+
<div class="stat-value text-4xl font-bold text-green-500">
62+
{$totalVersions}
63+
</div>
5064
</div>
5165
</div>
52-
<p class="text-center text-gray-400">
66+
<p class="text-center dark:text-gray-400">
5367
For CSS usage, paste the code in the &lt;head&gt; of your HTML
5468
</p>
55-
<app-code-snippet>
56-
<div
57-
class="code-snippet relative rounded-md w-auto p-4 pr-10 mt-4 text-gray-400 bg-gray-900"
58-
>
59-
<div class="tooltip absolute right-2 top-4 w-7">
60-
<button
61-
class="material-symbols-outlined copy rounded-full text-xl hover:cursor-pointer hover:hover-text-color"
62-
>
63-
content_copy
64-
</button>
65-
</div>
66-
<code class="break-all">
67-
&lt;link rel="stylesheet"
68-
href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.15.1/devicon.min.css"&gt;
69-
</code>
69+
<div
70+
class="code-snippet relative rounded-md w-auto p-4 pr-10 mt-4 dark:text-gray-400 bg-gray-200 dark:bg-gray-900"
71+
>
72+
<div class="tooltip absolute right-2 top-4 w-7">
73+
<button
74+
class="material-symbols-outlined copy rounded-full text-xl hover:cursor-pointer hover:hover-text-color"
75+
on:click={() => copyToClipboard('<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css" />')}
76+
>
77+
content_copy
78+
</button>
7079
</div>
71-
</app-code-snippet>
80+
<code class="break-all">
81+
&lt;link rel="stylesheet"
82+
href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.15.1/devicon.min.css"&gt;
83+
</code>
84+
</div>
7285
</header>
7386

7487
<style>

‎src/components/IconGrid.svelte‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,12 @@
33
44
export let icons = [];
55
6-
function getIconUrl(icon, version) {
7-
return `https://cdn.jsdelivr.net/gh/devicons/devicon/icons/${icon.name}/${icon.name}-${version}.svg`;
8-
}
96
</script>
107

118
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
129
{#each icons as icon}
1310
<div
14-
class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md hover:shadow-lg transition-shadow cursor-pointer"
11+
class="bg-white dark:bg-gray-800 hover:bg-green-500 hover:text-gray-800 p-4 rounded-lg shadow-md hover:shadow-lg transition-shadow cursor-pointer"
1512
on:click={() => openIconModal(icon)}
1613
on:keydown={(e) => e.key === 'Enter' && openIconModal(icon)}
1714
tabindex="0"
@@ -23,7 +20,7 @@
2320
</div>
2421

2522
<div class="text-center">
26-
<h3 class="font-medium text-sm truncate dark:text-white">{icon.name}</h3>
23+
<h3 class="font-medium text-sm truncate">{icon.name}</h3>
2724
</div>
2825
</div>
2926
{/each}

‎src/components/SearchFilter.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
</script>
2020

2121
<div
22-
class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md flex gap-4 justify-between"
22+
class=" py-4 rounded-lg flex gap-4 justify-between"
2323
>
2424
<div class="mb-4 grow">
2525
<input

‎src/routes/+page.svelte‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,9 @@
33
import IconGrid from "../components/IconGrid.svelte";
44
import SearchFilter from "../components/SearchFilter.svelte";
55
import IconModal from "../components/IconModal.svelte";
6-
import DarkModeToggle from "../components/DarkModeToggle.svelte";
76
import {
87
initializeStore,
98
filteredIcons,
10-
isDarkMode,
119
isModalOpen,
1210
} from "$lib/stores/iconStore";
1311

0 commit comments

Comments
 (0)