Fix CSS bug in search, update docs

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "cup"
-version = "2.3.1"
+version = "2.4.0"
 edition = "2021"
 
 [dependencies]

docs/pages/docs/configuration.mdx

@@ -1,5 +1,5 @@
 import { Steps, Callout, Card, Cards } from "nextra-theme-docs";
-import { IconPaint, IconLockOpen, IconKey } from '@tabler/icons-react';
+import { IconPaint, IconLockOpen, IconKey, IconPlug } from '@tabler/icons-react';
 
 # Configuration
 
@@ -13,7 +13,8 @@ For example, if using Podman, you might do
 $ cup -s /run/user/1000/podman/podman.sock check
 ```
 
-This option will hopefully be moved to the configuration file soon.
+This option is also available in the configuration file and it's best to put it there.
+<Card icon={<IconPlug />} title="Custom Docker socket" href="/docs/configuration/socket" />
 
 ## Configuration file
 

docs/pages/docs/configuration/socket.mdx

@@ -0,0 +1,10 @@
+# Socket
+
+If you need to specify a custom Docker socket (e.g. because you're using Podman), you can use the `socket` option. Here's an example:
+
+```json
+{
+    "socket": "/run/user/1000/podman/podman.sock"
+    // Other options
+}
+```

web/src/components/Search.tsx

@@ -25,19 +25,19 @@ export default function Search({
   return (
     <div className={`w-full px-6 text-${theme}-500`}>
       <div
-        className={`flex items-center w-full rounded-md border border-${theme}-200 dark:border-${theme}-700 px-2 gap-1 bg-${theme}-800 flex-nowrap peer`}
+        className={`flex items-center w-full rounded-md border border-${theme}-300 dark:border-${theme}-700 px-2 gap-1 bg-${theme}-200 dark:bg-${theme}-800 flex-nowrap peer`}
       >
         <IconSearch className="size-5" />
         <div className="w-full">
           <input
-            className={`w-full h-10 text-sm text-${theme}-400 focus:outline-none peer bg-transparent placeholder:text-${theme}-500`}
+            className={`w-full h-10 text-sm text-${theme}-600 dark:text-${theme}-400 focus:outline-none peer bg-transparent placeholder:text-${theme}-500`}
             placeholder="Search"
             onChange={handleChange}
             value={searchQuery}
           ></input>
         </div>
         {showClear && (
-          <button onClick={handleClear} className={`hover:text-${theme}-400`}>
+          <button onClick={handleClear} className={`hover:text-${theme}-600 dark:hover:text-${theme}-400`}>
             <IconX className="size-5" />
           </button>
         )}

web/tailwind.config.js

@@ -20,12 +20,16 @@ export default {
     },
     {
       pattern: /bg-(gray|neutral)-800/,
-      variants: ["before:dark", "after:dark"],
+      variants: ["before:dark", "after:dark", "dark"],
     },
     {
-      pattern: /text-(gray|neutral)-400/,
+      pattern: /text-(gray|neutral)-600/,
       variants: ["hover"]
     },
+    {
+      pattern: /text-(gray|neutral)-400/,
+      variants: ["hover", "dark", "dark:hover"]
+    },
     {
       pattern: /text-(gray|neutral)-500/,
       variants: ["dark", "placeholder"],
@@ -35,7 +39,7 @@ export default {
       variants: ["dark"],
     },
     {
-      pattern: /border-(gray|neutral)-200/,
+      pattern: /border-(gray|neutral)-300/,
     },
     {
       pattern: /border-(gray|neutral)-700/,