meshkee-app/dashboards
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add store items pagination and fix modal backdrop blur across dashboards.

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Alireza Hassani
2026-08-08 18:12:17 +03:30
co-authored by Cursor
parent 4d480799b0
commit e6670ed06f
18 changed files with 290 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/business/src/components/BrandModal.module.css
+15 -22
View File
@@ -1,9 +1,8 @@
.overlay {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.25);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
isolation: isolate;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
@@ -11,6 +10,19 @@
padding: 20px;
}
/* Tint + blur on ::before so opacity animations on .overlay cannot disable backdrop-filter. */
.overlay::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background: var(--modal-overlay-bg);
backdrop-filter: blur(var(--modal-overlay-blur));
-webkit-backdrop-filter: blur(var(--modal-overlay-blur));
}
.modal {
width: 100%;
max-width: 520px;
@@ -135,14 +147,6 @@
box-shadow: 0 6px 16px rgba(var(--primary-rgb) / 0.35);
}
.overlayIn {
animation: overlayFadeIn 0.22s ease forwards;
}
.overlayOut {
animation: overlayFadeOut 0.22s ease forwards;
}
.modalIn {
animation: modalFadeIn 0.25s ease forwards;
}
@@ -150,17 +154,6 @@
.modalOut {
animation: modalFadeOut 0.22s ease forwards;
}
@keyframes overlayFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes overlayFadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes modalFadeIn {
from {
opacity: 0;
apps/business/src/components/CategoryModal.module.css
+15 -22
View File
@@ -1,9 +1,8 @@
.overlay {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.25);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
isolation: isolate;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
@@ -11,6 +10,19 @@
padding: 20px;
}
/* Tint + blur on ::before so opacity animations on .overlay cannot disable backdrop-filter. */
.overlay::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background: var(--modal-overlay-bg);
backdrop-filter: blur(var(--modal-overlay-blur));
-webkit-backdrop-filter: blur(var(--modal-overlay-blur));
}
.modal {
width: 100%;
max-width: 480px;
@@ -147,14 +159,6 @@
box-shadow: 0 6px 16px rgba(var(--primary-rgb) / 0.35);
}
.overlayIn {
animation: overlayFadeIn 0.22s ease forwards;
}
.overlayOut {
animation: overlayFadeOut 0.22s ease forwards;
}
.modalIn {
animation: modalFadeIn 0.25s ease forwards;
}
@@ -162,17 +166,6 @@
.modalOut {
animation: modalFadeOut 0.22s ease forwards;
}
@keyframes overlayFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes overlayFadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes modalFadeIn {
from {
opacity: 0;
apps/business/src/components/ConfirmBulkAddStoreItemsModal.module.css
+15 -8
View File
@@ -1,9 +1,8 @@
.overlay {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.28);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
isolation: isolate;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
@@ -11,6 +10,19 @@
padding: 20px;
}
/* Tint + blur on ::before so opacity animations on .overlay cannot disable backdrop-filter. */
.overlay::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background: var(--modal-overlay-bg);
backdrop-filter: blur(var(--modal-overlay-blur));
-webkit-backdrop-filter: blur(var(--modal-overlay-blur));
}
.modal {
position: relative;
width: 100%;
@@ -174,13 +186,8 @@
cursor: not-allowed;
}
.overlayIn { animation: overlayFadeIn 0.22s ease forwards; }
.overlayOut { animation: overlayFadeOut 0.22s ease forwards; }
.modalIn { animation: modalFadeIn 0.25s ease forwards; }
.modalOut { animation: modalFadeOut 0.22s ease forwards; }
@keyframes overlayFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes overlayFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes modalFadeIn {
from { opacity: 0; transform: translateY(12px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
apps/business/src/components/ConfirmDeleteModal.module.css
+15 -8
View File
@@ -1,9 +1,8 @@
.overlay {
position: fixed;
inset: 0;
background: rgba(127, 29, 29, 0.2);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
isolation: isolate;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
@@ -11,6 +10,19 @@
padding: 20px;
}
/* Tint + blur on ::before so opacity animations on .overlay cannot disable backdrop-filter. */
.overlay::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background: rgba(127, 29, 29, 0.28);
backdrop-filter: blur(var(--modal-overlay-blur));
-webkit-backdrop-filter: blur(var(--modal-overlay-blur));
}
.modal {
position: relative;
width: 100%;
@@ -105,13 +117,8 @@
color: #ef4444;
}
.overlayIn { animation: overlayFadeIn 0.22s ease forwards; }
.overlayOut { animation: overlayFadeOut 0.22s ease forwards; }
.modalIn { animation: modalFadeIn 0.25s ease forwards; }
.modalOut { animation: modalFadeOut 0.22s ease forwards; }
@keyframes overlayFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes overlayFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes modalFadeIn {
from { opacity: 0; transform: translateY(12px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
apps/business/src/components/ImageLightbox.module.css
+12 -9
View File
@@ -1,6 +1,7 @@
.overlay {
position: fixed;
inset: 0;
isolation: isolate;
z-index: 300;
display: flex;
flex-direction: column;
@@ -8,18 +9,20 @@
justify-content: center;
gap: 16px;
padding: 24px;
background: transparent;
}
.overlay::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background: rgba(15, 23, 42, 0.82);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(var(--modal-overlay-blur));
-webkit-backdrop-filter: blur(var(--modal-overlay-blur));
}
.overlayIn {
animation: fadeIn 0.2s ease forwards;
}
.overlayOut {
animation: fadeOut 0.2s ease forwards;
}
.closeBtn {
position: absolute;
apps/business/src/components/ProductCommentsModal.module.css
+14 -8
View File
@@ -1,9 +1,8 @@
.overlay {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.25);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
isolation: isolate;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
@@ -11,8 +10,18 @@
padding: 20px;
}
.overlayIn { animation: overlayFadeIn 0.22s ease forwards; }
.overlayOut { animation: overlayFadeOut 0.22s ease forwards; }
/* Tint + blur on ::before so opacity animations on .overlay cannot disable backdrop-filter. */
.overlay::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background: var(--modal-overlay-bg);
backdrop-filter: blur(var(--modal-overlay-blur));
-webkit-backdrop-filter: blur(var(--modal-overlay-blur));
}
.modal {
width: 100%;
@@ -206,9 +215,6 @@
margin-top: 0;
padding-top: 0;
}
@keyframes overlayFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes overlayFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes modalFadeIn {
from { opacity: 0; transform: translateY(12px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
apps/business/src/components/VariationsModal.module.css
+15 -9
View File
@@ -1,9 +1,8 @@
.overlay {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.35);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
isolation: isolate;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
@@ -11,13 +10,23 @@
padding: 20px;
}
/* Tint + blur on ::before so opacity animations on .overlay cannot disable backdrop-filter. */
.overlay::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background: var(--modal-overlay-bg);
backdrop-filter: blur(var(--modal-overlay-blur));
-webkit-backdrop-filter: blur(var(--modal-overlay-blur));
}
.overlayNested {
z-index: 1010;
}
.overlayIn { animation: overlayFadeIn 0.22s ease forwards; }
.overlayOut { animation: overlayFadeOut 0.22s ease forwards; }
.modal {
width: 100%;
max-width: 480px;
@@ -420,9 +429,6 @@
color: #ef4444;
margin-bottom: 12px;
}
@keyframes overlayFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes overlayFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes modalFadeIn {
from { opacity: 0; transform: translateY(12px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }