Update: New popup design

GunmaRamens · Oct 30, 2023 · 07a1206 · 07a1206
1 parent dbf1b10
commit 07a1206
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 49 deletions.
diff --git a/src/components/SwitchItem.tsx b/src/components/SwitchItem.tsx
@@ -1,14 +1,13 @@
 //import { useEffect } from "react";
 
-import classNames from "classnames";
 import { useCallback, useEffect, useState } from "react";
 
 import { WebSites } from "../class";
 import IsTrue from "../utils/isTrue";
 import { FrontConfig } from "./config";
 import { Category } from "./type";
 
-export function SwitchItem({ config, className, category }: { config: FrontConfig; className?: string; category: Category }) {
+export function SwitchItem({ config, category }: { config: FrontConfig; category: Category }) {
     const [enabled, setEnabled] = useState(false);
 
     console.log(`Render SwitchItem with ${config.name}`);
@@ -26,15 +25,8 @@ export function SwitchItem({ config, className, category }: { config: FrontConfi
     }, []);
 
     return (
-        <div className={classNames(className, "my-5 flex")}>
-            <div>
-                <p className="flex items-center justify-center">
-                    <input type="checkbox" className="toggle toggle-info" onChange={genericChangeHandle()} checked={enabled} />
-                </p>
-            </div>
-            <div>
-                <p>{config.name}</p>
-            </div>
-        </div>
+        <p className="flex items-center justify-center">
+            <input type="checkbox" className="toggle toggle-info" onChange={genericChangeHandle()} checked={enabled} />
+        </p>
     );
 }
diff --git a/src/components/Switches.tsx b/src/components/Switches.tsx
diff --git a/src/options/pages/Top.tsx b/src/options/pages/Top.tsx
@@ -1,24 +1,38 @@
 import classNames from "classnames";
 import { useEffect, useState } from "react";
+import { FaGamepad, FaMoon } from "react-icons/fa";
 
 import StorageTool from "../../class/StorageTool";
+import { FrontConfigs } from "../../components/config";
 import CopyTootrip from "../../components/CopyBtn";
 import Heading from "../../components/Heading";
-import { Switches } from "../../components/Switches";
+import { SwitchItem } from "../../components/SwitchItem";
 import IsTrue from "../../utils/isTrue";
 
 export default function Top() {
     return (
         <>
-            <ConfigSection name="Rainbow Websites" desc="虹色にするウェブサイトを設定します">
+            <ConfigSection name="Websites" desc="それぞれのウェブサイトで有効化する機能を設定できます">
                 <div className="flex flex-wrap">
-                    <Switches className="flex-row-reverse items-center child:m-2" category="rainbow" />
-                </div>
-            </ConfigSection>
-
-            <ConfigSection name="Dark Websites" desc="ダークモードを有効化するウェブサイトを設定します">
-                <div className="flex flex-wrap">
-                    <Switches className="flex-row-reverse items-center child:m-2" category="dark" />
+                    {FrontConfigs.map((config) => {
+                        return (
+                            <div className="chiid:p-1 mx-4 my-2 flex w-60 justify-center child:grow" key={config.id}>
+                                <p className="my-0 flex min-w-1/2 items-center justify-center rounded-l-lg bg-base-300 text-center">
+                                    {config.name}
+                                </p>
+                                <div className="items-center rounded-r-lg bg-neutral-focus child:m-2">
+                                    <div className="flex items-center justify-center child:px-1">
+                                        <FaMoon className="grow" />
+                                        <SwitchItem config={config} category="dark" />
+                                    </div>
+                                    <div className="flex items-center justify-center child:px-1">
+                                        <FaGamepad className="grow" />
+                                        <SwitchItem config={config} category="rainbow" />
+                                    </div>
+                                </div>
+                            </div>
+                        );
+                    })}
                 </div>
             </ConfigSection>
 
@@ -35,7 +49,7 @@ export default function Top() {
             <ConfigSection name="群馬大学学務課・メディアセンターの方へ">
                 <p>このソフトウェアについて問題がある場合は以下のメールアドレスまでご連絡ください。</p>
                 <CopyTootrip copyText="[email protected]" className="my-5">
-                    <button className="btn btn-neutral">[email protected]</button>
+                    <button className="btn bg-base-300">[email protected]</button>
                 </CopyTootrip>
             </ConfigSection>
         </>

diff --git a/src/popup/components/Header.tsx b/src/popup/components/Header.tsx
@@ -6,11 +6,13 @@ export default function Header(props: HeaderProps) {
     return (
         <header className="text-center" {...props}>
             <div className="my-4">
-                <p className="rainbow-text text-4xl">Gaming Gunma University</p>
-            </div>
-            <div className="my-4">
-                <p className="text-2xl italic">Configure it!!</p>
+                <p className="rainbow-text text-2xl">Gaming Gunma University</p>
             </div>
+            {/*
+                <div className="my-4">
+                    <p className="text-2xl italic">Configure it!!</p>
+                </div>
+                */}
         </header>
     );
 }
diff --git a/src/popup/components/Layout.tsx b/src/popup/components/Layout.tsx
@@ -4,7 +4,7 @@ import Main from "./Main";
 
 export const Layout = ({ children }: { children?: React.ReactNode }) => {
     return (
-        <div className="flex justify-center border border-double bg-base-100">
+        <div className="flex justify-center border border-double bg-base-100 px-4">
             <div className="flex flex-col">
                 <Header></Header>
                 <Main>{children}</Main>

diff --git a/src/popup/components/Main.tsx b/src/popup/components/Main.tsx
@@ -1,29 +1,64 @@
 import { DetailedHTMLProps, useEffect, useState } from "react";
+import { FaGamepad, FaMoon } from "react-icons/fa";
 
-import { Switches } from "../../components/Switches";
+import { FrontConfig, FrontConfigs } from "../../components/config";
+import { SwitchItem } from "../../components/SwitchItem";
 
 type MainProps = DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
 
 export default function Main(props: MainProps) {
     const [showSwitchClass, setShowSwitchClass] = useState(true);
 
-    useEffect(
-        () =>
+    useEffect(() => {
+        try {
             chrome.tabs.query({ active: true, currentWindow: true }, (e) => {
                 const url = e[0].url;
                 if (url?.startsWith(`chrome-extension://${chrome.runtime.id}/options.html`)) {
                     setShowSwitchClass(false);
                 }
-            }),
-        [],
+            });
+        } catch (e) {
+            console.error(e);
+        }
+    }, []);
+
+    const switches = (
+        <div className="flex flex-col items-center">
+            {FrontConfigs.map((config) => {
+                return (
+                    <div className="my-2 flex w-full grow rounded-lg bg-base-300 p-2" key={config.id}>
+                        <p className="flex w-2/3 items-center justify-center">{config.name}</p>
+                        <Switches config={config} />
+                    </div>
+                );
+            })}
+        </div>
     );
 
-    const switches = <Switches category="rainbow" className="w-full justify-center child:w-1/2 child:text-center" />;
     const hiddenMsg = <p className="text-center text-lg">設定画面を表示中はポップアップを利用できません</p>;
 
+    return <main {...props}>{showSwitchClass ? switches : hiddenMsg}</main>;
+}
+
+function Switches({ config }: { config: FrontConfig }) {
     return (
-        <>
-            <main {...props}>{showSwitchClass ? switches : hiddenMsg}</main>
-        </>
+        <div className="grow">
+            {(
+                [
+                    { category: "dark", icon: <FaMoon size="1.5rem" className="grow px-2" /> },
+                    { category: "rainbow", icon: <FaGamepad size="1.5rem" className="grow px-2" /> },
+                ] as {
+                    category: "dark" | "rainbow";
+                    icon: JSX.Element;
+                }[]
+            ).map((item) => {
+                return (
+                    <div className="flex items-center justify-around" key={item.category}>
+                        {item.icon}
+                        <SwitchItem category={item.category} config={config} />
+                    </div>
+                );
+            })}
+        </div>
     );
 }