Desktop and Mobile UI

code/frontend/src/PostCreation.tsx

@@ -5,10 +5,14 @@ import { useState } from 'react';
 import Chip from '@mui/material/Chip';
 import Autocomplete from '@mui/material/Autocomplete';
 import TextField from '@mui/material/TextField';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import Avatar from '@mui/material/Avatar';
+import Close from '@mui/icons-material/Close';
 
 import AspectRatio from '@mui/joy/AspectRatio';
 import Box from '@mui/joy/Box';
 import Card from '@mui/joy/Card';
+import IconButton from '@mui/joy/IconButton';
 
 function PostCreation(){
   const startTags = [
@@ -25,10 +29,20 @@ function PostCreation(){
     title: string;
     description: string;
   }
+  
+  const theme = createTheme({
+    palette: {
+    primary: {
+      main: '#EAC22A'
+    },
+    secondary: {
+      main: '#4C4141'
+    },
+  },
+});
 
   const initialOptions = startTags.map((option) => option.title);
 
-
   const [options, setOptions] = useState(initialOptions);
   const [tags, setTags] = useState<string[]>([initialOptions[1]]);
   const [selectedImage, setSelectedImage] = useState<string>("");
@@ -36,7 +50,6 @@ function PostCreation(){
   const [data, setData] = useState<ImageItem[]>([]);
 
   const handleChange = (event: any, newValue: string[]) => {
-    // Add new entries to options if they don't already exist
     newValue.forEach((val) => {
       if (!options.includes(val)) {
         setOptions((prev) => [...prev, val]);
@@ -48,24 +61,31 @@ function PostCreation(){
   const handleImageUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
     const files = event.target.files;
     if (files && files.length > 0) {
+      const fileArray = Array.from(files);
       const newItems: ImageItem[] = Array.from(files).map((file) => ({
         src: URL.createObjectURL(file),
         title: file.name,
         description: 'Uploaded image',
-      }));
+      }
+    ));
+      const lastImageUrl = newItems[newItems.length - 1].src;
 
       setData((prev) => [...prev, ...newItems]);
+      setSelectedImage(lastImageUrl);
     }
   };
+  const handleDelete = (idx: number) =>
+    setData((prev) => prev.filter((_, i) => i !== idx));
 
     return(
+    <ThemeProvider theme={theme}>
     <div className="create-display">
         <Header/>
         <div className="create-part">
           <form>
             <h1>Create Post</h1>
             <div className="create-account">
-              <img src="assets/icons/account_circle.svg" alt="Profil picture"></img>
+              <Avatar alt="Remy Sharp" src="/assets/images/BirdLogin.jpg" />
               <span className="create-username">Username</span>
             </div>
             <div className="create-post1">
@@ -76,72 +96,103 @@ function PostCreation(){
               <Box
                 sx={{
                   display: 'flex',
-                  gap:1,
+                  gap: 1,
                   py: 1,
-                  overflow: 'auto',
-                  width: '50vw',
+                  overflowX: 'auto',
+                  overflowY: 'hidden',
+                  width: '100%',
+                  maxWidth: {xs:'90vw', sm:'600px'},
+                  mx: 'auto',                      // center the box
                   scrollSnapType: 'x mandatory',
-                  '& > *': {
-                    scrollSnapAlign: 'center',
-                  },
-                  '::-webkit-scrollbar': { display: 'none' },
+                  '& > *': { scrollSnapAlign: 'center' },
+                  '::-webkit-scrollbar': { display: 'none', flexShrink: '0' },
                 }}
               >
-              <Card orientation="horizontal" size="sm" key="add" variant="outlined" onClick={()=>{
-
-              }}>
-                <AspectRatio ratio="1" sx={{ minWidth: 60 }}>
-                  <label className="createa-file-upload">
-                    <img src="/assets/icons/add-plus.svg" />
-                    <input id="create-file-upload" type="file" accept="image/*" multiple={true} onChange={handleImageUpload}/>
-                  </label>
-                  
-                </AspectRatio>
-              </Card>
-              {data.map((item) => (
-                <Card orientation="horizontal" size="sm" key={item.title} variant="outlined" onClick={()=> {
-                  setSelectedImage(item.src);
-                }}>
+                {/* Upload card */}
+                <Card orientation="horizontal" size="sm" key="add" variant="outlined">
                   <AspectRatio ratio="1" sx={{ minWidth: 60 }}>
-                    <img
-                      srcSet={item.src}
-                      src={item.src}
-                      alt={item.title}
-                    />
+                    <label className="createa-file-upload">
+                      <img src="/assets/icons/add-plus.svg" alt="Upload" />
+                      <input
+                        id="create-file-upload"
+                        type="file"
+                        accept="image/*"
+                        multiple
+                        onChange={handleImageUpload}
+                      />
+                    </label>
                   </AspectRatio>
                 </Card>
+
+                {/* Image cards */}
+                {data.map((item, idx) => (
+                  <Card
+                    orientation="horizontal"
+                    size="sm"
+                    key={`${item.title}-${idx}`}
+                    variant="outlined"
+                    sx={{ position: 'relative' }}
+                    onClick={() => setSelectedImage(item.src)}
+                  >
+                    {/* delete pill */}
+                    <IconButton
+                      size="sm"
+                      onClick={(e) => {
+                        e.stopPropagation();          // keep the main onClick from firing
+                        handleDelete(idx);
+                      }}
+                      sx={{
+                        position: 'absolute',
+                        top: 2,
+                        right: 2,
+                        bgcolor: 'background.body',
+                        zIndex: 1,
+                      }}
+                    >
+                      <Close fontSize="small" />
+                    </IconButton>
+
+                    <AspectRatio ratio="1" sx={{ minWidth: 60 }}>
+                      <img src={item.src} alt={item.title} />
+                    </AspectRatio>
+                  </Card>
                 ))}
-                </Box>
-                <Autocomplete
-                  className="create-tags"
-                  multiple
-                  id="tags-filled"
-                  options={options}
-                  defaultValue={[startTags[1].title]}
-                  freeSolo
-                  value={tags}
-                  onChange={handleChange}
-                  renderValue={(value: readonly string[], getItemProps) =>
-                  value.map((option: string, index: number) => {
-                    const { key, ...itemProps } = getItemProps({ index });
-                    return (
-                    <Chip variant="outlined" label={option} key={key} {...itemProps} />
-                    );
-                  })
-                  }
-                  renderInput={(params) => (
-                  <TextField
-                    {...params}
-                    variant="filled"
-                    label="Tags"
-                    placeholder="Tag"
-                  />
-                  )}
-                />            
+              </Box>
+              <Autocomplete
+                className="create-tags"
+                multiple
+                id="tags-filled"
+                options={options}
+                defaultValue={[startTags[1].title]}
+                freeSolo
+                value={tags}
+                onChange={handleChange}
+                sx={{ width: "90vw" }}
+                renderValue={(value: readonly string[], getItemProps) =>
+                value.map((option: string, index: number) => {
+                  const { key, ...itemProps } = getItemProps({ index });
+                  return (
+                  <Chip variant="outlined" label={option} key={key} {...itemProps} />
+                  );
+                })
+                }
+                renderInput={(params) => (
+                <TextField
+                  {...params}
+                  variant="outlined"
+                  color='primary'
+                  label="Tags"
+                  placeholder="Add Tags"
+                />
+                )}
+              />            
+            </div>
+            <div className="create-post3">
+              <input type="submit" value={"Post"} className="login-button"></input>
             </div>
-            <input type="submit" value={"Post"} className="login-button"></input>
           </form>
         </div>
-    </div>);
+    </div>
+    </ThemeProvider>);
 }
 export default PostCreation;

code/frontend/src/postCreation.css

@@ -1,3 +1,10 @@
+/* put this once, ideally at the very top of your main stylesheet */
+*,
+*::before,
+*::after{
+  box-sizing: border-box;   /* 1️⃣ borders & padding now count
+                                inside the declared width/height */
+}
 .create-display{
     display: flex;
     flex-direction: column;
@@ -11,15 +18,16 @@
 .create-part{
     display: flex;
     height: 100vh;
-    width: 70vw;
+    width: 100%;
     padding: 29px 40px;
     flex-direction: column;
     align-items: center;
     gap: 10px;
-    border-right: 4px solid var(--Rotkehlchen-gray-hover, #D5D7DA);
-    border-left: 4px solid var(--Rotkehlchen-gray-hover, #D5D7DA);
+    border-right: 4px solid var(--Rotkehlchen-gray-hover);
+    border-left: 4px solid var(--Rotkehlchen-gray-hover);
     background: #FFF;
 }
+
 .create-account{
     display: flex;
     flex-direction: row;
@@ -27,27 +35,27 @@
 }
 .create-post1{
     display: flex;
-    flex-direction: row;
-    width:70vw;
-    gap: 10px;
+    flex-direction: column;
+    gap: 9px;
+    width: 90vw;
 }
 .create-post-description{
     width: 100%;
+    accent-color: var(--Rotkehlchen-yellow-default);
 }
 .create-post2{
     display: flex;
-    flex-direction: row;
-    width: 70vw;
+    flex-direction: column;
+    width: 100%;
     gap: 10px;
-    align-items: center;
+    align-items: flex-start;
 }
 .create-tags{
-    width: 100%;
+    width: 90vw;
 }
 .create-post-image{
-    width: 50vw;
-    max-width: 50vw;
     height: 50vh;
+    width: 90vw;
     object-fit: cover;
     overflow: hidden;
     
@@ -59,6 +67,46 @@ input#create-file-upload[type="file"] {
     border: 1px solid #ccc;
     padding: 6px 12px;
     cursor: pointer;
-    width: 300px;
+    width: 90vw;
     height: 100px;
+}
+.create-post3{
+    display: flex;
+    flex-direction: row-reverse;
+    width: 100%;
+    align-items: flex-end;
+}
+
+@media only screen and (min-width: 768px) {
+    .create-part{
+        width: 90vw;
+    }
+    .create-post1{
+        width:70vw;
+        flex-direction: row;
+
+    }
+    .create-post2{
+        display: flex;
+        flex-direction: row;
+        width: 70vw;
+        gap: 10px;
+        align-items: center;
+    }
+    .create-post-image {
+        width: 100%;
+        max-width: 600px;
+        display: block;
+        margin: 0 auto;
+     }
+    .create-file-upload {
+        border: 1px solid #ccc;
+        padding: 6px 12px;
+        cursor: pointer;
+        width: 300px;
+        height: 100px;
+    }
+    .create-tags{
+        width: 100%;
+    }
 }