Improved Button Border Hover CSS Effects (#288)

Replaced button hover border resizing with changing border colors and added corresponding e2e tests.

Author: Gregory711

app/Components/Home/NavigationButton.tsx

@@ -1,10 +1,5 @@
 import React from "react";
-import {
-  Pressable,
-  Image,
-  ImageURISource,
-  useWindowDimensions,
-} from "react-native";
+import { Pressable, Image, ImageURISource } from "react-native";
 import { Surface, useTheme } from "react-native-paper";
 import { useNavigation } from "@react-navigation/native";
 import { PreferencesContext } from "../../Contexts/PreferencesContext";
@@ -15,7 +10,6 @@ interface navigationButton {
   image: ImageURISource;
   widthFactor?: number;
   heightFactor?: number;
-  hoverSizeFactor?: number;
   testID: string;
 }
 
@@ -28,9 +22,6 @@ const NavigationButton = (props: navigationButton) => {
 
   const WIDTH_FACTOR: number = props.widthFactor ? props.widthFactor : 4.5;
   const HEIGHT_FACTOR: number = props.heightFactor ? props.heightFactor : 9;
-  const HOVER_SIZE_FACTOR: number = props.hoverSizeFactor
-    ? props.hoverSizeFactor
-    : 1.1;
 
   const WIDTH: number = minWindowSize.width / WIDTH_FACTOR;
   const HEIGHT: number = minWindowSize.height / HEIGHT_FACTOR;
@@ -46,10 +37,12 @@ const NavigationButton = (props: navigationButton) => {
         return (
           <Surface
             style={{
-              width: hovered ? WIDTH * HOVER_SIZE_FACTOR : WIDTH,
-              height: hovered ? HEIGHT * HOVER_SIZE_FACTOR : HEIGHT,
-              borderColor: theme.colors.onSurfaceVariant,
-              borderWidth: 4,
+              width: WIDTH,
+              height: HEIGHT,
+              borderColor: hovered
+                ? theme.colors.outline
+                : theme.colors.onSurface,
+              borderWidth: hovered ? 3 : 2,
             }}
             testID={props.testID}
           >

e2e/web/specs/home.spec.ts

@@ -0,0 +1,19 @@
+import { HomePage } from "./../page/home.page";
+import { expect } from "@playwright/test";
+import { test } from "../fixture";
+
+test.describe("navigation buttons", () => {
+  test("hover over navigation buttons", async ({ page }) => {
+    const homePage = new HomePage(page);
+    const buttons = [
+      homePage.startLessons,
+      homePage.startDrills,
+      homePage.playSudoku,
+    ];
+    for (const button of buttons) {
+      await expect(button).toHaveCSS("border-color", "rgb(242, 242, 242)");
+      await button.hover();
+      await expect(button).toHaveCSS("border-color", "rgb(217, 160, 91)");
+    }
+  });
+});