ocean breeze selector + functionality added

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>

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);
   }
 

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: 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,

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";

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