diff --git a/backend/.env b/backend/.env
index 9713a929b248e22f75761d18a6d88d216d126699..68c2b515a500821bf570deec91993931f9dcf0fd 100644
--- a/backend/.env
+++ b/backend/.env
@@ -11,4 +11,3 @@ NODE_ENV=development
-a0mOaDs7yrpTNcoL
\ No newline at end of file
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index c893b4e3f789495ca56cc83efdff748ff98a994d..08c7cc2894108723718dde40e011516343ac8044 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -16677,16 +16677,16 @@
}
},
"node_modules/typescript": {
- "version": "5.0.3",
- "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.0.3.tgz",
- "integrity": "sha512-xv8mOEDnigb/tN9PSMTwSEqAnUvkoXMQlicOb0IUVDBSQCgBSaAAROUZYy2IcUy5qU6XajK5jjjO7TMWqBTKZA==",
+ "version": "4.9.5",
+ "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+ "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
"peer": true,
"bin": {
"tsc": "bin/tsc",
"tsserver": "bin/tsserver"
},
"engines": {
- "node": ">=12.20"
+ "node": ">=4.2.0"
}
},
"node_modules/unbox-primitive": {
@@ -29609,9 +29609,9 @@
}
},
"typescript": {
- "version": "5.0.3",
- "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.0.3.tgz",
- "integrity": "sha512-xv8mOEDnigb/tN9PSMTwSEqAnUvkoXMQlicOb0IUVDBSQCgBSaAAROUZYy2IcUy5qU6XajK5jjjO7TMWqBTKZA==",
+ "version": "4.9.5",
+ "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+ "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
"peer": true
},
"unbox-primitive": {
diff --git a/frontend/src/components/Footer.js b/frontend/src/components/Footer.js
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..a0add6dfc20e1572339b59384a80fe780a48b9ed 100644
--- a/frontend/src/components/Footer.js
+++ b/frontend/src/components/Footer.js
@@ -0,0 +1,25 @@
+import React from 'react'
+import styles from '../styles/footer.module.css'
+import { Link } from 'react-router-dom'
+
+const Footer = () => {
+ return (
+ <div className={styles.footer}>
+ <div className={styles.footer_section}>
+ <h2>Social Media</h2>
+ </div>
+ <div className={styles.footer_section}>
+ <h2>Links</h2>
+
+
+
+ </div>
+ <div className={styles.footer_section}>
+ <h2>Credits</h2>
+
+ </div>
+ </div>
+ )
+}
+
+export default Footer
\ No newline at end of file
diff --git a/frontend/src/components/Login.js b/frontend/src/components/Login.js
index be4382fdede3601b91701b9fe4442beeff7b33fd..eebcfbdb05837708ffd19b61b973eaea6e7271cc 100644
--- a/frontend/src/components/Login.js
+++ b/frontend/src/components/Login.js
@@ -1,7 +1,6 @@
import React from 'react'
import {useState, useRef, useEffect} from 'react'
import axios from 'axios'
-
const Login = () => {
const userRef = useRef();
@@ -37,13 +36,6 @@ const Login = () => {
return (
<>
- {success ? (
- <section>
- <h1>You are logged in!</h1>
- <br />
-
- </section>
- ) : (
<div>
<p ref={errRef} className = {errMsg ? "errmsg" : "offscreen"}
aria-live = "assertive">{errMsg}</p>
@@ -70,7 +62,7 @@ const Login = () => {
<button onClick={handleLogin}>Sign in</button>
</div>
- )}
+
</>
)
}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index b678ce193c4c52edb2c9de612d799fc2be55df0c..89bc1d5f87f4ea97229cff2782586781e0926af4 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -6,7 +6,7 @@
body {
margin: 0;
box-sizing: border-box;
- background: rgb(49, 117, 121);
+ background: rgb(60, 72, 107);
color: white;
font-family: 'Outfit', sans-serif;
}
diff --git a/frontend/src/index.js b/frontend/src/index.js
index d0fc391bc7bc05ce357ce438ba2c088be5e6c87f..77757ea7f1250192c43c3b411b742e6de73c6df9 100644
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -7,6 +7,7 @@ import Login from './pages/Login';
import Profile from './pages/Profile';
import Feed from './pages/Feed';
import { RouterProvider, createBrowserRouter, Route } from 'react-router-dom';
+import Footer from './components/Footer';
const router =createBrowserRouter([
{
@@ -33,10 +34,9 @@ const router =createBrowserRouter([
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
-
+ <>
<RouterProvider router={router}/>
-
-
+</>
);
// If you want to start measuring performance in your app, pass a function
diff --git a/frontend/src/pages/Login.js b/frontend/src/pages/Login.js
index 4047e5ed90da126e6ca260f4189116f40343eb7b..1bd9cab489b15731ef89abb4c47139da823de172 100644
--- a/frontend/src/pages/Login.js
+++ b/frontend/src/pages/Login.js
@@ -1,14 +1,17 @@
import React from 'react'
import styles from '../styles/login.module.css'
import LoginForm from '../components/LoginForm'
-
+import { FaArrowLeft } from 'react-icons/fa';
+import { Link } from 'react-router-dom';
const Login = () => {
return (
<div className={styles.parent}>
- <div className={styles.left}>
+
+ <div className={styles.left}>
+ <div className={styles.arrow}><Link to='/'><FaArrowLeft/></Link></div>
<h1 className={styles.label}>LOGIN🎈</h1>
<LoginForm />
</div>
diff --git a/frontend/src/styles/buttons.module.css b/frontend/src/styles/buttons.module.css
new file mode 100644
index 0000000000000000000000000000000000000000..684cb06221d739ee8e9a08c6f082ba7ffd2f3ef4
--- /dev/null
+++ b/frontend/src/styles/buttons.module.css
@@ -0,0 +1,39 @@
+button {
+ font-size: 18px;
+ color: #e1e1e1;
+ font-family: inherit;
+ font-weight: 800;
+ cursor: pointer;
+ position: relative;
+ border: none;
+ background: none;
+ text-transform: uppercase;
+ transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
+ transition-duration: 400ms;
+ transition-property: color;
+ }
+
+ button:focus,
+ button:hover {
+ color: #fff;
+ }
+
+ button:focus:after,
+ button:hover:after {
+ width: 100%;
+ left: 0%;
+ }
+
+ button:after {
+ content: "";
+ pointer-events: none;
+ bottom: -2px;
+ left: 50%;
+ position: absolute;
+ width: 0%;
+ height: 2px;
+ background-color: #fff;
+ transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
+ transition-duration: 400ms;
+ transition-property: width, left;
+ }
\ No newline at end of file
diff --git a/frontend/src/styles/footer.module.css b/frontend/src/styles/footer.module.css
new file mode 100644
index 0000000000000000000000000000000000000000..e97040c39e88f35d37703a1bfd37f218e2d8dbe6
--- /dev/null
+++ b/frontend/src/styles/footer.module.css
@@ -0,0 +1,13 @@
+.footer{
+height: 30vh;
+width: 100vw;
+background-color: rgb(158, 201, 238);
+display: grid;
+grid-template-columns: 1fr 1fr 1fr;
+grid-gap: 20px;
+padding: 20px;
+}
+.footer_section{
+text-align: center;
+font-size: 16px;
+}
\ No newline at end of file
diff --git a/frontend/src/styles/login.module.css b/frontend/src/styles/login.module.css
index ec39ee5cb4bb669b118f9ccb8720758c4bf9dc14..38bef5db77f3a449393b2ab35bc0a0753d18385a 100644
--- a/frontend/src/styles/login.module.css
+++ b/frontend/src/styles/login.module.css
@@ -2,6 +2,31 @@
display: flex;
height: 100vh;
}
+.arrow{
+ position: absolute;
+ justify-self: left;
+ margin: 15px;
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ background: rgb(49, 117, 121);
+ display: flex;
+ justify-content: center;
+ text-align: center;
+ align-items: center;
+ transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
+ transition-duration: 400ms;
+ color: rgb(255, 240, 153);
+}
+.arrow:hover{
+ width: 42px;
+ height: 42px;
+
+}
+.arrow a{
+ color: yellow;
+
+}
.left{
width: 30%;
background: rgb(49, 117, 121);
diff --git a/frontend/src/styles/styles.module.css b/frontend/src/styles/styles.module.css
index e1a7c5369825e433c302870d3970857bca699b0c..d75be0ff6d7845b93603cfcd0360170774502cda 100644
--- a/frontend/src/styles/styles.module.css
+++ b/frontend/src/styles/styles.module.css
@@ -1,7 +1,7 @@
p{
- color:white;
- font-family: 'Outfit', sans-serif;
+ color:rgb(240, 240, 240);
+ font-family: 'Outfit', sans-serif;
}
@@ -18,8 +18,8 @@ textarea{
display: flex;
justify-content: center;
align-items: center;
- background-color: rgb(49, 117, 121);
- color: rgb(255, 255, 255);
+ background-color: rgb(60, 72, 107);
+ color: rgb(240, 240, 240);
flex-wrap: wrap; /* Add flex-wrap property to allow text to wrap */
}
.Header p{
@@ -34,7 +34,6 @@ textarea{
}
.pick_file {
- color: rgb(67, 1, 128);
font-size: 35px;
margin:10px;
@@ -77,25 +76,29 @@ object-fit: cover;
height: 70vh;
display: flex;
justify-content: center;
- background: rgb(49, 117, 121);
+ background: rgb(60, 72, 107);
flex-wrap: wrap; /* Add flex-wrap property to allow text to wrap */
}
.card {
- margin: 40px;
- width: 500px;
- height: 500px;
- background: rgb(62, 121, 124);
+ margin: 30px;
+ width: 350px;
+ height: 350px;
+ color: rgb(240, 240, 240);
border-radius: 10px;
box-shadow: 0 8px 13px 0 rgba(41, 41, 43, 0.548);
text-align: center;
- color: rgb(255, 240, 153);
+ background: rgb(60, 72, 107);
+ }
+ .card h1{
+
+ color: rgb(240, 240, 240);
}
.list{
list-style: none;
padding: 0;
margin: 0;
- color: rgb(255, 255, 255);
+ background: rgb(60, 72, 107);
font-size: 120%;
}