QOL: toggle elavation

Frontend/lib/mih_components/mih_package_components/mih_toggle.dart

@@ -8,6 +8,7 @@ class MihToggle extends StatefulWidget {
   final Color fillColor;
   final Color secondaryFillColor;
   final bool? readOnly;
+  final double? elevation;
   final void Function(bool) onChange;
   const MihToggle({
     super.key,
@@ -16,6 +17,7 @@ class MihToggle extends StatefulWidget {
     required this.fillColor,
     required this.secondaryFillColor,
     this.readOnly,
+    this.elevation,
     required this.onChange,
   });
 
@@ -59,7 +61,27 @@ class _MihToggleState extends State<MihToggle> {
           ),
         ),
         const SizedBox(width: 10),
-        Switch(
+        // Material(
+        // elevation: widget.elevation ?? 0.01,
+        // shadowColor: widget.secondaryFillColor.withOpacity(0.5),
+        // color: Colors.transparent,
+        // shape: StadiumBorder(),
+        Container(
+          decoration: BoxDecoration(
+            color: Colors.transparent,
+            borderRadius: BorderRadius.circular(
+                30), // Adjust the border radius to match the toggle
+            boxShadow: [
+              BoxShadow(
+                color: Colors.black.withOpacity(0.15),
+                offset: Offset(
+                    0, widget.elevation ?? 10), // Adjust the vertical offset
+                blurRadius: widget.elevation ?? 10,
+                spreadRadius: 0,
+              ),
+            ],
+          ),
+          child: Switch(
             value: togglePosition,
             trackOutlineColor: WidgetStateProperty.resolveWith<Color?>(
               (states) {
@@ -76,14 +98,16 @@ class _MihToggleState extends State<MihToggle> {
                         "Dark"); // Outline color when active
               },
             ),
-          activeColor:
+            activeColor: widget.readOnly == true
-              widget.readOnly == true ? Colors.grey : widget.secondaryFillColor,
+                ? Colors.grey
+                : widget.secondaryFillColor,
             activeTrackColor: widget.readOnly == true
                 ? Colors.grey.shade400
                 : MihColors.getGreenColor(
                     MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
-          inactiveThumbColor:
+            inactiveThumbColor: widget.readOnly == true
-              widget.readOnly == true ? Colors.grey : widget.secondaryFillColor,
+                ? Colors.grey
+                : widget.secondaryFillColor,
             inactiveTrackColor: widget.readOnly == true
                 ? Colors.grey.shade400
                 : MihColors.getRedColor(
@@ -102,6 +126,8 @@ class _MihToggleState extends State<MihToggle> {
                   }
                 : null,
           ),
+        ),
+        const SizedBox(width: 10),
       ],
     );
   }