Update: Improve options design

GunmaRamens · Apr 9, 2024 · 0bfd869 · 0bfd869
1 parent 4f77c3d
commit 0bfd869
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 29 deletions.
diff --git a/src/options/index.tsx b/src/options/index.tsx
@@ -16,7 +16,6 @@ function Options() {
     );
 }
 
-//window.onload = () =>
 Browser.runtime.onMessage.addListener((message) => {
     console.log("message", message);
     if (message === "reload") {

diff --git a/src/options/pages/Top.tsx b/src/options/pages/Top.tsx
@@ -1,5 +1,4 @@
-import classNames from "classnames";
-import { useEffect, useState } from "react";
+import { ReactNode, useEffect, useState } from "react";
 import { Tooltip } from "react-daisyui";
 import { FaGamepad, FaMoon } from "react-icons/fa";
 import { Link } from "react-router-dom";
@@ -15,8 +14,8 @@ import IsTrue from "@/utils/isTrue";
 
 export default function Top() {
     return (
-        <>
-            <ConfigSection name="Websites" desc="それぞれのウェブサイトで有効化する機能を設定できます">
+        <div className="flex flex-col gap-4">
+            <ConfigSection name="基本設定" desc="それぞれのウェブサイトで有効化する機能を設定できます">
                 <div className="flex flex-wrap items-center">
                     {Array.from(Websites.values()).map((site) => {
                         return (
@@ -57,14 +56,15 @@ export default function Top() {
 
             <HiddenConfigSection />
 
-            <ConfigSection name="Quick Switch" desc="有効化するとアイコンのクリックでオンオフを一括で設定します">
-                <QuickSwitch className="child:m-2" />
-            </ConfigSection>
+            <ConfigSection name="その他">
+                <div className="flex w-fit flex-col child:items-center">
+                    <OtherConfigLayout name="一括設定モード">
+                        <ToggleWithStorage storage={new BrowserStorage("other")} dataKey="quick-switch" />
+                    </OtherConfigLayout>
 
-            <ConfigSection name="SSO">
-                <div className="flex">
-                    <p>二段階認証コードの自動送信</p>
-                    <ToggleWithStorage storage={new StorageTool("sso")} dataKey="auto-2fa" />
+                    <OtherConfigLayout name="二段階認証コードの自動送信">
+                        <ToggleWithStorage storage={new StorageTool("sso")} dataKey="auto-2fa" />
+                    </OtherConfigLayout>
                 </div>
             </ConfigSection>
 
@@ -83,10 +83,17 @@ export default function Top() {
                     を御覧ください。
                 </p>
             </ConfigSection>
-        </>
+        </div>
     );
 }
 
+const OtherConfigLayout = ({ children, name }: { children: ReactNode; name: string }): ReactNode => (
+    <div className="flex gap-2">
+        <p className="flex-1">{name}</p>
+        <div className="">{children}</div>
+    </div>
+);
+
 function ConfigSection({
     children,
     name,
@@ -100,18 +107,12 @@ function ConfigSection({
 }) {
     return (
         <div className={className}>
-            <Heading.h2>{name}</Heading.h2>
-            {desc ? <p>{desc}</p> : null}
-            {children ? children : null}
-        </div>
-    );
-}
+            <div className="flex items-center gap-2">
+                <Heading.h2 className="text-accent">{name}</Heading.h2>
+                {desc ? <p>{desc}</p> : null}
+            </div>
 
-function QuickSwitch({ className }: { className?: string }) {
-    return (
-        <div className={classNames(className, "my-5 flex")}>
-            <ToggleWithStorage storage={new BrowserStorage("other")} dataKey="quick-switch" />
-            <p>Quick Switch</p>
+            {children ? children : null}
         </div>
     );
 }

diff --git a/src/options/pages/Wanted.tsx b/src/options/pages/Wanted.tsx
@@ -5,21 +5,21 @@ import Heading from "@/components/Heading";
 export default function Wanted() {
     return (
         <>
-            <Heading.h1>開発者募集</Heading.h1>
+            <Heading.h1 className=" text-accent">開発者募集</Heading.h1>
+            <p>この拡張機能はOSSとしてGitHub上に公開されており、現在Contributerを募集しています。</p>
             <p>
-                この拡張機能はGitHub上でMITライセンスの基で公開されており、現在Contributerを募集しています。
                 以下に技術的な概要を掲載しますので、興味のある方はぜひ
                 <Link to="/about" className="link link-info">
                     開発者までご連絡
                 </Link>
                 ください。
             </p>
 
-            <Heading.h2>概要</Heading.h2>
-            <p>群馬大学に所属しており、ウェブ技術に興味のある人。ラーメンが好きな人大歓迎です。</p>
+            <Heading.h2 className="text-accent">概要</Heading.h2>
+            <p>群馬大学に所属しており、ウェブ技術に興味のある人やラーメンが好きな人大歓迎です。</p>
             <p>現開発者のお財布と気分次第で、報酬としてラーメンを奢るかもしれません。</p>
 
-            <Heading.h2>技術</Heading.h2>
+            <Heading.h2 className="text-accent">技術</Heading.h2>
             <div className="flex child:mx-4">
                 <div>
                     <p>現在使用しているもの</p>