updated NonTokenModalContent & Scanner style

sitcon-tw · Mar 3, 2024 · d21e7d7 · d21e7d7
1 parent 7faef97
commit d21e7d7
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 39 deletions.
diff --git a/src/components/NonTokenModalContent.tsx b/src/components/NonTokenModalContent.tsx
@@ -5,6 +5,7 @@ import Scanner from "./Scanner";
 import { getPlayerPuzzle } from "@/lib/getPlayerPuzzle";
 import { useLocalStorage } from "usehooks-ts";
 
+import { KeyRound, FormInput, QrCode } from "lucide-react";
 const NonTokenModalContent = () => {
   const [isModalOpen, setModalOpen] = useState(true);
   const [manualInputModal, setManualInputModal] = useState<boolean>(false);
@@ -35,72 +36,72 @@ const NonTokenModalContent = () => {
     <div>
       <Dialog open={isModalOpen} setOpen={setModalOpen}>
         <div className="flex flex-col gap-4 break-all p-6">
-          <p className="text-1xl mt-0 font-bold">
+          <KeyRound size={48} strokeWidth={2} className="m-auto" />
+          <p className="text-center font-bold">
             請檢查 OPass 是否已成功報到，或透過下列方式進入遊戲。
           </p>
-          <div className="flex flex-col">
+          <div className="flex flex-col gap-2">
             <div
-              className="m-2 cursor-pointer rounded border p-4 shadow-lg"
+              className="cursor-pointer rounded-xl border border-sitcon-secondary border-opacity-50 bg-white p-4 shadow-sm"
               onClick={() => setManualInputModal(true)}
             >
-              <div className="flex items-center">
-                <i className="bx bxs-keyboard text-4xl"></i>
-                <div className="ml-4">
-                  <div>手動輸入票券代碼</div>
-                </div>
+              <div className="flex items-center gap-4">
+                <FormInput size={32} strokeWidth={2} />
+                <div>手動輸入票券代碼</div>
               </div>
             </div>
             <div
-              className="m-2 cursor-pointer rounded border p-4 shadow-lg"
+              className="cursor-pointer rounded-xl border border-sitcon-secondary border-opacity-50 bg-white p-4 shadow-sm"
               onClick={() => setScanQRCodeModal(true)}
             >
-              <div className="flex items-center">
-                <i className="bx bx-qr-scan text-4xl"></i>
-                <div className="ml-4">
-                  <div>掃描票券 QR code</div>
-                </div>
+              <div className="flex items-center gap-4">
+                <QrCode size={32} strokeWidth={2} />
+                <div>掃描票券 QR code</div>
               </div>
             </div>
           </div>
 
           <Dialog open={manualInputModal} setOpen={setManualInputModal}>
-            <div className="flex flex-col gap-4 break-all p-6">
-              <div>手動輸入票券代碼</div>
-              <div>
-                <p className="mt-0">請輸入 OPass 票券代碼</p>
-                <input
-                  className="input m-2 border p-2"
-                  onChange={(e) => setInputValue(e.target.value)}
-                  placeholder="請輸入票券代碼"
-                />
+            <div className="flex w-full flex-col items-center gap-4 break-all p-6 text-center">
+              <FormInput size={48} strokeWidth={2} />
+              <div className="text-center text-xl font-bold">
+                手動輸入票券代碼
               </div>
-              <div>
-                <button
-                  className="m-2 border p-2"
-                  onClick={() => setManualInputModal(false)}
-                >
-                  取消
-                </button>
+
+              <p className="mt-0">請輸入 OPass 票券代碼</p>
+              <input
+                className="w-full rounded-xl border px-4 py-2"
+                onChange={(e) => setInputValue(e.target.value)}
+                placeholder="請輸入票券代碼"
+              />
+
+              <div className="flex w-full flex-col gap-2">
                 <button
-                  className="m-2 border bg-blue-500 p-2 text-white"
+                  className="rounded-xl bg-blue-500 px-4 py-2 text-white"
                   onClick={() => {
                     setResult(inputValue);
                     setModalOpen(false);
                   }}
                 >
                   完成
                 </button>
+                <button
+                  className="rounded-xl border border-sitcon-secondary border-opacity-50 bg-white px-4 py-2"
+                  onClick={() => setManualInputModal(false)}
+                >
+                  取消
+                </button>
               </div>
             </div>
           </Dialog>
 
           <Dialog open={scanQRCodeModal} setOpen={setScanQRCodeModal}>
-            <div className="flex flex-col gap-4 break-all p-6">
-              <div>掃描票券 QR code</div>
-              <div>
-                <p className="mt-0">
-                  請開啟 OPass 中的我的票券，並掃描其中的 QR code
-                </p>
+            <div className="flex flex-col items-center gap-4 break-all p-6">
+              <QrCode size={48} strokeWidth={2} />
+              <div className="text-center text-xl font-bold">
+                掃描票券 QR code
+              </div>
+              <div className="relative">
                 <Scanner
                   onResult={(result) => {
                     setResult(result);
@@ -111,9 +112,13 @@ const NonTokenModalContent = () => {
                     }, 1000);
                   }}
                 />
+
+                <p className="absolute bottom-4 left-0 right-0 m-auto inline-block w-max rounded bg-black/40 px-3 py-1 text-white shadow-xl backdrop-blur">
+                  請開啟 OPass 中的我的票券，並掃描其中的 QR code
+                </p>
               </div>
               <button
-                className="m-2 border p-2"
+                className="w-full rounded-xl border border-sitcon-secondary border-opacity-50 bg-white px-4 py-2"
                 onClick={() => setScanQRCodeModal(false)}
               >
                 取消

diff --git a/src/components/Scanner.tsx b/src/components/Scanner.tsx
@@ -50,7 +50,7 @@ function Scanner({ onResult }: { onResult: (result: string) => void }) {
   const [currentCamera, setCurrentCamera] = useState<string>(manual);
 
   return (
-    <div className="relative flex h-full w-full items-center justify-center text-center">
+    <div className="relative flex h-full min-h-[396px] w-full items-center justify-center text-center">
       <select
         onChange={(e) => setCurrentCamera(e.target.value)}
         value={currentCamera || ""}