From 8207474d0973387b9fa7d32d4eb510132b34cc72 Mon Sep 17 00:00:00 2001
From: ryleedavis <rylee@cypherstack.com>
Date: Fri, 18 Nov 2022 09:30:21 -0700
Subject: [PATCH] ocean breeze selector + functionality added

---
 assets/svg/ocean-breeze-theme.svg             |  28 +++++
 lib/main.dart                                 |   2 +-
 .../settings_menu/appearance_settings.dart    | 105 +++++++++++++++++-
 lib/utilities/assets.dart                     |   1 +
 pubspec.yaml                                  |   1 +
 5 files changed, 135 insertions(+), 2 deletions(-)
 create mode 100644 assets/svg/ocean-breeze-theme.svg

diff --git a/assets/svg/ocean-breeze-theme.svg b/assets/svg/ocean-breeze-theme.svg
new file mode 100644
index 000000000..0deb96ec8
--- /dev/null
+++ b/assets/svg/ocean-breeze-theme.svg
@@ -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>
diff --git a/lib/main.dart b/lib/main.dart
index 2d1bab160..66b3bb974 100644
--- a/lib/main.dart
+++ b/lib/main.dart
@@ -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);
   }
 
diff --git a/lib/pages_desktop_specific/home/settings_menu/appearance_settings.dart b/lib/pages_desktop_specific/home/settings_menu/appearance_settings.dart
index 7a9ed557f..bfd5f3b61 100644
--- a/lib/pages_desktop_specific/home/settings_menu/appearance_settings.dart
+++ b/lib/pages_desktop_specific/home/settings_menu/appearance_settings.dart
@@ -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: 20,
+          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,
diff --git a/lib/utilities/assets.dart b/lib/utilities/assets.dart
index 38d720969..d7d2ebc6f 100644
--- a/lib/utilities/assets.dart
+++ b/lib/utilities/assets.dart
@@ -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";
diff --git a/pubspec.yaml b/pubspec.yaml
index bba5f6ed2..94670af1a 100644
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -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