From ae98006ee20447534cf5503158b83e2d2369b883 Mon Sep 17 00:00:00 2001
From: jaem1n207 <roy.jm.lee@gmail.com>
Date: Tue, 7 May 2024 18:03:21 +0900
Subject: [PATCH] feat: options page

---
 .eslintrc               |  1 +
 shim.d.ts               |  6 ++++++
 src/options/Options.tsx | 13 ++++++-------
 unocss.config.ts        | 12 ++++++------
 4 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index c0e0826..bbcfaaa 100644
--- a/.eslintrc
+++ b/.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",
   },
 }
diff --git a/shim.d.ts b/shim.d.ts
index 03f8ed1..1467ef6 100644
--- a/shim.d.ts
+++ b/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
diff --git a/src/options/Options.tsx b/src/options/Options.tsx
index da05b89..0201e37 100644
--- a/src/options/Options.tsx
+++ b/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>
   );
 };
diff --git a/unocss.config.ts b/unocss.config.ts
index 5ce73cd..4d9bcaf 100644
--- a/unocss.config.ts
+++ b/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()],
 });