feat: options page

.eslintrc

@@ -33,6 +33,7 @@
     "react-hooks/exhaustive-deps": "error",
     "react/react-in-jsx-scope": "off",
     "react/jsx-uses-react": "off",
+    "react/no-unknown-property": "off",
     "@typescript-eslint/no-explicit-any": "off",
   },
 }

shim.d.ts

@@ -1,5 +1,11 @@
+import type { AttributifyAttributes } from '@unocss/preset-attributify';
 import type { ProtocolWithReturn } from 'webext-bridge';
 
+declare module 'react' {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface HTMLAttributes<T> extends AttributifyAttributes {}
+}
+
 declare module 'webext-bridge' {
   export interface ProtocolMap {
     // define message protocol types

src/options/Options.tsx

@@ -1,20 +1,19 @@
 import { AppearanceSwitch } from '~/features/theme';
 import { ThemeCustomizer } from '~/widgets/theme';
 import IconSliders from '~icons/pixelarticons/sliders';
-import IconZap from '~icons/pixelarticons/zap';
 
 const Options = () => {
   return (
-    <main className="px-4 py-10 text-center transition-colors">
+    <main className="flex-1">
+      <div border="x-2" text="sm white primary/90" className="container relative">
+        <section className="mx-auto py-2 max-w-screen-lg flex flex-col items-center gap-2 md:pb-8 lg:pb-20">
+          <h1 className="text-center text-3xl">Dynamic Scrollbar Options</h1>
+        </section>
+      </div>
       <IconSliders className="icon-btn mx-2 text-2xl" />
-      <div>Options</div>
       <p className="mt-2 opacity-50">This is the options page</p>
       <ThemeCustomizer />
       <AppearanceSwitch />
-
-      <div className="mt-4 flex items-center">
-        Powered by Vite <IconZap className="align-middle" />
-      </div>
     </main>
   );
 };

unocss.config.ts

@@ -38,11 +38,11 @@ export default defineConfig({
       },
     ],
   ],
-  shortcuts: [
-    {
-      'icon-btn':
-        'text-size-sm inline-block cursor-pointer select-none opacity-75 transition-color hover:opacity-100 hover:color-primary/90',
-    },
-  ],
+  shortcuts: {
+    'icon-btn':
+      'text-size-sm inline-block cursor-pointer select-none opacity-75 transition-color hover:opacity-100 hover:color-primary/90',
+    container:
+      'w-full mx-auto px-8 sm:max-w-screen-sm md:max-w-screen-md lg:max-w-screen-lg xl:max-w-screen-xl 2xl:max-w-screen-2xl',
+  },
   transformers: [transformerDirectives()],
 });