Implement comprehensive design system improvements
Some checks failed
Build And Push Image / docker (push) Failing after 1m14s
Some checks failed
Build And Push Image / docker (push) Failing after 1m14s
- Created new design-system-v2.scss with modern design tokens - Enhanced Vuetify theme configuration with refined colors - Added professional dashboard styles component - Improved typography, spacing, and visual hierarchy - Implemented glass morphism effects with better contrast - Added smooth animations and micro-interactions - Improved responsive design for mobile devices - Enhanced stat cards, data tables, and navigation - Fixed color contrast issues identified in audit - Added professional gradients and shadows 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -1,175 +0,0 @@
|
||||
<template>
|
||||
<div class="design-test-page">
|
||||
<div class="container">
|
||||
<h1 class="page-title">New Design System Test Pages</h1>
|
||||
<p class="page-subtitle">Testing implementation of the new Neumorphic design with morphing dropdowns</p>
|
||||
|
||||
<div class="navigation-grid">
|
||||
<NuxtLink to="/admin/dashboard-v2" class="nav-card neumorphic-card">
|
||||
<Icon name="mdi:view-dashboard" class="nav-icon" />
|
||||
<h2>Admin Dashboard V2</h2>
|
||||
<p>New admin dashboard with neumorphic design and morphing dropdowns</p>
|
||||
</NuxtLink>
|
||||
|
||||
<NuxtLink to="/board/dashboard-v2" class="nav-card neumorphic-card">
|
||||
<Icon name="mdi:chart-box" class="nav-icon" />
|
||||
<h2>Board Dashboard V2</h2>
|
||||
<p>Executive dashboard with KPIs and strategic insights</p>
|
||||
</NuxtLink>
|
||||
|
||||
<NuxtLink to="/admin/dashboard" class="nav-card neumorphic-card">
|
||||
<Icon name="mdi:view-dashboard-outline" class="nav-icon" />
|
||||
<h2>Current Admin Dashboard</h2>
|
||||
<p>Compare with the existing admin dashboard</p>
|
||||
</NuxtLink>
|
||||
|
||||
<NuxtLink to="/board/dashboard" class="nav-card neumorphic-card">
|
||||
<Icon name="mdi:chart-box-outline" class="nav-icon" />
|
||||
<h2>Current Board Dashboard</h2>
|
||||
<p>Compare with the existing board dashboard</p>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<div class="design-info">
|
||||
<h3>Design System Features</h3>
|
||||
<ul>
|
||||
<li>✨ Neumorphic cards and buttons with soft shadows</li>
|
||||
<li>💧 Glassmorphic blue morphing dropdowns</li>
|
||||
<li>🎯 Monaco red primary color maintained</li>
|
||||
<li>📱 Responsive grid layouts</li>
|
||||
<li>🎨 Professional and inviting aesthetic</li>
|
||||
<li>⚡ Smooth spring animations</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// No authentication required for testing
|
||||
definePageMeta({
|
||||
auth: false,
|
||||
layout: false
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// Import the new design system
|
||||
@import '@/design-mockups/styles/design-system.scss';
|
||||
|
||||
.design-test-page {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, $neutral-50 0%, $neutral-100 100%);
|
||||
padding: 3rem 1rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
text-align: center;
|
||||
font-size: $text-4xl;
|
||||
font-weight: $font-bold;
|
||||
background: linear-gradient(135deg, $primary-600, $primary-800);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
text-align: center;
|
||||
color: $neutral-600;
|
||||
font-size: $text-lg;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.navigation-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 2rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.nav-card {
|
||||
@include neumorphic-card('md');
|
||||
padding: 2rem;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition: all $transition-base;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
|
||||
&:hover {
|
||||
@include neumorphic-card('lg');
|
||||
transform: translateY(-4px);
|
||||
|
||||
.nav-icon {
|
||||
transform: scale(1.1);
|
||||
color: $primary-600;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
color: $neutral-600;
|
||||
margin-bottom: 1rem;
|
||||
transition: all $transition-base;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: $text-xl;
|
||||
font-weight: $font-semibold;
|
||||
color: $neutral-800;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: $text-sm;
|
||||
color: $neutral-600;
|
||||
line-height: $leading-relaxed;
|
||||
}
|
||||
}
|
||||
|
||||
.design-info {
|
||||
@include neumorphic-card('lg');
|
||||
padding: 2rem;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
|
||||
h3 {
|
||||
font-size: $text-xl;
|
||||
font-weight: $font-semibold;
|
||||
color: $neutral-800;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
padding: 0.75rem 0;
|
||||
color: $neutral-700;
|
||||
font-size: $text-base;
|
||||
border-bottom: 1px solid rgba($neutral-200, 0.5);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Neumorphic Elements
|
||||
.neumorphic-card {
|
||||
background: linear-gradient(145deg, #ffffff, #f0f0f0);
|
||||
border-radius: $radius-xl;
|
||||
box-shadow: $shadow-soft-md;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user