ocean breeze selector + functionality added

This commit is contained in:
ryleedavis 2022-11-18 09:30:21 -07:00
parent 4d17c1db5f
commit 8207474d09
5 changed files with 135 additions and 2 deletions

View file

@ -0,0 +1,28 @@
<svg width="200" height="162" viewBox="0 0 200 162" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_518_22068)">
<rect width="200" height="162" rx="8" fill="url(#paint0_linear_518_22068)"/>
<rect x="10" y="10" width="180" height="20" rx="2" fill="#C2DAE2"/>
<rect x="16" y="16" width="106" height="8" rx="1" fill="#227386"/>
<rect x="10" y="40" width="180" height="20" rx="2" fill="#FEFEFE"/>
<rect x="16" y="46" width="106" height="8" rx="1" fill="#BDD5DB"/>
<rect x="10" y="62" width="180" height="20" rx="2" fill="#FEFEFE"/>
<rect x="16" y="68" width="106" height="8" rx="1" fill="#BDD5DB"/>
<rect x="10" y="84" width="180" height="20" rx="2" fill="#FEFEFE"/>
<rect x="16" y="90" width="106" height="8" rx="1" fill="#BDD5DB"/>
<rect x="10" y="106" width="180" height="20" rx="2" fill="#FEFEFE"/>
<rect x="16" y="112" width="106" height="8" rx="1" fill="#BDD5DB"/>
<rect x="10" y="128" width="180" height="20" rx="2" fill="#FEFEFE"/>
<rect x="16" y="134" width="106" height="8" rx="1" fill="#BDD5DB"/>
<rect x="10" y="150" width="180" height="20" rx="2" fill="#FEFEFE"/>
<rect x="16" y="156" width="106" height="8" rx="1" fill="#BDD5DB"/>
</g>
<defs>
<linearGradient id="paint0_linear_518_22068" x1="100" y1="0" x2="100" y2="162" gradientUnits="userSpaceOnUse">
<stop stop-color="#F3F7FA"/>
<stop offset="1" stop-color="#E8F2F9"/>
</linearGradient>
<clipPath id="clip0_518_22068">
<rect width="200" height="162" rx="8" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

View file

@ -77,7 +77,7 @@ void main() async {
if (Util.isDesktop) {
setWindowTitle('Stack Wallet');
setWindowMinSize(const Size(1200, 1100));
setWindowMinSize(const Size(1220, 1100));
setWindowMaxSize(Size.infinite);
}

View file

@ -10,6 +10,7 @@ import 'package:stackwallet/utilities/text_styles.dart';
import 'package:stackwallet/utilities/theme/color_theme.dart';
import 'package:stackwallet/utilities/theme/dark_colors.dart';
import 'package:stackwallet/utilities/theme/light_colors.dart';
import 'package:stackwallet/utilities/theme/ocean_breeze_colors.dart';
import 'package:stackwallet/utilities/theme/stack_colors.dart';
import 'package:stackwallet/widgets/custom_buttons/draggable_switch_button.dart';
import 'package:stackwallet/widgets/rounded_white_container.dart';
@ -291,7 +292,109 @@ class _ThemeToggle extends ConsumerState<ThemeToggle> {
),
),
const SizedBox(
width: 10,
),
MaterialButton(
splashColor: Colors.transparent,
hoverColor: Colors.transparent,
padding: const EdgeInsets.all(0),
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(
Constants.size.circularBorderRadius,
),
),
onPressed: () {
DB.instance.put<dynamic>(
boxName: DB.boxNameTheme,
key: "colorScheme",
value: ThemeType.oceanBreeze.name,
);
ref.read(colorThemeProvider.state).state =
StackColors.fromStackColorTheme(
OceanBreezeColors(),
);
setState(() {
_selectedTheme = "oceanBreeze";
});
},
child: SizedBox(
width: 200,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
decoration: BoxDecoration(
border: Border.all(
width: 2.5,
color: _selectedTheme == "oceanBreeze"
? Theme.of(context)
.extension<StackColors>()!
.infoItemIcons
: Theme.of(context).extension<StackColors>()!.popupBG,
),
borderRadius: BorderRadius.circular(
Constants.size.circularBorderRadius,
),
),
child: SvgPicture.asset(
Assets.svg.themeOcean,
),
),
const SizedBox(
height: 12,
),
Row(
children: [
SizedBox(
width: 20,
height: 20,
child: Radio(
activeColor: Theme.of(context)
.extension<StackColors>()!
.radioButtonIconEnabled,
value: "oceanBreeze",
groupValue: _selectedTheme,
onChanged: (newValue) {
if (newValue is String && newValue == "oceanBreeze") {
DB.instance.put<dynamic>(
boxName: DB.boxNameTheme,
key: "colorScheme",
value: ThemeType.oceanBreeze.name,
);
ref.read(colorThemeProvider.state).state =
StackColors.fromStackColorTheme(
OceanBreezeColors(),
);
setState(() {
_selectedTheme = "oceanBreeze";
});
}
},
),
),
const SizedBox(
width: 14,
),
Text(
"Ocean Breeze",
style:
STextStyles.desktopTextExtraSmall(context).copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.textDark,
),
),
],
),
],
),
),
),
const SizedBox(
width: 10,
),
MaterialButton(
splashColor: Colors.transparent,

View file

@ -59,6 +59,7 @@ class _SVG {
String txExchangeFailed(BuildContext context) =>
"assets/svg/${Theme.of(context).extension<StackColors>()!.themeType.name}/tx-exchange-icon-failed.svg";
String get themeOcean => "assets/svg/ocean-breeze-theme.svg";
String get circleSliders => "assets/svg/configuration.svg";
String get circlePlus => "assets/svg/plus-circle.svg";
String get framedGear => "assets/svg/framed-gear.svg";

View file

@ -316,6 +316,7 @@ flutter:
- assets/svg/arrow-down.svg
- assets/svg/plus-circle.svg
- assets/svg/configuration.svg
- assets/svg/ocean-breeze-theme.svg
# coin icons
- assets/svg/coin_icons/Bitcoin.svg
- assets/svg/coin_icons/Litecoin.svg