Skip to content

Commit

Permalink
Dashboard improvement (#2264)
Browse files Browse the repository at this point in the history 
Added options for Delete Account and Update Subscription in the
dashboard, Clicking on Update Subscription option opens a popup window
for taking user input
  • Loading branch information
@atyabbin
atyabbin authored Jun 24, 2024
2 parents ead9ed0 + 206e387 commit 66b23d1
Show file tree
Hide file tree
Showing 6 changed files with 933 additions and 54 deletions.
5 changes: 4 additions & 1 deletion infra/staff/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,15 @@
"preview": "vite preview"
},
"dependencies": {
"date-fns": "^3.6.0",
"react": "^18",
"react-datepicker": "^7.1.0",
"react-dom": "^18",
"react-toastify": "^10.0.5",
"zod": "^3"
},
"devDependencies": {
"@rollup/plugin-node-resolve": "^15.2.3",
"@types/react": "^18",
"@types/react-dom": "^18",
"@typescript-eslint/eslint-plugin": "^7",
Expand All @@ -29,7 +32,7 @@
"prettier": "^3",
"prettier-plugin-organize-imports": "^3.2",
"prettier-plugin-packagejson": "^2.5",
"typescript": "^5.4.5",
"typescript": "^5",
"vite": "^5.2"
},
"packageManager": "yarn@1.22.22"
Expand Down
332 changes: 332 additions & 0 deletions infra/staff/src/App.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,20 @@
border-radius: 5px;
margin-top: 20px;
}
#submitbtn {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #009879;
color: white;
border: none;
border-radius: 5px;
margin-top: 20px;
}

#submitbtn:hover {
background-color: #007c6c;
}

.fetch-button-container button:hover {
background-color: #007c6c;
Expand Down Expand Up @@ -122,3 +136,321 @@ button {
.dropdown-menu button:hover {
background-color: #f0f0f0;
}
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #ffffff;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
z-index: 1000;
max-width: 80%;
max-height: 80%;
overflow: auto;
}

.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 10px;
border-bottom: 1px solid #ccc;
}

.modal-header .close-btn {
cursor: pointer;
color: #777;
font-size: 20px;
}

.modal-content {
margin-top: 10px;
}

/* Styles for draggable modal */
.modal.draggable {
cursor: move;
}

.modal.draggable .modal-header {
cursor: move;
}
.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: lightgreen;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
z-index: 1000;
}

.popup-content {
display: flex;
flex-direction: column;
}

.popup-content div {
margin-bottom: 10px;
}
:root {
--popup-bg-color-light: #fff;
--popup-bg-color-dark: #2c2c2c;
--popup-border-color-light: #ccc;
--popup-border-color-dark: #444;
--popup-text-color-light: #000;
--popup-text-color-dark: #fff;
--popup-shadow-light: rgba(0, 0, 0, 0.1);
--popup-shadow-dark: rgba(255, 255, 255, 0.1);
}

.update-subscription-popup {
position: fixed;
top: 50%;
left: 50%;
width: 400px;
transform: translate(-50%, -50%);
background-color: var(--popup-bg-color-light);
border: 1px solid var(--popup-border-color-light);
padding: 20px;
z-index: 1000;
box-shadow: 0px 0px 10px var(--popup-shadow-light);
}

.popup-content {
display: flex;
flex-direction: column;
}

.close-button {
align-self: flex-end;
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: var(--popup-text-color-light);
}

.popup-content h2 {
margin-top: 0;
}

.popup-content form label {
display: block;
margin-bottom: 10px;
}

.popup-content form input,
.popup-content form select {
width: 100%;
padding: 8px;
margin-top: 5px;
background-color: var(--popup-bg-color-light);
color: var(--popup-text-color-light);
border: 1px solid var(--popup-border-color-light);
}

.popup-content form button {
padding: 10px 15px;
margin-top: 10px;
cursor: pointer;
background-color: var(--popup-bg-color-light);
color: var(--popup-text-color-light);
border: 1px solid var(--popup-border-color-light);
}

.custom-select {
position: relative;
width: 100%;
}

.custom-select select {
width: 100%;
padding: 8px;
cursor: pointer;
background-color: var(--popup-bg-color-light);
color: var(--popup-text-color-light);
border: 1px solid var(--popup-border-color-light);
appearance: none;
}

.custom-select::after {
content: "\25BC";
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
pointer-events: none;
}

.message {
margin-top: 10px;
padding: 10px;
border-radius: 5px;
}

.message.error {
background-color: #f8d7da;
color: #721c24;
}

.message.success {
background-color: #d4edda;
color: #155724;
}

@media (prefers-color-scheme: dark) {
.update-subscription-popup {
background-color: var(--popup-bg-color-dark);
border-color: var(--popup-border-color-dark);
color: var(--popup-text-color-dark);
box-shadow: 0px 0px 10px var(--popup-shadow-dark);
}

.close-button {
color: var(--popup-text-color-dark);
}

.popup-content form input,
.popup-content form select {
background-color: var(--popup-bg-color-dark);
color: var(--popup-text-color-dark);
border: 1px solid var(--popup-border-color-dark);
}

.popup-content form button {
background-color: var(--popup-bg-color-dark);
color: var(--popup-text-color-dark);
border: 1px solid var(--popup-border-color-dark);
}
}
:root {
--popup-bg-color-light: #fff;
--popup-bg-color-dark: #2c2c2c;
--popup-border-color-light: #ccc;
--popup-border-color-dark: #444;
--popup-text-color-light: #000;
--popup-text-color-dark: #fff;
--popup-shadow-light: rgba(0, 0, 0, 0.1);
--popup-shadow-dark: rgba(255, 255, 255, 0.1);
}

.update-subscription-popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: var(--popup-bg-color-light);
border: 1px solid var(--popup-border-color-light);
padding: 20px;
z-index: 1000;
box-shadow: 0px 0px 10px var(--popup-shadow-light);
}

.popup-content {
display: flex;
flex-direction: column;
}

.close-button {
align-self: flex-end;
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: var(--popup-text-color-light);
}

.popup-content h2 {
margin-top: 0;
}

.form-group {
margin-bottom: 20px;
}

.form-group label {
display: block;
margin-bottom: 5px;
}

.form-group input,
.form-group select {
width: 100%;
padding: 8px;
background-color: var(--popup-bg-color-light);
color: var(--popup-text-color-light);
border: 1px solid var(--popup-border-color-light);
border-radius: 5px;
margin-top: 5px;
}

.custom-select {
position: relative;
width: 100%;
}

.custom-select select {
width: 100%;
padding: 8px;
cursor: pointer;
background-color: var(--popup-bg-color-light);
color: var(--popup-text-color-light);
border: 1px solid var(--popup-border-color-light);
appearance: none;
}

.custom-select::after {
content: "\25BC";
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
pointer-events: none;
}

.message {
margin-top: 10px;
padding: 10px;
border-radius: 5px;
}

.message.error {
background-color: #f8d7da;
color: #721c24;
}

.message.success {
background-color: #d4edda;
color: #155724;
}

@media (prefers-color-scheme: dark) {
.update-subscription-popup {
background-color: var(--popup-bg-color-dark);
border-color: var(--popup-border-color-dark);
color: var(--popup-text-color-dark);
box-shadow: 0px 0px 10px var(--popup-shadow-dark);
}

.close-button {
color: var(--popup-text-color-dark);
}

.form-group input,
.form-group select {
background-color: var(--popup-bg-color-dark);
color: var(--popup-text-color-dark);
border: 1px solid var(--popup-border-color-dark);
}

.form-group button {
background-color: var(--popup-bg-color-dark);
color: var(--popup-text-color-dark);
border: 1px solid var(--popup-border-color-dark);
}
}
Loading

0 comments on commit 66b23d1

Please sign in to comment.