From 813ac666605bdeeb6adf3d0402d1c4ce56788100 Mon Sep 17 00:00:00 2001 From: Anna Dimitrakopoulos Date: Thu, 20 Jan 2022 14:21:35 +0100 Subject: [PATCH] started styling --- backend/server.js | 2 +- frontend/package-lock.json | 77 + frontend/package.json | 1 + frontend/public/index.html | 2 +- frontend/src/App.js | 24 +- frontend/src/assets/close.png | Bin 0 -> 1092 bytes frontend/src/assets/github-icon.png | Bin 0 -> 1639 bytes frontend/src/assets/linkedin-icon.png | Bin 0 -> 732 bytes frontend/src/assets/logo.png | Bin 0 -> 12466 bytes frontend/src/assets/menu.png | Bin 0 -> 1208 bytes frontend/src/components/AboutPage.js | 36 + frontend/src/components/AddForm.js | 256 +- frontend/src/components/AddsList.js | 11 +- .../src/components/Buttons/StyledButtons.js | 16 + frontend/src/components/ContactPage.js | 37 + frontend/src/components/Navbar.js | 109 + frontend/src/components/NotFound.js | 49 + frontend/src/components/SignUp.js | 20 +- frontend/src/components/UserProfile.js | 71 +- frontend/src/index.css | 6 +- frontend/src/lotties/NotFountLottie.json | 3344 +++++++++++++++++ frontend/src/reducers/user.js | 4 + netlify.toml | 7 +- 23 files changed, 3956 insertions(+), 116 deletions(-) create mode 100644 frontend/src/assets/close.png create mode 100644 frontend/src/assets/github-icon.png create mode 100644 frontend/src/assets/linkedin-icon.png create mode 100644 frontend/src/assets/logo.png create mode 100644 frontend/src/assets/menu.png create mode 100644 frontend/src/components/AboutPage.js create mode 100644 frontend/src/components/Buttons/StyledButtons.js create mode 100644 frontend/src/components/ContactPage.js create mode 100644 frontend/src/components/Navbar.js create mode 100644 frontend/src/components/NotFound.js create mode 100644 frontend/src/lotties/NotFountLottie.json diff --git a/backend/server.js b/backend/server.js index 90bb477..f55f0aa 100644 --- a/backend/server.js +++ b/backend/server.js @@ -36,7 +36,7 @@ const storage = new CloudinaryStorage({ cloudinary, params: { folder: "profileimage", - allowedFormats: ["jpg", "png"], + allowedFormats: ["jpg", "png", "jpeg"], transformation: [{ width: 500, height: 500, crop: "limit" }], }, }); diff --git a/frontend/package-lock.json b/frontend/package-lock.json index ce4b2c0..0653fa9 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -15,6 +15,7 @@ "moment": "^2.29.1", "react": "^17.0.2", "react-dom": "^17.0.2", + "react-lottie": "^1.2.3", "react-redux": "^7.2.6", "react-router-dom": "^6.2.1", "react-scripts": "5.0.0", @@ -4727,6 +4728,27 @@ "babel-plugin-transform-react-remove-prop-types": "^0.4.24" } }, + "node_modules/babel-runtime": { + "version": "6.26.0", + "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz", + "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=", + "dependencies": { + "core-js": "^2.4.0", + "regenerator-runtime": "^0.11.0" + } + }, + "node_modules/babel-runtime/node_modules/core-js": { + "version": "2.6.12", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz", + "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==", + "deprecated": "core-js@<3.4 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.", + "hasInstallScript": true + }, + "node_modules/babel-runtime/node_modules/regenerator-runtime": { + "version": "0.11.1", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz", + "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==" + }, "node_modules/balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", @@ -10756,6 +10778,11 @@ "loose-envify": "cli.js" } }, + "node_modules/lottie-web": { + "version": "5.8.1", + "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.8.1.tgz", + "integrity": "sha512-9gIizWADlaHC2GCt+D+yNpk5l2clZQFqnVWWIVdY0LnxC/uLa39dYltAe3fcmC/hrZ2IUQ8dLlY0O934Npjs7Q==" + }, "node_modules/lower-case": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", @@ -13127,6 +13154,21 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, + "node_modules/react-lottie": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/react-lottie/-/react-lottie-1.2.3.tgz", + "integrity": "sha512-qLCERxUr8M+4mm1LU0Ruxw5Y5Fn/OmYkGfnA+JDM/dZb3oKwVAJCjwnjkj9TMHtzR2U6sMEUD3ZZ1RaHagM7kA==", + "dependencies": { + "babel-runtime": "^6.26.0", + "lottie-web": "^5.1.3" + }, + "engines": { + "npm": "^3.0.0" + }, + "peerDependencies": { + "react": "^0.14.7 || ^15.0.0 || ^16.0.0" + } + }, "node_modules/react-redux": { "version": "7.2.6", "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.6.tgz", @@ -19588,6 +19630,27 @@ "babel-plugin-transform-react-remove-prop-types": "^0.4.24" } }, + "babel-runtime": { + "version": "6.26.0", + "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz", + "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=", + "requires": { + "core-js": "^2.4.0", + "regenerator-runtime": "^0.11.0" + }, + "dependencies": { + "core-js": { + "version": "2.6.12", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz", + "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==" + }, + "regenerator-runtime": { + "version": "0.11.1", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz", + "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==" + } + } + }, "balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", @@ -23981,6 +24044,11 @@ "js-tokens": "^3.0.0 || ^4.0.0" } }, + "lottie-web": { + "version": "5.8.1", + "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.8.1.tgz", + "integrity": "sha512-9gIizWADlaHC2GCt+D+yNpk5l2clZQFqnVWWIVdY0LnxC/uLa39dYltAe3fcmC/hrZ2IUQ8dLlY0O934Npjs7Q==" + }, "lower-case": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", @@ -25580,6 +25648,15 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, + "react-lottie": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/react-lottie/-/react-lottie-1.2.3.tgz", + "integrity": "sha512-qLCERxUr8M+4mm1LU0Ruxw5Y5Fn/OmYkGfnA+JDM/dZb3oKwVAJCjwnjkj9TMHtzR2U6sMEUD3ZZ1RaHagM7kA==", + "requires": { + "babel-runtime": "^6.26.0", + "lottie-web": "^5.1.3" + } + }, "react-redux": { "version": "7.2.6", "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.6.tgz", diff --git a/frontend/package.json b/frontend/package.json index ccbfae3..cc5456c 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -10,6 +10,7 @@ "moment": "^2.29.1", "react": "^17.0.2", "react-dom": "^17.0.2", + "react-lottie": "^1.2.3", "react-redux": "^7.2.6", "react-router-dom": "^6.2.1", "react-scripts": "5.0.0", diff --git a/frontend/public/index.html b/frontend/public/index.html index 7b398dd..72abc4a 100644 --- a/frontend/public/index.html +++ b/frontend/public/index.html @@ -7,7 +7,7 @@ diff --git a/frontend/src/App.js b/frontend/src/App.js index 2a7a883..fd5f341 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -1,31 +1,49 @@ import React from "react"; import { BrowserRouter, Routes, Route } from "react-router-dom"; import { Provider } from "react-redux"; -import { combineReducers, configureStore } from "@reduxjs/toolkit"; +import { combineReducers, createStore } from "@reduxjs/toolkit"; + import { UserProfile } from "./components/UserProfile"; import user from "./reducers/user"; import add from "./reducers/add"; import SignUp from "./components/SignUp"; import AddsList from "./components/AddsList"; import AddForm from "./components/AddForm"; +import NotFound from "./components/NotFound"; +import Navbar from "./components/Navbar"; +import ContactPage from "./components/ContactPage"; +import AboutPage from "./components/AboutPage"; const reducer = combineReducers({ user: user.reducer, add: add.reducer, }); +const persistedStateJSON = localStorage.getItem("userReduxState"); +let persistedState = {}; + +if (persistedStateJSON) { + persistedState = JSON.parse(persistedStateJSON); +} -const store = configureStore({ reducer }); +const store = createStore(reducer, persistedState); + +store.subscribe(() => { + localStorage.setItem("userReduxState", JSON.stringify(store.getState())); +}); const App = () => { return ( + } /> } /> } /> } /> - {/* } /> */} + } /> + } /> + } /> diff --git a/frontend/src/assets/close.png b/frontend/src/assets/close.png new file mode 100644 index 0000000000000000000000000000000000000000..591116b067c8336f8a7844af6accaa247b2b3685 GIT binary patch literal 1092 zcmeAS@N?(olHy`uVBq!ia0vp^6(G#P1|%(0%q{^bwj^(N7l!{JxM1({$qWq4KRsO> zLn`LHox3;hii3pf`pQNQt+<8@>a15hIy&5aRZ#(C$sJY+oN!i@$$p`D5TbmW{$SpkC zT9Wdt`*!ihlD=4`lj|Ae^lRsH<}uDGjs33qSfbkblgI&U27Y6{&ud@ra{Ygsom1@~ z%X`D4f(_e4ZmKPeh++7#^9yef%fAT^Y~L;JkNNw$%Dnyi33+h_J28o5sY%DrY@TfD zb~V@NbAEAq#+wvIhLggR?sIpBM>-k&4SHdB{MG%i@`S?^cYfPpn`2-k`&}Ukr#n78QF6y50I1wtSES45_*rIFpz!BI zT@!aM+RO&HCL^Gr_)Gau3@>kuN@Yw6MdIr}tLYbNO`!9%3st&R@ z-@beQ(qpTn#05BbMECI~FF~Ouinx=KT>z%?SHVkDo0| zN;$6U+Ik}K@vqYcF|t19d-m*v_kw~u z2W4b`3P>otOIX*pho1*1o$fx5nfaLPnY$C0Cp_4}%@4?EDjVv`kJ_UjOLl!G;^Qh7s@PDXy-l z+Yl1N@M70H?uO|n{-2)kY`(mX`1W-1pQfMw9b5hKIlFgG@%!eV+fGVZM>rR z{voiUJ90cb6)Lw@&z)QoR2{c8V)uT`-1+4Xljhp}7OeLyP6LYt22WQ%mvv4FO#p3T B^HTr- literal 0 HcmV?d00001 diff --git a/frontend/src/assets/github-icon.png b/frontend/src/assets/github-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..f9abb9691b5421defbd38b7899b599bde7881aa3 GIT binary patch literal 1639 zcmV-t2AKJYP)-$FrxyefcOfSZ8vKrK)S4AJ>6;4rWk*a3V6 zYyyrYC_~Oj0W*OwfHOckW;+9{Qy!@SmK}f+U=eW85$Ytc9(W0u3e+QSX)sWvzsKv` z%fJR*W7Z!876QcsrNm@lw|1o<}u z+Z_Ha^uuwh0)Eg9x`6q>prkiZo(q7#b+7Lbhmi=zBCk6Qv;h;6V(dW!unT+C#^%d# z1h5nPbcW~4Fb0MJU+dnxf$Cft6=RRnH`sVEkSGPd#X6OoY{nRN8}f7vE(MMPe*ixL zOOd0HE3OCL0=6T;aWB2!{BZ0sYl+KzGS;wzHt{ii1KU~P17IZ31iS%k2HJs6ZS6X? z6u1o-4SX8HD@@=9tOIC@szeDkPRtLPKc;gtfa$7ZKY#hrC_az1BF&1yP6`<+Lj0 zMGBjCgax|-pj(BwFl3{eY#TTjL*Jxzr0#tj2Z*J=M_hWRw`j{bfq6O#%gtv-oA0bHsK-;O6^ zB&=56PkCr6fKxyZ8RVR*OxAmtR3e6W7Pui7NwdJn&_Qo!62wNOyUPr?M{APy8$1l= z0A;``#5*O8Pjvqp;C>I?M(rETfU8KI_P=--+^7A!F$Ii+_q3nlp)qzE>Tufed!s_c zhR)ExWoeztvBN`imD21q1MV9!`P7jNi_4J!c?>bO{z9kr!8ql@#F>lDfU8KE_9rqd zHseF->$a1`2<`v!&=^^a%oK(YZ9`mKFrPW+tQiCR7GK6lsMY=oU=NZOl{)h$$a01B zJ96%BL{fzcte-B^zfHEfAStOsuu}JU6)C1F0&NsF12}3Hxw%d|lGrUoeE2xv60Aa| zrGR~i!F469#FdCgN-6K-$Qw8g{E5VuJxI`g9Z8q!p!d--icCl9hAqH;q<}IEJAt*x zZDI>B8++vPMH%qED$#=6eU&1ab170_jYf{%osP_XU{a4ISvIUk6iOqSv79loQjo82xh3je+}Z=Pa~dg zS`JFwt-KEqA>Uhwz0Wf4xd8F+Y2=BV!~euz@$jFkGzanLQ$Y;I-g-U}WkE6auGg*9 zW@GF5CZs0l!rp&%W4&0BhkpT**`|><7!}Xxnq9=mzMHW}=vo~s0S@W-a^zy!%?v&w zdzor5Pia4kD9=QdCDZMW7cIJQ4>n!C9sA@nwW}lWZcy4o5om|23~69lbnz`x$PIiN zi5DieOh6)f2U5ES6^U{Sn8LbWA1bi1s+Bwnx=O6Qv|?+8Fc?LmA{%`rVvlJgmgW7y z$NkW=4{I}V1&c#J5s5WMiM&7b7*t`OPB-u@eLYhWiWC9QVePP$1V6nQnDp8R(1xVb z#&hMPNP+TdbH_aBnMZF0+DZ0nu@}Y2)qaN~fN6`7^rId*lEvDp zbZi3-QDlI zc{4k^a}W^`;fp#j2mAoq6_=)XsksI*6M%VJxvdSNE(f%LNnptJS118Pz;%qLHp-rP zF5=1Ze0gIE<84kOZi;xYOh=v=#CZFz5huAADz^2vw*n)jz%`K5z!TsLunf!sCyO>! z6l|$g2Y%B%9c}=lyXMXz^=-m8!p{IlfP%0W57dT3HVGkvsNL2gn-;*@aG&z7O(jc-U3&E zqriUP5O4-~0Q?lqEcR@vG>{Eo6S$RO5MUhmD(9GX^rsf)3FJI*q2qf`#`Vw2IaV?E zE3FT;Fi#+0mNoZ*Z=zWS?qE_Yji;iy>fpo6u#LBA`YfrN1m~j~sk> z8Mg5@%?;r{0H-js(m1dv{8UPRT=M$dMEG^D;%njL>6o?dChHB8sF zFb_P#C7E);Fy>`M@|H!tO`U8Pgjm$u(+O&r-P2@qw94ZBhk=NQ2!p?t$+v`Msj^o9 O0000=42bnyRJh|^HF)ZNmT3UWECwuolegKJSg5vb zT`Fa#CU!>RW@J~&#E?v& z1Y|}f0$_$h!4S~@bytlT^<%57^vpLg6k1vpJ9odCschlNy7kauxgi{Riv_el_ZPqS zlj7q|LI3vu008PGgr)CQh8~3bHTQkru7`q*DBm%CvJGtZ&qxyA@E1m&UT1$g-6{@P zbv5XSn>FjI`n6qy<80{ez|rJcd>cR0)Hd%T_*-U zg|rq1T;g5jmoMML(0WH^qW+!Xu#;5Bb1B060-sz`lRxR_%BqBGY=+o^I|p|J!f@3{ z|K{+kN|x2VA&^(#;@k#SRSnKpBvv_#=#be0^fW=#^CukHzdAYqy87+xLIwm0Jde?- z&lm49`JBezinz-h8zE;C2p%)_|7q5E@yq@tJZJh~e*hR9OE2T-(S0bu8C7CJXC_LnYuacmS8Q z-PD|f-6<4ngM&-Sz1|p!pOiKtg!`@HPUU}O$-j@*z*Ik>U>j5}t_}Crucuao3nRU; zjrJ=76qR8P;YcgijwS@PMNHp@t1>ycm(FctZ3xfQ$8cmp+i~zx7vk&)-Ug&M#?hbF zCj2Iq6g(R>a>eyNrffKaB;I&By^wO|Qm69}6JTFIIi|lf2GM^m>EBvGF;U~HW7TY7 zscI^0QpwZDXsW@b=dxNfG*#wxk!?gUlEgpjQ_EjsayB%~(y0+X5mwrbb zYKwf@8k4VRv!(GsHvS4OF>un+e!3} zPr-Vt7Tp=sV9)bT+p3ch4&phE!JWid&XNQ!aC4yf4K(*D0a{DxHD|18I3a;%0N!XC z@nVZho|^WB@}Cj9_NeSHcUa`rOOr?@Sun(~gAAcA&VoVUDMTv=qFB67DQB`y!uRq| z&+cUAcI72LhqD1BJid`652OcRxeMmptxaV|PtbFyg6l6|-aHZ);|n`qEP4kj(Bd8_ z6sV=#MvF?->7v~hrB>c`g}a)4)~CMGpGTsRT2~-|A|xy&+pr{D<$C;2NuvM5sh#6@ zgqj2x)#N_@kyY&@$0vW{!W82n^GJ%w>*#tHCK;DFO(!_zqz%mfkD-njGB_NtFNdu- zc~FWqN{s9;hShhu!=BUa?(z`L4if4Adx+D=1{ib{C%*o|j4FWYJ{b=13>Vg$W1sP_ zN~_FyQx-yE9$KS9;onF=H1itq9l#&QD^eA5IR%UMYRI3><8BUmS96$qe#>-`u!2xsGM!vF; z*235>l2sT0V0jzLn{U~Y6e!OhBZXVua~c=)Bp2oie6dqGLpISx8HKm5czpGb2M2C>rDP>`1g+qbS&X)NL#jt34 za@2{oeFJB<*yQ0ajUWkV1v5x5N@BM<47}cDs29yUNzDC=Kn2VJZv#Rv6{3siyveJb zwKbsX%BUNnDuLp2w`3*hbKmd@*w3#OK}%tBvaGi>sDqFrH3+G*Qn|YP9&1F0>O3kZ zH0wA4d=ZWz#gvXZj8U8QRTMfei(17~bP56$VnYO@)IYjt%AzuJ7&oFZ|8XK>uq_Hp z=E%ta$~7`Kq7B2TlDF@2e>;d}SH8C<_`6&BIh3y~1jh0=SCbiAfJZimBOw&5hK%X! zEK;HtA5<=0CJk`jw~8<(fc|Nj#TYGn`B6rP70QOQ#gW>`9bNB__M8>cvX-J7WXwpw z$jo5N$~@&Xbtb5@XC;4{hL6ndYQi*!W!|FGhOY9?kf6v=TYPavHaGf8zJS}ycZ`If z86@SB5#bv+aSzD7)HFkdNIwwQj`5?Fq}Q_k7bZu&aHySf<-Db}1>_dR8i2jv6A54x z5(i|8(qe`Rpa%3;Q4EITrX+EL`cR2_sdTX(5ZYFihe;uU=d11I^QN~j9{q6|RO~^6 z&1PwJWkpCqNXYXf44-cv8m?e%OaR+-dcg_W+v@d4w#<_vS*hK&MgSOILJU_9|ItSW z3}DSX4Px{5=)W}ii4At!{Fl1EKbyZzZk#oyIA{EUPtyI*IQnz@ws28vad-Dq;p+`1 zNvGmXoi@2gh#WWmA>cmL!CdAKK^o_lZPA43()3!!{- zypK~d`3>3EU!9=#={gM|e|8_7obejIO(;gQ*qb0*f*{f1{CRqVeg(?rH7(+HCFEa% zG!B(!l%Brqov*R}3W+Ji*ugm@7aF|(*L#ES{&9q=2sktO4&0xoUz87=D5QxhKomOQ z(@8{wzrJl4{^~c*n8%BcTqrH(y4CY$Zz}8eyKS8BQYC8a8vJHlaqkRR6OlLDUAGGm zT!@RCWB5xcn}p!oxA)=?FZoNtQ`fMwm#)0Ky(zD*;$rI}1RA-st9jt{^EXFyk-lcw zZ|km>ev!Pz*Sw(q>G4rY?qw_q`Cci9x3aE8`udwO#V&{Hq4#<1*(IQ_db zB$^l>|2KF)%Am&ZqFmhdqNYSZdiTaSXxqKiMqMN%3p2eSJ~|71gyvs_Q1G5ZaIYu0 z|LIGx(%~>F7KTOE`j9y8Rb+vz(9rdpE2-;h>31HX16C)?=RuP1G`5Wi@uJ>7c^kT@ zAKmYL$23(n?Tbs#KntOWm`7QgjvYpy^S())$)UCm3@P(f*`q@hv}0p?7+Bj5o)4Px zq-qUke6%5+w=uzI#^9|Qc>3854Rw!! zfy?t)kHYJ4U|@igv{TGrz*`vwpN-~8_MuC&xbv8>8n~h-u^(K zlPzv3f9MF#ROFFUq&q2(pZ(CXwq5=-Wp>gaEnoZe^2`0{W93<9RbHIl9i*oHv02^o zMd>Etvt`7xO1hXL?iY@2yqdy>4y}%SCUN0f*i{dsD}LptY00JL)rl)j-9!*thIMFz zfA377;}d2A@m1Z&C~jJzNl}+sYb>DLBNir3G{KKaef_Pobd6+7x`#_wedqytI?JW3 zv_RoP!FAkDZ~^k8D(;3QxfuTt;NjqWtJ!Y0wQDwH)&TPROee5jZ&fq;kn-&!gzwUk zf58NgR{UB7vf$fEO7+K@fSMt}Co$EBOw8l_*$YPdxmwI8 z>huh@S@_M9h~^Z;XR%v34c$W3fn*@MwC@;=PgmM9QTdcFf?XYS@i3|CQCUZ_MKrdTU^)TYxm- zn<%!lInow(t_D;5iW4$aBhMW?^O7c~2>JZF7cSnYUkty1&#Wz`#GTbtG1sKA+HXhi z3EzX&1V@PoOu*E_nhO?n8E75ax!Y`IKLT%8?Sj<+gH{w@pVwI^+G7bn6n*zEZCRVN z1cjvTt#Osf7S|fAv1a~Ul$4b8R_1#wRo~|z-M6+FLLy}Lv6{{n7F7iUL0?n^5!o#d z{+_)m@t#>kJgBo(G(0FtpBo!+i2elE#TuTAF?0HqlPO3SU-7gy%VnG>+?;1#<0!}r z4i%7nE)Miol#S{hXGKSNce>SRy}VdHT<+2r;$kW9Y*bvEbOl7L-3#wNne8~8Ww6J+ zAGGS`dr3Zch`F57H+;w)1lW2O9(1exZZ@68Q(2`UD+}gv^2~!`1Vk<;X-)zHcFOqPr;sWA-s(gqGu} z<}#5Wmzd1^P>P4ux|JuN+EzY-SG)T;?LA~(;+TO(m%o-P`eCV$FyCrp4ZST7P0W1Y zh7UwFthW#gKc-q#584CXpGfPk74CQF0LN*}Ty3V(=3KVjT8f7-T2(!+EMh|gXv=Q3 zP@L-kvvD$!O^>m67AHEVY~t`k%D6P(@ZHia+a$E0Vs<;T=srurT>HPyjGn#0n8QXT zd-t>4w7q^6yCPK-m3T^66Ty0Ui)!pxTR*rPQ+UT~qu1C*`x-~`Zo@;-hNU3<_!Tix$pOfO$E#)`N<&3-0ise&FZ^Lg4-`csJ}-z~lk2I~t!l{wbv z`6y{j@eVA0-tFW#HB?U4q;MmIQI^^|lk3N)T5QibpoTjNDCR?`+_`tv@%obn-^Mz~ zN8sQ7&StV~(lDg~GJ*%}6 zXN_%wbeya+E^V+(-Z`rOaMhO<1zjJ_ z3UnIuD)z`^uI*&fOF{WcKdlOeKb_`m=1t-Qfdps2NJ#s zv7;WeHO?&8?A2#`RqG7_avAx|7fPNCzIgOfJm0Num&E)I8X#{L>^xb#61?1@U-I1J z7+(lbUpch3g61#JCUD##PsBJxw|y&py*_Vwg$fKQsqO3H))y;hTCDWEYk{(5r91t< zP%y`fWBWEaLv4%tAZj;s@?j#!*`2^sLVLq1X!>`_L5_|(Y)@-T!k^ktUHWyV4+ca? zE5UVIz3>SlGp@;|a8RUMr&gGt0fmdflVKyTc+32@g6rKyJU>&y5iyy$CuE|WUcpwlLIuI4 zSIOw9n2+wyTWpb5L^CqOHr++K=Bcff5A*f{gNX|RQNuJZQxk_<=w^2+IdmCF{3)C1 z_yWW$`D~V+b75!5!~=5cSO28Wmw)pRB3naLO^RVKL`+6fTuKb9%p2o8Hp+~fWD1u! zsBhdOxFM|XjNd@u4MA5>TITxB3NL4q?8=oU^t&stSv4)AI)TeLy<4|8dofTk2dlAd z^?QIUAl3~ch!rOirETNRQf1plj_)*01G zAP;V!kj^Eu2~RjTPgfEWF3{E(`ItK&;=K4cOn)poxX3B(J5`i=xudwvfqbuM6dRmv zlGrJiX(OCB_e>w1LQ$iQ!Jv@-l!kurfq!C>nMQKLE%KCVVPjh_%u*~8(=Jx~yj;4; z80dH!!eASUQ1JZT^F|i|Ue?w%OR5Tfi9l4+g#n9Ep?(dHRZl2K>(z~Zb6KwJzPc+{ znEV^!H^i!Q?2}@#BK-I5dU<``*x}A2kIQ4VNAPpiujVqFT_03}<=|eDPlZRDAGnG| z&h@2OukF&#FMe&PL)^*_p7A;?`AxZWw>2(CgNZ)$SBS5~wrvtEx$2I@iAY{{8Ocs2 z>}3s%#*Ivs4?F+G+%>u`*>kZUnAf@!D(0k@6T0`hilJ8PYCd8PP_=c?w@*eNF7bBa zvpnI~&N3aKca#gC*j|qxZQ8fOGa+>~G!?QC>(4E>+A3!edY2C4{L(0@8V`#IzcL7C zH@MS!nZM*JXu`_xY)eSXP8+eFfN)4cNARgz->l_nzY8vsV3S-)4G<}ab9%$}F>=2MWcbW0?8wsE{Ki*>OM&acIl55Ex!!@L_YK4JMF8(eaMovYSOB&Wm+3me45fnWct z>DSHVqvGt#fuS6Hazbx&%-&6JV@=cyV(phR7pan%r+i1iF(pY1BRKtqLKA5FLKL=H zY;zv*w6v2>j*}MPO{VLN@|gMOnc)vL6;bWlmdzjR1R{mvWq23}wE7|MTiD2BuLch} zKsIf}l$&lgrPa53=F@Y7wN#_`qL(;v6?4`5HgW3OufFngpVmRfnDqKZs>gh;X*WH1 zqv@R2>Jf%7-lbv7f>}D*iD8y(AP_^WAQkHe0HnthXJ&)R#84h&Pt z#X+BA?NZ>m%`;KWUbk;-2N@Nr+(}Nm>}#*9fiewF`c=GAEKgCB8K(>*b9(&!*)5d7 zhdRn0hcNoohZLJM+5Y;z%Mj){@lz$sCZEaR2-gb9v?889%_k>5MuOi9K4KwEAv%U< z%5|%j+hVWMl9z4(1+Ou_DkdXwH4;?{8~JFGD|~OsMK64pjZ#->yAQcQeX&zL;cPG; zhqC}D02#8vyE^5w5SV455X*X5RvcgExG5zju>U{RzRrm;3UB_;aLQlYB#LHy_$CyQ ztGC~uC^-acl3ksV>r~z@z@mGqtQ(JXnA?xt5d5fXEg%4Zju}+duIeDgc~;~)MWwER z@+>3vV^n!d208o}UAYc}_L3{%iZO_MmzstTIOH#lSd2a z{`ImcS(sU2yZXmJF3dS!Ao98E+g>Cj=mB82Unl74+UoHCpw>O`!AByK{s5Ndq;;DtagxQDCwOLA3x4HgTZz+PBDpQA> zhu&gBSZDrmmiUz86z-4LKIv?umu+vFdDNj3X9kbOJD5!i*`pXE;pt0a%X=Cj-F;}F zh<(6FDbtuAKmN|eAypO>WE!8%-@EqDcmBV=s?~?GNy64fBTl$sE?QMM0-?2Y!24G! zHk>+>=PGTcvL*dv^MZ*U{d3q}_+aECLc_V)P0{>OSo$%3#SX9g=6E%r_w9{G(Q`US zQbV)YHMEX?LE|Sc*)}`*CVYIkPhs8Qz>e(9ARiw)|J)%LiUv<+5*k)DA?5`EaPNS% z<4)!4LKW@6H0QDy{8SSC=s)1864e$Nz zq-;Ikt>rTv(O*}RD{W~WnyYk6cs~3_W&Xx*Q(Dni!`@?ieF@!p2k-T%`XqcGC}z>7 z@zp__QB7sjD*L4ZjN;#7A>L=_pTtCS<%6bwRXP0tY@WjiUpx~lI(L-p)^QFF(-K~g1$uvAxj6mbwP&jBe!d639T`@ocjKIBYT-|^OO@$C`8YQtEobc*MX%R?Ci zqlDR!^0Nhbm|K=2@gM2U28=7{MI91i$QRsLR*PhfLAGuwXZ@zu?lB~AXJpG8Eo>rg z;O}FrtdPG6RnH42nsES)ij}Mv;VnQRo8y7%DSn@Hy>t5<1x>s*^M)$BJ>UYyrYHN{Kt>#V;Rf? z$)1NYyFblhN_zl?FH{>ZpvSG6ZD??QnpcmkKBtL%RE+SzIm!FY0T0Z_XQI5>Dnu@a zM)NBu-dF!^B@lRJjVS3hmKNu&2iZ3nX#q!ATUJBa$3svJ) zdx3n0O#pN35&~!n(sSKf*v>w7cy7_*F;!CeO^wN}|Btg&xPQh$*N5le@*s1NDP2Zu zhy3q5>rE40wK{_=0|%U7?WaA0v!@!<5s&B)*e=Wmo6*8(HsrhJWfzAX@(Xw9tw-11 zDhH$+Kw7phi>3Mf;9&!;J@Se6aXQ2%XYFr-XOW$4nNvlStNCHddRYj8V#V{L-tM$A6Xy%5Ae%_Q*dD*i^5YyIvUg zU=vT231aIvN!7i9MAsUY|FE8=a_Z*}Xc$3-5P?Pj;BV}H@r6a1(UAnJKh!rGJ(afJ zelUVcDI{VQf81{aqnLwtuY>Gikn7mn>kn1B%;;S(B>uYn;T@`kezRR$oI^i|9FcM?b5Jq_{jGr z_Ls!GceEdDxayoOD+%JMB4OvHZ4a=p$6k9+}EoA})s%ToteC7w;u)!{?K zUTs*@s`jkmfBW5Lihp7mQRl`Dy{e?rKDNz_e2YXaWxlD4o3@^q1z zX$aRp8^SNyG~}|ugXH2o%7jkN%n~|K{WCeUMM>#4LW)ANX-`X3O}?$}(@tR!s)M24 zp@o(piWK_?P*E57!f}jcX!Be zL`9UHG9)a{eA_dY;nUA!>L?MzZM{4~frJB!o$UoeJ+o(GqywoWnhGK&av9f3oxD^m z2rE${QjB;?Q97x`%JNu6AzVN`jT$s$RDR$*fq3Gf0u$t4gV29)W)RHtpYg!ksSpzi zl6>R4Pke?67)q?}tLs6&c0hcd>3yu$IaXtJ1ZN5%g|LYv56llfGRQ3`S{2=GM3pBP zC0=*iA&NcC6`UnXyxL>Pnct6?u&^dH|IuJMgki~5jtiTsVPG)L%%TA0tzz{Vac1&d z+FWt8on+!1o&00M`xClX^f#w_^eUbK=ul1HCKwuF1f9rjE==F6IF}SFYi;uNt)a6X zjN-BI%FC?#Slu5_d{{E-H`e8O9P}DLuGobpFYHNiB9+y@S^TzM zxqZG$;pZpr7uy}Gura#|wEDa{kN&jZ<6 zAvBrpek%QhM-f%OX&-3#ILrOsk(l~q@?`mEwT|b7=DIQHZkI1{k9c$Q7IpsKS*Y(x zI=^YFEcMmJL^4_Y0e;%7H2JUdSZ2KW z&m_zPGX+D0UNRR=jRd^%#HDnMG^Ar}L>_LjP%FZ_{O6G=dp6L__DQHSuymr=%+RVe zDR!%TIr7P!1Y(Ibb8BnsiXO{;t}SVB{O}-G1KoMUOk%D_8yLH0Hq*W17de+`w3)fk zVg4K#pWJsOuIQ1PgdJY5L?{t%^|josu5Vg?JR`Fv?`v{^;@!%zcalA#z;t<*sUSZ0 z$TwllN@L-Tp9}oorMCA^4%3`p)ybX#O}csE6+Yj3 z$3*@W`D^UN&3A4I=@|d#imDP;~`Oi5}m)088`sF;{5rq$Hg~3xY z=yIZ0+Ix(BiqWL@don)rT1H@@hL8u`(oe`d!L^H2L#?3~AClcRs>lB`Fyr`pjCSum zV#C*{j>kR8k9-f6vU?D7$bz#cMVMJW1}-Rh+s|nnQWpLxuEPF$Mi=;aQ9u+IFWg=q z4anA`O8ifXVG{YsGNhA?>0c|lH{UiXA6q0yyjgZoMyb_&_C*Wjg=y0+FYHG4ZRD3g zx#!mOv;9pGBTnrH&8m%h4*IJ&rYetUXZp11D@K~tHd+SvaOzghq3H2{<1`UZ%o?tM;Yi&f0X389Y?lAWbwMLE7WPFegReUS7ELBZO$2RDFc;oGc$Lw=7hm<_b&;iqfEb9m* zaYfFWG1{8dZ;#2qVbL49@ox(I9;u~;)lz-WvL*sF?uic|I->t-hInJaOO-vfRND8F zqg?r~bKw+vV~;|fsOf##nqiu(x?XUe@Hjn~zh<{-hxfFQMzA#T)pougy!*hX z;H`n5&&JJNFCw1ijd^T3Ay{)UL|RWS6zPI(we&%LmT%#YBJ7V+vBstBRIN_d4TD zO_FM(T(ShmjQabH!S;FaUDW~RJq$sevWftqC*}o-6m`w6IMVlEq?yeBn&scIKyAus zuQ$nPH%0mFsPLvAk0;+xA6@y;y$63fmbHBmA!oCXK0NY8<}=FjaQaS#9g4zwuhz9l zh#$%pMjFT8OzO#E0=_zAwRQ4u4#3j5=`rT)VtTpCx6Gx_K6<8n^H|L1$L8FK3cdYI ztkg$_S{O^Dj*Vv7G{HVGNal7&oAe)JY3}+BDZ%zX+$XyA5dqO^j-PeAmBy^Qsz6;C zP;9|434saeZ7ZnbqwTq`E;7Sz76K?|d94Mr!UEFrGh7sop$?a;O}rB%2q`a12;s9~ z0Hms);;n!H~%WMusx9LaXSio>mY!);d*g2NMGU%Ig{|p=wnjf8^A< zC=>WODic4;7EHX8vQ1DVOoIWeTx%cH7N(En4yQVBwX1wa8DCwc_#Hd0g390XgfQJ* z%J*QLtYp0D@rc2Lnlz61x&mt~CAP2c6XB+^lW*FTfbrCTM%3ZWj1woBnomT@pQ-mK z^%^hCNrGZoK=EKsRQ1Qc7s?UH`|{?#i50&UEZ#)Oo3;?Bm;DirQBlh#p}h(A!UVG< zrha$x=29_lENP5`41@{TrUirA9P#hSY0(TGyz&hf1O(;^?dpld$X<@tk4$rIJQ=km zQ9z|N7lCI=Zu%@;vr+MT6#)^Ol+?JU-c2~cf=;(RJ0gz3BkUm*LT@qRH?<- ztD>b!VC*vLF(-rp8un{xjU#33RDN3~mf1en>tHKmoU*~p%LM@7Cj^p@qBRYU#LU8zKNxqrZw1ycZ7``g&w;CG)|->W7g+TlQ}um`=91wvSDUM@AJPa7nEt#KGD{<>C}Y}P4)fvLS>El#~21~r7T(Pk}K zswE_m0~pAdIk;bKuGw@5M3h^CITy&8d+@;SG7H%yNPm*94+}A-PRkoH@^Z1 zfe(-TZ;gSBt6+*x`1wbQb0$$1A*t|FtN>X#l`g8DUk zK7-*M8h>Q$|4P*09USQP`4XirKU@({i<|BGPKia|?dxC5G^C(l;7M$)uCC@f#p|K{ z*Dmh-D?-|sB-w9DmzB>p-l%6EojMy+ja0$w_|9^#sp}ZiF8wARr6n?VZdh<2VWkXc|NcXsI`?JbEm8|BZJ4Xu7R`UfG`vp91 z#M)juVEDzwmdu~~Wo&HP0C~B8yz)9xHu7XO=KY8ykHS!%O9q=IS*e`ib<+r5{>K@U zBP*%bV+s4r=!n2LJS`Cljtoir*so!dw!%R>v_4+A6Tb{gX4+%kyq%W&x`inN5?;sv z{sDZJ8>aP!S`RuTu!H(8jxf(ZIl4_S5De8iS1!IrjA^y1pztcJijGEf5$ z#3xV3%0SB@n4vLXP+17Lex&0~*zMBjwPHaBnaGZ0A~&dwKxl_n8COFUwTkO3(P_*Y zD_XwZDl&1b^{Vo+O%Vz4ZK>iFYivwc%XqS0S-&lY0ppWGe42-7MtkgBYu{!&7*Vq2=t?NE z{j5H1UxwhgCcj!**V9_ThYLH9=yCb$>$j~=_)u00uOY0golVp>o{hKwc(f8ef8+J% zMUVW<(WL0wxn8}qXTjP0x1X&l7nT#;13-tev5G&u`QKfc!lS2U{xy3lz~O+Z&m(WbapdzNqQ89<8ZKg)?< z!I(T<`VX1P6X^BsCK2&^Puf%P=*V9`pBD7fSq(yk7KYE7 zIUvWXuFe0ZM_W=xJkaWJJerNaRgQ_2GlGcQYD*}Q4t@Xc5&QoSyuU~q`hq{`l#KO~ Uv;XV$69SU5yoOvI#3Jnf0T?v}YybcN literal 0 HcmV?d00001 diff --git a/frontend/src/assets/menu.png b/frontend/src/assets/menu.png new file mode 100644 index 0000000000000000000000000000000000000000..42ebbce7ad5f1d73f0458a9cda5b49a9a18b364a GIT binary patch literal 1208 zcmeAS@N?(olHy`uVBq!ia0vp^6F``Q4M;wBd$a>cu_bxCyDe8t~u_X^~%*`~kUI-hxx ziYEqoxlS5))MFTWbxedHGKg#%_$5^fW=zESqti#eN zS4~deKbI4>_nYztYo)vtCu33ZD)H|0o_TEdPPGMT12u_$P~V_et;l;wG$GjKjKB1W zbq?$sDvssYZm<_VA$H-~lM3GR$uke$WU4Z-j63`}Agy3qgP!{F>FEfvj=Zie6n-(sENpE~R9W`{mEVq$XaW6dqu)7~ z=|OVr-x#DfGCJS)&8V`O8(Xz|+0Rv4_mLb--*mV8(D`FR{544*CoqAjFqo-NO=e$35529l#kEJnM%=lX#_L*tH z|82)ISqm(rPkm#*#r9{)*-Qhj4Yo?>z`?p37_2%O|BeNp7Q3K)@}tx|cjM;VrUhY} zSf~6mv9o8(zaMXFN!SZA?6o`0?7w%qd@$KO7d$ur>dUik7t zm5P$zRliGD8#lc@ke6UAr}26>=Lhx=vEuBf(9+}*>ou2~KP;URYLdRF_W8c~VvU|I zcV1;30tV9=27QM1j9pvuUOZa1<&D~b$OjSyMoMDY>Z|k?1f8;a;Qip}Ez2w1n-9De z{21=L1L*p1OS#vtKDoMl9m8*>Bt7XhnVTx*eW&-SZ;JeSOJ;+%(z^%1Jvkx$l`F+WHVDiDoY<1jk#v8(d=0*!=>8&+yyx!n_b4}H2r4L@)Di(aY z { + return ( + +

About

+

+ "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint + occaecat cupidatat non proident, sunt in culpa qui officia deserunt + mollit anim id est laborum." +

+

The idea

+

The idea

+
+ ); +}; + +export default AboutPage; diff --git a/frontend/src/components/AddForm.js b/frontend/src/components/AddForm.js index aa5bad7..b1e5cd9 100644 --- a/frontend/src/components/AddForm.js +++ b/frontend/src/components/AddForm.js @@ -2,8 +2,78 @@ import React, { useState, useEffect } from "react"; import { useSelector, useDispatch, batch } from "react-redux"; import add from "../reducers/add"; import { API_URL } from "../utils/constants"; +import { StyledButton } from "./Buttons/StyledButtons"; +import styled from "styled-components"; +import closeIcon from "../assets/close.png"; + +const Section = styled.section` + width: 100%; + &.section-blur { + filter: blur(2px); + -webkit-filter: blur(2px); + } +`; + +const SectionOverlay = styled.div` + width: 100%; + height: 100%; +`; + +const ModalWrapper = styled.div` + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; +`; + +const AddModal = styled.div` + &.modal-active { + z-index: 10; + display: flex; + flex-direction: column; + justify-content: start; + gap: 60px; + align-items: center; + position: absolute; + top: 20%; + background: #212427; + color: #ffffff; + width: 90%; + height: 500px; + } + &.modal-inactive { + display: none; + } + form { + display: flex; + flex-direction: column; + justify-content: center; + } + div { + display: flex; + align-self: end; + } + button { + background: none; + margin-right: 20px; + margin-top: 20px; + color: inherit; + border: none; + padding: 0; + font: inherit; + cursor: pointer; + img { + width: 40px; + height: 40px; + } + } +`; + +const RadioButtonsContainer = styled.div``; const AddForm = () => { + const [isModalActive, setModalActive] = useState(false); const [typeOf, setTypeOf] = useState("Join"); const [info, setInfo] = useState({ // typeOf: "", @@ -16,6 +86,10 @@ const AddForm = () => { const dispatch = useDispatch(); + const toggleModal = () => { + setModalActive(!isModalActive); + }; + const onFormSubmit = (event) => { event.preventDefault(); @@ -59,87 +133,107 @@ const AddForm = () => { }; return ( -
-
- - setTypeOf(e.target.value)} - /> - - - setTypeOf(e.target.value)} - /> - - - setInfo({ ...info, title: e.target.value })} - > - - - - - -