wibu/monitoring-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: improve UI/UX consistency across all dashboard pages

Browse Source 
Apply uniform design system across all routes and components:
- Consistent header pattern with gradient-text titles, dimmed subtitles
- Loader type="dots" replacing text-based loading states
- Icon + text empty/error states with Paper+glass containers
- Full STATUS_COLOR/STATUS_LABEL maps for all BugStatus values
- dayjs timestamps, Tooltip on action icons, size="sm" on badges/pagination
- Modals with overlayProps blur and gradient save buttons
- Replace left-border Papers with clean Stack headers
- Translate all remaining Indonesian UI strings to English
- New monitoring-themed SVG logo and redesigned splash screen
This commit is contained in:
amaliadwiy
2026-05-05 12:42:41 +08:00
parent ee543a16ad
commit ef852842b4
14 changed files with 1570 additions and 1365 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
index.html
View File

@@ -4,9 +4,10 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="color-scheme" content="dark" />
<meta name="description" content="Monitoring System — real-time dashboard for your applications" />
<base href="/" />
<link rel="icon" type="image/svg+xml" href="/src/logo.svg" />
<title>My App</title>
<title>Monitoring System</title>
<style>
/* Prevent white flash — dark background immediately */
html, body {
@@ -25,7 +26,7 @@
align-items: center;
justify-content: center;
background-color: #242424;
transition: opacity 0.3s ease;
transition: opacity 0.4s ease;
}
#splash.fade-out {
opacity: 0;
@@ -35,32 +36,79 @@
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
gap: 18px;
}
.splash-spinner {
width: 40px;
height: 40px;
border: 3px solid #3a3a3a;
border-top-color: #339af0;
border-radius: 50%;
animation: spin 0.8s linear infinite;
.splash-logo {
animation: logo-breathe 2.4s ease-in-out infinite;
}
.splash-text {
.splash-logo svg {
display: block;
border-radius: 14px;
filter: drop-shadow(0 8px 24px rgba(37, 99, 235, 0.45));
}
.splash-title {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #909296;
letter-spacing: 0.5px;
font-size: 17px;
font-weight: 700;
letter-spacing: -0.3px;
background: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
@keyframes spin {
to { transform: rotate(360deg); }
.splash-dots {
display: flex;
gap: 7px;
align-items: center;
}
.splash-dots span {
width: 6px;
height: 6px;
border-radius: 50%;
background: linear-gradient(135deg, #2563EB, #7C3AED);
animation: dot-pulse 1.2s ease-in-out infinite;
}
.splash-dots span:nth-child(2) { animation-delay: 0.2s; }
.splash-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes logo-breathe {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.05); opacity: 0.9; }
}
@keyframes dot-pulse {
0%, 80%, 100% { transform: scale(0.5); opacity: 0.25; }
40% { transform: scale(1); opacity: 1; }
}
</style>
</head>
<body>
<div id="splash">
<div class="splash-content">
<div class="splash-spinner"></div>
<div class="splash-text">Loading...</div>
<div class="splash-logo">
<svg width="64" height="64" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="sl" x1="0" y1="0" x2="32" y2="32" gradientUnits="userSpaceOnUse">
<stop stop-color="#2563EB"/>
<stop offset="1" stop-color="#7C3AED"/>
</linearGradient>
</defs>
<rect width="32" height="32" rx="7" fill="url(#sl)"/>
<polyline
points="3,16 9,16 12,8 16,24 19,16 29,16"
stroke="white"
stroke-width="2.2"
stroke-linecap="round"
stroke-linejoin="round"
fill="none"
/>
</svg>
</div>
<div class="splash-title">Monitoring System</div>
<div class="splash-dots">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<div id="root"></div>