New Componen, Avatar

code/frontend/src/components/UserAvatar.tsx

@@ -0,0 +1,51 @@
+import { Avatar, Box, Typography } from "@mui/material";
+import api from "../api/axios";
+import { useState,useEffect } from "react";
+
+interface UserAvatarProps {
+  username: string|null;
+  src?: string;
+  size?: number | string;
+}
+
+export default function UserAvatar({ username, size = 40 }: UserAvatarProps) {
+    const[pb, setPb] = useState<string>();
+
+    useEffect(() => {
+    (async () => {
+      try {
+        const res = await api.get(`/profile/getProfilePicture/${username}`)
+            setPb(res.data.url);
+        } catch (error) {
+            console.log(error);
+      }
+    })();
+  }, [username]);
+
+  return (
+    <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+      <Avatar
+        src={pb}
+        sx={{
+          width: size,
+          height: size,
+          bgcolor: pb ? "transparent" : "primary.main",
+          fontWeight: 500,
+        }}
+      >
+        username[0];
+      </Avatar>
+      <Typography
+        component="span"
+        fontWeight={500}
+        sx={{ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis"}}
+      >
+        {username}
+      </Typography>
+    </Box>
+  );
+}
+
+// ---------------- Exemplarische Verwendung ----------------
+// <UserAvatar username={user?.username ?? "Unknown User"} src={user?.avatarUrl} />
+// ---------------------------------------------------------

code/frontend/src/pages/PostCreation.tsx

@@ -1,35 +1,30 @@
 import "./postCreation.css";
 import "./loginAndSignUpPage.css";
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { useNavigate } from "react-router-dom";
 import Chip from '@mui/material/Chip';
 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";
-
-import AspectRatio from '@mui/joy/AspectRatio';
-
 import api from "../api/axios";
 import { useAuth } from "../api/Auth";
-import {
+import {Box,Card,CardMedia,CardActionArea,IconButton} from '@mui/material';
-  Box,
-  Card,
-  CardMedia,
-  CardActionArea,
-  IconButton,
-  Skeleton,
-  StyledEngineProvider,
-} from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import UserAvatar from "../components/UserAvatar";
+
+const theme = createTheme({
+  palette: {
+    primary: {
+      main:'#e79a0e;'
+    }
+  }
+});
 
 function PostCreation(){
   const {user} = useAuth();
-  
   interface ImageItem {
     src: string;
     title: string;
@@ -43,6 +38,7 @@ function PostCreation(){
   const navigate = useNavigate();
 
   const [fileList,setFileList] = useState<FileList|null>(null);
+  const inputFile = useRef<HTMLInputElement | null>(null);
 
   useEffect(() => {
     let cancelled = false;
@@ -85,6 +81,11 @@ function PostCreation(){
     }
     setFileList(files);
   };
+  const onEmptyImgClick = () =>{
+    if(inputFile.current){
+      inputFile.current?.click();
+    }
+  }
   const handleDelete = (idx: number) =>{
     setData((prev) => prev.filter((_, i) => i !== idx));
     if((idx-1)<0){
@@ -123,23 +124,24 @@ function PostCreation(){
   const files = fileList ? [...fileList] : [];
 
     return(
-    <StyledEngineProvider>
+      <ThemeProvider theme={theme}>
     <div className="create-display">
         <div className="create-part">
           <form onSubmit={onSubmit}>
             <h1>Create Post</h1>
             <div className="create-layout">
-            <div className="create-account">
+              <div className="create-post-desc">
-              <Avatar >OP</Avatar>
+            <UserAvatar username={user? user.username: ""}/>
-              <span className="create-username">{user?.username}</span>
-            </div>
-            <div className="create-post1">
             {selectedImage? 
             <img src={selectedImage} className="create-post-image" alt="Add an Image"></img>: 
-              <Skeleton variant="rectangular" width={'100%'} height={"40vh"} animation= {false}></Skeleton>}
+            <label className="create-post-img-layer" onClick={onEmptyImgClick}>
+              <strong>Add Picture</strong>
+            </label>}
+            </div>
+            <div className="create-post-desc">
+              <h2>Description</h2>
               <textarea className="create-post-description" value={description} onChange={handleChange} required></textarea>
               </div>
-            <div className="create-post2">
               <Box
                 sx={{
                   display: 'flex',
@@ -178,6 +180,7 @@ function PostCreation(){
                       multiple
                       onChange={handleImageUpload}
                       style={{ display: 'none' }}
+                      ref={inputFile}
                     />
                   </label>
                 </Card>
@@ -234,7 +237,7 @@ function PostCreation(){
                 freeSolo
                 value={tags}
                 onChange={handleTags}
-                sx={{ width: "90vw" }}
+                sx={{ width: "100%" }}
                 renderValue={(value: readonly string[], getItemProps) =>
                 value.map((tags: string, index: number) => {
                   const { key, ...itemProps } = getItemProps({ index });
@@ -254,15 +257,12 @@ function PostCreation(){
                 )}
               />  
               </div>          
-            <div className="create-post3">
-              <ButtonPrimary style="primary" label="Post" type="submit" ></ButtonPrimary>
               <ButtonPrimary style="secondary" label="Cancel" type="button" onClick={onCancel} ></ButtonPrimary>
-            </div>
+              <ButtonPrimary style="primary" label="Post" type="submit" ></ButtonPrimary>
-            </div>
           </form>
         </div>
     </div>
-    </StyledEngineProvider>
+    </ThemeProvider>
     );
 }
 export default PostCreation;

code/frontend/src/pages/postCreation.css

@@ -9,10 +9,11 @@
     align-items: center;
     justify-content: center;
 }
+
 .create-part{
     display: flex;
-    height: 100vh;
+    width: 100vw;
-    width: 100%;
+    height: calc(100vh - var(--Header-height));
     padding: 29px 40px;
     flex-direction: column;
     align-items: center;
@@ -21,41 +22,49 @@
     border-left: 4px solid var(--Rotkehlchen-gray-hover);
     background: #FFF;
 }
+
 .create-layout{                  
     display: grid;
-    grid-template-columns: auto auto auto;
+    grid-template-columns: 1fr; 
+    grid-auto-rows: auto;    
+    width: 90vw;
+    gap: 0.5rem;
 }
 .create-account{
     display: flex;
     flex-direction: row;
     align-items: center;
+    width: 100%;
 }
-.create-post1{
+.create-post-desc{
+    width: 100%;
     display: flex;
     flex-direction: column;
-    gap: 9px;
-    width: 90vw;
 }
 .create-post-description{
     width: 100%;
     accent-color: var(--Rotkehlchen-yellow-default);
-}
+    resize: none;
-.create-post2{
+    height: 100%;
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    gap: 10px;
-    align-items: flex-start;
-}
-.create-tags{
-    width: 90vw;
 }
 .create-post-image{
     height: 40vh;
-    width: 90vw;
+    width: 100%;
     object-fit: cover;
     overflow: hidden;
-    
+}
+.create-post-img-layer{
+    display: flex;
+    align-items: center;
+    align-self: center;
+    justify-content: center;
+    height: 40vh;
+    width: 100%;
+    background-position: center;
+    background-size: cover;
+    overflow: hidden;
+    background-image: url("../../public/assets/images/BirdLogin.jpg");
+    filter: grayscale();
 }
 input#create-file-upload[type="file"] {
     display: none;
@@ -64,14 +73,8 @@ input#create-file-upload[type="file"] {
     border: 1px solid #ccc;
     padding: 6px 12px;
     cursor: pointer;
-    width: 90vw;
-    height: 100px;
-}
-.create-post3{
-    display: flex;
-    flex-direction: row-reverse;
     width: 100%;
-    align-items: flex-end;
+    height: 100px;
 }
 
 @media only screen and (min-width: 768px) {
@@ -80,27 +83,26 @@ input#create-file-upload[type="file"] {
         padding-bottom: 1rem;
     }
    .create-part{
+        display: flex;
         width: 90vw;
         height: calc(100vh - var(--Header-height));
-    }
+        padding: 29px 40px;
-    .create-post1{
+        flex-direction: column;
-        width:70vw;
-        flex-direction: row;
-
-    }
-    .create-post2{
-        display: flex;
-        flex-direction: row;
-        width: 70vw;
-        gap: 10px;
         align-items: center;
+        gap: 10px;
+        border-right: 4px solid var(--Rotkehlchen-gray-hover);
+        border-left: 4px solid var(--Rotkehlchen-gray-hover);
+        background: #FFF;
     }
     .create-post-image {
-        width: 100%;
+        width: 100%s;
         max-width: 600px;
         display: block;
         margin: 0 auto;
      }
+     .create-post-img-layer{
+        max-width: 600px;
+    }
     .create-file-upload {
         border: 1px solid #ccc;
         padding: 6px 12px;
@@ -111,4 +113,14 @@ input#create-file-upload[type="file"] {
     .create-tags{
         width: 100%;
     }
+    .create-layout{                  
+        display: grid;
+        grid-template-columns: 50% auto; 
+        grid-auto-rows: auto;    
+        margin: 0 ;   
+        width: 88vw;
+    }
+    .create-post-desc{
+        height: 40vh;
+    }
 }