diff --git a/code/frontend/src/App.tsx b/code/frontend/src/App.tsx index ed4d438..d0b712f 100644 --- a/code/frontend/src/App.tsx +++ b/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 ( diff --git a/code/frontend/src/PostCreation.tsx b/code/frontend/src/pages/PostCreation.tsx similarity index 93% rename from code/frontend/src/PostCreation.tsx rename to code/frontend/src/pages/PostCreation.tsx index ef9bf71..222d76f 100644 --- a/code/frontend/src/PostCreation.tsx +++ b/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( -
-

Create Post

- - Username + OP + {username}
Image @@ -138,7 +140,7 @@ function PostCreation(){ { - e.stopPropagation(); // keep the main onClick from firing + e.stopPropagation(); handleDelete(idx); }} sx={{ @@ -193,6 +195,6 @@ function PostCreation(){
- ); + ); } export default PostCreation; \ No newline at end of file diff --git a/code/frontend/src/postCreation.css b/code/frontend/src/pages/postCreation.css similarity index 87% rename from code/frontend/src/postCreation.css rename to code/frontend/src/pages/postCreation.css index 0bab19c..50b3237 100644 --- a/code/frontend/src/postCreation.css +++ b/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; } diff --git a/code/frontend/yarn.lock b/code/frontend/yarn.lock index 5768387..559a917 100644 --- a/code/frontend/yarn.lock +++ b/code/frontend/yarn.lock @@ -152,7 +152,7 @@ "@babel/traverse" "^7.25.9" "@babel/types" "^7.25.9" -"@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.16.7", "@babel/helper-module-imports@^7.25.9": +"@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.25.9": version "7.25.9" resolved "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.25.9.tgz" integrity sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw== @@ -1063,6 +1063,7 @@ "@babel/plugin-transform-modules-commonjs" "^7.26.3" "@babel/plugin-transform-typescript" "^7.27.0" + "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.8.4": version "7.27.0" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.27.0.tgz#fbee7cf97c709518ecc1f590984481d5460d4762" @@ -1071,6 +1072,7 @@ regenerator-runtime "^0.14.0" "@babel/runtime@^7.18.3", "@babel/runtime@^7.23.9", "@babel/runtime@^7.27.1": + version "7.27.6" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.27.6.tgz#ec4070a04d76bae8ddbb10770ba55714a417b7c6" integrity sha512-vbavdySgbTTrmFE+EsiqUTzlOr5bzlnJtUv9PynGCAKvfQqjIXbvFdumPM/GxMDfyuGMJaJAU6TO4zc1Jf1i8Q== @@ -1224,6 +1226,7 @@ "@emotion/babel-plugin@^11.13.5": version "11.13.5" resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.13.5.tgz#eab8d65dbded74e0ecfd28dc218e75607c4e7bc0" + integrity sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ== dependencies: "@babel/helper-module-imports" "^7.16.7" @@ -1241,6 +1244,7 @@ "@emotion/cache@^11.13.5", "@emotion/cache@^11.14.0": version "11.14.0" resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.14.0.tgz#ee44b26986eeb93c8be82bb92f1f7a9b21b2ed76" + integrity sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA== dependencies: "@emotion/memoize" "^0.9.0" @@ -1252,11 +1256,13 @@ "@emotion/hash@^0.9.2": version "0.9.2" resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.2.tgz#ff9221b9f58b4dfe61e619a7788734bd63f6898b" + integrity sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g== "@emotion/is-prop-valid@^1.3.0": version "1.3.1" resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.3.1.tgz#8d5cf1132f836d7adbe42cf0b49df7816fc88240" + integrity sha512-/ACwoqx7XQi9knQs/G0qKvv5teDMhD7bXYns9N/wM8ah8iNb8jZ2uNO0YOgiq2o2poIvVtJS2YALasQuMSQ7Kw== dependencies: "@emotion/memoize" "^0.9.0" @@ -1264,11 +1270,13 @@ "@emotion/memoize@^0.9.0": version "0.9.0" resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.9.0.tgz#745969d649977776b43fc7648c556aaa462b4102" + integrity sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ== "@emotion/react@^11.14.0": version "11.14.0" resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.14.0.tgz#cfaae35ebc67dd9ef4ea2e9acc6cd29e157dd05d" + integrity sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA== dependencies: "@babel/runtime" "^7.18.3" @@ -1282,7 +1290,9 @@ "@emotion/serialize@^1.3.3": version "1.3.3" + resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.3.3.tgz#d291531005f17d704d0463a032fe679f376509e8" + integrity sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA== dependencies: "@emotion/hash" "^0.9.2" @@ -1293,12 +1303,16 @@ "@emotion/sheet@^1.4.0": version "1.4.0" + resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.4.0.tgz#c9299c34d248bc26e82563735f78953d2efca83c" + integrity sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg== "@emotion/styled@^11.14.0": version "11.14.0" + resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.14.0.tgz#f47ca7219b1a295186d7661583376fcea95f0ff3" + integrity sha512-XxfOnXFffatap2IyCeJyNov3kiDQWoR08gPUQxvbL7fxKryGBKUZUkG6Hz48DZwVrJSVh9sJboyV1Ds4OW6SgA== dependencies: "@babel/runtime" "^7.18.3" @@ -1310,22 +1324,31 @@ "@emotion/unitless@^0.10.0": version "0.10.0" + resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.10.0.tgz#2af2f7c7e5150f497bdabd848ce7b218a27cf745" + + integrity sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg== "@emotion/use-insertion-effect-with-fallbacks@^1.2.0": version "1.2.0" + resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.2.0.tgz#8a8cb77b590e09affb960f4ff1e9a89e532738bf" + integrity sha512-yJMtVdH59sxi/aVJBpk9FQq+OR8ll5GT8oWd57UpeaKEVGab41JWaCFA7FRLoMLloOZF/c/wsPoe+bfGmRKgDg== "@emotion/utils@^1.4.2": version "1.4.2" + resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.4.2.tgz#6df6c45881fcb1c412d6688a311a98b7f59c1b52" + integrity sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA== "@emotion/weak-memoize@^0.4.0": version "0.4.0" + resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz#5e13fac887f08c44f76b0ccaf3370eb00fec9bb6" + integrity sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg== "@eslint-community/eslint-utils@^4.2.0": @@ -1708,6 +1731,13 @@ resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.17.1.tgz#49b88ecb68b800431b5c2f2bfb71372d1f1478fa" integrity sha512-OcZj+cs6EfUD39IoPBOgN61zf1XFVY+imsGoBDwXeSq2UHJZE3N59zzBOVjclck91Ne3e9gudONOeILvHCIhUA== + +"@mui/core-downloads-tracker@^7.1.2": + version "7.1.2" + resolved "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-7.1.2.tgz" + integrity sha512-0gLO1PvbJwSYe5ji021tGj6HFqrtEPMGKK4L1zWwRbhzrWWUumUJvMvJUsIgWQIYQsgOnhq9k2Fc1BxLGHDsAg== + + "@mui/icons-material@^7.1.2": version "7.1.2" resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-7.1.2.tgz#4341c78e2d0730b689203443550c1caf9d71d93c" @@ -1729,6 +1759,24 @@ clsx "^2.1.0" prop-types "^15.8.1" +"@mui/material@^7.1.1": + version "7.1.2" + resolved "https://registry.npmjs.org/@mui/material/-/material-7.1.2.tgz" + integrity sha512-Z5PYKkA6Kd8vS04zKxJNpwuvt6IoMwqpbidV7RCrRQQKwczIwcNcS8L6GnN4pzFYfEs+N9v6co27DmG07rcnoA== + dependencies: + "@babel/runtime" "^7.27.1" + "@mui/core-downloads-tracker" "^7.1.2" + "@mui/system" "^7.1.1" + "@mui/types" "^7.4.3" + "@mui/utils" "^7.1.1" + "@popperjs/core" "^2.11.8" + "@types/react-transition-group" "^4.4.12" + clsx "^2.1.1" + csstype "^3.1.3" + prop-types "^15.8.1" + react-is "^19.1.0" + react-transition-group "^4.4.5" + "@mui/private-theming@^5.17.1": version "5.17.1" resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.17.1.tgz#b4b6fbece27830754ef78186e3f1307dca42f295" @@ -1738,6 +1786,16 @@ "@mui/utils" "^5.17.1" prop-types "^15.8.1" +"@mui/private-theming@^7.1.1": + version "7.1.1" + resolved "https://registry.npmjs.org/@mui/private-theming/-/private-theming-7.1.1.tgz" + integrity sha512-M8NbLUx+armk2ZuaxBkkMk11ultnWmrPlN0Xe3jUEaBChg/mcxa5HWIWS1EE4DF36WRACaAHVAvyekWlDQf0PQ== + dependencies: + "@babel/runtime" "^7.27.1" + "@mui/utils" "^7.1.1" + prop-types "^15.8.1" + + "@mui/styled-engine@^5.16.14": version "5.16.14" resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.16.14.tgz#f90fef5b4f8ebf11d48e1b1df8854a45bb31a9f5" @@ -1748,6 +1806,18 @@ csstype "^3.1.3" prop-types "^15.8.1" +"@mui/styled-engine@^7.1.1": + version "7.1.1" + resolved "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-7.1.1.tgz" + integrity sha512-R2wpzmSN127j26HrCPYVQ53vvMcT5DaKLoWkrfwUYq3cYytL6TQrCH8JBH3z79B6g4nMZZVoaXrxO757AlShaw== + dependencies: + "@babel/runtime" "^7.27.1" + "@emotion/cache" "^11.13.5" + "@emotion/serialize" "^1.3.3" + "@emotion/sheet" "^1.4.0" + csstype "^3.1.3" + prop-types "^15.8.1" + "@mui/system@^5.17.1": version "5.17.1" resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.17.1.tgz#1f987cce91bf738545a8cf5f99152cd2728e6077" @@ -1762,6 +1832,27 @@ csstype "^3.1.3" prop-types "^15.8.1" +"@mui/system@^7.1.1": + version "7.1.1" + resolved "https://registry.npmjs.org/@mui/system/-/system-7.1.1.tgz" + integrity sha512-Kj1uhiqnj4Zo7PDjAOghtXJtNABunWvhcRU0O7RQJ7WOxeynoH6wXPcilphV8QTFtkKaip8EiNJRiCD+B3eROA== + dependencies: + "@babel/runtime" "^7.27.1" + "@mui/private-theming" "^7.1.1" + "@mui/styled-engine" "^7.1.1" + "@mui/types" "^7.4.3" + "@mui/utils" "^7.1.1" + clsx "^2.1.1" + csstype "^3.1.3" + prop-types "^15.8.1" + +"@mui/types@^7.4.3": + version "7.4.3" + resolved "https://registry.npmjs.org/@mui/types/-/types-7.4.3.tgz" + integrity sha512-2UCEiK29vtiZTeLdS2d4GndBKacVyxGvReznGXGr+CzW/YhjIX+OHUdCIczZjzcRAgKBGmE9zCIgoV9FleuyRQ== + dependencies: + "@babel/runtime" "^7.27.1" + "@mui/types@~7.2.15": version "7.2.24" resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.24.tgz#5eff63129d9c29d80bbf2d2e561bd0690314dec2" @@ -1779,6 +1870,17 @@ prop-types "^15.8.1" react-is "^19.0.0" +"@mui/utils@^7.1.1": + version "7.1.1" + resolved "https://registry.npmjs.org/@mui/utils/-/utils-7.1.1.tgz" + integrity sha512-BkOt2q7MBYl7pweY2JWwfrlahhp+uGLR8S+EhiyRaofeRYUWL2YKbSGQvN4hgSN1i8poN0PaUiii1kEMrchvzg== + dependencies: + "@babel/runtime" "^7.27.1" + "@mui/types" "^7.4.3" + "@types/prop-types" "^15.7.14" + clsx "^2.1.1" + prop-types "^15.8.1" + react-is "^19.1.0" "@nicolo-ribaudo/eslint-scope-5-internals@5.1.1-v1": version "5.1.1-v1" @@ -2304,6 +2406,12 @@ resolved "https://registry.npmjs.org/@types/prettier/-/prettier-2.7.3.tgz" integrity sha512-+68kP9yzs4LMp7VNh8gdzMSPZFL44MLGqiHWvttYJe+6qnuVr4Ek9wSBQoveqY/r+LwjCcU29kNVkidwim+kYA== + +"@types/prop-types@^15.7.12", "@types/prop-types@^15.7.14": + version "15.7.15" + resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.15.tgz#e6e5a86d602beaca71ce5163fadf5f95d70931c7" + integrity sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw== + "@types/q@^1.5.1": version "1.5.8" resolved "https://registry.npmjs.org/@types/q/-/q-1.5.8.tgz" @@ -3447,6 +3555,12 @@ cliui@^7.0.2: strip-ansi "^6.0.0" wrap-ansi "^7.0.0" + +clsx@^2.1.0, clsx@^2.1.1: + version "2.1.1" + resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999" + integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA== + co@^4.6.0: version "4.6.0" resolved "https://registry.npmjs.org/co/-/co-4.6.0.tgz" @@ -8113,7 +8227,8 @@ react-error-overlay@^6.0.11: resolved "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.1.0.tgz" integrity sha512-SN/U6Ytxf1QGkw/9ve5Y+NxBbZM6Ht95tuXNMKs8EJyFa/Vy/+Co3stop3KBHARfn/giv+Lj1uUnTfOJ3moFEQ== -react-is@^16.13.1: +react-is@^16.13.1, react-is@^16.7.0: + version "16.13.1" resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== @@ -8128,6 +8243,11 @@ react-is@^18.0.0: resolved "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz" integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg== +react-is@^19.0.0, react-is@^19.1.0: + version "19.1.0" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-19.1.0.tgz#805bce321546b7e14c084989c77022351bbdd11b" + integrity sha512-Oe56aUPnkHyyDxxkvqtd7KkdQP5uIUfHxd5XTb3wE9d/kRnZLmKbDB0GWk919tdQ+mxxPtG6EAs6RMT6i1qtHg== + react-refresh@^0.11.0: version "0.11.0" resolved "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz"