Michael/Regisflow
1
0 Fork 0
mirror of https://github.com/R0m1k3/Regisflow.git synced 2026-10-15 19:28:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

Modernize the user interface with a cleaner and more professional design

Browse Source 
Refactors UI components to implement a modern, angular design with updated color scheme and styling in `NewSaleForm.tsx`, `Dashboard.tsx`, `Login.tsx` and `index.css`.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: dec54137-d5a2-4406-8ad4-5f2f9fb110bf
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/0715008c-7244-40f4-befc-26c014852236/6a7de82e-d1f1-4ccf-baa2-a2d2d7172ac9.jpg
This commit is contained in:
michaelschal committed 2025-07-09 23:58:08 +00:00
1 parent 24386f2a60
commit 1821f4feff
5 files changed
+141 -78
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

client/src/index.css
+86 -19
View File
@@ -15,18 +15,18 @@
--border: hsl(220, 13%, 91%);
--input: hsl(220, 13%, 91%);
/* Modern blue-purple gradient palette */
--primary: hsl(232, 97%, 59%);
--primary-foreground: hsl(0, 0%, 100%);
--secondary: hsl(220, 14%, 96%);
--secondary-foreground: hsl(222, 15%, 11%);
--accent: hsl(262, 100%, 97%);
--accent-foreground: hsl(222, 15%, 11%);
/* Modern dark theme palette */
--primary: hsl(220, 13%, 18%);
--primary-foreground: hsl(0, 0%, 98%);
--secondary: hsl(220, 13%, 95%);
--secondary-foreground: hsl(220, 13%, 18%);
--accent: hsl(220, 13%, 95%);
--accent-foreground: hsl(220, 13%, 18%);
/* Status colors */
--destructive: hsl(0, 85%, 60%);
--destructive: hsl(0, 72%, 51%);
--destructive-foreground: hsl(0, 0%, 98%);
--success: hsl(142, 71%, 45%);
--success: hsl(142, 69%, 45%);
--success-foreground: hsl(0, 0%, 98%);
--warning: hsl(38, 92%, 50%);
--warning-foreground: hsl(0, 0%, 98%);
@@ -34,8 +34,8 @@
--info-foreground: hsl(0, 0%, 98%);
/* Interactive elements */
--ring: hsl(232, 97%, 59%);
--radius: 0.75rem;
--ring: hsl(220, 13%, 18%);
--radius: 0.375rem;
/* Gradient colors */
--gradient-from: hsl(232, 97%, 59%);
@@ -56,8 +56,8 @@
--border: hsl(215, 28%, 17%);
--input: hsl(215, 28%, 17%);
/* Dark mode blue-purple palette */
--primary: hsl(232, 97%, 65%);
/* Dark mode palette */
--primary: hsl(0, 0%, 98%);
--primary-foreground: hsl(222, 20%, 4%);
--secondary: hsl(215, 28%, 17%);
--secondary-foreground: hsl(210, 40%, 95%);
@@ -74,12 +74,79 @@
--info: hsl(210, 100%, 65%);
--info-foreground: hsl(0, 0%, 98%);
--ring: hsl(232, 97%, 65%);
/* Dark gradient colors */
--gradient-from: hsl(232, 97%, 65%);
--gradient-to: hsl(262, 100%, 65%);
--gradient-accent: hsl(282, 100%, 65%);
--ring: hsl(0, 0%, 98%);
}
/* Modern Design Utilities */
.modern-card {
border: 1px solid hsl(var(--border));
background: hsl(var(--card));
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}
.modern-button {
border: 1px solid hsl(var(--border));
background: hsl(var(--background));
color: hsl(var(--foreground));
font-weight: 500;
padding: 8px 16px;
transition: all 0.2s ease;
}
.modern-button:hover {
background: hsl(var(--muted));
border-color: hsl(var(--primary));
}
.modern-button-primary {
background: hsl(var(--primary));
color: hsl(var(--primary-foreground));
border: 1px solid hsl(var(--primary));
}
.modern-button-primary:hover {
background: hsl(var(--primary) / 0.9);
}
.modern-input {
border: 1px solid hsl(var(--border));
background: hsl(var(--background));
color: hsl(var(--foreground));
padding: 8px 12px;
font-size: 14px;
transition: border-color 0.2s ease;
}
.modern-input:focus {
outline: none;
border-color: hsl(var(--primary));
box-shadow: 0 0 0 1px hsl(var(--primary));
}
.modern-section {
border: 1px solid hsl(var(--border));
background: hsl(var(--card));
padding: 24px;
margin-bottom: 24px;
}
.modern-section-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 24px;
padding-bottom: 12px;
border-bottom: 1px solid hsl(var(--border));
}
.modern-icon-container {
width: 40px;
height: 40px;
background: hsl(var(--primary));
color: hsl(var(--primary-foreground));
display: flex;
align-items: center;
justify-content: center;
}
/* Enhanced keyframes for mobile animations */