" ui change"
parent
d8c91e08d9
commit
ea5f145e98
38
src/App.css
38
src/App.css
|
|
@ -1,38 +0,0 @@
|
|||
.App {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.App-logo {
|
||||
height: 40vmin;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.App-logo {
|
||||
animation: App-logo-spin infinite 20s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.App-header {
|
||||
background-color: #282c34;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: calc(10px + 2vmin);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.App-link {
|
||||
color: #61dafb;
|
||||
}
|
||||
|
||||
@keyframes App-logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
.layout-container {
|
||||
display: flex;
|
||||
/* display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
min-height: 100vh; */
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,191 +1,230 @@
|
|||
|
||||
.amount-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
margin: 0 auto;
|
||||
max-width: 500px;
|
||||
background-color: #1e1e1e;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.backarrow {
|
||||
/* position: absolute; */
|
||||
width: 100%;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
.arrowbtn {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
margin: 30px 10px;
|
||||
/* transform: translateY(-50%); */
|
||||
font-size: 24px;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
.amount-titles {
|
||||
font-size: 24px;
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
|
||||
.amount-display {
|
||||
display: flex;
|
||||
width: 150px;
|
||||
height: 30px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #1E1E1E;
|
||||
box-shadow: 0px 0px 22.3px #E335DC, 0px 0px 2.9px #FFFFFF, inset -2px -2px 2px rgba(4, 4, 4, 0.64), inset 2px 2px 2px rgba(39, 39, 44, 0.56);
|
||||
border-radius: 24px;
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.total-amount {
|
||||
font-size: 36px;
|
||||
color: #fff;
|
||||
margin-right: 10px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.Rupeesicon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
|
||||
.rupess_section {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
|
||||
.coin {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: #E335DC;
|
||||
box-shadow: -10px -10px 12px rgba(50, 50, 51, 0.66), 10px 10px 16px #040404, inset -2px -2px 2px rgba(111, 0, 121, 0.64), inset 2px 2px 2px rgba(102, 0, 98, 0.56);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
/* border: 2px solid #fff; */
|
||||
|
||||
|
||||
}
|
||||
|
||||
.coin-value {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.amount-container {
|
||||
padding: 10px;
|
||||
margin: 0 auto;
|
||||
max-width: 500px;
|
||||
background-color: #1e1e1e;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.backarrow {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-bottom: 50px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.arrowbtn {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
margin: 30px 10px;
|
||||
/* transform: translateY(-50%); */
|
||||
/* transform: translateX(-20%); */
|
||||
font-size: 24px;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
.amount-titles {
|
||||
font-size: 24px;
|
||||
width: 100px;
|
||||
color: #fff;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
flex-grow: 1;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
|
||||
.amount-display {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #1E1E1E;
|
||||
box-shadow: 0px 0px 22.3px #E335DC, 0px 0px 2.9px #FFFFFF, inset -2px -2px 2px rgba(4, 4, 4, 0.64), inset 2px 2px 2px rgba(39, 39, 44, 0.56);
|
||||
border-radius: 24px;
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.rupess_section {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
|
||||
.coin {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
padding: 15px;
|
||||
|
||||
}
|
||||
|
||||
.coin-value {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.Rupeesicon {
|
||||
width: 33px;
|
||||
height: 33px;
|
||||
}
|
||||
|
||||
.total-amount {
|
||||
font-size: 36px;
|
||||
color: #fff;
|
||||
margin-right: 10px;
|
||||
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
|
||||
.coin:hover {
|
||||
background-color: #4caf50;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.amount-container {
|
||||
max-width: 800px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.coin {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.coin-value {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
|
||||
.Rupeesicon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.total-amount {
|
||||
font-size: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.amount-container {
|
||||
padding: 0px;
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
.backarrow {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.arrowbtn {
|
||||
font-size: 20px;
|
||||
margin: 20px 8px;
|
||||
}
|
||||
|
||||
.amount-titles {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
|
||||
.rupess_section {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
margin-top: 20px;
|
||||
gap: 8px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.coin {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
|
||||
background: #E335DC;
|
||||
box-shadow: -10px -10px 12px rgba(50, 50, 51, 0.66), 10px 10px 16px #040404, inset -2px -2px 2px rgba(111, 0, 121, 0.64), inset 2px 2px 2px rgba(102, 0, 98, 0.56);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
/* border: 2px solid #fff; */
|
||||
|
||||
|
||||
width: 40px;
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.coin-value {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
|
||||
.Rupeesicon {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.amount-container {
|
||||
padding: 10px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.backarrow {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.arrowbtn {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
margin: 30px 10px;
|
||||
/* transform: translateX(-20%); */
|
||||
font-size: 24px;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.amount-titles {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.rupess_section {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.coin {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
padding: 15px;
|
||||
|
||||
}
|
||||
|
||||
.coin-value {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.Rupeesicon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.total-amount {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
|
||||
.coin:hover {
|
||||
background-color: #4caf50;
|
||||
.total-amount {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.amount-container {
|
||||
max-width: 800px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.coin {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.coin-value {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.Rupeesicon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.total-amount {
|
||||
font-size: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,21 +1,28 @@
|
|||
body {
|
||||
margin: 0;
|
||||
overflow: hidden; /* Disable page scrolling */
|
||||
}
|
||||
|
||||
/* Centered container without scrolling */
|
||||
.total-amount-container {
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
width: 80%;
|
||||
max-width: 500px;
|
||||
height: auto;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: white;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
background: #1e1e1e;
|
||||
box-shadow: -8px -8px 12px rgba(50, 50, 51, 0.66), 8px 8px 16px #040404,
|
||||
inset -2px -2px 2px rgba(255, 255, 255, 0.64),
|
||||
inset 2px 2px 2px rgba(39, 39, 44, 0.56);
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: fixed;
|
||||
width: 80%;
|
||||
max-width: 500px;
|
||||
height: 340px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: white;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
background: #1e1e1e;
|
||||
box-shadow: -8px -8px 12px rgba(50, 50, 51, 0.66), 8px 8px 16px #040404,
|
||||
inset -2px -2px 2px rgba(255, 255, 255, 0.64),
|
||||
inset 2px 2px 2px rgba(39, 39, 44, 0.56);
|
||||
padding: 8px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
display: flex;
|
||||
|
|
@ -82,7 +89,7 @@
|
|||
@media (max-width: 768px) {
|
||||
.total-amount-container {
|
||||
width: 90%;
|
||||
top: 60%;
|
||||
top: 65%;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
|
|
|
|||
|
|
@ -1,158 +1,201 @@
|
|||
|
||||
.category-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
background-color: #1e1e1e;
|
||||
color: white;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
background-color: #1e1e1e;
|
||||
color: white;
|
||||
width: 100%;
|
||||
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
|
||||
.arrow {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 30px;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 30px;
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
font-size: 24px;
|
||||
|
||||
}
|
||||
.arrow-icon {
|
||||
font-size: 24px;
|
||||
|
||||
}
|
||||
/*
|
||||
.category-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 20px 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
} */
|
||||
|
||||
.category-display {
|
||||
margin: 30px;
|
||||
width: 150px;
|
||||
height: 30px;
|
||||
/* left: calc(50% - 207px / 2 - 0.5px); */
|
||||
top: 90px;
|
||||
background: #1E1E1E;
|
||||
box-shadow: 0px 0px 22.3px #00D092, 0px 0px 2.9px #FFFFFF, inset -2px -2px 2px rgba(4, 4, 4, 0.64), inset 2px 2px 2px rgba(39, 39, 44, 0.56);
|
||||
border-radius: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.category-titles {
|
||||
font-size: 24px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.category-icon {
|
||||
width: 30px;
|
||||
/* top: 10px; */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* margin: 2px; */
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.category-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 20px 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
} */
|
||||
|
||||
.category-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.cat-item {
|
||||
background-color: #2a2a2a;
|
||||
border-radius: 10px;
|
||||
padding: 15px;
|
||||
margin: 10px;
|
||||
min-width: 120px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
transition: background-color 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
.cat-item.selected {
|
||||
background-color: #007BFF;
|
||||
color: white;
|
||||
border-radius: 5px;
|
||||
.category-titles {
|
||||
font-size: 20px;
|
||||
margin-right: 4px;
|
||||
color: #fff;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.category-display {
|
||||
margin: 35px 0 10px 0;
|
||||
width: 150px;
|
||||
height: 30px;
|
||||
background: #1E1E1E;
|
||||
box-shadow: 0px 0px 22.3px #00D092, 0px 0px 2.9px #FFFFFF, inset -2px -2px 2px rgba(4, 4, 4, 0.64), inset 2px 2px 2px rgba(39, 39, 44, 0.56);
|
||||
border-radius: 24px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
|
||||
.category-icon {
|
||||
width: 30px;
|
||||
/* top: 10px; */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 2px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
|
||||
.category-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.cat-item {
|
||||
background-color: #2a2a2a;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
min-width: 120px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
transition: background-color 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
.cat-item.selected {
|
||||
background-color: #007BFF;
|
||||
color: white;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.cat-item.selected {
|
||||
background-color: #007bff;
|
||||
color: #fff;
|
||||
background-color: #007bff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.texts {
|
||||
width: 50%;
|
||||
padding: 10px;
|
||||
margin: 20px 0;
|
||||
font-size: 16px;
|
||||
border-bottom: 1px solid #fafafa;
|
||||
outline: none;
|
||||
color: #ffffff;
|
||||
border-radius: 8px;
|
||||
transition: border-color 0.3s ease, background-color 0.3s ease;
|
||||
width: 50%;
|
||||
padding: 10px;
|
||||
margin: 20px 0;
|
||||
font-size: 16px;
|
||||
border-bottom: 1px solid #fafafa;
|
||||
outline: none;
|
||||
color: #ffffff;
|
||||
border-radius: 8px;
|
||||
transition: border-color 0.3s ease, background-color 0.3s ease;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.category-titles {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.category-icon {
|
||||
width: 35px;
|
||||
margin: 10px;
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
.cat-item {
|
||||
min-width: 100px;
|
||||
font-size: 16px;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.category-titles {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.arrow {
|
||||
top: 40px;
|
||||
left: 40px;
|
||||
}
|
||||
|
||||
.category-titles {
|
||||
font-size: 18px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.category-icon {
|
||||
width: 30px;
|
||||
margin: 7px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.cat-item {
|
||||
min-width: 80px;
|
||||
font-size: 14px;
|
||||
padding: 10px;
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
.category-container {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.category-icon {
|
||||
width: 35px;
|
||||
margin: 10px;
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
|
||||
.cat-item {
|
||||
min-width: 100px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.arrow {
|
||||
top: 40px;
|
||||
left: 40px;
|
||||
}
|
||||
|
||||
.category-titles {
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
|
||||
}
|
||||
|
||||
.category-icon {
|
||||
width: 30px;
|
||||
margin: 7px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.cat-item {
|
||||
min-width: 80px;
|
||||
font-size: 14px;
|
||||
padding: 10px;
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
.category-container {
|
||||
padding: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.category-container {
|
||||
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
top: 30px;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.category-display {
|
||||
width: 120px;
|
||||
height: 20px;
|
||||
margin: 15px auto;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.category-titles {
|
||||
font-size: 13px;
|
||||
justify-content: center;
|
||||
/* align-items: center; */
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.category-icons {
|
||||
width: 20px;
|
||||
margin: 3px;
|
||||
height: 20px;
|
||||
}
|
||||
.cat-item {
|
||||
min-width: 40px;
|
||||
font-size: 9px;
|
||||
padding: 6px;
|
||||
margin: 6px;
|
||||
}
|
||||
|
||||
.texts {
|
||||
width: 80%;
|
||||
font-size: 14px;
|
||||
padding: 8px;
|
||||
margin: 15px 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,21 +8,18 @@ import '../ExpenseCategory/ExpenseCategory.css';
|
|||
|
||||
|
||||
function ExpenseCategory() {
|
||||
|
||||
|
||||
const navigate = useNavigate();
|
||||
const [totalAmount, setTotalAmount, category, setCategory] = useOutletContext();
|
||||
const [categories, setCategories] = useState(["Hair", "Clothing", "Food", "Books", "Electronics", "Other"]);
|
||||
const [selectedCategories, setSelectedCategories] = useState([]);
|
||||
const [customCategoryCount, setCustomCategoryCount] = useState(0);
|
||||
const [newCategory, setNewCategory] = useState('');
|
||||
const location = useLocation();
|
||||
|
||||
|
||||
const entryType = location.state?.entryType;
|
||||
|
||||
const handleBackClick = () => {
|
||||
|
||||
navigate("/expense", { state: { entryType } });
|
||||
navigate("/income", { state: { entryType } });
|
||||
console.log(entryType);
|
||||
}
|
||||
|
||||
|
|
@ -38,7 +35,8 @@ function ExpenseCategory() {
|
|||
}
|
||||
};
|
||||
|
||||
const handleAddCategory = (newCategory) => {
|
||||
const handleAddCategory = () => {
|
||||
if (newCategory.trim() === '') return;
|
||||
if (!categories.includes(newCategory)) {
|
||||
if (customCategoryCount < 3) {
|
||||
const updatedCategories = [...categories, newCategory];
|
||||
|
|
@ -46,6 +44,7 @@ function ExpenseCategory() {
|
|||
setCustomCategoryCount(customCategoryCount + 1);
|
||||
localStorage.setItem('categories', JSON.stringify(updatedCategories));
|
||||
alert(`Category "${newCategory}" added!`);
|
||||
setNewCategory(''); // Clear input field after adding
|
||||
} else {
|
||||
alert('You can only add up to three custom categories!');
|
||||
}
|
||||
|
|
@ -77,7 +76,7 @@ function ExpenseCategory() {
|
|||
<h3 className="category-titles">Categories</h3>
|
||||
<img src={categoryImage} alt="categoryIcon" className="category-icon" />
|
||||
</div>
|
||||
|
||||
|
||||
<section className='category-list'>
|
||||
{categories.map((cat, index) => (
|
||||
<div
|
||||
|
|
@ -90,20 +89,25 @@ function ExpenseCategory() {
|
|||
))}
|
||||
</section>
|
||||
|
||||
{/* Input and button for adding new category */}
|
||||
{customCategoryCount < 3 && (
|
||||
<input className='texts'
|
||||
type="text"
|
||||
placeholder="Add New Category"
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
handleAddCategory(e.target.value);
|
||||
e.target.value = '';
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<div className="add-category">
|
||||
<input
|
||||
className='texts'
|
||||
type="text"
|
||||
placeholder="Add New Category"
|
||||
value={newCategory}
|
||||
onChange={(e) => setNewCategory(e.target.value)}
|
||||
/>
|
||||
<button
|
||||
className="add-button"
|
||||
onClick={handleAddCategory}
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ExpenseCategory;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
|
||||
.expense-container {
|
||||
max-width: 800px;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
justify-content: center;
|
||||
|
|
|
|||
|
|
@ -1,20 +1,26 @@
|
|||
body {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.total-amount-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
position: relative;
|
||||
width: 80%;
|
||||
max-width: 500px;
|
||||
max-width: 500px;
|
||||
height: auto;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: white;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
background: #1e1e1e;
|
||||
box-shadow: -8px -8px 12px rgba(50, 50, 51, 0.66), 8px 8px 16px #040404,
|
||||
inset -2px -2px 2px rgba(255, 255, 255, 0.64),
|
||||
inset 2px 2px 2px rgba(39, 39, 44, 0.56);
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
|
|
@ -75,14 +81,14 @@ input:focus {
|
|||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.error-message{
|
||||
.error-message {
|
||||
color: red;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.total-amount-container {
|
||||
width: 90%;
|
||||
top: 60%;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
|
|
@ -119,3 +125,24 @@ input:focus {
|
|||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.total-amount-container {
|
||||
padding: 15px;
|
||||
margin: 20px;
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.amount-input,
|
||||
.category-input {
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.add-entry-1,
|
||||
.add-entry-2 {
|
||||
font-size: 12px;
|
||||
height: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,166 +1,229 @@
|
|||
|
||||
.category-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
background-color: #1e1e1e;
|
||||
color: white;
|
||||
width: 100%;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
padding: 10px;
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
background-color: #1e1e1e;
|
||||
color: white;
|
||||
width: 100%;
|
||||
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.arrow {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 30px;
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
font-size: 24px;
|
||||
right: 85px;
|
||||
bottom: 40px;
|
||||
|
||||
}
|
||||
|
||||
.arrow {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 30px;
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
font-size: 24px;
|
||||
|
||||
}
|
||||
/*
|
||||
.category-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 20px 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
} */
|
||||
|
||||
.category-display {
|
||||
margin: 40px;
|
||||
width: 10px;
|
||||
height: 30px;
|
||||
/* left: calc(50% - 207px / 2 - 0.5px); */
|
||||
top: 90px;
|
||||
background: #1E1E1E;
|
||||
box-shadow: 0px 0px 22.3px #00D092, 0px 0px 2.9px #FFFFFF, inset -2px -2px 2px rgba(4, 4, 4, 0.64), inset 2px 2px 2px rgba(39, 39, 44, 0.56);
|
||||
border-radius: 24px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.category-titles {
|
||||
font-size: 24px;
|
||||
color: #fff;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.category-icon {
|
||||
width: 30px;
|
||||
/* top: 10px; */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* margin: 2px; */
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.category-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 20px 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
} */
|
||||
|
||||
.category-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.cat-item {
|
||||
background-color: #2a2a2a;
|
||||
border-radius: 10px;
|
||||
padding: 15px;
|
||||
margin: 10px;
|
||||
min-width: 120px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
transition: background-color 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
.cat-item.selected {
|
||||
background-color: #007BFF;
|
||||
color: white;
|
||||
border-radius: 5px;
|
||||
.category-titles {
|
||||
font-size: 20px;
|
||||
margin-right: 4px;
|
||||
color: #fff;
|
||||
margin-bottom: 20px; /* Add 10px space below category titles */
|
||||
}
|
||||
|
||||
.category-display {
|
||||
margin: 35px 0 10px 0; /* 10px space below the display box */
|
||||
width: 150px;
|
||||
height: 30px;
|
||||
background: #1E1E1E;
|
||||
box-shadow: 0px 0px 22.3px #00D092, 0px 0px 2.9px #FFFFFF, inset -2px -2px 2px rgba(4, 4, 4, 0.64), inset 2px 2px 2px rgba(39, 39, 44, 0.56);
|
||||
border-radius: 24px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
|
||||
.category-icon {
|
||||
width: 30px;
|
||||
/* top: 10px; */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 2px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
|
||||
.category-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.cat-item {
|
||||
background-color: #2a2a2a;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
min-width: 120px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
transition: background-color 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
.cat-item.selected {
|
||||
background-color: #007BFF;
|
||||
color: white;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.cat-item.selected {
|
||||
background-color: #007bff;
|
||||
color: #fff;
|
||||
background-color: #007bff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.texts {
|
||||
width: 50%;
|
||||
padding: 10px;
|
||||
margin: 20px 0;
|
||||
font-size: 16px;
|
||||
border-bottom: 1px solid #fafafa;
|
||||
outline: none;
|
||||
color: #ffffff;
|
||||
border-radius: 8px;
|
||||
transition: border-color 0.3s ease, background-color 0.3s ease;
|
||||
width: 50%;
|
||||
padding: 10px;
|
||||
margin: 20px 0;
|
||||
font-size: 16px;
|
||||
border-bottom: 1px solid #fafafa;
|
||||
outline: none;
|
||||
color: #ffffff;
|
||||
border-radius: 8px;
|
||||
transition: border-color 0.3s ease, background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.add-category {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.texts {
|
||||
flex: 1;
|
||||
padding: 5px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.add-button {
|
||||
padding: 10px 14px;
|
||||
margin: 15px;
|
||||
background-color: #2a2a2a;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.add-button:hover {
|
||||
background-color: #2a2a2a;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* Mobile responsiveness */
|
||||
@media (max-width: 768px) {
|
||||
.category-titles {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.category-container {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.category-icon {
|
||||
width: 35px;
|
||||
margin: 10px;
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
.cat-item {
|
||||
min-width: 100px;
|
||||
font-size: 16px;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.category-titles {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.arrow {
|
||||
top: 30px;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.category-titles {
|
||||
font-size: 18px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.category-icon {
|
||||
width: 30px;
|
||||
margin: 7px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.cat-item {
|
||||
min-width: 80px;
|
||||
font-size: 14px;
|
||||
padding: 10px;
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
.category-container {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.category-icon {
|
||||
width: 35px;
|
||||
margin: 10px;
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
|
||||
.cat-item {
|
||||
min-width: 100px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.arrow {
|
||||
top: 40px;
|
||||
left: 40px;
|
||||
}
|
||||
|
||||
.category-titles {
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
|
||||
}
|
||||
|
||||
.category-icon {
|
||||
width: 30px;
|
||||
margin: 7px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.cat-item {
|
||||
min-width: 80px;
|
||||
font-size: 14px;
|
||||
padding: 10px;
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
.category-container {
|
||||
padding: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.category-container {
|
||||
|
||||
padding: 0; /* Reduce padding for a more compact layout */
|
||||
}
|
||||
|
||||
.arrow {
|
||||
top: 30px; /* Adjust positioning of the arrow */
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.category-display {
|
||||
width: 120px; /* Adjust width to fit smaller screens */
|
||||
height: 25px;
|
||||
margin: 15px auto; /* Center and reduce margins */
|
||||
font-size: 14px; /* Adjust font size for smaller display */
|
||||
}
|
||||
|
||||
.category-titles {
|
||||
font-size: 16px; /* Reduce font size */
|
||||
margin-right: 2px; /* Adjust spacing */
|
||||
}
|
||||
|
||||
.category-icon {
|
||||
width: 25px; /* Reduce size of icons */
|
||||
height: 25px;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.cat-item {
|
||||
min-width: 70px;
|
||||
font-size: 12px;
|
||||
padding: 8px;
|
||||
margin: 6px;
|
||||
}
|
||||
|
||||
.texts {
|
||||
width: 80%;
|
||||
font-size: 14px;
|
||||
padding: 8px;
|
||||
margin: 15px 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,13 +11,12 @@ function Category() {
|
|||
const [categories, setCategories] = useState(["Hair", "Clothing", "Food", "Books", "Electronics", "Other"]);
|
||||
const [selectedCategories, setSelectedCategories] = useState([]);
|
||||
const [customCategoryCount, setCustomCategoryCount] = useState(0);
|
||||
const [newCategory, setNewCategory] = useState('');
|
||||
const location = useLocation();
|
||||
|
||||
|
||||
const entryType = location.state?.entryType;
|
||||
|
||||
const handleBackClick = () => {
|
||||
|
||||
navigate("/income", { state: { entryType } });
|
||||
console.log(entryType);
|
||||
}
|
||||
|
|
@ -34,7 +33,8 @@ function Category() {
|
|||
}
|
||||
};
|
||||
|
||||
const handleAddCategory = (newCategory) => {
|
||||
const handleAddCategory = () => {
|
||||
if (newCategory.trim() === '') return;
|
||||
if (!categories.includes(newCategory)) {
|
||||
if (customCategoryCount < 3) {
|
||||
const updatedCategories = [...categories, newCategory];
|
||||
|
|
@ -42,6 +42,7 @@ function Category() {
|
|||
setCustomCategoryCount(customCategoryCount + 1);
|
||||
localStorage.setItem('categories', JSON.stringify(updatedCategories));
|
||||
alert(`Category "${newCategory}" added!`);
|
||||
setNewCategory(''); // Clear input field after adding
|
||||
} else {
|
||||
alert('You can only add up to three custom categories!');
|
||||
}
|
||||
|
|
@ -73,7 +74,7 @@ function Category() {
|
|||
<h3 className="category-titles">Categories</h3>
|
||||
<img src={categoryImage} alt="categoryIcon" className="category-icon" />
|
||||
</div>
|
||||
|
||||
|
||||
<section className='category-list'>
|
||||
{categories.map((cat, index) => (
|
||||
<div
|
||||
|
|
@ -86,17 +87,23 @@ function Category() {
|
|||
))}
|
||||
</section>
|
||||
|
||||
{/* Input and button for adding new category */}
|
||||
{customCategoryCount < 3 && (
|
||||
<input className='texts'
|
||||
type="text"
|
||||
placeholder="Add New Category"
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
handleAddCategory(e.target.value);
|
||||
e.target.value = '';
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<div className="add-category">
|
||||
<input
|
||||
className='texts'
|
||||
type="text"
|
||||
placeholder="Add New Category"
|
||||
value={newCategory}
|
||||
onChange={(e) => setNewCategory(e.target.value)}
|
||||
/>
|
||||
<button
|
||||
className="add-button"
|
||||
onClick={handleAddCategory}
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -123,7 +123,7 @@
|
|||
}
|
||||
|
||||
.buttons {
|
||||
max-width: 100%;
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
.expense-btn, .income-btn {
|
||||
|
|
|
|||
|
|
@ -1,13 +0,0 @@
|
|||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||
monospace;
|
||||
}
|
||||
Loading…
Reference in New Issue