client(Options.tsx): the generate button is now disabled when the form includes an error

Author: 0l1v3rr

client/build/asset-manifest.json

@@ -10,7 +10,7 @@
     />
     <meta http-equiv="Cache-Control" content="no-store, no-cache" />
     <meta http-equiv="Pragma" content="no-cache" />
-	  <meta http-equiv="Expires" content="0" />
+    <meta http-equiv="Expires" content="0" />
     <meta
       name="keywords"
       content="react, tailwind, tailwindcss, javascript, js, 

client/build/index.html

@@ -107,7 +107,7 @@ const SelectInput: FC<SelectInputProps> = (props) => {
                 onClick={() => selectValue(option)}
                 className={`flex items-center gap-4 py-1 px-2 transition-all duration-150 
                   hover:bg-gh-button cursor-pointer text-gh-text min-w-[10rem] ${
-                    i === 0 ? "" : "border-t border-solid border-gh-border"
+                    i === 0 ? "" : "border-t border-solid border-gh-border-dark"
                   }`}
               >
                 {isSelected && (

client/build/static/css/main.72cd8c70.css renamed to client/build/static/css/main.bc85d90e.css

@@ -31,6 +31,7 @@ interface OptionsProps {
 
 const Options: FC<OptionsProps> = (props) => {
   const themes = useFetchThemes();
+  const [isGenerateBtnActive, setIsGenerateBtnActive] = useState<boolean>(true);
   const [lineChars, setLineChars] = useState(["1"]);
 
   const [title, setTitle] = useRecoilState<string>(titleState);
@@ -151,16 +152,22 @@ const Options: FC<OptionsProps> = (props) => {
             const num = parseInt(val);
 
             if (val.trim() === "") {
+              setIsGenerateBtnActive(false);
               return "Please provide a border radius!";
             }
 
             if (!val.split("").every((x) => "0123456789.".includes(x))) {
-              return "Please provide a number!";
+              setIsGenerateBtnActive(false);
+              return "Please provide a valid number!";
             }
 
-            return num > 50 || num < 0
-              ? "Please provide a value between 0 and 50"
-              : "";
+            if (num > 50 || num < 0) {
+              setIsGenerateBtnActive(false);
+              return "Please provide a value between 0 and 50";
+            }
+
+            setIsGenerateBtnActive(true);
+            return "";
           }}
         />
 
@@ -208,7 +215,7 @@ const Options: FC<OptionsProps> = (props) => {
                 )
               );
             }}
-            disabled={false}
+            disabled={!isGenerateBtnActive}
             text="Generate"
           />