style: improve spotlight look and feel

Author: h16nning

src/app/shell/Spotlight/Spotlight.module.css

@@ -1,25 +1,36 @@
-.spotlightButton{
+.content {
+    border: solid 1px
+        light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+}
+
+.actionLabel {
+    font-size: var(--mantine-font-size-sm);
+}
+
+.spotlightButton {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    
+
     height: 2.5rem;
     padding: 0rem 0.375rem;
 
-    border: 0.0625rem solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+    border: 0.0625rem solid
+        light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
     border-radius: var(--mantine-radius-sm);
-    background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-6));
-    
-    font-size: var(--mantine-font-size-sm);
+    background-color: light-dark(
+        var(--mantine-color-white),
+        var(--mantine-color-dark-7)
+    );
 
+    font-size: var(--mantine-font-size-sm);
 
     .spotlightButtonSection {
         display: flex;
         align-items: center;
         gap: 0.25rem;
     }
 
-
     &.minimalMode {
         width: 2.5rem;
         padding: 0.5rem;
@@ -30,24 +41,30 @@
         }
     }
 
+    &:hover {
+        background-color: light-dark(
+            var(--mantine-color-gray-1),
+            var(--mantine-color-dark-6)
+        );
+    }
 }
 
 .overlay {
-  @mixin light {
-    background: linear-gradient(
-      165deg,
-      rgba(173, 181, 189, 0.2) 80%,
-      rgba(117, 183, 151, 0.2) 100%
-    );
-  }
+    @mixin light {
+        background: linear-gradient(
+            165deg,
+            rgba(173, 181, 189, 0.2) 80%,
+            rgba(117, 183, 151, 0.2) 100%
+        );
+        backdrop-filter: none;
+    }
 
-  @mixin dark {
-    background: rgba(0, 0, 0, 0.3);
-    backdrop-filter: blur(3px);
-  }
+    @mixin dark {
+        background: rgba(0, 0, 0, 0.3);
+        backdrop-filter: none;
+    }
 }
 
-
 .empty {
-  font-size: var(--mantine-font-size-sm)
-}
+    font-size: var(--mantine-font-size-sm);
+}

src/app/shell/Spotlight/Spotlight.tsx

@@ -163,6 +163,7 @@ export default function SpotlightCard({
           leftSection: <IconSearch size={18} stroke={2} />,
           placeholder: "Search...",
         }}
+        transitionProps={{transition: "pop", duration: 100}}
       />
     </>
   );