0ct0pu5/ente
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(auth): store all colors in EnteColorScheme

Browse source
This commit is contained in:
Prateek Sunal 2024-05-10 20:24:15 +05:30
parent 5ef92e338d
commit 36685f4827
5 changed files with 139 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
auth/lib/onboarding/view/common/tag_chip.dart
View file

@ -1,6 +1,7 @@
import "package:ente_auth/l10n/l10n.dart";
import "package:ente_auth/onboarding/model/tag_enums.dart";
import "package:ente_auth/store/code_display_store.dart";
import "package:ente_auth/theme/ente_theme.dart";
import "package:flutter/material.dart";
import "package:gradient_borders/box_borders/gradient_box_border.dart";
@ -20,35 +21,21 @@ class TagChip extends StatelessWidget {
@override
Widget build(BuildContext context) {
final colorScheme = getEnteColorScheme(context);
return GestureDetector(
onTap: onTap,
child: Container(
decoration: BoxDecoration(
color: state == TagChipState.selected
? const Color(0xFF722ED1)
: Theme.of(context).brightness == Brightness.dark
? const Color(0xFF1C0F22)
: const Color(0xFFFCF5FF),
? colorScheme.tagChipSelectedColor
: colorScheme.tagChipUnselectedColor,
borderRadius: BorderRadius.circular(100),
border: GradientBoxBorder(
gradient: LinearGradient(
colors: state == TagChipState.selected
? [
const Color(0xFFB37FEB),
const Color(0xFFAE40E3).withOpacity(
Theme.of(context).brightness == Brightness.dark
? .53
: 1,
),
]
: [
Theme.of(context).brightness == Brightness.dark
? const Color(0xFFAD00FF)
: const Color(0xFFAD00FF).withOpacity(0.2),
Theme.of(context).brightness == Brightness.dark
? const Color(0xFFA269BD).withOpacity(0.53)
: const Color(0xFF8609C2).withOpacity(0.2),
],
? colorScheme.tagChipSelectedGradient
: colorScheme.tagChipUnselectedGradient,
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
@ -66,7 +53,7 @@ class TagChip extends StatelessWidget {
color: state == TagChipState.selected ||
Theme.of(context).brightness == Brightness.dark
? Colors.white
: const Color(0xFF8232E1),
: colorScheme.tagTextUnselectedColor,
),
),
if (state == TagChipState.selected &&
@ -114,16 +101,16 @@ class TagChip extends StatelessWidget {
PopupMenuItem(
child: Row(
children: [
const Icon(
Icon(
Icons.delete_outline,
size: 16,
color: Color(0xFFF53434),
color: colorScheme.deleteTagIconColor,
),
const SizedBox(width: 12),
Text(
context.l10n.delete,
style: const TextStyle(
color: Color(0xFFF53434),
style: TextStyle(
color: colorScheme.deleteTagTextColor,
),
),
],

110
auth/lib/theme/colors.dart
View file

@ -1,5 +1,3 @@
import 'dart:ui';
import 'package:flutter/material.dart';
class EnteColorScheme {
@ -50,6 +48,28 @@ class EnteColorScheme {
final Color caution500;
final List<Color> avatarColors;
// Tags
final Color tagChipSelectedColor;
final Color tagChipUnselectedColor;
final List<Color> tagChipSelectedGradient;
final List<Color> tagChipUnselectedGradient;
final Color tagTextUnselectedColor;
final Color deleteTagIconColor;
final Color deleteTagTextColor;
// Code Widget
final Color errorCodeProgressColor;
final Color infoIconColor;
final Color errorCardTextColor;
final Color deleteCodeTextColor;
final List<BoxShadow> pinnedCardBoxShadow;
final Color pinnedBgColor;
// Gradient Button
final Color gradientButtonBgColor;
final List<Color> gradientButtonBgColors;
const EnteColorScheme(
this.backgroundBase,
this.backgroundElevated,
@ -73,7 +93,22 @@ class EnteColorScheme {
this.blurStrokeFaint,
this.blurStrokePressed,
this.avatarColors,
this.iconButtonColor, {
this.iconButtonColor,
this.tagChipUnselectedColor,
this.tagChipSelectedGradient,
this.tagChipUnselectedGradient,
this.pinnedBgColor, {
this.tagChipSelectedColor = _tagChipSelectedColor,
this.tagTextUnselectedColor = _tagTextUnselectedColor,
this.deleteTagIconColor = _deleteTagIconColor,
this.deleteTagTextColor = _deleteTagTextColor,
this.errorCodeProgressColor = _errorCodeProgressColor,
this.infoIconColor = _infoIconColor,
this.errorCardTextColor = _errorCardTextColor,
this.deleteCodeTextColor = _deleteCodeTextColor,
this.pinnedCardBoxShadow = _pinnedCardBoxShadow,
this.gradientButtonBgColor = _gradientButtonBgColor,
this.gradientButtonBgColors = _gradientButtonBgColors,
this.primaryGreen = _primaryGreen,
this.primary700 = _primary700,
this.primary500 = _primary500,
@ -111,6 +146,10 @@ const EnteColorScheme lightScheme = EnteColorScheme(
blurStrokePressedLight,
avatarLight,
_iconButtonBrightColor,
_tagChipUnselectedColorLight,
_tagChipSelectedGradientLight,
_tagChipUnselectedGradientLight,
_pinnedBgColorLight,
);
const EnteColorScheme darkScheme = EnteColorScheme(
@ -137,6 +176,10 @@ const EnteColorScheme darkScheme = EnteColorScheme(
blurStrokePressedDark,
avatarDark,
_iconButtonDarkColor,
_tagChipUnselectedColorDark,
_tagChipSelectedGradientDark,
_tagChipUnselectedGradientDark,
_pinnedBgColorDark,
);
// Background Colors
@ -268,3 +311,64 @@ const List<Color> avatarDark = [
Color.fromRGBO(209, 132, 132, 1),
Color.fromRGBO(120, 181, 167, 1),
];
// Tags
const Color _tagChipUnselectedColorLight = Color(0xFFFCF5FF);
const Color _tagChipUnselectedColorDark = Color(0xFF1C0F22);
const List<Color> _tagChipUnselectedGradientLight = [
Color(0x33AD00FF),
Color(0x338609C2),
];
const List<Color> _tagChipUnselectedGradientDark = [
Color(0xFFAD00FF),
Color(0x87A269BD),
];
const Color _tagChipSelectedColor = Color(0xFF722ED1);
const List<Color> _tagChipSelectedGradientLight = [
Color(0xFFB37FEB),
Color(0xFFAE40E3),
];
const List<Color> _tagChipSelectedGradientDark = [
Color(0xFFB37FEB),
Color(0x87AE40E3),
];
const Color _tagTextUnselectedColor = Color(0xFF8232E1);
const Color _deleteTagIconColor = Color(0xFFF53434);
const Color _deleteTagTextColor = Color(0xFFF53434);
// Code Widget
const Color _pinnedBgColorLight = Color(0xFFF9ECFF);
const Color _pinnedBgColorDark = Color(0xFF390C4F);
const Color _errorCodeProgressColor = Color(0xFFF53434);
const Color _infoIconColor = Color(0xFFF53434);
const Color _errorCardTextColor = Color(0xFFF53434);
const Color _deleteCodeTextColor = Color(0xFFFE4A49);
const List<BoxShadow> _pinnedCardBoxShadow = [
BoxShadow(
color: Color(0x08000000),
blurRadius: 2,
offset: Offset(0, 7),
),
BoxShadow(
color: Color(0x17000000),
blurRadius: 2,
offset: Offset(0, 4),
),
BoxShadow(
color: Color(0x29000000),
blurRadius: 1,
offset: Offset(0, 1),
),
BoxShadow(
color: Color(0x2E000000),
blurRadius: 1,
offset: Offset(0, 0),
),
];
// Gradient Button
const Color _gradientButtonBgColor = Color(0xFF531DAB);
const List<Color> _gradientButtonBgColors = [
Color(0xFFB37FEB),
Color(0xFF22075E),
];

15
auth/lib/ui/code_error_widget.dart
View file

@ -1,6 +1,7 @@
import 'package:ente_auth/ente_theme_data.dart';
import 'package:ente_auth/l10n/l10n.dart';
import 'package:ente_auth/services/update_service.dart';
import 'package:ente_auth/theme/ente_theme.dart';
import 'package:ente_auth/ui/common/gradient_button.dart';
import 'package:ente_auth/ui/linear_progress_widget.dart';
import 'package:ente_auth/ui/settings/app_update_dialog.dart';
@ -12,6 +13,8 @@ class CodeErrorWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
final colorScheme = getEnteColorScheme(context);
return Container(
height: 132,
width: double.infinity,
@ -30,10 +33,10 @@ class CodeErrorWidget extends StatelessWidget {
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(
SizedBox(
height: 3,
child: LinearProgressWidget(
color: Color(0xFFF53434),
color: colorScheme.errorCodeProgressColor,
fractionOfStorage: 1,
),
),
@ -41,21 +44,21 @@ class CodeErrorWidget extends StatelessWidget {
Row(
children: [
const SizedBox(width: 8),
const Align(
Align(
alignment: Alignment.center,
child: Icon(
Icons.info,
size: 18,
color: Color(0xFFF53434),
color: colorScheme.infoIconColor,
),
),
const SizedBox(width: 8),
Text(
context.l10n.error,
style: const TextStyle(
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w600,
color: Color(0xFFF53434),
color: colorScheme.errorCardTextColor,
),
),
],

33
auth/lib/ui/code_widget.dart
View file

@ -12,6 +12,7 @@ import 'package:ente_auth/onboarding/view/view_qr_page.dart';
import 'package:ente_auth/services/local_authentication_service.dart';
import 'package:ente_auth/services/preference_service.dart';
import 'package:ente_auth/store/code_store.dart';
import 'package:ente_auth/theme/ente_theme.dart';
import 'package:ente_auth/ui/code_timer_progress.dart';
import 'package:ente_auth/ui/utils/icon_utils.dart';
import 'package:ente_auth/utils/dialog_util.dart';
@ -47,6 +48,7 @@ class _CodeWidgetState extends State<CodeWidget> {
late bool _shouldShowLargeIcon;
late bool _hideCode;
bool isMaskingEnabled = false;
late final colorScheme = getEnteColorScheme(context);
@override
void initState() {
@ -205,7 +207,7 @@ class _CodeWidgetState extends State<CodeWidget> {
onPressed: _onDeletePressed,
backgroundColor: Colors.grey.withOpacity(0.1),
borderRadius: const BorderRadius.all(Radius.circular(8)),
foregroundColor: const Color(0xFFFE4A49),
foregroundColor: colorScheme.deleteCodeTextColor,
icon: Icons.delete,
label: l10n.delete,
padding: const EdgeInsets.only(left: 0, right: 0),
@ -228,30 +230,7 @@ class _CodeWidgetState extends State<CodeWidget> {
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: Theme.of(context).colorScheme.codeCardBackgroundColor,
boxShadow: widget.code.isPinned
? [
BoxShadow(
color: const Color(0xFF000000).withOpacity(0.03),
blurRadius: 2,
offset: const Offset(0, 7),
),
BoxShadow(
color: const Color(0xFF000000).withOpacity(0.09),
blurRadius: 2,
offset: const Offset(0, 4),
),
BoxShadow(
color: const Color(0xFF000000).withOpacity(0.16),
blurRadius: 1,
offset: const Offset(0, 1),
),
BoxShadow(
color: const Color(0xFF000000).withOpacity(0.18),
blurRadius: 1,
offset: const Offset(0, 0),
),
]
: [],
boxShadow: widget.code.isPinned ? colorScheme.pinnedCardBoxShadow : [],
),
child: ClipRRect(
borderRadius: BorderRadius.circular(8),
@ -291,9 +270,7 @@ class _CodeWidgetState extends State<CodeWidget> {
alignment: Alignment.topRight,
child: CustomPaint(
painter: PinBgPainter(
color: Theme.of(context).brightness == Brightness.dark
? const Color(0xFF390C4F)
: const Color(0xFFF9ECFF),
color: colorScheme.pinnedBgColor,
),
size: const Size(39, 39),
),

12
auth/lib/ui/common/gradient_button.dart
View file

@ -1,3 +1,4 @@
import 'package:ente_auth/theme/ente_theme.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:gradient_borders/box_borders/gradient_box_border.dart';
@ -72,6 +73,8 @@ class _GradientButtonState extends State<GradientButton> {
],
);
}
final colorScheme = getEnteColorScheme(context);
return InkWell(
onTapDown: (_) {
setState(() {
@ -97,7 +100,7 @@ class _GradientButtonState extends State<GradientButton> {
width: double.infinity,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(widget.borderRadius),
color: const Color(0xFF531DAB),
color: colorScheme.gradientButtonBgColor,
),
),
if (!isTapped)
@ -115,11 +118,8 @@ class _GradientButtonState extends State<GradientButton> {
decoration: BoxDecoration(
border: GradientBoxBorder(
width: widget.borderWidth,
gradient: const LinearGradient(
colors: [
Color(0xFFB37FEB),
Color(0xFF22075E),
],
gradient: LinearGradient(
colors: colorScheme.gradientButtonBgColors,
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),