+ setCurrentDate(date)} />
+
+
+ );
+};
+
+export default DatepickerTimehooks;
\ No newline at end of file
diff --git a/Frontend/src/components/Footer/Footer.jsx b/Frontend/src/components/Footer/Footer.jsx
index a088cf5..64e4a33 100644
--- a/Frontend/src/components/Footer/Footer.jsx
+++ b/Frontend/src/components/Footer/Footer.jsx
@@ -10,10 +10,10 @@ const Footer = () => {
<>
@@ -79,7 +93,7 @@ const ModalPayaCreditor = ({setPaycreditorModal,creditors}) => {
Pay a Creditor
diff --git a/Frontend/src/components/Navbar/Navbar.css b/Frontend/src/components/Navbar/Navbar.css
index 9f320e7..10ca213 100644
--- a/Frontend/src/components/Navbar/Navbar.css
+++ b/Frontend/src/components/Navbar/Navbar.css
@@ -11,7 +11,9 @@
text-align:center;
font-weight: 400;
}
-
+.navbar-container{
+ padding: 2px 0;
+}
.sign-navbar{
padding: 3px 17px;
border:1px solid #3A1C6B;
@@ -110,5 +112,15 @@
.navbar-links-sign{
display: none !important;
}
+ .navbar-container{
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1) !important;
+ }
}
+
+@media screen and (max-width:540px) {
+ .navbar-logo{
+ width: 90px !important;
+ margin-top: 10px !important;
+ }
+}
diff --git a/Frontend/src/components/Navbar/Navbar.jsx b/Frontend/src/components/Navbar/Navbar.jsx
index 57e603a..95c8493 100644
--- a/Frontend/src/components/Navbar/Navbar.jsx
+++ b/Frontend/src/components/Navbar/Navbar.jsx
@@ -1,4 +1,4 @@
-import React, {useEffect, useState} from 'react'
+import React, {useEffect, useState, useRef} from 'react'
import {Text, Flex, Spacer, Box, Button} from '@chakra-ui/react'
import logo from '../../Images/Logo.svg'
import './Navbar.css'
@@ -19,23 +19,39 @@ const breakpoints = {
// 3. Extend the theme
const theme = extendTheme({ breakpoints })
const Navbar = () => {
+
+ const node = useRef();
+
const [showsidebar, setShowsidebar] = useState(false)
const showbar = ()=>{
setShowsidebar(!showsidebar)
}
- function getHeight(){
- console.log(window.innerHeight)
- }
+
+ const handleClick = e => {
+ if (node.current.contains(e.target)) {
+ // inside click
+ return;
+ }
+ document.getElementById('nav-links-container').style.display = "none"
+
+ };
+
useEffect(()=>{
- console.log(window.pageYOffset,'scroll')
- })
+ // add when mounted
+ document.addEventListener("mousedown", handleClick);
+ // return function to be called when unmounted
+ return () => {
+ document.removeEventListener("mousedown", handleClick);
+ };
+ },[])
return (
<>
-
- 
+
+
Home
@@ -53,7 +69,8 @@ const Navbar = () => {
- {showsidebar &&
+
+ {showsidebar &&
@@ -248,11 +268,11 @@ const SettingsInfo = () => {
fontWeight='600'
lineHeight='25px'
color='#8872AC'>Sex
- { return setGender(e.target.value)}}/>
-
+
@@ -286,7 +306,7 @@ const SettingsInfo = () => {
value={email}
onChange={e => { return setEmail(e.target.value)}}/>
-
+
@@ -319,7 +339,7 @@ const SettingsInfo = () => {
value={phonenumber}
onChange={e => { return setPhonenumber(e.target.value)}}/>
-
+
{status}
diff --git a/Frontend/src/components/SettingsInfo/SettingsPassword.jsx b/Frontend/src/components/SettingsInfo/SettingsPassword.jsx
index 6048b66..1b8322e 100644
--- a/Frontend/src/components/SettingsInfo/SettingsPassword.jsx
+++ b/Frontend/src/components/SettingsInfo/SettingsPassword.jsx
@@ -29,7 +29,7 @@ const SettingsPassword = () => {
-
+
{
onChange={e => { return setOldPassword(e.target.value)}}
/>
-
+
{
onChange={e => { return setNewPassword(e.target.value)}}
/>
-
+
{
/>
-
+
diff --git a/Frontend/src/components/Sidebar/Sidebar.css b/Frontend/src/components/Sidebar/Sidebar.css
index fe05245..32fc969 100644
--- a/Frontend/src/components/Sidebar/Sidebar.css
+++ b/Frontend/src/components/Sidebar/Sidebar.css
@@ -17,6 +17,7 @@
padding: 10px 10px;
border-radius: 0px;
transition: all 0.3s linear ;
+ font-size: 18px;
}
.links-container{
@@ -63,7 +64,7 @@
}
.sidebar-logo img{
height: 4rem;
- width: 13rem;
+ width: 11rem;
}
@@ -78,6 +79,31 @@
@media screen and (min-width:815px) {
.profile-sidebar{
- width: 16rem;
+ width: 16rem !important;
}
+}
+
+
+@media screen and (max-width:520px) {
+ .links{
+ font-size: 16px;
+ padding: 10px 7px;
+ }
+ .sidebar-logo{
+ position: relative;
+ top: 0px;
+
+ }
+ .sidebar-logo img{
+ height: 2rem;
+ width: 7rem;
+ }
+
+ .sidebar-close-menu{
+
+ margin-left: 100px;
+
+ }
+
+
}
\ No newline at end of file
diff --git a/Frontend/src/components/Sidebar/Sidebar.jsx b/Frontend/src/components/Sidebar/Sidebar.jsx
index aa606c5..2111a33 100644
--- a/Frontend/src/components/Sidebar/Sidebar.jsx
+++ b/Frontend/src/components/Sidebar/Sidebar.jsx
@@ -1,16 +1,16 @@
import React, {useEffect, useState, useRef} from 'react'
import './Sidebar.css'
-import {GiHamburgerMenu } from 'react-icons/gi'
import {BsFillGridFill} from 'react-icons/bs'
import {MdPayment} from 'react-icons/md'
import {IoMdSettings} from 'react-icons/io'
import {AiOutlineUserDelete,AiOutlineClose} from 'react-icons/ai'
import Logo from '../../Images/Logo.svg'
-import {Box, Flex, Spacer,List,ListItem,ListIcon,} from '@chakra-ui/react'
-import { Link, NavLink } from 'react-router-dom'
+import {Box, Flex, List,ListItem,ListIcon,} from '@chakra-ui/react'
+import { NavLink } from 'react-router-dom'
const Sidebar = () => {
+
const node = useRef();
@@ -32,25 +32,26 @@ const Sidebar = () => {
}
const handleClick = e => {
- if (node.current.contains(e.target)) {
- // inside click
- return;
+ if(window.innerWidth <=815 ){
+ if (node.current.contains(e.target)) {
+ // inside click
+ return;
+ }
+
+ document.getElementById("sidenav").style.width = "0";
+ // outside click
}
-
- document.getElementById("sidenav").style.width = "0";
-
- document.getElementById("links-cont").style.display = "none";
- // outside click
};
useEffect(() => {
// add when mounted
document.addEventListener("mousedown", handleClick);
- // return function to be called when unmounted
- return () => {
+ // return function to be called when unmounted
+ return () => {
document.removeEventListener("mousedown", handleClick);
};
+
}, []);
@@ -59,9 +60,9 @@ const Sidebar = () => {
- Home
- Product diff --git a/Frontend/src/components/PaymentInfo/PaymentInfo.jsx b/Frontend/src/components/PaymentInfo/PaymentInfo.jsx index 83d9f30..45f76b4 100644 --- a/Frontend/src/components/PaymentInfo/PaymentInfo.jsx +++ b/Frontend/src/components/PaymentInfo/PaymentInfo.jsx @@ -6,6 +6,25 @@ import Loading from '../Loading/Loading' import {GiHamburgerMenu } from 'react-icons/gi' import './PaymentInfo.css' const PaymentInfo = () => { + + /*const [screenSize, setScreenSize] = useState(window.innerWidth) + + const checkSize = ()=>{ + //console.log(window.innerWidth) + return setScreenSize(window.innerWidth) + } + useEffect(()=>{ + window.addEventListener('resize', checkSize) + return ()=>{ + window.removeEventListener('resize', checkSize) + } + }) + useEffect(()=>{ + if (screenSize >=815) { + document.getElementById("sidenav").style.width = "16rem"; + document.getElementById("links-cont").style.display = "block"; + } + })*/ const [transactionHistory, setTransactionHistory] = useState([]) const url = 'https://debt-fix.herokuapp.com/payment/transactions/' @@ -65,23 +84,24 @@ const PaymentInfo = () => { return ( <>