Remade frontend dashboard as flutter dashboard, still WIP
This commit is contained in:
Nate Anderson
@@ -0,0 +1,248 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class AppTheme {
|
||||
static const Color primaryColor = Color(0xFF667eea);
|
||||
static const Color secondaryColor = Color(0xFF764ba2);
|
||||
static const Color accentColor = Color(0xFF4facfe);
|
||||
static const Color successColor = Color(0xFF4CAF50);
|
||||
static const Color warningColor = Color(0xFFFF9800);
|
||||
static const Color errorColor = Color(0xFFF44336);
|
||||
static const Color infoColor = Color(0xFF2196F3);
|
||||
|
||||
static const Color backgroundLight = Color(0xFFF5F7FA);
|
||||
static const Color surfaceLight = Color(0xFFFFFFFF);
|
||||
static const Color cardLight = Color(0xFFFFFFFF);
|
||||
|
||||
static const Color backgroundDark = Color(0xFF121212);
|
||||
static const Color surfaceDark = Color(0xFF1E1E1E);
|
||||
static const Color cardDark = Color(0xFF2D2D2D);
|
||||
|
||||
static ThemeData lightTheme = ThemeData(
|
||||
useMaterial3: true,
|
||||
brightness: Brightness.light,
|
||||
colorScheme: ColorScheme.fromSeed(
|
||||
seedColor: primaryColor,
|
||||
brightness: Brightness.light,
|
||||
),
|
||||
scaffoldBackgroundColor: backgroundLight,
|
||||
cardTheme: CardThemeData(
|
||||
color: cardLight,
|
||||
elevation: 2,
|
||||
shadowColor: Colors.black.withOpacity(0.1),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
),
|
||||
appBarTheme: const AppBarTheme(
|
||||
backgroundColor: primaryColor,
|
||||
foregroundColor: Colors.white,
|
||||
elevation: 0,
|
||||
centerTitle: true,
|
||||
),
|
||||
elevatedButtonTheme: ElevatedButtonThemeData(
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: primaryColor,
|
||||
foregroundColor: Colors.white,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
|
||||
),
|
||||
),
|
||||
outlinedButtonTheme: OutlinedButtonThemeData(
|
||||
style: OutlinedButton.styleFrom(
|
||||
foregroundColor: primaryColor,
|
||||
side: const BorderSide(color: primaryColor),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
|
||||
),
|
||||
),
|
||||
textButtonTheme: TextButtonThemeData(
|
||||
style: TextButton.styleFrom(
|
||||
foregroundColor: primaryColor,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
|
||||
),
|
||||
),
|
||||
inputDecorationTheme: InputDecorationTheme(
|
||||
border: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
borderSide: BorderSide(color: Colors.grey.shade300),
|
||||
),
|
||||
enabledBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
borderSide: BorderSide(color: Colors.grey.shade300),
|
||||
),
|
||||
focusedBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
borderSide: const BorderSide(color: primaryColor, width: 2),
|
||||
),
|
||||
errorBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
borderSide: const BorderSide(color: errorColor),
|
||||
),
|
||||
focusedErrorBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
borderSide: const BorderSide(color: errorColor, width: 2),
|
||||
),
|
||||
filled: true,
|
||||
fillColor: Colors.grey.shade50,
|
||||
contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
|
||||
),
|
||||
chipTheme: ChipThemeData(
|
||||
backgroundColor: Colors.grey.shade100,
|
||||
selectedColor: primaryColor.withOpacity(0.2),
|
||||
labelStyle: const TextStyle(color: Colors.black87),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
static ThemeData darkTheme = ThemeData(
|
||||
useMaterial3: true,
|
||||
brightness: Brightness.dark,
|
||||
colorScheme: ColorScheme.fromSeed(
|
||||
seedColor: primaryColor,
|
||||
brightness: Brightness.dark,
|
||||
),
|
||||
scaffoldBackgroundColor: backgroundDark,
|
||||
cardTheme: CardThemeData(
|
||||
color: cardDark,
|
||||
elevation: 4,
|
||||
shadowColor: Colors.black.withOpacity(0.3),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
),
|
||||
appBarTheme: const AppBarTheme(
|
||||
backgroundColor: surfaceDark,
|
||||
foregroundColor: Colors.white,
|
||||
elevation: 0,
|
||||
centerTitle: true,
|
||||
),
|
||||
elevatedButtonTheme: ElevatedButtonThemeData(
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: primaryColor,
|
||||
foregroundColor: Colors.white,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
|
||||
),
|
||||
),
|
||||
outlinedButtonTheme: OutlinedButtonThemeData(
|
||||
style: OutlinedButton.styleFrom(
|
||||
foregroundColor: primaryColor,
|
||||
side: const BorderSide(color: primaryColor),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
|
||||
),
|
||||
),
|
||||
textButtonTheme: TextButtonThemeData(
|
||||
style: TextButton.styleFrom(
|
||||
foregroundColor: primaryColor,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
|
||||
),
|
||||
),
|
||||
inputDecorationTheme: InputDecorationTheme(
|
||||
border: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
borderSide: BorderSide(color: Colors.grey.shade600),
|
||||
),
|
||||
enabledBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
borderSide: BorderSide(color: Colors.grey.shade600),
|
||||
),
|
||||
focusedBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
borderSide: const BorderSide(color: primaryColor, width: 2),
|
||||
),
|
||||
errorBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
borderSide: const BorderSide(color: errorColor),
|
||||
),
|
||||
focusedErrorBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
borderSide: const BorderSide(color: errorColor, width: 2),
|
||||
),
|
||||
filled: true,
|
||||
fillColor: Colors.grey.shade800,
|
||||
contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
|
||||
),
|
||||
chipTheme: ChipThemeData(
|
||||
backgroundColor: Colors.grey.shade800,
|
||||
selectedColor: primaryColor.withOpacity(0.3),
|
||||
labelStyle: const TextStyle(color: Colors.white70),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
// Custom gradient decorations
|
||||
static const LinearGradient primaryGradient = LinearGradient(
|
||||
colors: [primaryColor, secondaryColor],
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
);
|
||||
|
||||
static const LinearGradient accentGradient = LinearGradient(
|
||||
colors: [accentColor, primaryColor],
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
);
|
||||
|
||||
// XP source colors
|
||||
static const Map<String, Color> xpSourceColors = {
|
||||
'coding': Color(0xFF4CAF50),
|
||||
'focused_browsing': Color(0xFF2196F3),
|
||||
'collaboration': Color(0xFFFF9800),
|
||||
'meetings': Color(0xFF9C27B0),
|
||||
'misc': Color(0xFF607D8B),
|
||||
'uncategorized': Color(0xFF795548),
|
||||
'focus_session': Color(0xFFE91E63),
|
||||
'achievement': Color(0xFFFFD700),
|
||||
'manual_boost': Color(0xFF00BCD4),
|
||||
};
|
||||
|
||||
static Color getXPSourceColor(String source) {
|
||||
return xpSourceColors[source] ?? Colors.grey;
|
||||
}
|
||||
|
||||
// Activity type colors
|
||||
static Color getActivityTypeColor(String type) {
|
||||
switch (type.toLowerCase()) {
|
||||
case 'coding':
|
||||
return const Color(0xFF4CAF50);
|
||||
case 'focused_browsing':
|
||||
return const Color(0xFF2196F3);
|
||||
case 'collaboration':
|
||||
return const Color(0xFFFF9800);
|
||||
case 'meetings':
|
||||
return const Color(0xFF9C27B0);
|
||||
case 'misc':
|
||||
return const Color(0xFF607D8B);
|
||||
default:
|
||||
return Colors.grey;
|
||||
}
|
||||
}
|
||||
|
||||
// Log level colors
|
||||
static Color getLogLevelColor(String logEntry) {
|
||||
if (logEntry.contains('[ERROR]')) return errorColor;
|
||||
if (logEntry.contains('[WARN]')) return warningColor;
|
||||
if (logEntry.contains('[INFO]')) return infoColor;
|
||||
if (logEntry.contains('[DEBUG]')) return Colors.grey;
|
||||
return Colors.grey;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user