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

" ui change"

component_ui
sonali 2024-10-02 18:02:18 +05:30
parent d8c91e08d9
commit ea5f145e98
12 changed files with 696 additions and 557 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/App.css
View File

@ -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);
}
}

4
src/components/pages/Expense/Common/ExpenseLayout.css
View File

@ -1,7 +1,7 @@
.layout-container { .layout-container {
display: flex; /* display: flex;
flex-direction: column; flex-direction: column;
min-height: 100vh; min-height: 100vh; */
font-family: 'Montserrat', sans-serif; font-family: 'Montserrat', sans-serif;
} }

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

@ -1,191 +1,230 @@
.amount-container { .amount-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: 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; padding: 10px;
margin: 0 auto; max-width: 100%;
max-width: 500px;
background-color: #1e1e1e;
border-radius: 10px;
text-align: center;
} }
.backarrow { .backarrow {
position: relative; justify-content: space-between;
width: 100%;
text-align: center;
margin-bottom: 50px;
} }
.arrowbtn { .arrowbtn {
position: absolute; position: absolute;
left: 0; left: 0;
top: 50%; top: 50%;
margin: 30px 10px; margin: 30px 10px;
/* transform: translateY(-50%); */ /* transform: translateX(-20%); */
font-size: 24px; font-size: 24px;
color: #333; color: #333;
cursor: pointer; cursor: pointer;
} }
.amount-titles { .amount-titles {
font-size: 24px; font-size: 20px;
width: 100px;
color: #fff;
margin: 0 auto;
text-align: center;
flex-grow: 1;
} }
.rupess_section {
.amount-display { gap: 10px;
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;
} }
.coin {
width: 50px;
height: 50px;
padding: 15px;
}
.coin-value {
font-size: 26px;
}
.Rupeesicon {
width: 33px;
height: 33px;
}
.total-amount { .total-amount {
font-size: 36px; font-size: 28px;
color: #fff; }
margin-right: 10px;
.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 { .Rupeesicon {
width: 30px; width: 30px;
height: 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 { .rupess_section {
display: flex; gap: 8px;
justify-content: center; margin-top: 10px;
flex-wrap: wrap;
gap: 15px;
margin-top: 20px;
} }
.coin { .coin {
width: 50px; width: 40px;
height: 50px; height: 35px;
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 { .coin-value {
font-size: 24px; font-size: 20px;
font-weight: bold;
color: #fff;
} }
.Rupeesicon {
width: 25px;
height: 25px;
}
@media (max-width: 600px) { .total-amount {
.amount-container { font-size: 26px;
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;
} }
}
}
@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;
}
}

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

@ -1,21 +1,28 @@
body {
margin: 0;
overflow: hidden; /* Disable page scrolling */
}
/* Centered container without scrolling */
.total-amount-container { .total-amount-container {
flex-direction: column; display: flex;
position: absolute; flex-direction: column;
width: 80%; position: fixed;
max-width: 500px; width: 80%;
height: auto; max-width: 500px;
top: 50%; height: 340px;
left: 50%; top: 50%;
transform: translate(-50%, -50%); left: 50%;
color: white; transform: translate(-50%, -50%);
font-family: 'Montserrat', sans-serif; color: white;
background: #1e1e1e; font-family: 'Montserrat', sans-serif;
box-shadow: -8px -8px 12px rgba(50, 50, 51, 0.66), 8px 8px 16px #040404, background: #1e1e1e;
inset -2px -2px 2px rgba(255, 255, 255, 0.64), box-shadow: -8px -8px 12px rgba(50, 50, 51, 0.66), 8px 8px 16px #040404,
inset 2px 2px 2px rgba(39, 39, 44, 0.56); inset -2px -2px 2px rgba(255, 255, 255, 0.64),
padding: 20px; inset 2px 2px 2px rgba(39, 39, 44, 0.56);
box-sizing: border-box; padding: 8px;
} box-sizing: border-box;
}
.input-group { .input-group {
display: flex; display: flex;
@ -82,7 +89,7 @@
@media (max-width: 768px) { @media (max-width: 768px) {
.total-amount-container { .total-amount-container {
width: 90%; width: 90%;
top: 60%; top: 65%;
} }
.input-group { .input-group {

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

@ -1,158 +1,201 @@
.category-container { .category-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
background-color: #1e1e1e; background-color: #1e1e1e;
color: white; color: white;
width: 100%; width: 100%;
padding: 10px;
} padding: 10px;
}
.arrow {
position: absolute;
top: 10px;
left: 30px;
}
.arrow { .arrow-icon {
position: absolute; font-size: 24px;
top: 10px;
left: 30px; }
}
.arrow-icon {
font-size: 24px;
}
/* /*
.category-header { .category-header {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin: 20px 0; margin: 20px 0;
width: 100%; width: 100%;
text-align: center; 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-list { .category-titles {
display: flex; font-size: 20px;
flex-wrap: wrap; margin-right: 4px;
justify-content: center; color: #fff;
width: 100%; margin-bottom: 20px;
margin-top: 20px; }
}
.category-display {
.cat-item { margin: 35px 0 10px 0;
background-color: #2a2a2a; width: 150px;
border-radius: 10px; height: 30px;
padding: 15px; background: #1E1E1E;
margin: 10px; 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);
min-width: 120px; border-radius: 24px;
text-align: center;
font-size: 18px; display: flex;
transition: background-color 0.3s ease; align-items: center;
cursor: pointer; justify-content: center;
} padding: 10px;
.cat-item.selected { border-radius: 8px;
background-color: #007BFF; }
color: white;
border-radius: 5px;
.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 { .cat-item.selected {
background-color: #007bff; background-color: #007bff;
color: #fff; color: #fff;
} }
.texts { .texts {
width: 50%; width: 50%;
padding: 10px; padding: 10px;
margin: 20px 0; margin: 20px 0;
font-size: 16px; font-size: 16px;
border-bottom: 1px solid #fafafa; border-bottom: 1px solid #fafafa;
outline: none; outline: none;
color: #ffffff; color: #ffffff;
border-radius: 8px; 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;
} }
@media (max-width: 768px) {
.category-titles {
@media (max-width: 768px) { font-size: 20px;
.category-titles {
font-size: 20px;
}
.category-icon {
width: 35px;
margin: 10px;
height: 35px;
}
.cat-item {
min-width: 100px;
font-size: 16px;
}
} }
@media (max-width: 480px) {
.arrow {
top: 40px;
left: 40px;
}
.category-titles {
font-size: 18px;
}
.category-icon {
.category-icon { width: 35px;
width: 30px; margin: 10px;
margin: 7px; height: 3px;
height: 30px;
}
.cat-item {
min-width: 80px;
font-size: 14px;
padding: 10px;
margin: 8px;
}
.category-container {
padding: 0px;
}
} }
.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;
}
}

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

@ -8,21 +8,18 @@ import '../ExpenseCategory/ExpenseCategory.css';
function ExpenseCategory() { function ExpenseCategory() {
const navigate = useNavigate(); const navigate = useNavigate();
const [totalAmount, setTotalAmount, category, setCategory] = useOutletContext(); const [totalAmount, setTotalAmount, category, setCategory] = useOutletContext();
const [categories, setCategories] = useState(["Hair", "Clothing", "Food", "Books", "Electronics", "Other"]); const [categories, setCategories] = useState(["Hair", "Clothing", "Food", "Books", "Electronics", "Other"]);
const [selectedCategories, setSelectedCategories] = useState([]); const [selectedCategories, setSelectedCategories] = useState([]);
const [customCategoryCount, setCustomCategoryCount] = useState(0); const [customCategoryCount, setCustomCategoryCount] = useState(0);
const [newCategory, setNewCategory] = useState('');
const location = useLocation(); const location = useLocation();
const entryType = location.state?.entryType; const entryType = location.state?.entryType;
const handleBackClick = () => { const handleBackClick = () => {
navigate("/income", { state: { entryType } });
navigate("/expense", { state: { entryType } });
console.log(entryType); console.log(entryType);
} }
@ -38,7 +35,8 @@ function ExpenseCategory() {
} }
}; };
const handleAddCategory = (newCategory) => { const handleAddCategory = () => {
if (newCategory.trim() === '') return;
if (!categories.includes(newCategory)) { if (!categories.includes(newCategory)) {
if (customCategoryCount < 3) { if (customCategoryCount < 3) {
const updatedCategories = [...categories, newCategory]; const updatedCategories = [...categories, newCategory];
@ -46,6 +44,7 @@ function ExpenseCategory() {
setCustomCategoryCount(customCategoryCount + 1); setCustomCategoryCount(customCategoryCount + 1);
localStorage.setItem('categories', JSON.stringify(updatedCategories)); localStorage.setItem('categories', JSON.stringify(updatedCategories));
alert(`Category "${newCategory}" added!`); alert(`Category "${newCategory}" added!`);
setNewCategory(''); // Clear input field after adding
} else { } else {
alert('You can only add up to three custom categories!'); alert('You can only add up to three custom categories!');
} }
@ -77,7 +76,7 @@ function ExpenseCategory() {
<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="category-icon" />
</div> </div>
<section className='category-list'> <section className='category-list'>
{categories.map((cat, index) => ( {categories.map((cat, index) => (
<div <div
@ -90,20 +89,25 @@ function ExpenseCategory() {
))} ))}
</section> </section>
{/* Input and button for adding new category */}
{customCategoryCount < 3 && ( {customCategoryCount < 3 && (
<input className='texts' <div className="add-category">
type="text" <input
placeholder="Add New Category" className='texts'
onKeyDown={(e) => { type="text"
if (e.key === 'Enter') { placeholder="Add New Category"
handleAddCategory(e.target.value); value={newCategory}
e.target.value = ''; onChange={(e) => setNewCategory(e.target.value)}
} />
}} <button
/> className="add-button"
onClick={handleAddCategory}
>
Add
</button>
</div>
)} )}
</div> </div>
); );
} }
export default ExpenseCategory; export default ExpenseCategory;

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

@ -1,6 +1,6 @@
.expense-container { .expense-container {
max-width: 800px; max-width: 100%;
margin: 0 auto; margin: 0 auto;
padding: 20px; padding: 20px;
justify-content: center; justify-content: center;

45
src/components/pages/Income/Amount/TotalAmount.css
View File

@ -1,20 +1,26 @@
body {
margin: 0;
overflow: hidden;
}
.total-amount-container { .total-amount-container {
display: flex;
flex-direction: column; flex-direction: column;
position: absolute; position: relative;
width: 80%; width: 80%;
max-width: 500px; max-width: 500px;
height: auto; height: auto;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
color: white; color: white;
font-family: 'Montserrat', sans-serif; font-family: 'Montserrat', sans-serif;
background: #1e1e1e; background: #1e1e1e;
box-shadow: -8px -8px 12px rgba(50, 50, 51, 0.66), 8px 8px 16px #040404, 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(255, 255, 255, 0.64),
inset 2px 2px 2px rgba(39, 39, 44, 0.56); inset 2px 2px 2px rgba(39, 39, 44, 0.56);
padding: 20px; padding: 20px;
box-sizing: border-box; box-sizing: border-box;
} }
.input-group { .input-group {
@ -75,14 +81,14 @@ input:focus {
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
} }
.error-message{ .error-message {
color: red; color: red;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.total-amount-container { .total-amount-container {
width: 90%; width: 90%;
top: 60%; top: auto;
} }
.input-group { .input-group {
@ -119,3 +125,24 @@ input:focus {
height: 40px; 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;
}
}

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

@ -1,166 +1,229 @@
.category-container { .category-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
background-color: #1e1e1e; background-color: #1e1e1e;
color: white; color: white;
width: 100%; width: 100%;
font-family: 'Montserrat', sans-serif;
padding: 10px; padding: 10px;
} }
.arrow {
position: absolute; .arrow {
top: 10px; position: absolute;
left: 30px; top: 10px;
} left: 30px;
}
.arrow-icon {
font-size: 24px; .arrow-icon {
right: 85px; font-size: 24px;
bottom: 40px;
}
}
/* /*
.category-header { .category-header {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin: 20px 0; margin: 20px 0;
width: 100%; width: 100%;
text-align: center; 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-list { .category-titles {
display: flex; font-size: 20px;
flex-wrap: wrap; margin-right: 4px;
justify-content: center; color: #fff;
width: 100%; margin-bottom: 20px; /* Add 10px space below category titles */
margin-top: 20px; }
}
.category-display {
.cat-item { margin: 35px 0 10px 0; /* 10px space below the display box */
background-color: #2a2a2a; width: 150px;
border-radius: 10px; height: 30px;
padding: 15px; background: #1E1E1E;
margin: 10px; 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);
min-width: 120px; border-radius: 24px;
text-align: center;
font-size: 18px; display: flex;
transition: background-color 0.3s ease; align-items: center;
cursor: pointer; justify-content: center;
} padding: 10px;
.cat-item.selected { border-radius: 8px;
background-color: #007BFF; }
color: white;
border-radius: 5px;
.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 { .cat-item.selected {
background-color: #007bff; background-color: #007bff;
color: #fff; color: #fff;
} }
.texts { .texts {
width: 50%; width: 50%;
padding: 10px; padding: 10px;
margin: 20px 0; margin: 20px 0;
font-size: 16px; font-size: 16px;
border-bottom: 1px solid #fafafa; border-bottom: 1px solid #fafafa;
outline: none; outline: none;
color: #ffffff; color: #ffffff;
border-radius: 8px; 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) {
/* Mobile responsiveness */ .category-titles {
@media (max-width: 768px) { font-size: 20px;
.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: 480px) {
.arrow {
top: 30px;
left: 10px;
}
.category-titles {
font-size: 18px;
}
.category-icon {
.category-icon { width: 35px;
width: 30px; margin: 10px;
margin: 7px; height: 3px;
height: 30px;
}
.cat-item {
min-width: 80px;
font-size: 14px;
padding: 10px;
margin: 8px;
}
.category-container {
padding: 0px;
}
} }
.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;
}
}

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

@ -11,13 +11,12 @@ function Category() {
const [categories, setCategories] = useState(["Hair", "Clothing", "Food", "Books", "Electronics", "Other"]); const [categories, setCategories] = useState(["Hair", "Clothing", "Food", "Books", "Electronics", "Other"]);
const [selectedCategories, setSelectedCategories] = useState([]); const [selectedCategories, setSelectedCategories] = useState([]);
const [customCategoryCount, setCustomCategoryCount] = useState(0); const [customCategoryCount, setCustomCategoryCount] = useState(0);
const [newCategory, setNewCategory] = useState('');
const location = useLocation(); const location = useLocation();
const entryType = location.state?.entryType; const entryType = location.state?.entryType;
const handleBackClick = () => { const handleBackClick = () => {
navigate("/income", { state: { entryType } }); navigate("/income", { state: { entryType } });
console.log(entryType); console.log(entryType);
} }
@ -34,7 +33,8 @@ function Category() {
} }
}; };
const handleAddCategory = (newCategory) => { const handleAddCategory = () => {
if (newCategory.trim() === '') return;
if (!categories.includes(newCategory)) { if (!categories.includes(newCategory)) {
if (customCategoryCount < 3) { if (customCategoryCount < 3) {
const updatedCategories = [...categories, newCategory]; const updatedCategories = [...categories, newCategory];
@ -42,6 +42,7 @@ function Category() {
setCustomCategoryCount(customCategoryCount + 1); setCustomCategoryCount(customCategoryCount + 1);
localStorage.setItem('categories', JSON.stringify(updatedCategories)); localStorage.setItem('categories', JSON.stringify(updatedCategories));
alert(`Category "${newCategory}" added!`); alert(`Category "${newCategory}" added!`);
setNewCategory(''); // Clear input field after adding
} else { } else {
alert('You can only add up to three custom categories!'); alert('You can only add up to three custom categories!');
} }
@ -73,7 +74,7 @@ function Category() {
<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="category-icon" />
</div> </div>
<section className='category-list'> <section className='category-list'>
{categories.map((cat, index) => ( {categories.map((cat, index) => (
<div <div
@ -86,17 +87,23 @@ function Category() {
))} ))}
</section> </section>
{/* Input and button for adding new category */}
{customCategoryCount < 3 && ( {customCategoryCount < 3 && (
<input className='texts' <div className="add-category">
type="text" <input
placeholder="Add New Category" className='texts'
onKeyDown={(e) => { type="text"
if (e.key === 'Enter') { placeholder="Add New Category"
handleAddCategory(e.target.value); value={newCategory}
e.target.value = ''; onChange={(e) => setNewCategory(e.target.value)}
} />
}} <button
/> className="add-button"
onClick={handleAddCategory}
>
Add
</button>
</div>
)} )}
</div> </div>
); );

2
src/components/pages/Income/Home.css
View File

@ -123,7 +123,7 @@
} }
.buttons { .buttons {
max-width: 100%; max-width: 80%;
} }
.expense-btn, .income-btn { .expense-btn, .income-btn {

13
src/index.css
View File

@ -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;
}