Configuration after merge

code/frontend/src/App.tsx

@@ -1,16 +1,21 @@
 
+import React, { use } from 'react';
+import logo from './logo.svg';
+import './App.css';
+import { useState, useEffect } from 'react';
+import LoginAndSignUpPage from './pages/LoginAndSignUpPage';
+import PostCreation from './pages/PostCreation';
 import "./App.css";
 import "./styles/colors.css";
 import "./styles/fonts.css";
 import "./styles/sizes.css";
-import LoginAndSignUpPage from "./pages/LoginAndSignUpPage";
 import Footer from "./components/Footer";
 import Header from "./components/Header";
 import Profile from "./pages/Profile";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import { Auth } from "./api/Auth";
 import { NotFound } from "./pages/404Page/NotFoundPage";
-import PostCreation from './PostCreation';
+
 
 function App() {
   return (

code/frontend/src/pages/PostCreation.tsx

@@ -1,14 +1,15 @@
-import Header from "./header";
 import "./postCreation.css";
 import "./loginAndSignUpPage.css";
 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 "../styles/sizes.css";
+import "../styles/fonts.css";
+
 import AspectRatio from '@mui/joy/AspectRatio';
 import Box from '@mui/joy/Box';
 import Card from '@mui/joy/Card';
@@ -30,7 +31,8 @@ function PostCreation(){
     description: string;
   }
   
-  const theme = createTheme({
+  
+{/*const theme = createTheme({
     palette: {
     primary: {
       main: '#EAC22A'
@@ -39,7 +41,7 @@ function PostCreation(){
       main: '#4C4141'
     },
   },
-});
+});*/}
 
   const initialOptions = startTags.map((option) => option.title);
 
@@ -77,16 +79,16 @@ function PostCreation(){
   const handleDelete = (idx: number) =>
     setData((prev) => prev.filter((_, i) => i !== idx));
 
+  const username = "Username12345678"; 
+
     return(
-    <ThemeProvider theme={theme}>
     <div className="create-display">
-        <Header/>
         <div className="create-part">
           <form>
             <h1>Create Post</h1>
             <div className="create-account">
-              <Avatar alt="Remy Sharp" src="/assets/images/BirdLogin.jpg" />
-              <span className="create-username">Username</span>
+              <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>
@@ -138,7 +140,7 @@ function PostCreation(){
                     <IconButton
                       size="sm"
                       onClick={(e) => {
-                        e.stopPropagation();          // keep the main onClick from firing
+                        e.stopPropagation();          
                         handleDelete(idx);
                       }}
                       sx={{
@@ -193,6 +195,6 @@ function PostCreation(){
           </form>
         </div>
     </div>
-    </ThemeProvider>);
+    );
 }
 export default PostCreation;

code/frontend/src/pages/postCreation.css

@@ -1,9 +1,7 @@
-/* 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 */
+  box-sizing: border-box;   
 }
 .create-display{
     display: flex;
@@ -11,7 +9,7 @@
     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);
+    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;
 }