Sonali
/
Mini-Pos
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

" mu change"

component_ui
sonali 2024-10-03 17:25:17 +05:30
parent ea5f145e98
commit 56edbb76b5
20 changed files with 514 additions and 358 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/components/pages/Expense/Common/ExpenseEditPage.css
View File

@ -4,32 +4,36 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100vh; height: 100vh;
overflow: hidden;
position: relative; position: relative;
font-family: 'Montserrat', sans-serif; font-family: 'Montserrat', sans-serif;
} }
.backIcon { .backIcon {
position: absolute; position: absolute;
top: 20px; top: 10px;
left: 20px; margin: 35px;
left: 10px;
} }
.arrow-icon { .arrow-icon {
font-size: 24px; font-size: 18px;
cursor: pointer; cursor: pointer;
} }
.edit-content { .edit-content {
padding: 20px; padding: 30px;
margin-bottom: 30px;
border-radius: 8px; border-radius: 8px;
/* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); */ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
width: 100%; width: 100%;
max-width: 400px; max-width: 400px;
} }
.edit-titles h1 { .edit-titles h1 {
color: #fff; color: #fff;
margin-bottom: 30px;
font-size: 30px; font-size: 30px;
margin: 0px 0; margin: 0px 0;
text-align: center; text-align: center;
@ -37,6 +41,7 @@
.edit-datetime { .edit-datetime {
color: #fff; color: #fff;
margin-bottom: 30px;
font-size: 18px; font-size: 18px;
text-align: center; text-align: center;
margin-bottom: 10px; margin-bottom: 10px;
@ -44,6 +49,7 @@
.edit-fields { .edit-fields {
color: #fff; color: #fff;
padding: 10px 10px;
margin-bottom: 15px; margin-bottom: 15px;
width: 93%; width: 93%;
} }
@ -51,14 +57,15 @@
.edit-fields label { .edit-fields label {
display: block; display: block;
margin-bottom: 9px; margin-bottom: 9px;
} }
.edit-fields input { .edit-fields input {
width: 100%; width: 100%;
padding: 10px; padding: 10px;
border: 1px solid #555; /* border: 1px solid #555; */
border-radius: 4px; border-radius: 4px;
background-color: #3A3A3A; /* background-color: #3A3A3A; */
color: #fff; color: #fff;
font-size: 16px; font-size: 16px;
} }
@ -68,14 +75,14 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-top: 30px; margin-top: 30px;
gap: 5px;
width: 100%; width: 100%;
} }
.edit-btn { .edit-btn {
position: relative; position: relative;
width: 150px; width: 130px;
height: 60px; height: 50px;
color: #fff; color: #fff;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -90,8 +97,8 @@
.edit-btn-2 { .edit-btn-2 {
position: relative; position: relative;
width: 150px; width: 130px;
height: 60px; height: 50px;
color: #fff; color: #fff;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -106,14 +113,26 @@
@media (max-width: 768px) { @media (max-width: 768px) {
.edit-titles h1 { .edit-titles h1 {
font-size: 24px; font-size: 24px;
} }
.edit-datetime { .edit-datetime {
font-size: 16px; font-size: 16px;
} }
.edit-buttons div { .edit-buttons div {
font-size: 14px; font-size: 14px;
} }
}
}
@media (min-width: 1024px) {
.edit-btn, .edit-btn-2 {
width: 250px;
height: 50px;
font-size: 20px;
}
}

56
src/components/pages/Expense/Common/TotalExpenseSuccessfully.css
View File

@ -5,17 +5,21 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100vh; height: 100vh;
font-family: 'Montserrat', sans-serif;
color: white;
position: relative; position: relative;
} }
.arrows { .arrows {
position: absolute; position: absolute;
top: 20px; top: 10px;
left: 20px; margin: 35px;
left: 10px;
} }
.arrow-icon-1 { .arrow-icon-1 {
font-size: 24px; font-size: 18px;
cursor: pointer; cursor: pointer;
} }
@ -30,13 +34,13 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-bottom: 10px; margin-bottom: 0px;
} }
.success-title h1 { .success-title h1 {
color: #fff; color: #fff;
font-size: 30px; font-size: 30px;
margin-top: 10px; margin-top: 0px;
text-align: center; text-align: center;
} }
@ -52,14 +56,14 @@
.success-button { .success-button {
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 20px; gap: 10px;
margin-top: 20px; margin-top: 10px;
} }
.btn-view { .btn-view {
position: relative; position: relative;
width: 120px; width: 100px;
height: 40px; height: 30px;
color: #fff; color: #fff;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -73,8 +77,8 @@
} }
.btn-back { .btn-back {
position: relative; position: relative;
width: 120px; width: 100px;
height: 40px; height: 30px;
color: #fff; color: #fff;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -88,24 +92,11 @@
} }
.success-date-time{ .success-date-time{
color: #fff; color: #fff;
} }
/* Mobile responsiveness */
@media (max-width: 768px) {
.btn-view, .btn-back {
padding: 12px 20px;
font-size: 16px;
}
}
/* Mobile responsiveness */
@media (max-width: 768px) { @media (max-width: 768px) {
.success-message h2 { .success-message h2 {
font-size: 20px; font-size: 20px;
@ -114,4 +105,21 @@
.success-title h1 { .success-title h1 {
font-size: 24px; font-size: 24px;
} }
} }
@media (min-width: 1024px) {
.btn-view, .btn-back {
width: 200px;
height: 50px;
font-size: 20px;
}
.success-title h1 {
font-size: 32px;
}
.success-message h2 {
font-size: 26px;
}
}

4
src/components/pages/Expense/Common/TotalExpenseSuccessfully.js
View File

@ -22,7 +22,7 @@ function TotalExpenseSuccessfully() {
const dataToStore = { const dataToStore = {
incomeRecord: { incomeRecord: {
dateTime: formattedDateTime, dateTime: formattedDateTime,
entryId: entryId || "Not provided", // Fallback in case entryId is undefined entryId: entryId || "Not provided",
}, },
}; };
console.log(JSON.stringify(dataToStore)); console.log(JSON.stringify(dataToStore));
@ -33,7 +33,7 @@ function TotalExpenseSuccessfully() {
}; };
const handleViewRecordsClick = () => { const handleViewRecordsClick = () => {
// Pass entryId to the /records route when navigating
navigate("/expense-records", { state: { entryId } }); navigate("/expense-records", { state: { entryId } });
console.log(entryId); console.log(entryId);
}; };

47
src/components/pages/Expense/ExpenseAmount/ExpenseAmount.css
View File

@ -5,13 +5,12 @@
justify-content: center; justify-content: center;
padding: 10px; padding: 10px;
margin: 0 auto; margin: 0 auto;
max-width: 500px; max-width: 90vw;
background-color: #1e1e1e; background-color: #1e1e1e;
border-radius: 10px; border-radius: 10px;
text-align: center; text-align: center;
} }
.backarrow { .backarrow {
/* position: absolute; */ /* position: absolute; */
width: 100%; width: 100%;
@ -20,16 +19,17 @@
} }
.arrowbtn {
position: absolute; .arrowbtn {
left: 0; position: absolute;
top: 50%; left: 0;
margin: 30px 10px; top: 50%;
/* transform: translateY(-50%); */ margin: 20px 10px;
font-size: 24px; font-size: 4vw; /* Responsive font-size */
color: #333; color: #333;
cursor: pointer; cursor: pointer;
} }
.amount-titles { .amount-titles {
@ -102,7 +102,6 @@
} }
@media (max-width: 600px) { @media (max-width: 600px) {
.amount-container { .amount-container {
padding: 10px; padding: 10px;
@ -115,11 +114,11 @@
.arrowbtn { .arrowbtn {
position: absolute; position: absolute;
left: 0; /* left: 3%; */
top: 50%; top: 50%;
margin: 30px 10px; margin: 17px 30px;
/* transform: translateX(-20%); */ /* transform: translateX(-20%); */
font-size: 24px; font-size: 18px;
color: #333; color: #333;
cursor: pointer; cursor: pointer;
} }
@ -129,7 +128,7 @@
} }
.rupess_section { .rupess_section {
gap: 10px; gap: 20px;
} }
.coin { .coin {
@ -138,7 +137,7 @@
padding: 15px; padding: 15px;
} }
.coin-value { .coin-value {
font-size: 26px; font-size: 26px;
} }
@ -159,7 +158,6 @@
} }
@media (min-width: 1024px) { @media (min-width: 1024px) {
.amount-container { .amount-container {
max-width: 800px; max-width: 800px;
@ -171,6 +169,11 @@
height: 100px; height: 100px;
} }
.arrowbtn {
font-size: 18px;
margin: 27px 21px;
}
.coin-value { .coin-value {
font-size: 20px; font-size: 20px;
} }
@ -197,8 +200,8 @@
} }
.arrowbtn { .arrowbtn {
font-size: 20px; font-size: 18px;
margin: 20px 8px; margin: 27px 21px;
} }
.amount-titles { .amount-titles {
@ -206,7 +209,7 @@
} }
.rupess_section { .rupess_section {
gap: 8px; gap: 20px;
margin-top: 10px; margin-top: 10px;
} }

6
src/components/pages/Expense/ExpenseAmount/TotalExpenseAmount.css
View File

@ -1,9 +1,9 @@
body { body {
margin: 0; margin: 0;
overflow: hidden; /* Disable page scrolling */ overflow: hidden;
} }
/* Centered container without scrolling */
.total-amount-container { .total-amount-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -117,7 +117,7 @@ body {
@media (max-width: 480px) { @media (max-width: 480px) {
.total-amount-container { .total-amount-container {
/* padding: 15px; */ /* padding: 15px; */
margin: 40px 0px ; margin: 20px 0px 0px 0px ;
} }
.add-entry-1, .add-entry-1,

88
src/components/pages/Expense/ExpenseCategory/ExpenseCategory.css
View File

@ -7,10 +7,11 @@
background-color: #1e1e1e; background-color: #1e1e1e;
color: white; color: white;
width: 100%; width: 100%;
padding: 10px; padding: 10px;
} }
.arrow { .arrow {
position: absolute; position: absolute;
top: 10px; top: 10px;
@ -35,11 +36,11 @@
font-size: 20px; font-size: 20px;
margin-right: 4px; margin-right: 4px;
color: #fff; color: #fff;
margin-bottom: 20px; margin-bottom: 20px; /* Add 10px space below category titles */
} }
.category-display { .category-display {
margin: 35px 0 10px 0; margin: 35px 0 10px 0; /* 10px space below the display box */
width: 150px; width: 150px;
height: 30px; height: 30px;
background: #1E1E1E; background: #1E1E1E;
@ -54,7 +55,7 @@
} }
.category-icon { .category01 {
width: 30px; width: 30px;
/* top: 10px; */ /* top: 10px; */
justify-content: center; justify-content: center;
@ -106,6 +107,33 @@ border-radius: 8px;
transition: border-color 0.3s ease, background-color 0.3s ease; 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;
}
@media (max-width: 768px) { @media (max-width: 768px) {
.category-titles { .category-titles {
font-size: 20px; font-size: 20px;
@ -113,7 +141,7 @@ transition: border-color 0.3s ease, background-color 0.3s ease;
.category-icon { .category01 {
width: 35px; width: 35px;
margin: 10px; margin: 10px;
height: 3px; height: 3px;
@ -137,7 +165,7 @@ transition: border-color 0.3s ease, background-color 0.3s ease;
} }
.category-icon { .category01 {
width: 30px; width: 30px;
margin: 7px; margin: 7px;
height: 30px; height: 30px;
@ -157,45 +185,49 @@ transition: border-color 0.3s ease, background-color 0.3s ease;
@media (max-width: 375px) { @media (max-width: 375px) {
.category-container { .category-container {
padding: 0;
padding: 0; }
.arrow-icon {
font-size: 18px;
margin: 27px 21px;
} }
.arrow { .arrow {
top: 30px; top: 30px;
left: 20px; left: 30px;
} }
.category-display { .category-display {
width: 120px; width: 120px;
height: 20px; height: 25px;
margin: 15px auto; margin: 35px auto;
font-size: 14px; font-size: 14px;
} }
.category-titles { .category-titles {
font-size: 13px; font-size: 14px;
justify-content: center; margin-right: 2px;
/* align-items: center; */
margin-right: 5px;
} }
.category-icons { .category01 {
width: 20px; width: 25px;
margin: 3px; height: 25px;
height: 20px; margin: 5px;
} }
.cat-item { .cat-item {
min-width: 40px; min-width: 50px;
font-size: 9px; font-size: 10px;
padding: 6px; padding: 8px;
margin: 6px; margin: 6px;
} }
.texts { .texts {
width: 80%; width: 50%;
font-size: 14px; font-size: 10px;
padding: 8px; padding: 8px;
margin: 15px 0; margin: 15px 0;
} }
} }

2
src/components/pages/Expense/ExpenseCategory/ExpenseCategory.js
View File

@ -74,7 +74,7 @@ function ExpenseCategory() {
<div className='category-display'> <div className='category-display'>
<h3 className="category-titles">Categories</h3> <h3 className="category-titles">Categories</h3>
<img src={categoryImage} alt="categoryIcon" className="category-icon" /> <img src={categoryImage} alt="categoryIcon" className="category01" />
</div> </div>
<section className='category-list'> <section className='category-list'>

36
src/components/pages/Expense/ExpensePage/ExpensePage.css
View File

@ -140,7 +140,7 @@
padding: 10px; padding: 10px;
} }
.amount-icon, .category-icon { .amount-icon, .category{
width: 40px; width: 40px;
height: 40px; height: 40px;
margin: 2px; margin: 2px;
@ -157,4 +157,36 @@
font-size: 18px; font-size: 18px;
} }
} }
/* Styles for screens with a width of 375px */
@media (max-width: 375px) {
.arrow-icon {
font-size: 12px;
}
.expense-title {
font-size: 18px;
}
.expense-date {
font-size: 12px;
}
.button-container {
flex-direction: row;
align-items: center;
}
.amount-btn, .category-btn {
width: 90%;
font-size: 14px;
padding: 12px;
}
.category{
width: 25px;
height: 25px;
margin-bottom: 5px;
}
}

166
src/components/pages/Expense/ExpenseRecords/ExpenseRecords.css
View File

@ -1,23 +1,23 @@
.container { .container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100vh; height: 100vh;
color: white;
position: relative; position: relative;
} }
.back_arrows { .back_arrows {
position: absolute; position: absolute;
top: 20px; top: 10px;
left: 20px; margin: 35px;
left: 10px;;
} }
.arrow-icon { .arrow-icon {
font-size: 24px; font-size: 18px;
margin: 9px 0px 0px 0px;
cursor: pointer; cursor: pointer;
} }
@ -29,9 +29,9 @@
} }
.success-titles h1 { .success-titles h1 {
color: #fff; color: #4CAF50;
font-size: 30px; font-size: 30px;
margin: 10px 0; margin: 0 0;
text-align: center; text-align: center;
} }
@ -45,35 +45,37 @@
text-align: center; text-align: center;
font-size: 24px; font-size: 24px;
color: #4CAF50; color: #4CAF50;
margin: 10px 0; margin: 0px 0;
padding: 30px;
} }
.categories {
margin-top: 10px; .categories {
margin-top: 0px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.categories h3 { .categories h3 {
font-size: 15px; font-size: 15px;
color: #9e9696; color: #9e9696;
/* margin: 0px 0px 0px 0px; */
/* padding: 5px; */
} }
.categories ul { .categories ul {
list-style-type: none; list-style-type: none;
padding: 5px; padding: 5px;
} }
.categories li { .categories li {
font-size: 16px; font-size: 16px;
color: #deb1b1; color: #deb1b1;
border-bottom: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0;
padding: 8px 0; padding: 8px 0;
} }
/* Mobile responsiveness */ /* Mobile responsiveness */
@media (max-width: 768px) { @media (max-width: 768px) {
@ -84,47 +86,32 @@
.success-datetime { .success-datetime {
font-size: 16px; font-size: 16px;
} }
}
.total-amount { .total-amount {
color: #fff; color: #4CAF50;
font-size: 12px; font-size: 12px;
margin: 20px 0; margin: 0px 0;
} }
.categories { .categories {
color: #fff; color: #fff;
font-size: 10px; font-size: 10px;
margin: 10px 0; margin: 10px 0;
}
} }
.success-buttons { .success-buttons {
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 20px; gap: 10px;
margin-top: 20px; margin-top: 0px;
} }
.btn-home { .btn-home,
position: relative;
width: 150px;
height: 60px;
color: #fff;
justify-content: center;
align-items: center;
background: #1E1E1E;
box-shadow: -8px -8px 12px rgba(50, 50, 51, 0.66), 8px 8px 16px #040404, 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;
justify-content: center;
align-items: center;
margin-right: 10px;
}
.btn-edit { .btn-edit {
position: relative; position: relative;
width: 150px; width: 140px;
height: 60px; height: 50px;
color: #fff; color: #fff;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -135,7 +122,82 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-right: 10px; margin-right: 10px;
}
@media (min-width: 1024px) {
.btn-edit, .btn-home {
width: 200px;
height: 50px;
font-size: 20px;
}
.total-amount {
color: #4CAF50;
font-size: 12px;
margin: 0px 0;
}
}
/* Screen size 375px */
@media screen and (max-width: 375px) {
.success-titles h1 {
font-size: 20px;
}
.success-datetime {
font-size: 14px;
}
.total-amount {
font-size: 18px;
/* padding: 20px; */
}
.categories li {
font-size: 14px;
}
} }
/* Screen size 687px */
@media screen and (max-width: 687px) {
.success-titles h1 {
font-size: 22px;
}
.success-datetime {
font-size: 16px;
}
.total-amount {
font-size: 20px;
padding: 25px;
}
.categories li {
font-size: 15px;
}
}
/* Screen size 745px */
@media screen and (max-width: 745px) {
.success-titles h1 {
font-size: 24px;
}
.success-datetime {
font-size: 16px;
}
.total-amount {
font-size: 12px;
}
.categories li {
font-size: 16px;
}
}

100
src/components/pages/Expense/ExpenseSuccessfully/ExpenseSuccessfully.css
View File

@ -1,10 +1,3 @@
body {
background-color: #1E1E1E;
margin: 20px;
padding: 0;
font-family: Arial, sans-serif;
}
.Payment-container { .Payment-container {
display: flex; display: flex;
@ -16,40 +9,35 @@ body {
} }
.arrow { .arrow {
font-size: 24px; font-size: 18px;
cursor: pointer; cursor: pointer;
} }
.arr { .arr {
position: absolute; position: absolute;
top: 20px; top: 10px;
left: 20px; left: 0px;
} }
.expense-date {
.income-date {
color: #fff; color: #fff;
font-size: 18px; font-size: 18px;
text-align: center; text-align: center;
margin-bottom: 10px; margin-bottom: 0px;
} }
.payment-title { .payment-title {
text-align: center; text-align: center;
margin-bottom: 10px; margin-bottom: 30px;
} }
.payment-title h1 { .payment-title h1 {
color: #fff; color: #fff;
font-size: 30px; font-size: 30px;
margin: 10px 0; margin: 0px 0;
text-align: center; text-align: center;
} }
.payment-content { .payment-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -57,7 +45,6 @@ body {
justify-content: center; justify-content: center;
} }
.payment-animation { .payment-animation {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -65,15 +52,13 @@ body {
margin-bottom: 10px; margin-bottom: 10px;
} }
.payment-message h2 { .payment-message h2 {
color: #fff; color: #fff;
font-size: 24px; font-size: 24px;
text-align: center; text-align: center;
margin-bottom: 20px; margin-bottom: 20px;
} }
.payment-buttons { .payment-buttons {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -81,11 +66,10 @@ body {
margin-top: 20px; margin-top: 20px;
} }
.btn1, .bt_11 {
.btn1 {
position: relative; position: relative;
width: 150px; width: 130px;
height: 60px; height: 40px;
color: #fff; color: #fff;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -98,82 +82,64 @@ body {
margin-right: 10px; margin-right: 10px;
} }
/* Small screens (up to 600px) */
.bt_11 {
position: relative;
width: 150px;
height: 60px;
color: #fff;
justify-content: center;
align-items: center;
background: #1E1E1E;
box-shadow: -8px -8px 12px rgba(50, 50, 51, 0.66), 8px 8px 16px #040404, 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;
justify-content: center;
align-items: center;
margin-right: 10px;
}
@media (max-width: 600px) { @media (max-width: 600px) {
.payment-title h1 { .payment-title h1 {
font-size: 24px; font-size: 16px;
} }
.income-date { .expense-date {
font-size: 16px; font-size: 12px;
} }
.payment-message h2 { .payment-message h2 {
font-size: 20px; font-size: 14px;
} }
.btn1, .bt_11 { .btn1, .bt_11 {
width: 120px; width: 120px;
height: 50px; height: 40px;
font-size: 16px; font-size: 14px;
} }
.arr { .arr {
top: 10px; top: 0px;
left: 10px; left: 0px;
} }
} }
@media (max-width: 1024px) { @media (max-width: 1024px) {
.payment-title h1 { .payment-title h1 {
font-size: 28px; font-size: 22px;
} }
.income-date { .expense-date {
font-size: 16px; font-size: 14px;
} }
.payment-message h2 { .payment-message h2 {
font-size: 22px; font-size: 18px;
} }
.btn1, .bt_11 { .btn1, .bt_11 {
width: 140px; width: 140px;
height: 55px; height: 50px;
font-size: 18px; font-size: 16px;
} }
.arr { .arr {
top: 15px; top: 0;
left: 15px; left: 0px;
margin: 5px;
} }
} }
/* Large screens (1025px and up) */
@media (min-width: 1025px) { @media (min-width: 1025px) {
.btn1, .bt_11 { .btn1, .bt_11 {
width: 160px; width: 190px;
height: 60px; height: 50px;
font-size: 18px; font-size: 18px;
} }

4
src/components/pages/Expense/ExpenseSuccessfully/ExpenseSuccessfully.js
View File

@ -19,7 +19,7 @@ function ExpenseSuccessfully() {
}, []); }, []);
const handleBackClick = () => { const handleBackClick = () => {
navigate("/expense-edit"); navigate("/expense-editPage");
}; };
const handleBackToHome = () => { const handleBackToHome = () => {
@ -40,7 +40,7 @@ function ExpenseSuccessfully() {
<div className="Payment-container"> <div className="Payment-container">
<div className="payment-title"> <div className="payment-title">
<h1>Expense</h1> <h1>Expense</h1>
<p className="income-date">{formattedDate}</p> <p className="expense-date">{formattedDate}</p>
<div className="arr"> <div className="arr">
<FontAwesomeIcon <FontAwesomeIcon
icon={faArrowLeft} icon={faArrowLeft}

4
src/components/pages/Income/Amount/AmountPage.css
View File

@ -18,7 +18,7 @@
position: relative; position: relative;
width: 100%; width: 100%;
text-align: center; text-align: center;
margin-bottom: 50px; margin-bottom: 30px;
} }
@ -27,7 +27,7 @@
left: 0; left: 0;
top: 50%; top: 50%;
margin: 30px 10px; margin: 30px 10px;
/* transform: translateY(-50%); */ transform: translateY(90%);
font-size: 24px; font-size: 24px;
color: #333; color: #333;
cursor: pointer; cursor: pointer;

2
src/components/pages/Income/Amount/EntriesList.js
View File

@ -51,7 +51,7 @@ function EntriesList() {
id: new Date().getTime(), id: new Date().getTime(),
amount: repeatEntry.amount, amount: repeatEntry.amount,
category: repeatEntry.category, category: repeatEntry.category,
type: repeatEntry.type, // Ensure type is included type: repeatEntry.type,
}; };
const updatedEntries = [...entries, newEntry]; const updatedEntries = [...entries, newEntry];

22
src/components/pages/Income/Category/Category.css
View File

@ -140,7 +140,11 @@ transition: border-color 0.3s ease, background-color 0.3s ease;
font-size: 20px; font-size: 20px;
} }
.category01 {
width: 28px;
height: 28px;
margin: 5px;
}
.category-icon { .category-icon {
width: 35px; width: 35px;
@ -187,28 +191,28 @@ transition: border-color 0.3s ease, background-color 0.3s ease;
@media (max-width: 375px) { @media (max-width: 375px) {
.category-container { .category-container {
padding: 0; /* Reduce padding for a more compact layout */ padding: 0
} }
.arrow { .arrow {
top: 30px; /* Adjust positioning of the arrow */ top: 30px;
left: 20px; left: 20px;
} }
.category-display { .category-display {
width: 120px; /* Adjust width to fit smaller screens */ width: 120px;
height: 25px; height: 25px;
margin: 15px auto; /* Center and reduce margins */ margin: 15px auto;
font-size: 14px; /* Adjust font size for smaller display */ font-size: 14px;
} }
.category-titles { .category-titles {
font-size: 16px; /* Reduce font size */ font-size: 16px;
margin-right: 2px; /* Adjust spacing */ margin-right: 2px;
} }
.category-icon { .category-icon {
width: 25px; /* Reduce size of icons */ width: 25px;
height: 25px; height: 25px;
margin: 5px; margin: 5px;
} }

2
src/components/pages/Income/Category/Category.js
View File

@ -72,7 +72,7 @@ function Category() {
<div className='category-display'> <div className='category-display'>
<h3 className="category-titles">Categories</h3> <h3 className="category-titles">Categories</h3>
<img src={categoryImage} alt="categoryIcon" className="category-icon" /> <img src={categoryImage} alt="categoryIcon" className="category01" />
</div> </div>
<section className='category-list'> <section className='category-list'>

80
src/components/pages/Income/Common/IncomeEdit.css
View File

@ -1,5 +1,3 @@
.incomeedit-containers { .incomeedit-containers {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -12,8 +10,8 @@
.backIcon { .backIcon {
position: absolute; position: absolute;
top: 20px; top: 0px;
left: 20px; left: 0px;
} }
.arrow-icon { .arrow-icon {
@ -22,62 +20,67 @@
} }
.edit-content { .edit-content {
padding: 20px; padding: 10px;
margin-bottom: 30px;
border-radius: 8px; border-radius: 8px;
/* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); */ /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); */
width: 100%; width: 100%;
max-width: 400px; max-width: 400px;
} }
.edit-titles h1 { .edit-titles h1 {
color: #fff; color: #fff;
margin-bottom: 30px;
font-size: 30px; font-size: 30px;
margin: 0px 0; margin: 0px 0;
text-align: center; text-align: center;
} }
.edit-datetime { .edit-datetime {
color: #fff; color: #fff;
font-size: 18px; margin-bottom: 30px;
font-size: 18px;
text-align: center; text-align: center;
margin-bottom: 10px; margin-bottom: 10px;
} }
.edit-fields { .edit-fields {
color: #fff; color: #fff;
margin-bottom: 15px; margin-bottom: 15px;
width: 93%; width: 93%;
} }
.edit-fields label { .edit-fields label {
display: block; display: block;
margin-bottom: 9px; margin-bottom: 9px;
} }
.edit-fields input { .edit-fields input {
width: 100%; width: 100%;
padding: 10px; padding: 10px;
border: 1px solid #555; /* border: 1px solid #555; */
border-radius: 4px; border-radius: 4px;
background-color: #3A3A3A; /* background-color: #3A3A3A; */
color: #fff; color: #fff;
font-size: 16px; font-size: 16px;
} }
/* Button styling */
.edit-buttons { .edit-buttons {
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-top: 30px; margin-top: 30px;
width: 100%; gap: 5px;
width: 100%;
} }
.edit-btn { .edit-btn {
/* item */
position: relative; position: relative;
width: 150px; width: 130px;
height: 60px; height: 50px;
color: #fff; color: #fff;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -91,9 +94,9 @@
} }
.edit-btn-2 { .edit-btn-2 {
position: relative; position: relative;
width: 150px; width: 130px;
height: 60px; height: 50px;
color: #fff; color: #fff;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -108,17 +111,26 @@
@media (max-width: 768px) { @media (max-width: 768px) {
.edit-titles h1 { .edit-titles h1 {
font-size: 24px;
font-size: 24px;
} }
.edit-datetime { .edit-datetime {
font-size: 16px;
font-size: 16px;
} }
.edit-buttons div { .edit-buttons div {
font-size: 14px; font-size: 14px;
} }
}
@media (min-width: 1024px) {
.edit-btn, .edit-btn-2 {
width: 250px;
height: 50px;
font-size: 20px;
}
} }

62
src/components/pages/Income/Income/IncomePage.css
View File

@ -1,9 +1,8 @@
/* IncomePage.css */
/* Main container */
.income-container { .income-container {
max-width: 800px; max-width: 800px;
margin: 0 auto; margin: 0 auto;
font-family: 'Montserrat', sans-serif;
padding: 20px; padding: 20px;
justify-content: center; justify-content: center;
border-radius: 10px; border-radius: 10px;
@ -14,14 +13,15 @@
.arrow-container { .arrow-container {
position: relative; position: relative;
width: 100%; width: 100%;
text-align: center; /* Center the title and date */ margin: 10px;
text-align: center;
margin-bottom: 20px; margin-bottom: 20px;
} }
/* Arrow icon */
.arrow-icon { .arrow-icon {
position: absolute; position: absolute;
left: 0; /* Place the arrow on the left */ left: 0;
top: 50%; top: 50%;
margin: 40px 5px; margin: 40px 5px;
transform: translateY(-50%); transform: translateY(-50%);
@ -30,7 +30,7 @@
cursor: pointer; cursor: pointer;
} }
/* Title */
.income-title { .income-title {
font-size: 24px; font-size: 24px;
color: #fff; color: #fff;
@ -40,16 +40,16 @@
margin-top: 10px; margin-top: 10px;
} }
/* Date and time */
.income-date { .income-date {
font-size: 14px; font-size: 14px;
color: #fff; color: #fff;
font-family: 'Montserrat', sans-serif; font-family: 'Montserrat', sans-serif;
text-align: center; /* Center the date */ text-align: center;
margin: 10px; margin: 10px;
} }
/* Button container */
.button-container { .button-container {
display: flex; display: flex;
font-family: 'Montserrat', sans-serif; font-family: 'Montserrat', sans-serif;
@ -111,21 +111,21 @@
/* Icons in buttons */
.category-icon { .category-icon {
width: 30px; width: 30px;
height: 30px; height: 30px;
margin-bottom: 10px; margin-bottom: 10px;
} }
/* Responsive styling */
/* Mobile-specific styles */
@media (max-width: 600px) { @media (max-width: 600px) {
.arrow-container{
margin: 20px;
}
.arrow-icon { .arrow-icon {
font-size: 15px; font-size: 15px;
} }
.expense-title { .expense-title {
@ -166,3 +166,37 @@
font-size: 18px; font-size: 18px;
} }
} }
/* Styles for screens with a width of 375px */
@media (max-width: 375px) {
.arrow-container {
font-size: 12px;
}
.income-title {
font-size: 18px;
}
.income-date {
font-size: 12px;
}
.button-container {
flex-direction: row;
align-items: center;
}
.amount-btn, .category-btn {
width: 90%;
font-size: 14px;
padding: 12px;
}
.category-icon {
width: 25px;
height: 25px;
margin-bottom: 5px;
}
}

91
src/components/pages/Income/Income/IncomeSuccessfully.css
View File

@ -1,11 +1,10 @@
body { body {
background-color: #1E1E1E; background-color: #1E1E1E;
margin: 20px; margin: 20px;
font-family: 'Montserrat', sans-serif;
padding: 0; padding: 0;
font-family: Arial, sans-serif;
} }
.Payment-container { .Payment-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -20,36 +19,31 @@ body {
cursor: pointer; cursor: pointer;
} }
.arr { .arr {
position: absolute; position: absolute;
top: 20px; top: 10px;
left: 20px; left: 10px;
} }
.expense-date {
.income-date {
color: #fff; color: #fff;
font-size: 18px; font-size: 18px;
text-align: center; text-align: center;
margin-bottom: 10px; margin-bottom: 0px;
} }
.payment-title { .payment-title {
text-align: center; text-align: center;
margin-bottom: 10px; margin-bottom: 30px;
} }
.payment-title h1 { .payment-title h1 {
color: #fff; color: #fff;
font-size: 30px; font-size: 30px; /* Default font size */
margin: 10px 0; margin: 0px 0;
text-align: center; text-align: center;
} }
.payment-content { .payment-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -57,7 +51,6 @@ body {
justify-content: center; justify-content: center;
} }
.payment-animation { .payment-animation {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -65,15 +58,13 @@ body {
margin-bottom: 10px; margin-bottom: 10px;
} }
.payment-message h2 { .payment-message h2 {
color: #fff; color: #fff;
font-size: 24px; font-size: 24px; /* Default font size */
text-align: center; text-align: center;
margin-bottom: 20px; margin-bottom: 20px;
} }
.payment-buttons { .payment-buttons {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -81,11 +72,10 @@ body {
margin-top: 20px; margin-top: 20px;
} }
.btn1, .bt_11 {
.btn1 {
position: relative; position: relative;
width: 150px; width: 130px; /* Default width */
height: 60px; height: 40px; /* Default height */
color: #fff; color: #fff;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -98,69 +88,50 @@ body {
margin-right: 10px; margin-right: 10px;
} }
/* Small screens (up to 600px) */
.bt_11 {
position: relative;
width: 150px;
height: 60px;
color: #fff;
justify-content: center;
align-items: center;
background: #1E1E1E;
box-shadow: -8px -8px 12px rgba(50, 50, 51, 0.66), 8px 8px 16px #040404, 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;
justify-content: center;
align-items: center;
margin-right: 10px;
}
@media (max-width: 600px) { @media (max-width: 600px) {
.payment-title h1 { .payment-title h1 {
font-size: 24px; font-size: 16px; /* Smaller font size */
} }
.income-date { .expense-date {
font-size: 16px; font-size: 12px; /* Smaller font size */
} }
.payment-message h2 { .payment-message h2 {
font-size: 20px; font-size: 14px; /* Smaller font size */
} }
.btn1, .bt_11 { .btn1, .bt_11 {
width: 120px; width: 120px;
height: 50px; height: 40px;
font-size: 16px; font-size: 14px;
} }
.arr { .arr {
top: 10px; top: 0px;
left: 10px; left: 0px;
} }
} }
/* Medium screens (601px to 1024px) */
@media (max-width: 1024px) { @media (max-width: 1024px) {
.payment-title h1 { .payment-title h1 {
font-size: 28px; font-size: 22px;
} }
.income-date { .expense-date {
font-size: 16px; font-size: 14px;
} }
.payment-message h2 { .payment-message h2 {
font-size: 22px; font-size: 18px;
} }
.btn1, .bt_11 { .btn1, .bt_11 {
width: 140px; width: 140px;
height: 55px; height: 50px;
font-size: 18px; font-size: 16px;
} }
.arr { .arr {
@ -169,11 +140,11 @@ body {
} }
} }
/* Large screens (1025px and up) */
@media (min-width: 1025px) { @media (min-width: 1025px) {
.btn1, .bt_11 { .btn1, .bt_11 {
width: 160px; width: 190px;
height: 60px; height: 50px;
font-size: 18px; font-size: 18px;
} }

54
src/components/pages/Income/Records/Records.css
View File

@ -1,11 +1,9 @@
.container { .container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-family: 'Montserrat', sans-serif;
height: 100vh; height: 100vh;
color: white; color: white;
position: relative; position: relative;
@ -13,12 +11,13 @@
.back_arrows { .back_arrows {
position: absolute; position: absolute;
top: 20px; top: 0px;
left: 20px; left: 0px;
} }
.arrow-icon { .arrow-icon {
font-size: 24px; font-size: 24px;
margin: 22px 10px 0px 10px;
cursor: pointer; cursor: pointer;
} }
@ -42,11 +41,12 @@
text-align: center; text-align: center;
} }
.total-amount h2 { .total-amount {
text-align: center;
font-size: 24px; font-size: 24px;
color: #4CAF50; color: #4CAF50;
margin: 10px 0; margin: 10px 0;
} }
.categories { .categories {
margin-top: 10px; margin-top: 10px;
@ -63,7 +63,7 @@
} }
.categories ul { .categories ul {
list-style-type: none; list-style-type: none;
padding: 5px; padding: 5px;
} }
@ -72,10 +72,10 @@
font-size: 16px; font-size: 16px;
color: #deb1b1; color: #deb1b1;
border-bottom: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0;
padding: 8px 0; padding: 8px 0;
} }
/* Mobile responsiveness */
@media (max-width: 768px) { @media (max-width: 768px) {
.success-titles h1 { .success-titles h1 {
font-size: 24px; font-size: 24px;
@ -87,13 +87,11 @@
} }
.total-amount { .total-amount {
text-align: center; color: #fff;
font-size: 24px; font-size: 12px;
color: #4CAF50; margin: 20px 0;
margin: 10px 0;
} }
.categories { .categories {
color: #fff; color: #fff;
font-size: 10px; font-size: 10px;
@ -103,14 +101,14 @@
.success-buttons { .success-buttons {
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 20px; gap: 10px;
margin-top: 20px; margin-top: 0px;
} }
.btn-home { .btn-home {
position: relative; position: relative;
width: 150px; width: 140px;
height: 60px; height: 50px;
color: #fff; color: #fff;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -125,8 +123,8 @@
} }
.btn-edit { .btn-edit {
position: relative; position: relative;
width: 150px; width: 140px;
height: 60px; height: 50px;
color: #fff; color: #fff;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -140,4 +138,18 @@
} }
@media (min-width: 1024px) {
.btn-edit, .btn-home {
width: 200px;
height: 50px;
font-size: 20px;
}
.success-title h1 {
font-size: 32px;
}
.success-message h2 {
font-size: 26px;
}
}

1
src/components/pages/Income/Records/Records.js
View File

@ -65,6 +65,7 @@ function Records() {
}; };
return ( return (
<div className="container"> <div className="container">
<div className="back_arrows"> <div className="back_arrows">
<FontAwesomeIcon <FontAwesomeIcon