chan theme and assets clean up

This commit is contained in:
julian 2023-03-17 08:57:40 -06:00
parent 36d175bcb4
commit 43f2fd7e77
7 changed files with 408 additions and 44 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -27,6 +27,8 @@ class AppearanceSettingsView extends ConsumerWidget {
switch (type) {
case ThemeType.light:
return "Light theme";
case ThemeType.chan:
return "Chan theme";
case ThemeType.dark:
return "Dark theme";
case ThemeType.oceanBreeze:

View file

@ -135,7 +135,7 @@ class _AppearanceOptionSettings
],
),
),
Padding(
const Padding(
padding: EdgeInsets.all(10),
child: ThemeToggle(),
),
@ -163,6 +163,7 @@ class _ThemeToggle extends ConsumerState<ThemeToggle> {
String assetNameFor(ThemeType type) {
switch (type) {
case ThemeType.light:
case ThemeType.chan:
return Assets.svg.themeLight;
case ThemeType.dark:
return Assets.svg.themeDark;

View file

@ -49,6 +49,7 @@ class _BUY {
case ThemeType.forest:
case ThemeType.oceanBreeze:
case ThemeType.light:
case ThemeType.chan:
return "assets/svg/buy/Simplex-Nuvei-Logo.svg";
}
}
@ -68,13 +69,22 @@ class _COIN_CONTROL {
class _SVG {
const _SVG();
static const _path_themed = "assets/svg/themed/";
static String _path(BuildContext context) {
switch (Theme.of(context).extension<StackColors>()!.themeType) {
// chan theme uses all the same assets as the light theme
case ThemeType.chan:
return "assets/svg/themed/${ThemeType.light.name}";
default:
return "assets/svg/themed/${Theme.of(context).extension<StackColors>()!.themeType.name}";
}
}
final coinControl = const _COIN_CONTROL();
String? background(BuildContext context) {
switch (Theme.of(context).extension<StackColors>()!.themeType) {
case ThemeType.light:
case ThemeType.chan:
case ThemeType.dark:
case ThemeType.oledBlack:
return null;
@ -82,47 +92,41 @@ class _SVG {
case ThemeType.oceanBreeze:
case ThemeType.fruitSorbet:
case ThemeType.forest:
return "$_path_themed${Theme.of(context).extension<StackColors>()!.themeType.name}/bg.svg";
return "${_path(context)}/bg.svg";
}
}
String bellNew(BuildContext context) =>
"$_path_themed${Theme.of(context).extension<StackColors>()!.themeType.name}/bell-new.svg";
String stackIcon(BuildContext context) =>
"$_path_themed${Theme.of(context).extension<StackColors>()!.themeType.name}/stack-icon1.svg";
String exchange(BuildContext context) =>
"$_path_themed${Theme.of(context).extension<StackColors>()!.themeType.name}/exchange-2.svg";
String buy(BuildContext context) =>
"$_path_themed${Theme.of(context).extension<StackColors>()!.themeType.name}/buy-coins-icon.svg";
String bellNew(BuildContext context) => "${_path(context)}/bell-new.svg";
String stackIcon(BuildContext context) => "${_path(context)}/stack-icon1.svg";
String exchange(BuildContext context) => "${_path(context)}/exchange-2.svg";
String buy(BuildContext context) => "${_path(context)}/buy-coins-icon.svg";
String receive(BuildContext context) =>
"$_path_themed${Theme.of(context).extension<StackColors>()!.themeType.name}/tx-icon-receive.svg";
"${_path(context)}/tx-icon-receive.svg";
String receivePending(BuildContext context) =>
"$_path_themed${Theme.of(context).extension<StackColors>()!.themeType.name}/tx-icon-receive-pending.svg";
"${_path(context)}/tx-icon-receive-pending.svg";
String receiveCancelled(BuildContext context) =>
"$_path_themed${Theme.of(context).extension<StackColors>()!.themeType.name}/tx-icon-receive-failed.svg";
"${_path(context)}/tx-icon-receive-failed.svg";
String send(BuildContext context) =>
"$_path_themed${Theme.of(context).extension<StackColors>()!.themeType.name}/tx-icon-send.svg";
String send(BuildContext context) => "${_path(context)}/tx-icon-send.svg";
String sendPending(BuildContext context) =>
"$_path_themed${Theme.of(context).extension<StackColors>()!.themeType.name}/tx-icon-send-pending.svg";
"${_path(context)}/tx-icon-send-pending.svg";
String sendCancelled(BuildContext context) =>
"$_path_themed${Theme.of(context).extension<StackColors>()!.themeType.name}/tx-icon-send-failed.svg";
"${_path(context)}/tx-icon-send-failed.svg";
String txExchange(BuildContext context) =>
"$_path_themed${Theme.of(context).extension<StackColors>()!.themeType.name}/tx-exchange-icon.svg";
"${_path(context)}/tx-exchange-icon.svg";
String txExchangePending(BuildContext context) =>
"$_path_themed${Theme.of(context).extension<StackColors>()!.themeType.name}/tx-exchange-icon-pending.svg";
"${_path(context)}/tx-exchange-icon-pending.svg";
String txExchangeFailed(BuildContext context) =>
"$_path_themed${Theme.of(context).extension<StackColors>()!.themeType.name}/tx-exchange-icon-failed.svg";
"${_path(context)}/tx-exchange-icon-failed.svg";
String personaIncognito(BuildContext context) =>
"$_path_themed${Theme.of(context).extension<StackColors>()!.themeType.name}/persona-incognito-1.svg";
"${_path(context)}/persona-incognito-1.svg";
String personaEasy(BuildContext context) =>
"$_path_themed${Theme.of(context).extension<StackColors>()!.themeType.name}/persona-easy-1.svg";
"${_path(context)}/persona-easy-1.svg";
String stack(BuildContext context) =>
"$_path_themed${Theme.of(context).extension<StackColors>()!.themeType.name}/stack.svg";
String stack(BuildContext context) => "${_path(context)}/stack.svg";
String get themeFruit => "assets/svg/fruit-sorbet-theme.svg";
String get themeForest => "assets/svg/forest-theme.svg";
@ -292,26 +296,20 @@ class _SVG {
}
// big icons
String bitcoinImage(BuildContext context) =>
"$_path_themed${Theme.of(context).extension<StackColors>()!.themeType.name}/bitcoin.svg";
String bitcoinImage(BuildContext context) => "${_path(context)}/bitcoin.svg";
String bitcoincashImage(BuildContext context) =>
"$_path_themed${Theme.of(context).extension<StackColors>()!.themeType.name}/bitcoincash.svg";
String dogecoinImage(BuildContext context) =>
"$_path_themed${Theme.of(context).extension<StackColors>()!.themeType.name}/doge.svg";
"${_path(context)}/bitcoincash.svg";
String dogecoinImage(BuildContext context) => "${_path(context)}/doge.svg";
String epicCashImage(BuildContext context) =>
"$_path_themed${Theme.of(context).extension<StackColors>()!.themeType.name}/epic-cash.svg";
String firoImage(BuildContext context) =>
"$_path_themed${Theme.of(context).extension<StackColors>()!.themeType.name}/firo.svg";
"${_path(context)}/epic-cash.svg";
String firoImage(BuildContext context) => "${_path(context)}/firo.svg";
String litecoinImage(BuildContext context) =>
"$_path_themed${Theme.of(context).extension<StackColors>()!.themeType.name}/litecoin.svg";
String moneroImage(BuildContext context) =>
"$_path_themed${Theme.of(context).extension<StackColors>()!.themeType.name}/monero.svg";
String wowneroImage(BuildContext context) =>
"$_path_themed${Theme.of(context).extension<StackColors>()!.themeType.name}/wownero.svg";
"${_path(context)}/litecoin.svg";
String moneroImage(BuildContext context) => "${_path(context)}/monero.svg";
String wowneroImage(BuildContext context) => "${_path(context)}/wownero.svg";
String namecoinImage(BuildContext context) =>
"$_path_themed${Theme.of(context).extension<StackColors>()!.themeType.name}/namecoin.svg";
String particlImage(BuildContext context) =>
"$_path_themed${Theme.of(context).extension<StackColors>()!.themeType.name}/particl.svg";
"${_path(context)}/namecoin.svg";
String particlImage(BuildContext context) => "${_path(context)}/particl.svg";
String imageFor({required BuildContext context, required Coin coin}) {
switch (coin) {

View file

@ -0,0 +1,349 @@
import 'package:flutter/material.dart';
import 'package:stackwallet/utilities/theme/color_theme.dart';
class ChanColors extends StackColorTheme {
@override
ThemeType get themeType => ThemeType.chan;
@override
Color get background => const Color(0xFFF7F7F7);
@override
Color get backgroundAppBar => background;
@override
Gradient? get gradientBackground => null;
@override
Color get overlay => const Color(0xFF111215);
@override
Color get accentColorBlue => const Color(0xFF0052DF);
@override
Color get accentColorGreen => const Color(0xFF4CC0A0);
@override
Color get accentColorYellow => const Color(0xFFF7D65D);
@override
Color get accentColorRed => const Color(0xFFD34E50);
@override
Color get accentColorOrange => const Color(0xFFFEA68D);
@override
Color get accentColorDark => const Color(0xFF232323);
@override
Color get shadow => const Color(0x0F2D3132);
@override
Color get textDark => const Color(0xFF232323);
@override
Color get textDark2 => const Color(0xFF414141);
@override
Color get textDark3 => const Color(0xFF747778);
@override
Color get textSubtitle1 => const Color(0xFF8E9192);
@override
Color get textSubtitle2 => const Color(0xFFA9ACAC);
@override
Color get textSubtitle3 => const Color(0xFFC4C7C7);
@override
Color get textSubtitle4 => const Color(0xFFE0E3E3);
@override
Color get textSubtitle5 => const Color(0xFFEEEFF1);
@override
Color get textSubtitle6 => const Color(0xFFF5F5F5);
@override
Color get textWhite => const Color(0xFFFFFFFF);
@override
Color get textFavoriteCard => const Color(0xFF232323);
@override
Color get textError => const Color(0xFF930006);
@override
Color get textRestore => overlay;
// button background
@override
Color get buttonBackPrimary => const Color(0xFF232323);
@override
Color get buttonBackSecondary => const Color(0xFFE0E3E3);
@override
Color get buttonBackPrimaryDisabled => const Color(0xFFD7D7D7);
@override
Color get buttonBackSecondaryDisabled => const Color(0xFFF0F1F1);
@override
Color get buttonBackBorder => const Color(0xFF232323);
@override
Color get buttonBackBorderDisabled => const Color(0xFFB6B6B6);
@override
Color get buttonBackBorderSecondary => buttonBackSecondary;
@override
Color get buttonBackBorderSecondaryDisabled => buttonBackSecondaryDisabled;
@override
Color get numberBackDefault => const Color(0xFFFFFFFF);
@override
Color get numpadBackDefault => const Color(0xFF232323);
@override
Color get bottomNavBack => const Color(0xFFFFFFFF);
// button text/element
@override
Color get buttonTextPrimary => const Color(0xFFFFFFFF);
@override
Color get buttonTextSecondary => const Color(0xFF232323);
@override
Color get buttonTextPrimaryDisabled => const Color(0xFFF8F8F8);
@override
Color get buttonTextSecondaryDisabled => const Color(0xFFB7B7B7);
@override
Color get buttonTextBorder => const Color(0xFF232323);
@override
Color get buttonTextDisabled => const Color(0xFFB6B6B6);
@override
Color get buttonTextBorderless => const Color(0xFF0052DF);
@override
Color get buttonTextBorderlessDisabled => const Color(0xFFB6B6B6);
@override
Color get numberTextDefault => const Color(0xFF232323);
@override
Color get numpadTextDefault => const Color(0xFFFFFFFF);
@override
Color get bottomNavText => const Color(0xFF232323);
@override
Color get customTextButtonEnabledText => buttonTextBorderless;
@override
Color get customTextButtonDisabledText => textSubtitle1;
// switch
@override
Color get switchBGOn => const Color(0xFF0052DF);
@override
Color get switchBGOff => const Color(0xFFD8E4FB);
@override
Color get switchBGDisabled => const Color(0xFFC5C6C9);
@override
Color get switchCircleOn => const Color(0xFFDAE2FF);
@override
Color get switchCircleOff => const Color(0xFFFBFCFF);
@override
Color get switchCircleDisabled => const Color(0xFFFBFCFF);
// step indicator background
@override
Color get stepIndicatorBGCheck => const Color(0xFFD9E2FF);
@override
Color get stepIndicatorBGNumber => const Color(0xFFD9E2FF);
@override
Color get stepIndicatorBGInactive => const Color(0xFFCDCDCD);
@override
Color get stepIndicatorBGLines => const Color(0xFF0056D2);
@override
Color get stepIndicatorBGLinesInactive => const Color(0xFFCDCDCD);
@override
Color get stepIndicatorIconText => const Color(0xFF0056D2);
@override
Color get stepIndicatorIconNumber => const Color(0xFF0056D2);
@override
Color get stepIndicatorIconInactive => const Color(0xFFF7F7F7);
// checkbox
@override
Color get checkboxBGChecked => const Color(0xFF0056D2);
@override
Color get checkboxBorderEmpty => const Color(0xFF8E9192);
@override
Color get checkboxBGDisabled => const Color(0xFFADC7EC);
@override
Color get checkboxIconChecked => const Color(0xFFFFFFFF);
@override
Color get checkboxIconDisabled => const Color(0xFFFFFFFF);
@override
Color get checkboxTextLabel => const Color(0xFF232323);
// snack bar
@override
Color get snackBarBackSuccess => const Color(0xFFB9E9D4);
@override
Color get snackBarBackError => const Color(0xFFFFDAD4);
@override
Color get snackBarBackInfo => const Color(0xFFDAE2FF);
@override
Color get snackBarTextSuccess => const Color(0xFF006C4D);
@override
Color get snackBarTextError => const Color(0xFF930006);
@override
Color get snackBarTextInfo => const Color(0xFF002A78);
// icons
@override
Color get bottomNavIconBack => const Color(0xFFA2A2A2);
@override
Color get bottomNavIconIcon => const Color(0xFF232323);
@override
Color get topNavIconPrimary => const Color(0xFF232323);
@override
Color get topNavIconGreen => const Color(0xFF00A578);
@override
Color get topNavIconYellow => const Color(0xFFF4C517);
@override
Color get topNavIconRed => const Color(0xFFC00205);
@override
Color get settingsIconBack => const Color(0xFFE0E3E3);
@override
Color get settingsIconIcon => const Color(0xFF232323);
@override
Color get settingsIconBack2 => const Color(0xFF94D6C4);
@override
Color get settingsIconElement => const Color(0xFF00A578);
// text field
@override
Color get textFieldActiveBG => const Color(0xFFEEEFF1);
@override
Color get textFieldDefaultBG => const Color(0xFFEEEFF1);
@override
Color get textFieldErrorBG => const Color(0xFFFFDAD4);
@override
Color get textFieldSuccessBG => const Color(0xFFB9E9D4);
@override
Color get textFieldErrorBorder => textFieldErrorBG;
@override
Color get textFieldSuccessBorder => textFieldSuccessBG;
@override
Color get textFieldActiveSearchIconLeft => const Color(0xFFA9ACAC);
@override
Color get textFieldDefaultSearchIconLeft => const Color(0xFFA9ACAC);
@override
Color get textFieldErrorSearchIconLeft => const Color(0xFF930006);
@override
Color get textFieldSuccessSearchIconLeft => const Color(0xFF006C4D);
@override
Color get textFieldActiveText => const Color(0xFF232323);
@override
Color get textFieldDefaultText => const Color(0xFFA9ACAC);
@override
Color get textFieldErrorText => const Color(0xFF000000);
@override
Color get textFieldSuccessText => const Color(0xFF000000);
@override
Color get textFieldActiveLabel => const Color(0xFFA9ACAC);
@override
Color get textFieldErrorLabel => const Color(0xFF930006);
@override
Color get textFieldSuccessLabel => const Color(0xFF006C4D);
@override
Color get textFieldActiveSearchIconRight => const Color(0xFF747778);
@override
Color get textFieldDefaultSearchIconRight => const Color(0xFF747778);
@override
Color get textFieldErrorSearchIconRight => const Color(0xFF930006);
@override
Color get textFieldSuccessSearchIconRight => const Color(0xFF006C4D);
// settings item level2
@override
Color get settingsItem2ActiveBG => const Color(0xFFFFFFFF);
@override
Color get settingsItem2ActiveText => const Color(0xFF232323);
@override
Color get settingsItem2ActiveSub => const Color(0xFF8E9192);
// radio buttons
@override
Color get radioButtonIconBorder => const Color(0xFF0056D2);
@override
Color get radioButtonIconBorderDisabled => const Color(0xFF8F909A);
@override
Color get radioButtonBorderEnabled => const Color(0xFF0056D2);
@override
Color get radioButtonBorderDisabled => const Color(0xFF8F909A);
@override
Color get radioButtonIconCircle => const Color(0xFF0056D2);
@override
Color get radioButtonIconEnabled => const Color(0xFF0056D2);
@override
Color get radioButtonTextEnabled => const Color(0xFF44464E);
@override
Color get radioButtonTextDisabled => const Color(0xFF44464E);
@override
Color get radioButtonLabelEnabled => const Color(0xFF8E9192);
@override
Color get radioButtonLabelDisabled => const Color(0xFF8E9192);
// info text
@override
Color get infoItemBG => const Color(0xFFFFFFFF);
@override
Color get infoItemLabel => const Color(0xFF8E9192);
@override
Color get infoItemText => const Color(0xFF232323);
@override
Color get infoItemIcons => const Color(0xFF0056D2);
// popup
@override
Color get popupBG => const Color(0xFFFFFFFF);
// currency list
@override
Color get currencyListItemBG => const Color(0xFFF9F9FC);
// bottom nav
@override
Color get stackWalletBG => const Color(0xFFFFFFFF);
@override
Color get stackWalletMid => const Color(0xFFFFFFFF);
@override
Color get stackWalletBottom => const Color(0xFF232323);
@override
Color get bottomNavShadow => const Color(0xFF282E33);
@override
Color get favoriteStarActive => infoItemIcons;
@override
Color get favoriteStarInactive => textSubtitle3;
@override
Color get splash => const Color(0x358E9192);
@override
Color get highlight => const Color(0x44A9ACAC);
@override
Color get warningForeground => textDark;
@override
Color get warningBackground => const Color(0xFFFFDAD3);
@override
Color get loadingOverlayTextColor => const Color(0xFFF7F7F7);
@override
Color get myStackContactIconBG => textFieldDefaultBG;
@override
Color get textConfirmTotalAmount => const Color(0xFF232323);
@override
Color get textSelectedWordTableItem => const Color(0xFF232323);
//rate type toggle
@override
Color get rateTypeToggleColorOn => textFieldDefaultBG;
@override
Color get rateTypeToggleColorOff => popupBG;
@override
Color get rateTypeToggleDesktopColorOn => textFieldDefaultBG;
@override
Color get rateTypeToggleDesktopColorOff => buttonBackSecondary;
@override
BoxShadow get standardBoxShadow => BoxShadow(
color: shadow,
spreadRadius: 3,
blurRadius: 4,
);
@override
BoxShadow? get homeViewButtonBarBoxShadow => BoxShadow(
color: shadow,
spreadRadius: 3,
blurRadius: 4,
);
}

View file

@ -7,7 +7,17 @@ import 'package:stackwallet/utilities/theme/light_colors.dart';
import 'package:stackwallet/utilities/theme/ocean_breeze_colors.dart';
import 'package:stackwallet/utilities/theme/oled_black_colors.dart';
enum ThemeType { light, dark, oceanBreeze, oledBlack, fruitSorbet, forest }
import 'chan_colors.dart';
enum ThemeType {
light,
dark,
oceanBreeze,
oledBlack,
fruitSorbet,
forest,
chan;
}
// adjust this file
@ -16,6 +26,8 @@ extension ThemeTypeExt on ThemeType {
switch (this) {
case ThemeType.light:
return LightColors();
case ThemeType.chan:
return ChanColors();
case ThemeType.dark:
return DarkColors();
case ThemeType.oceanBreeze:
@ -33,6 +45,8 @@ extension ThemeTypeExt on ThemeType {
switch (this) {
case ThemeType.light:
return "Light";
case ThemeType.chan:
return "Chan";
case ThemeType.dark:
return "Dark";
case ThemeType.oceanBreeze: