Merge pull request 'Bug fixes' (#113) from sageTheDm/interstellar_ai:main into main

Reviewed-on: https://interstellardevelopment.org/code/code/React-Group/interstellar_ai/pulls/113

app/components/InputFrontend.tsx

@@ -47,6 +47,7 @@ const InputFrontend = React.forwardRef<HTMLDivElement, InputProps>(
           value={inputValue}
           onChange={handleInputChange}
           onKeyDown={handleKeyDown}
+          className='textInputField'
         />
         <button type="button" onClick={handleSendClick} disabled={inputDisabled ? true : false}>
           <svg style={{ fill: "var(--text-color)" }} viewBox="0 0 512 512" width={20}><path d="M498.1 5.6c10.1 7 15.4 19.1 13.5 31.2l-64 416c-1.5 9.7-7.4 18.2-16 23s-18.9 5.4-28 1.6L284 427.7l-68.5 74.1c-8.9 9.7-22.9 12.9-35.2 8.1S160 493.2 160 480l0-83.6c0-4 1.5-7.8 4.2-10.8L331.8 202.8c5.8-6.3 5.6-16-.4-22s-15.7-6.4-22-.7L106 360.8 17.7 316.6C7.1 311.3 .3 300.7 0 288.9s5.9-22.8 16.1-28.7l448-256c10.7-6.1 23.9-5.5 34 1.4z" /></svg>

app/components/Login.tsx

@@ -79,12 +79,16 @@ const Login: React.FC = () => {
 
   // Function to handle account creation
   const handleCreateAccount = async () => {
-    const success = await createAccount(newAccountName, newAccountEmail, newAccountPassword);
-    if (success) {
-      alert('Account created successfully! You can now log in.');
-      toggleSignUpPopup(); // Close sign-up popup
+    if (newAccountName !== "" && newAccountEmail !== "" && newAccountPassword !== "") {
+      const success = await createAccount(newAccountName, newAccountEmail, newAccountPassword);
+      if (success) {
+        alert('Account created successfully! You can now log in.');
+        toggleSignUpPopup(); // Close sign-up popup
+      } else {
+        alert('Account creation failed. Please try again.');
+      }
     } else {
-      alert('Account creation failed. Please try again.');
+      alert('Account creation failed. Please do not leave any field empty.');
     }
   };
 

app/components/settings/TextSettings.tsx

@@ -22,6 +22,7 @@ const TextSetting: React.FC<TextSettingProps> = ({ label, value, setValue, type,
         value={value} // Set the current value
         onChange={handleTextChange} // Handle input changes
         placeholder={placeholder} // Set the placeholder text
+        className='textInputField'
       />
     </div>
   );

app/styles/global.css

@@ -66,3 +66,14 @@ input:hover {
 select{
     background-color: var(--input-background-color);
 }
+
+h1, h2, h3, h4, p{
+    color: var(--text-color);
+    font-family: var(--font-family);
+    font-weight: 500;
+}
+
+p{
+    font-weight: 400;
+    font-size: var(--font-size)
+}

app/styles/input.css

@@ -33,6 +33,11 @@
     height: 7vh;
 }
 
+.textInputField::placeholder {
+    color: var(--text-color); /* Change to desired placeholder color */
+    opacity: 1;  /* Ensures full opacity (optional) */
+}
+
 .input input:focus {
     border-color: var(--input-button-hover-color);
 }