" mu change"
parent
ea5f145e98
commit
56edbb76b5
|
|
@ -4,32 +4,36 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
}
|
||||
|
||||
.backIcon {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
top: 10px;
|
||||
margin: 35px;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
font-size: 24px;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.edit-content {
|
||||
|
||||
padding: 20px;
|
||||
padding: 30px;
|
||||
margin-bottom: 30px;
|
||||
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%;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.edit-titles h1 {
|
||||
color: #fff;
|
||||
margin-bottom: 30px;
|
||||
font-size: 30px;
|
||||
margin: 0px 0;
|
||||
text-align: center;
|
||||
|
|
@ -37,6 +41,7 @@
|
|||
|
||||
.edit-datetime {
|
||||
color: #fff;
|
||||
margin-bottom: 30px;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
|
|
@ -44,6 +49,7 @@
|
|||
|
||||
.edit-fields {
|
||||
color: #fff;
|
||||
padding: 10px 10px;
|
||||
margin-bottom: 15px;
|
||||
width: 93%;
|
||||
}
|
||||
|
|
@ -51,14 +57,15 @@
|
|||
.edit-fields label {
|
||||
display: block;
|
||||
margin-bottom: 9px;
|
||||
|
||||
}
|
||||
|
||||
.edit-fields input {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: 1px solid #555;
|
||||
/* border: 1px solid #555; */
|
||||
border-radius: 4px;
|
||||
background-color: #3A3A3A;
|
||||
/* background-color: #3A3A3A; */
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
|
@ -68,14 +75,14 @@
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 30px;
|
||||
gap: 5px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.edit-btn {
|
||||
|
||||
position: relative;
|
||||
width: 150px;
|
||||
height: 60px;
|
||||
width: 130px;
|
||||
height: 50px;
|
||||
color: #fff;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -90,8 +97,8 @@
|
|||
|
||||
.edit-btn-2 {
|
||||
position: relative;
|
||||
width: 150px;
|
||||
height: 60px;
|
||||
width: 130px;
|
||||
height: 50px;
|
||||
color: #fff;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -106,14 +113,26 @@
|
|||
|
||||
@media (max-width: 768px) {
|
||||
.edit-titles h1 {
|
||||
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.edit-datetime {
|
||||
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.edit-buttons div {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
.edit-btn, .edit-btn-2 {
|
||||
width: 250px;
|
||||
height: 50px;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,17 +5,21 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
color: white;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.arrows {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
top: 10px;
|
||||
margin: 35px;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.arrow-icon-1 {
|
||||
font-size: 24px;
|
||||
font-size: 18px;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
@ -30,13 +34,13 @@
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.success-title h1 {
|
||||
color: #fff;
|
||||
font-size: 30px;
|
||||
margin-top: 10px;
|
||||
margin-top: 0px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
@ -52,14 +56,14 @@
|
|||
.success-button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
margin-top: 20px;
|
||||
gap: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.btn-view {
|
||||
position: relative;
|
||||
width: 120px;
|
||||
height: 40px;
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
color: #fff;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -73,8 +77,8 @@
|
|||
}
|
||||
.btn-back {
|
||||
position: relative;
|
||||
width: 120px;
|
||||
height: 40px;
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
color: #fff;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -88,24 +92,11 @@
|
|||
}
|
||||
|
||||
|
||||
|
||||
.success-date-time{
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
/* Mobile responsiveness */
|
||||
@media (max-width: 768px) {
|
||||
.btn-view, .btn-back {
|
||||
padding: 12px 20px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* Mobile responsiveness */
|
||||
@media (max-width: 768px) {
|
||||
.success-message h2 {
|
||||
font-size: 20px;
|
||||
|
|
@ -114,4 +105,21 @@
|
|||
.success-title h1 {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
@ -22,7 +22,7 @@ function TotalExpenseSuccessfully() {
|
|||
const dataToStore = {
|
||||
incomeRecord: {
|
||||
dateTime: formattedDateTime,
|
||||
entryId: entryId || "Not provided", // Fallback in case entryId is undefined
|
||||
entryId: entryId || "Not provided",
|
||||
},
|
||||
};
|
||||
console.log(JSON.stringify(dataToStore));
|
||||
|
|
@ -33,7 +33,7 @@ function TotalExpenseSuccessfully() {
|
|||
};
|
||||
|
||||
const handleViewRecordsClick = () => {
|
||||
// Pass entryId to the /records route when navigating
|
||||
|
||||
navigate("/expense-records", { state: { entryId } });
|
||||
console.log(entryId);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -5,13 +5,12 @@
|
|||
justify-content: center;
|
||||
padding: 10px;
|
||||
margin: 0 auto;
|
||||
max-width: 500px;
|
||||
max-width: 90vw;
|
||||
background-color: #1e1e1e;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.backarrow {
|
||||
/* position: absolute; */
|
||||
width: 100%;
|
||||
|
|
@ -20,16 +19,17 @@
|
|||
}
|
||||
|
||||
|
||||
.arrowbtn {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
margin: 30px 10px;
|
||||
/* transform: translateY(-50%); */
|
||||
font-size: 24px;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.arrowbtn {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
margin: 20px 10px;
|
||||
font-size: 4vw; /* Responsive font-size */
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.amount-titles {
|
||||
|
|
@ -102,7 +102,6 @@
|
|||
}
|
||||
|
||||
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.amount-container {
|
||||
padding: 10px;
|
||||
|
|
@ -115,11 +114,11 @@
|
|||
|
||||
.arrowbtn {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
/* left: 3%; */
|
||||
top: 50%;
|
||||
margin: 30px 10px;
|
||||
margin: 17px 30px;
|
||||
/* transform: translateX(-20%); */
|
||||
font-size: 24px;
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -129,7 +128,7 @@
|
|||
}
|
||||
|
||||
.rupess_section {
|
||||
gap: 10px;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.coin {
|
||||
|
|
@ -138,7 +137,7 @@
|
|||
padding: 15px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.coin-value {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
|
@ -159,7 +158,6 @@
|
|||
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.amount-container {
|
||||
max-width: 800px;
|
||||
|
|
@ -171,6 +169,11 @@
|
|||
height: 100px;
|
||||
}
|
||||
|
||||
.arrowbtn {
|
||||
font-size: 18px;
|
||||
margin: 27px 21px;
|
||||
}
|
||||
|
||||
.coin-value {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
|
@ -197,8 +200,8 @@
|
|||
}
|
||||
|
||||
.arrowbtn {
|
||||
font-size: 20px;
|
||||
margin: 20px 8px;
|
||||
font-size: 18px;
|
||||
margin: 27px 21px;
|
||||
}
|
||||
|
||||
.amount-titles {
|
||||
|
|
@ -206,7 +209,7 @@
|
|||
}
|
||||
|
||||
.rupess_section {
|
||||
gap: 8px;
|
||||
gap: 20px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
body {
|
||||
margin: 0;
|
||||
overflow: hidden; /* Disable page scrolling */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Centered container without scrolling */
|
||||
|
||||
.total-amount-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -117,7 +117,7 @@ body {
|
|||
@media (max-width: 480px) {
|
||||
.total-amount-container {
|
||||
/* padding: 15px; */
|
||||
margin: 40px 0px ;
|
||||
margin: 20px 0px 0px 0px ;
|
||||
}
|
||||
|
||||
.add-entry-1,
|
||||
|
|
|
|||
|
|
@ -7,10 +7,11 @@
|
|||
background-color: #1e1e1e;
|
||||
color: white;
|
||||
width: 100%;
|
||||
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.arrow {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
|
|
@ -35,11 +36,11 @@
|
|||
font-size: 20px;
|
||||
margin-right: 4px;
|
||||
color: #fff;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 20px; /* Add 10px space below category titles */
|
||||
}
|
||||
|
||||
.category-display {
|
||||
margin: 35px 0 10px 0;
|
||||
margin: 35px 0 10px 0; /* 10px space below the display box */
|
||||
width: 150px;
|
||||
height: 30px;
|
||||
background: #1E1E1E;
|
||||
|
|
@ -54,7 +55,7 @@
|
|||
}
|
||||
|
||||
|
||||
.category-icon {
|
||||
.category01 {
|
||||
width: 30px;
|
||||
/* top: 10px; */
|
||||
justify-content: center;
|
||||
|
|
@ -106,6 +107,33 @@ 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;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.category-titles {
|
||||
font-size: 20px;
|
||||
|
|
@ -113,7 +141,7 @@ transition: border-color 0.3s ease, background-color 0.3s ease;
|
|||
|
||||
|
||||
|
||||
.category-icon {
|
||||
.category01 {
|
||||
width: 35px;
|
||||
margin: 10px;
|
||||
height: 3px;
|
||||
|
|
@ -137,7 +165,7 @@ transition: border-color 0.3s ease, background-color 0.3s ease;
|
|||
|
||||
}
|
||||
|
||||
.category-icon {
|
||||
.category01 {
|
||||
width: 30px;
|
||||
margin: 7px;
|
||||
height: 30px;
|
||||
|
|
@ -157,45 +185,49 @@ transition: border-color 0.3s ease, background-color 0.3s ease;
|
|||
|
||||
@media (max-width: 375px) {
|
||||
.category-container {
|
||||
|
||||
padding: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
font-size: 18px;
|
||||
margin: 27px 21px;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
top: 30px;
|
||||
left: 20px;
|
||||
left: 30px;
|
||||
|
||||
}
|
||||
|
||||
.category-display {
|
||||
width: 120px;
|
||||
height: 20px;
|
||||
margin: 15px auto;
|
||||
font-size: 14px;
|
||||
width: 120px;
|
||||
height: 25px;
|
||||
margin: 35px auto;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.category-titles {
|
||||
font-size: 13px;
|
||||
justify-content: center;
|
||||
/* align-items: center; */
|
||||
margin-right: 5px;
|
||||
font-size: 14px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.category-icons {
|
||||
width: 20px;
|
||||
margin: 3px;
|
||||
height: 20px;
|
||||
.category01 {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.cat-item {
|
||||
min-width: 40px;
|
||||
font-size: 9px;
|
||||
padding: 6px;
|
||||
min-width: 50px;
|
||||
font-size: 10px;
|
||||
padding: 8px;
|
||||
margin: 6px;
|
||||
}
|
||||
|
||||
.texts {
|
||||
width: 80%;
|
||||
font-size: 14px;
|
||||
padding: 8px;
|
||||
margin: 15px 0;
|
||||
width: 50%;
|
||||
font-size: 10px;
|
||||
padding: 8px;
|
||||
margin: 15px 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -74,7 +74,7 @@ function ExpenseCategory() {
|
|||
|
||||
<div className='category-display'>
|
||||
<h3 className="category-titles">Categories</h3>
|
||||
<img src={categoryImage} alt="categoryIcon" className="category-icon" />
|
||||
<img src={categoryImage} alt="categoryIcon" className="category01" />
|
||||
</div>
|
||||
|
||||
<section className='category-list'>
|
||||
|
|
|
|||
|
|
@ -140,7 +140,7 @@
|
|||
padding: 10px;
|
||||
}
|
||||
|
||||
.amount-icon, .category-icon {
|
||||
.amount-icon, .category{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 2px;
|
||||
|
|
@ -157,4 +157,36 @@
|
|||
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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,23 +1,23 @@
|
|||
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
color: white;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.back_arrows {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
top: 10px;
|
||||
margin: 35px;
|
||||
left: 10px;;
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
font-size: 24px;
|
||||
font-size: 18px;
|
||||
margin: 9px 0px 0px 0px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
@ -29,9 +29,9 @@
|
|||
}
|
||||
|
||||
.success-titles h1 {
|
||||
color: #fff;
|
||||
color: #4CAF50;
|
||||
font-size: 30px;
|
||||
margin: 10px 0;
|
||||
margin: 0 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
@ -45,35 +45,37 @@
|
|||
text-align: center;
|
||||
font-size: 24px;
|
||||
color: #4CAF50;
|
||||
margin: 10px 0;
|
||||
margin: 0px 0;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.categories {
|
||||
margin-top: 10px;
|
||||
|
||||
|
||||
.categories {
|
||||
margin-top: 0px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
.categories h3 {
|
||||
|
||||
.categories h3 {
|
||||
font-size: 15px;
|
||||
color: #9e9696;
|
||||
/* margin: 0px 0px 0px 0px; */
|
||||
/* padding: 5px; */
|
||||
|
||||
}
|
||||
|
||||
.categories ul {
|
||||
|
||||
.categories ul {
|
||||
list-style-type: none;
|
||||
padding: 5px;
|
||||
|
||||
}
|
||||
|
||||
.categories li {
|
||||
|
||||
}
|
||||
|
||||
.categories li {
|
||||
font-size: 16px;
|
||||
color: #deb1b1;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
padding: 8px 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile responsiveness */
|
||||
@media (max-width: 768px) {
|
||||
|
|
@ -84,47 +86,32 @@
|
|||
.success-datetime {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.total-amount {
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.total-amount {
|
||||
color: #4CAF50;
|
||||
font-size: 12px;
|
||||
margin: 0px 0;
|
||||
}
|
||||
|
||||
.categories {
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
margin: 10px 0;
|
||||
.categories {
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.success-buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
margin-top: 20px;
|
||||
gap: 10px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.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-home,
|
||||
.btn-edit {
|
||||
position: relative;
|
||||
width: 150px;
|
||||
height: 60px;
|
||||
width: 140px;
|
||||
height: 50px;
|
||||
color: #fff;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -135,7 +122,82 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,3 @@
|
|||
body {
|
||||
background-color: #1E1E1E;
|
||||
margin: 20px;
|
||||
padding: 0;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
|
||||
.Payment-container {
|
||||
display: flex;
|
||||
|
|
@ -16,40 +9,35 @@ body {
|
|||
}
|
||||
|
||||
.arrow {
|
||||
font-size: 24px;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
.arr {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
top: 10px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
|
||||
.income-date {
|
||||
.expense-date {
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
|
||||
.payment-title {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
|
||||
.payment-title h1 {
|
||||
color: #fff;
|
||||
font-size: 30px;
|
||||
margin: 10px 0;
|
||||
font-size: 30px;
|
||||
margin: 0px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.payment-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -57,7 +45,6 @@ body {
|
|||
justify-content: center;
|
||||
}
|
||||
|
||||
|
||||
.payment-animation {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
@ -65,15 +52,13 @@ body {
|
|||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
|
||||
.payment-message h2 {
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
font-size: 24px;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
|
||||
.payment-buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
@ -81,11 +66,10 @@ body {
|
|||
margin-top: 20px;
|
||||
}
|
||||
|
||||
|
||||
.btn1 {
|
||||
.btn1, .bt_11 {
|
||||
position: relative;
|
||||
width: 150px;
|
||||
height: 60px;
|
||||
width: 130px;
|
||||
height: 40px;
|
||||
color: #fff;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -98,82 +82,64 @@ body {
|
|||
margin-right: 10px;
|
||||
}
|
||||
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* Small screens (up to 600px) */
|
||||
@media (max-width: 600px) {
|
||||
.payment-title h1 {
|
||||
font-size: 24px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.income-date {
|
||||
font-size: 16px;
|
||||
.expense-date {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.payment-message h2 {
|
||||
font-size: 20px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.btn1, .bt_11 {
|
||||
width: 120px;
|
||||
height: 50px;
|
||||
font-size: 16px;
|
||||
height: 40px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.arr {
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.payment-title h1 {
|
||||
font-size: 28px;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.income-date {
|
||||
font-size: 16px;
|
||||
.expense-date {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.payment-message h2 {
|
||||
font-size: 22px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.btn1, .bt_11 {
|
||||
width: 140px;
|
||||
height: 55px;
|
||||
font-size: 18px;
|
||||
height: 50px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.arr {
|
||||
top: 15px;
|
||||
left: 15px;
|
||||
top: 0;
|
||||
left: 0px;
|
||||
margin: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Large screens (1025px and up) */
|
||||
@media (min-width: 1025px) {
|
||||
.btn1, .bt_11 {
|
||||
width: 160px;
|
||||
height: 60px;
|
||||
width: 190px;
|
||||
height: 50px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ function ExpenseSuccessfully() {
|
|||
}, []);
|
||||
|
||||
const handleBackClick = () => {
|
||||
navigate("/expense-edit");
|
||||
navigate("/expense-editPage");
|
||||
};
|
||||
|
||||
const handleBackToHome = () => {
|
||||
|
|
@ -40,7 +40,7 @@ function ExpenseSuccessfully() {
|
|||
<div className="Payment-container">
|
||||
<div className="payment-title">
|
||||
<h1>Expense</h1>
|
||||
<p className="income-date">{formattedDate}</p>
|
||||
<p className="expense-date">{formattedDate}</p>
|
||||
<div className="arr">
|
||||
<FontAwesomeIcon
|
||||
icon={faArrowLeft}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
position: relative;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-bottom: 50px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
left: 0;
|
||||
top: 50%;
|
||||
margin: 30px 10px;
|
||||
/* transform: translateY(-50%); */
|
||||
transform: translateY(90%);
|
||||
font-size: 24px;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ function EntriesList() {
|
|||
id: new Date().getTime(),
|
||||
amount: repeatEntry.amount,
|
||||
category: repeatEntry.category,
|
||||
type: repeatEntry.type, // Ensure type is included
|
||||
type: repeatEntry.type,
|
||||
};
|
||||
|
||||
const updatedEntries = [...entries, newEntry];
|
||||
|
|
|
|||
|
|
@ -140,7 +140,11 @@ transition: border-color 0.3s ease, background-color 0.3s ease;
|
|||
font-size: 20px;
|
||||
}
|
||||
|
||||
|
||||
.category01 {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.category-icon {
|
||||
width: 35px;
|
||||
|
|
@ -187,28 +191,28 @@ transition: border-color 0.3s ease, background-color 0.3s ease;
|
|||
@media (max-width: 375px) {
|
||||
.category-container {
|
||||
|
||||
padding: 0; /* Reduce padding for a more compact layout */
|
||||
padding: 0
|
||||
}
|
||||
|
||||
.arrow {
|
||||
top: 30px; /* Adjust positioning of the arrow */
|
||||
top: 30px;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.category-display {
|
||||
width: 120px; /* Adjust width to fit smaller screens */
|
||||
width: 120px;
|
||||
height: 25px;
|
||||
margin: 15px auto; /* Center and reduce margins */
|
||||
font-size: 14px; /* Adjust font size for smaller display */
|
||||
margin: 15px auto;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.category-titles {
|
||||
font-size: 16px; /* Reduce font size */
|
||||
margin-right: 2px; /* Adjust spacing */
|
||||
font-size: 16px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.category-icon {
|
||||
width: 25px; /* Reduce size of icons */
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin: 5px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@ function Category() {
|
|||
|
||||
<div className='category-display'>
|
||||
<h3 className="category-titles">Categories</h3>
|
||||
<img src={categoryImage} alt="categoryIcon" className="category-icon" />
|
||||
<img src={categoryImage} alt="categoryIcon" className="category01" />
|
||||
</div>
|
||||
|
||||
<section className='category-list'>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
|
||||
|
||||
.incomeedit-containers {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -12,8 +10,8 @@
|
|||
|
||||
.backIcon {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
|
|
@ -22,62 +20,67 @@
|
|||
}
|
||||
|
||||
.edit-content {
|
||||
|
||||
padding: 20px;
|
||||
|
||||
padding: 10px;
|
||||
margin-bottom: 30px;
|
||||
border-radius: 8px;
|
||||
/* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); */
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.edit-titles h1 {
|
||||
color: #fff;
|
||||
margin-bottom: 30px;
|
||||
font-size: 30px;
|
||||
margin: 0px 0;
|
||||
margin: 0px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.edit-datetime {
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
margin-bottom: 30px;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.edit-fields {
|
||||
color: #fff;
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: 15px;
|
||||
width: 93%;
|
||||
}
|
||||
|
||||
.edit-fields label {
|
||||
display: block;
|
||||
margin-bottom: 9px;
|
||||
margin-bottom: 9px;
|
||||
|
||||
}
|
||||
|
||||
.edit-fields input {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: 1px solid #555;
|
||||
border-radius: 4px;
|
||||
background-color: #3A3A3A;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
/* border: 1px solid #555; */
|
||||
border-radius: 4px;
|
||||
/* background-color: #3A3A3A; */
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* Button styling */
|
||||
|
||||
.edit-buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
justify-content: center;
|
||||
margin-top: 30px;
|
||||
width: 100%;
|
||||
gap: 5px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.edit-btn {
|
||||
/* item */
|
||||
position: relative;
|
||||
width: 150px;
|
||||
height: 60px;
|
||||
|
||||
position: relative;
|
||||
width: 130px;
|
||||
height: 50px;
|
||||
color: #fff;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -91,9 +94,9 @@
|
|||
}
|
||||
|
||||
.edit-btn-2 {
|
||||
position: relative;
|
||||
width: 150px;
|
||||
height: 60px;
|
||||
position: relative;
|
||||
width: 130px;
|
||||
height: 50px;
|
||||
color: #fff;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -108,17 +111,26 @@
|
|||
|
||||
@media (max-width: 768px) {
|
||||
.edit-titles h1 {
|
||||
font-size: 24px;
|
||||
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.edit-datetime {
|
||||
font-size: 16px;
|
||||
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.edit-buttons div {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
.edit-btn, .edit-btn-2 {
|
||||
width: 250px;
|
||||
height: 50px;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,8 @@
|
|||
/* IncomePage.css */
|
||||
|
||||
/* Main container */
|
||||
.income-container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
padding: 20px;
|
||||
justify-content: center;
|
||||
border-radius: 10px;
|
||||
|
|
@ -14,14 +13,15 @@
|
|||
.arrow-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
text-align: center; /* Center the title and date */
|
||||
margin: 10px;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* Arrow icon */
|
||||
|
||||
.arrow-icon {
|
||||
position: absolute;
|
||||
left: 0; /* Place the arrow on the left */
|
||||
left: 0;
|
||||
top: 50%;
|
||||
margin: 40px 5px;
|
||||
transform: translateY(-50%);
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Title */
|
||||
|
||||
.income-title {
|
||||
font-size: 24px;
|
||||
color: #fff;
|
||||
|
|
@ -40,16 +40,16 @@
|
|||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* Date and time */
|
||||
|
||||
.income-date {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
text-align: center; /* Center the date */
|
||||
text-align: center;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
/* Button container */
|
||||
|
||||
.button-container {
|
||||
display: flex;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
|
|
@ -111,21 +111,21 @@
|
|||
|
||||
|
||||
|
||||
/* Icons in buttons */
|
||||
|
||||
.category-icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* Responsive styling */
|
||||
|
||||
/* Mobile-specific styles */
|
||||
@media (max-width: 600px) {
|
||||
|
||||
|
||||
.arrow-container{
|
||||
margin: 20px;
|
||||
}
|
||||
.arrow-icon {
|
||||
font-size: 15px;
|
||||
|
||||
}
|
||||
|
||||
.expense-title {
|
||||
|
|
@ -166,3 +166,37 @@
|
|||
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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,10 @@
|
|||
body {
|
||||
background-color: #1E1E1E;
|
||||
margin: 20px;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
padding: 0;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
|
||||
.Payment-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -20,36 +19,31 @@ body {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
.arr {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
|
||||
.income-date {
|
||||
.expense-date {
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
|
||||
.payment-title {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
|
||||
.payment-title h1 {
|
||||
color: #fff;
|
||||
font-size: 30px;
|
||||
margin: 10px 0;
|
||||
font-size: 30px; /* Default font size */
|
||||
margin: 0px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.payment-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -57,7 +51,6 @@ body {
|
|||
justify-content: center;
|
||||
}
|
||||
|
||||
|
||||
.payment-animation {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
@ -65,15 +58,13 @@ body {
|
|||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
|
||||
.payment-message h2 {
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
font-size: 24px; /* Default font size */
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
|
||||
.payment-buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
@ -81,11 +72,10 @@ body {
|
|||
margin-top: 20px;
|
||||
}
|
||||
|
||||
|
||||
.btn1 {
|
||||
.btn1, .bt_11 {
|
||||
position: relative;
|
||||
width: 150px;
|
||||
height: 60px;
|
||||
width: 130px; /* Default width */
|
||||
height: 40px; /* Default height */
|
||||
color: #fff;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -98,69 +88,50 @@ body {
|
|||
margin-right: 10px;
|
||||
}
|
||||
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* Small screens (up to 600px) */
|
||||
@media (max-width: 600px) {
|
||||
.payment-title h1 {
|
||||
font-size: 24px;
|
||||
font-size: 16px; /* Smaller font size */
|
||||
}
|
||||
|
||||
.income-date {
|
||||
font-size: 16px;
|
||||
.expense-date {
|
||||
font-size: 12px; /* Smaller font size */
|
||||
}
|
||||
|
||||
.payment-message h2 {
|
||||
font-size: 20px;
|
||||
font-size: 14px; /* Smaller font size */
|
||||
}
|
||||
|
||||
.btn1, .bt_11 {
|
||||
width: 120px;
|
||||
height: 50px;
|
||||
font-size: 16px;
|
||||
height: 40px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.arr {
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Medium screens (601px to 1024px) */
|
||||
@media (max-width: 1024px) {
|
||||
.payment-title h1 {
|
||||
font-size: 28px;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.income-date {
|
||||
font-size: 16px;
|
||||
.expense-date {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.payment-message h2 {
|
||||
font-size: 22px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.btn1, .bt_11 {
|
||||
width: 140px;
|
||||
height: 55px;
|
||||
font-size: 18px;
|
||||
height: 50px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.arr {
|
||||
|
|
@ -169,11 +140,11 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
/* Large screens (1025px and up) */
|
||||
@media (min-width: 1025px) {
|
||||
.btn1, .bt_11 {
|
||||
width: 160px;
|
||||
height: 60px;
|
||||
width: 190px;
|
||||
height: 50px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
height: 100vh;
|
||||
color: white;
|
||||
position: relative;
|
||||
|
|
@ -13,12 +11,13 @@
|
|||
|
||||
.back_arrows {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
font-size: 24px;
|
||||
margin: 22px 10px 0px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
@ -42,11 +41,12 @@
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.total-amount h2 {
|
||||
.total-amount {
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
color: #4CAF50;
|
||||
margin: 10px 0;
|
||||
}
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.categories {
|
||||
margin-top: 10px;
|
||||
|
|
@ -63,7 +63,7 @@
|
|||
}
|
||||
|
||||
.categories ul {
|
||||
list-style-type: none;
|
||||
list-style-type: none;
|
||||
padding: 5px;
|
||||
|
||||
}
|
||||
|
|
@ -72,10 +72,10 @@
|
|||
font-size: 16px;
|
||||
color: #deb1b1;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
padding: 8px 0;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
|
||||
/* Mobile responsiveness */
|
||||
@media (max-width: 768px) {
|
||||
.success-titles h1 {
|
||||
font-size: 24px;
|
||||
|
|
@ -87,13 +87,11 @@
|
|||
}
|
||||
|
||||
.total-amount {
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
color: #4CAF50;
|
||||
margin: 10px 0;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
|
||||
.categories {
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
|
|
@ -103,14 +101,14 @@
|
|||
.success-buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
margin-top: 20px;
|
||||
gap: 10px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.btn-home {
|
||||
position: relative;
|
||||
width: 150px;
|
||||
height: 60px;
|
||||
width: 140px;
|
||||
height: 50px;
|
||||
color: #fff;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -125,8 +123,8 @@
|
|||
}
|
||||
.btn-edit {
|
||||
position: relative;
|
||||
width: 150px;
|
||||
height: 60px;
|
||||
width: 140px;
|
||||
height: 50px;
|
||||
color: #fff;
|
||||
justify-content: 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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -65,6 +65,7 @@ function Records() {
|
|||
};
|
||||
|
||||
return (
|
||||
|
||||
<div className="container">
|
||||
<div className="back_arrows">
|
||||
<FontAwesomeIcon
|
||||
|
|
|
|||
Loading…
Reference in New Issue