Mod creation page fields

frontend/src/components/Cards/row.module.css

@@ -74,6 +74,7 @@
 }
 
 .downloadIcon {
-    margin-bottom: -.35rem;
+    margin-bottom: -.37rem;
-    margin-right: .3rem;
+    margin-right: .4rem;
+    margin-left: -.2rem;
 }

frontend/src/components/Fields/input_field.module.css

@@ -10,13 +10,14 @@
 .input {
 
   width: 100%;
+  height: 100%;
   padding: 0.75rem;
 
   font-size: 1rem;
   font-family: 'IBM Plex Mono';
   color: #eaeaea;
 
-  background-color: #2a2a2a;
+  background-color: #222222;
   border: transparent;
   border-bottom: .2em solid #3a3a3a;
   border-radius: .2rem;
@@ -28,7 +29,7 @@
   outline: none;
 
   border-color: #353be5;
-  background-color: #2a2a2a;
+  background-color: #202020;
   color: #ffffff;
 }
 
@@ -41,3 +42,7 @@
   font-size: 0.875rem;
   margin-top: 0.25rem;
 }
+
+.textArea {
+  resize: none;
+}

frontend/src/components/Fields/text_area.jsx

@@ -0,0 +1,37 @@
+// TODO made by AI
+
+import { h } from 'preact';
+import styles from './input_field.module.css'; // Optional: CSS Modules
+
+function TextArea({
+  id,
+  name,
+  label,
+  value,
+  onChange,
+  error,
+  placeholder,
+  required,
+  className,
+  containerClass,
+  ...rest // To accept other standard input props
+}) {
+  return (
+    <div className={`${styles.formGroup} ${containerClass}`}>
+      {label && <label htmlFor={id} className={styles.label}>{label}</label>}
+      <textarea
+        type="text" // Or any other input type
+        id={id}
+        name={name}
+        className={`${styles.input} ${styles.textArea} ${error ? styles.inputError : ''} ${className}`}
+        value={value}
+        onChange={onChange}
+        placeholder={placeholder}
+        required={required}
+        {...rest} // Pass down other props
+      />
+      {error && <div className={styles.errorMessage}>{error}</div>}
+    </div>
+  );
+}
+export default TextArea

frontend/src/pages/mod_creation.jsx

@@ -7,6 +7,7 @@ import { createMod } from '../services/api';
 
 // Components
 import InputField from '../components/Fields/input_field'
+import TextArea from '../components/Fields/text_area'
 
 // Images
 import logo from '../assets/logo.png'
@@ -34,30 +35,61 @@ function ModCreationPage() {
             <div className={styles.container}>
                 <div className={styles.form}>
 
-                    {/* Name */}
+                    <div className={styles.topFields}>
-                    <InputField
+                        <div>
-                        id="name"
+                            {/* Name */}
-                        name="name"
+                            <InputField
-                        value={mod_infos.name}
+                                id="name"
-                        // onChange={handleNameChange}
+                                name="name"
-                        // error={nameError}
+                                value={mod_infos.name}
-                        placeholder="name"
+                                // onChange={handleNameChange}
-                        required
+                                // error={nameError}
-                        className={styles.smallField}
+                                placeholder="name"
-                        >
+                                required
-                        </InputField>
+                                className={styles.smallField}
+                                >
+                                </InputField>
 
-                        {/* Display name */}
+                                {/* Display name */}
-                        <InputField
+                                <InputField
-                        id="display_name"
+                                id="display_name"
-                        name="display_name"
+                                name="display_name"
+                                value={mod_infos.display_name}
+                                // onChange={handleNameChange}
+                                // error={nameError}
+                                placeholder="display_name"
+                                className={styles.smallField}
+                                >
+                            </InputField>
+                        </div>
+
+                        {/* Description */}
+                        <TextArea
+                        id="description"
+                        name="description"
                         value={mod_infos.display_name}
                         // onChange={handleNameChange}
                         // error={nameError}
-                        placeholder="display_name"
+                        placeholder="description"
-                        className={styles.smallField}
+                        containerClass={styles.descriptionField}
                         >
-                    </InputField>
+                    </TextArea>
+                    </div>
+
+                    <div className={styles.middleFields}>
+                        {/* Full description */}
+                        <TextArea
+                        id="full_description"
+                        name="full_description"
+                        value={mod_infos.display_name}
+                        // onChange={handleNameChange}
+                        // error={nameError}
+                        placeholder="full_description"
+                        containerClass={styles.fullDescriptionField}
+                        >
+                        </TextArea>
+
+                    </div>
 
                     <Button className={styles.createButton}>
                         Create

frontend/src/styles/content_creation.module.css

@@ -84,6 +84,34 @@
     width: 20em;
 }
 
+.descriptionField {
+
+    margin-top: -.01rem;
+    margin-left: 1rem;
+
+    height: 7em;
+    min-width: 20em;
+    display: inline-flex;
+    flex-grow: 1;
+}
+
+.fullDescriptionField {
+    min-width: 20em;
+    height: 100%;
+}
+
+.topFields {
+    display: flex;
+    width: 100%;
+}
+
+.middleFields {
+    /* display: flex;
+    justify-content: right; */
+    height: 35vh;
+    min-height: 12em;
+}
+
 .createButton {
     position: absolute;
     bottom: 1em;

frontend/src/styles/home.css

@@ -50,7 +50,7 @@
     left: 50%;
     transform: translate(-50%, -50%); /*Center (compensate size)*/
 
-    color: #eaeaea;
+    color: #eaeaead0;
     font-size: 1.5em;
     text-align: justify;