Merge pull request #12 from bmspereira-07/main

Dark and light mode

resources/css/index.css

@@ -1 +1,25 @@
 @import '../../vendor/filament/filament/resources/css/theme.css';
+
+.theme-inspector-container {
+    @apply fixed z-[9999] items-center hidden gap-2 bg-transparent;
+}
+
+.theme-inspector-container > div {
+    @apply flex items-center px-[10px] py-[5px] overflow-hidden bg-white rounded-[5px] ring-1 ring-gray-950/5 whitespace-nowrap dark:divide-white/5 dark:bg-gray-900 dark:ring-white/10;
+}
+
+.theme-inspector-container.is-visible {
+    @apply flex;
+}
+
+.theme-inspector-container > div > .class-text {
+    @apply text-black dark:text-gray-200 me-3;
+}
+
+.theme-inspector-container > div > button {
+    @apply p-2 transition duration-300 ease-in-out bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-opacity-60;
+}
+
+.theme-inspector-container > div > button > svg {
+    @apply fill-white dark:fill-none
+}

resources/js/index.js

@@ -1,35 +1,20 @@
+
 function createPopup() {
     const popup = document.createElement('div');
-    popup.style.cssText = `
-        position: fixed; 
-        display: none; 
-        z-index: 9999;`;
+    popup.classList.add('theme-inspector-container');
 
     document.body.appendChild(popup);
     return popup;
 }
 
 function createCopyableItem(text) {
-    const item = document.createElement('div'); // Each item is a separate div
-    item.style.cssText = `
-        background: rgba(0, 0, 0, 0.8); 
-        padding: 10px 15px; 
-        border-radius: 5px; 
-        margin-left: 5px;
-        margin-bottom: 10px;
-        display: flex; 
-        align-items: center;
-        white-space: nowrap;           /* Prevent text wrapping */
-        overflow: hidden;              /* Hide overflowed text */
-        text-overflow: ellipsis;       /* Show ellipsis for overflowed text */
-    `;
-
     const textNode = document.createElement('span');
+    const copyButton = document.createElement('button');
+    const item = document.createElement('div');
+
+    textNode.classList.add('class-text');
     textNode.textContent = text;
-    textNode.style.color = 'white';
-    textNode.style.marginRight = '10px';
 
-    const copyButton = document.createElement('button');
     const copyIcon = `
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="fi-btn-icon transition duration-75 h-5 w-5 text-gray-400 dark:text-gray-500">
             <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75" />
@@ -41,14 +26,6 @@ function createCopyableItem(text) {
         </svg>`;
 
     copyButton.innerHTML = copyIcon;
-    copyButton.style.cssText = `
-        background: rgba(0, 0, 0, 0.5); 
-        color: white; 
-        border: none; 
-        cursor: pointer; 
-        padding: 5px 10px; 
-        font-size: 12px; 
-        border-radius: 5px;`;
 
     // Copy button functionality
     copyButton.addEventListener('click', () => {
@@ -79,7 +56,7 @@ function showPopup(popup, classes, x, y) {
     // Set the popup position based on mouse coordinates
     popup.style.left = `${x + 10}px`;
     popup.style.top = `${y + 10}px`;
-    popup.style.display = 'flex';
+    popup.classList.add('is-visible')
 
     // Ensure popup stays within the viewport
     const popupRect = popup.getBoundingClientRect();
@@ -98,7 +75,7 @@ function showPopup(popup, classes, x, y) {
 }
 
 function hidePopup(popup) {
-    popup.style.display = 'none';
+    popup.classList.remove('is-visible');
 }
 
 const popup = createPopup();
@@ -132,4 +109,4 @@ document.addEventListener('keydown', (e) => {
 
 document.addEventListener('keyup', (e) => {
     if (e.key === 'Alt' || e.key === 'Meta') isFrozen = false;
-});
+});

src/FilamentThemeInspectorPlugin.php

@@ -5,6 +5,7 @@
 use Closure;
 use Filament\Contracts\Plugin;
 use Filament\Panel;
+use Filament\Support\Assets\Css;
 use Filament\Support\Assets\Js;
 use Filament\Support\Concerns\EvaluatesClosures;
 use Filament\Support\Facades\FilamentAsset;
@@ -37,6 +38,7 @@ public function register(Panel $panel): void
         if (! $this->isDisabled()) {
             FilamentAsset::register([
                 Js::make('filament-theme-inspector-scripts', __DIR__ . '/../resources/dist/filament-theme-inspector.js'),
+                Css::make('filament-theme-inspector-styles', __DIR__ . '/../resources/dist/filament-theme-inspector.css'),
             ]);
         }
     }