bug fixes, update colors

Author: Efnilite

src/components/docs/Doc.astro

@@ -70,7 +70,8 @@ function color(): string {
         <div class="flex flex-row gap-4 flex-shrink-0">
             {docType.deprecated ? <h2 class="opacity-50 line-through">{docType.name}</h2> : <h2>{docType.name}</h2>}
             <div class="flex-auto sm:flex-0"></div>
-            <button class="share flex sm:hidden">
+
+            <button class="share flex sm:hidden w-[35px] h-[35px]">
                 <p class="p-2 hidden absolute w-64 my-auto shadow-lg 
                     rounded-full bg-l-icon-hover dark:bg-d-icon-hover">Copied to clipboard</p>
                 <svg width="18" height="19" viewBox="0 0 18 19" xmlns="http://www.w3.org/2000/svg">
@@ -126,8 +127,7 @@ function color(): string {
         {[docType.examples]
             .filter(x => x !== null)
             .map(_ => 
-            <button class="examples"
-                style={{ backgroundColor: `#${color()}` }}>
+            <button class="examples bg-l-icon-hover dark:bg-d-icon-hover">
                 <svg class="transition my-auto fill-white" width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
                     <path d="M8.60627 10.8563L5.88752 8.1375C5.85002 8.1 5.82202 8.0595 5.80352 8.016C5.78502 7.9725 5.77552 7.9255 5.77502 7.875C5.77502 7.775 5.80952 7.6875 5.87852 7.6125C5.94752 7.5375 6.03802 7.5 6.15002 7.5H11.85C11.9625 7.5 12.0533 7.5375 12.1223 7.6125C12.1913 7.6875 12.2255 7.775 12.225 7.875C12.225 7.9 12.1875 7.9875 12.1125 8.1375L9.39377 10.8563C9.33127 10.9188 9.26877 10.9625 9.20627 10.9875C9.14377 11.0125 9.07502 11.025 9.00002 11.025C8.92502 11.025 8.85627 11.0125 8.79377 10.9875C8.73127 10.9625 8.66877 10.9188 8.60627 10.8563Z"/>
                     </svg>

src/components/docs/DocsFilters.astro

@@ -209,58 +209,71 @@ for (let i = latestMinor + 1; i > latestMinor - 4; i--) {
 
             element.classList.remove("hidden-by-type", "hidden-by-changed", "hidden-by-supported");
 
-            switch (attribute) {
-                case "type":
-                    if (filter.types.length === 0) {
-                        return;
-                    }
+            checkType(element);
+            checkSupported(element);
+            checkSince(element);
+        });
+    }
+    
+    /**
+     * Check if the element matches the current type filter.
+     * @param element The element to check.
+     */
+    function checkType(element: Element) {
+        if (filter.types.length === 0) {
+            return;
+        }
 
-                    for (const t of filter.types) {
-                        if (element.getAttribute("data-type")?.includes(types[t])) {
-                            return;
-                        }
-                    }
+        for (const t of filter.types) {
+            if (element.getAttribute("data-type")?.includes(types[t])) {
+                return;
+            }
+        }
 
-                    element.classList.add("hidden-by-type");
-                    break;
-                case "supported":
-                    if (filter.supported === "") {
-                        return;
-                    }
-
-                    const since1 = element.getAttribute("data-since");
-                    if (since1 === null) {
-                        return;
-                    }
-
-                    const minor1 = parseInt(filter.supported.match(/\d+\.(\d+)/)!![1], 10);
-                    since1.matchAll(/\d+\.(\d+)/g).forEach((match) => {
-                        const otherMinor = parseInt(match[1], 10);
-                    
-                        if (otherMinor > minor1) {
-                            element.classList.add("hidden-by-supported");
-                            return;
-                        }
-                    });
-                    break;
-                case "changed":
-                    const since = element.getAttribute("data-since");
-                    if (since === null) {
-                        return;
-                    }
-
-                    if (!since.includes(filter.changed)) {
-                        element.classList.add("hidden-by-changed");
-                        return;
-                    }
-                    break;
-                default:
-                    console.warn(`Unknown filter type: ${button.getAttribute("data-type")}`);
-                    return;
+        element.classList.add("hidden-by-type");
+    }
+
+    /**
+     * Check if the element matches the current supported filter.
+     * @param element The element to check.
+     */
+    function checkSupported(element: Element) {
+        if (filter.supported === "") {
+            return;
+        }
+
+        const since1 = element.getAttribute("data-since");
+        if (since1 === null) {
+            return;
+        }
+
+        const minor1 = parseInt(filter.supported.match(/\d+\.(\d+)/)!![1], 10);
+        since1.matchAll(/\d+\.(\d+)/g).forEach((match) => {
+            const otherMinor = parseInt(match[1], 10);
+        
+            if (otherMinor > minor1) {
+                element.classList.add("hidden-by-supported");
+                return;
             }
         });
     }
-    
+
+    /**
+     * Check if the element matches the current since filter.
+     * @param element The element to check.
+     */
+    function checkSince(element: Element) {
+        const since = element.getAttribute("data-since");
+        if (since === null) {
+            return;
+        }
+
+        if (!since.includes(filter.changed)) {
+            element.classList.add("hidden-by-changed");
+            return;
+        }
+    }
+
     /**
      * Reset all filter buttons to their default state.
      */
@@ -324,8 +337,8 @@ for (let i = latestMinor + 1; i > latestMinor - 4; i--) {
             button.addEventListener("click", () => handleClick(button as HTMLButtonElement));
         });
 
-        (buttons[0] as HTMLButtonElement).click();
-        (buttons[0] as HTMLButtonElement).click();
+        (buttons[1] as HTMLButtonElement).click();
+        (buttons[1] as HTMLButtonElement).click();
     });
 </script>
 

src/style.css

@@ -37,7 +37,7 @@
     --color-l-search-text: #333333;
     --color-d-search-text: #c2c2c2;
 
-    --color-l-icon-hover: #C8C8C8;
+    --color-l-icon-hover: #929292;
     --color-d-icon-hover: #373737;
 
     --color-l-bg-secondary: #DCDCDC;