Disable Submit button until API key is set, fix tooltip on mobile

makaroni4 · Dec 16, 2023 · cd6c564 · cd6c564
1 parent a6567cc
commit cd6c564
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 10 deletions.
diff --git 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
@@ -118,17 +118,17 @@ 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}
           >
             {startCTACopy()}
           </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
@@ -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
@@ -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;
 }