first stages for endpoints

code/frontend/src/pages/PostCreation.tsx

@@ -6,6 +6,7 @@ import Autocomplete from '@mui/material/Autocomplete';
 import TextField from '@mui/material/TextField';
 import Avatar from '@mui/material/Avatar';
 import Close from '@mui/icons-material/Close';
+import ButtonPrimary from "../components/ButtonRotkehlchen";
 
 import "../styles/sizes.css";
 import "../styles/fonts.css";
@@ -15,6 +16,9 @@ import Box from '@mui/joy/Box';
 import Card from '@mui/joy/Card';
 import IconButton from '@mui/joy/IconButton';
 
+import axios from "axios";
+
+
 function PostCreation(){
   const startTags = [
     { title: 'Bird' },
@@ -28,20 +32,22 @@ function PostCreation(){
   interface ImageItem {
     src: string;
     title: string;
-    description: string;
   }
-  
-  
-{/*const theme = createTheme({
-    palette: {
-    primary: {
-      main: '#EAC22A'
-    },
-    secondary: {
-      main: '#4C4141'
-    },
-  },
-});*/}
+
+  type FormData = {
+    images: Array<string>;
+    status: string;
+    description: string;
+    tags: Array<string>;
+  }
+
+  const [formData, setFormData] = useState<FormData>({
+      images: [""],
+      status: "PUBLIC",
+      description: "",
+      tags: [""],
+      
+    });
 
   const initialOptions = startTags.map((option) => option.title);
 
@@ -79,20 +85,34 @@ function PostCreation(){
   const handleDelete = (idx: number) =>
     setData((prev) => prev.filter((_, i) => i !== idx));
 
+  const onSubmit = async(event: React.FormEvent) =>{
+    event.preventDefault();
+    try {
+      await axios.post("http://localhost:3001/api/posts/upload", {
+            images: {data},
+            status: "PUBLIC",
+            description: formData.description,
+            tags: formData.tags,
+          })
+    } catch (error:any) {
+      
+    }
+  }
+
   const username = "Username12345678"; 
 
     return(
     <div className="create-display">
         <div className="create-part">
-          <form>
+          <form onSubmit={onSubmit}>
             <h1>Create Post</h1>
             <div className="create-account">
               <Avatar sx={{}}>OP</Avatar>
               <span className="create-username">{username}</span>
             </div>
             <div className="create-post1">
-              <img src={selectedImage} className="create-post-image" alt="Image"></img>
-              <textarea className="create-post-description"></textarea>
+              <img src={selectedImage} className="create-post-image" alt="Add an Image"></img>
+              <textarea className="create-post-description" value={formData.description}></textarea>
             </div>
             <div className="create-post2">
               <Box
@@ -133,7 +153,7 @@ function PostCreation(){
                     size="sm"
                     key={`${item.title}-${idx}`}
                     variant="outlined"
-                    sx={{ position: 'relative' }}
+                    sx={{ position: 'relative'}}
                     onClick={() => setSelectedImage(item.src)}
                   >
                     {/* delete pill */}
@@ -190,7 +210,7 @@ function PostCreation(){
               />            
             </div>
             <div className="create-post3">
-              <input type="submit" value={"Post"} className="login-button"></input>
+              <ButtonPrimary style="primary" label="Post" type="submit" ></ButtonPrimary>
             </div>
           </form>
         </div>

code/frontend/src/pages/loginAndSignUpPage.css

@@ -49,7 +49,7 @@
 
 .login-input {
   width: 100%;
-  height: 40px;
+  height: 38px;
   border: none;
   color: var(--Rotkehlchen-brown-middle);
   outline: 0 !important;

code/frontend/src/pages/postCreation.css

@@ -6,10 +6,6 @@
 .create-display{
     display: flex;
     flex-direction: column;
-    height: 100vh; /* Full viewport height */
-    width: 100vw; /* Full viewport width */
-    position: absolute; 
-    background: var(--gradient-blue-backround-mobile, linear-gradient(270deg, rgba(20, 15, 86, 0.27) 0%, rgba(20, 15, 86, 0.58) 24%, rgba(20, 15, 86, 0.74) 43%, rgba(17, 13, 71, 0.82) 56%, rgba(13, 10, 56, 0.90) 68%), url('/public/assets/images/BirdsSky.jpg') lightgray 50% / cover no-repeat);
     align-items: center;
     justify-content: center;
 }
@@ -52,7 +48,7 @@
     width: 90vw;
 }
 .create-post-image{
-    height: 50vh;
+    height: 40vh;
     width: 90vw;
     object-fit: cover;
     overflow: hidden;
@@ -76,8 +72,13 @@ input#create-file-upload[type="file"] {
 }
 
 @media only screen and (min-width: 768px) {
+    .create-display{
+        padding-top: calc(var(--Header-height) + 1rem);
+        padding-bottom: 1rem;
+    }
     .create-part{
         width: 90vw;
+        height: calc(100vh - var(--Header-height));
     }
     .create-post1{
         width:70vw;