From cd6c564b5d7a4649cca01bb33d8d180c8a6577d3 Mon Sep 17 00:00:00 2001
From: Anatoli Makarevich <makaroni4@gmail.com>
Date: Sat, 16 Dec 2023 19:38:46 +0100
Subject: [PATCH] Disable Submit button until API key is set, fix tooltip on
 mobile

---
 src/App.tsx                 | 23 ++++++++++++++++++-----
 src/components/Navbar.tsx   |  6 +++---
 src/components/Settings.tsx |  2 +-
 src/index.css               |  6 +++++-
 4 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 67af8bc..4d82b2f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -102,10 +102,10 @@ function App() {
       return true
     }
 
-    return generatingExam || processingSubmission
+    return generatingExam || processingSubmission || !openAIAPIKey
   }
   return (
-    <div className="App">
+    <div className="px-2 md:px-8 overflow-x-hidden">
       {settingsVisible && <Settings />}
 
       {showWelcomePopup && <WelcomePopup />}
@@ -138,9 +138,22 @@ function App() {
           />
 
           <div className="flex justify-end">
-            <Button disabled={submitButtonDisabled()} onClick={handleFormSubmit}>
-              {processingSubmission ? t("processing_submission") : t("submit")}
-            </Button>
+            <div className="relative tooltip-wrapper">
+              <Button
+                className="px-8 py-4 text-xl"
+                disabled={submitButtonDisabled()}
+                onClick={handleFormSubmit}
+              >
+                {processingSubmission ? t("processing_submission") : t("submit")}
+              </Button>
+
+              {!openAIAPIKey && (
+                <div className="tooltip absolute z-10 inline-block px-3 py-2 text-sm font-medium  bg-yellow-300	rounded-lg shadow-sm -bottom-1 left-1/2 translate-y-full -translate-x-1/2	 whitespace-nowrap">
+                  {t("set_api_key")}
+                  <div className="tooltip-arrow border-[4px] border-solid border-transparent border-t-0 border-b-yellow-300"></div>
+                </div>
+              )}
+            </div>
           </div>
         </div>
 
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 3287312..f458090 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -118,9 +118,9 @@ export default function Navbar() {
           </div>
         )}
 
-        <div className="relative tooltip-wrapper">
+        <div className="relative tooltip-wrapper mr-8">
           <Button
-            className="mr-8 js-start-exam"
+            className="js-start-exam"
             onClick={handleRestart}
             disabled={generatingExam || !openAIAPIKey}
           >
@@ -128,7 +128,7 @@ export default function Navbar() {
           </Button>
 
           {!openAIAPIKey && (
-            <div className="tooltip absolute z-10 inline-block px-3 py-2 text-sm font-medium  bg-yellow-300	rounded-lg shadow-sm -bottom-1 -left-50 translate-y-full -translate-x-full whitespace-nowrap">
+            <div className="tooltip absolute z-10 inline-block px-3 py-2 text-sm font-medium  bg-yellow-300	rounded-lg shadow-sm -bottom-1 left-1/2 translate-y-full -translate-x-1/2 whitespace-nowrap">
               {t("set_api_key")}
               <div className="tooltip-arrow border-[4px] border-solid border-transparent border-t-0 border-b-yellow-300"></div>
             </div>
diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx
index ad0daff..250bd2c 100644
--- a/src/components/Settings.tsx
+++ b/src/components/Settings.tsx
@@ -78,7 +78,7 @@ export default function Settings() {
   }
 
   return (
-    <div className="fixed h-full top-0 right-0 bg-white w-1/3 z-30 pt-16 px-4 border-l-[1px] border-l-grey-300 shadow-xl js-settings">
+    <div className="fixed h-full top-0 right-0 bg-white w-full md:w-1/3 z-30 pt-16 px-4 border-l-[1px] border-l-grey-300 shadow-xl js-settings">
       <XMarkIcon
         className="w-8 cursor-pointer absolute top-4 right-4 hover:opacity-70 hover:scale-105"
         onClick={() => setSettingsVisible(false)}
diff --git a/src/index.css b/src/index.css
index 1b4f20c..d51ec3a 100644
--- a/src/index.css
+++ b/src/index.css
@@ -2,6 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
 body {
   margin: 0;
   padding: 0;
@@ -85,7 +89,7 @@ a:hover {
   position: absolute;
   top: 0;
   left: 50%;
-  transform: translateX(-100%) translateY(-100%);
+  transform: translateX(-4px) translateY(-100%);
   width: 0;
   height: 0;
 }