style: add hover effect on elements

.env.defaults

@@ -16,3 +16,7 @@ NEXT_PUBLIC_MATOMO_URL=https://analytics.forbole.com
 NEXT_PUBLIC_MATOMO_SITE_ID=1
 NEXT_PUBLIC_GRAPHQL_API=https://api.forbole.com/graphql
 NEXT_PUBLIC_COINGECKO_API=https://api.coingecko.com/api/v3
+
+# Optional, to send the email to different account locally (not added into
+# docker)
+SEND_EMAIL_TO=

.eslintrc.cjs

@@ -33,7 +33,6 @@ module.exports = {
     "jsx-a11y/click-events-have-key-events": "off",
     "jsx-a11y/control-has-associated-label": "off",
     "jsx-a11y/interactive-supports-focus": "off",
-    "jsx-a11y/no-static-element-interactions": "off",
 
     "import/extensions": [
       "error",
@@ -73,16 +72,9 @@ module.exports = {
   },
   overrides: [
     {
-      files: ["tests/**/*"],
+      files: ["server/**/*"],
       rules: {
-        "no-undef": "off",
-      },
-    },
-    {
-      files: ["src/**/*.test.tsx", "src/**/*.test.ts", "**/*.spec.ts"],
-      rules: {
-        "no-undef": "off",
-        "import/no-extraneous-dependencies": "off",
+        "no-console": "off",
       },
     },
   ],

e2e/main.spec.ts

@@ -20,6 +20,22 @@ test.describe.parallel("Main Pages", () => {
       await expect(page.locator('[data-test="nav"]')).toBeVisible();
     });
   });
+
+  test.describe.parallel("Contact Page", () => {
+    test("Main components", async ({ page }) => {
+      await page.goto("/contact");
+
+      await expect(page.locator('[data-test="contact-submit"]')).toBeVisible();
+    });
+  });
+
+  test.describe.parallel("DevTools Page", () => {
+    test("Main components", async ({ page }) => {
+      await page.goto("/developer-tools");
+
+      await expect(page.locator('[data-test="devtools-cta"]')).toBeVisible();
+    });
+  });
 });
 
 test.describe.parallel("Blog", () => {

server/index.ts

@@ -1,6 +1,4 @@
 /* eslint-disable @typescript-eslint/no-shadow */
-
-/* eslint-disable no-console */
 import axios from "axios";
 import cors from "cors";
 import "dotenv-defaults/config";
@@ -76,7 +74,21 @@ const ghostAdminApi = new GhostAdminAPI({
       async (req: Request, res: Response, next: any) => {
         try {
           if (process.env.NODE_ENV === "production") {
-            await transporter.sendMail(req.body);
+            const { source, ...restBody } = req.body;
+            const subject =
+              {
+                devtools:
+                  "A new customer just wanted to get in touch with us via Developer Tools form",
+                staking: "Inquiry From Forbole Validator Website",
+                enterprise:
+                  "A new customer just wanted to get in touch with us via Contact form",
+              }[source as string] || "A new enquiry from Forbole's website";
+
+            await transporter.sendMail({
+              ...restBody,
+              subject,
+              to: process.env.SEND_EMAIL_TO || "[email protected]",
+            });
           }
           res.status(200).json({
             success: true,

src/api/authors/index.ts

@@ -1,22 +1,18 @@
-/* eslint-disable no-console */
 import { ghostApi as api } from "../index";
 
-// import { IPost } from "./interface";
-
-/** Get blog posts by tag */
 export const getAuthorBySlug = async (query: { author: string }) => {
   try {
     const authorInfo = await api.authors.read({
       slug: `${query.author}`,
     });
     return authorInfo ?? null;
   } catch (err) {
+    // eslint-disable-next-line no-console
     console.error(`tag: ${err}`);
     return [];
   }
 };
 
-/** Get blog posts by author */
 export const getPostsByAuthor = async (query: {
   author: string;
   page?: number;
@@ -31,6 +27,7 @@ export const getPostsByAuthor = async (query: {
     });
     return posts ?? null;
   } catch (err) {
+    // eslint-disable-next-line no-console
     console.error(`tag: ${err}`);
     return [];
   }

src/api/networks/index.ts

@@ -1,4 +1,3 @@
-/* eslint-disable no-console */
 import { ghostApi as api } from "../index";
 import { IPost } from "./interface";
 
@@ -18,6 +17,7 @@ export const getNetworkPosts = async ({
       formats: "html",
     });
   } catch (err) {
+    // eslint-disable-next-line no-console
     console.error(err);
     return [];
   }

src/components/cta-button/index.tsx

@@ -11,7 +11,9 @@ const ColorButton = styled(LoadingButton)<LoadingButtonProps>(() => ({
   "height": "45px",
   "fontSize": "16px",
   "padding": " 0px 16px",
+  "transition": "transform 0.2s ease-in-out",
   "&:hover": {
+    transform: "scale(1.02)",
     background:
       "linear-gradient(175.41deg, #623DF5 11.57%, #362187 173.5%),linear-gradient(0deg, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.32))",
     boxShadow:

src/components/footer/components/footer_items/useStyles.ts

@@ -1,22 +1,20 @@
-import { css, useTheme } from "@mui/material";
+import { css } from "@mui/material";
 
-const useStyles = () => {
-  const theme = useTheme();
-  return {
-    word: css({
-      "fontSize": "14px",
-      "fontStyle": "normal",
-      "fontWeight": "590",
-      "lineHeight": "20px",
-      "letterSpacing": "0.336px",
-      "textDecoration": "none",
-      "color": "inherit",
-      "&:hover": {
-        cursor: "pointer",
-        color: theme.palette.custom.forbole.purple,
-      },
-    }),
-  };
-};
+const useStyles = () => ({
+  word: css({
+    "fontSize": "14px",
+    "fontStyle": "normal",
+    "fontWeight": "590",
+    "lineHeight": "20px",
+    "letterSpacing": "0.336px",
+    "textDecoration": "none",
+    "color": "inherit",
+    "padding": "4px 8px",
+    "&:hover": {
+      background: "rgba(0,0,0,0.2)",
+      borderRadius: "24px",
+    },
+  }),
+});
 
 export default useStyles;

src/components/footer/components/social_media/classes.module.css

@@ -20,3 +20,9 @@
   outline: none;
   vertical-align: middle;
 }
+.icon {
+  transition: all 0.2s ease-in-out;
+}
+.icon:hover {
+  transform: scale(1.5);
+}

src/components/footer/components/social_media/index.tsx

@@ -84,6 +84,7 @@ const SocialMedia = () => {
         {socialMediaInfo.map((x) => (
           <a
             key={x.key}
+            className={classes.icon}
             href={x.url}
             rel="noreferrer"
             style={{ color: "currentcolor" }}

src/components/footer/index.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/require-default-props */
 import { Box, Container, Stack, Typography, useTheme } from "@mui/material";
 import { useWindowDimensions } from "@src/hooks";
 import useTranslation from "next-translate/useTranslation";

src/components/guide_nav/index.tsx

@@ -1,6 +1,3 @@
-/* eslint-disable react/require-default-props */
-
-/* eslint-disable jsx-a11y/anchor-is-valid */
 import { Forbole as ForboleLogo, ForboleShadowIcon } from "@icons";
 import { Box, Button, useTheme } from "@mui/material";
 import Link from "next/link";

src/components/nav/components/desktop_nav_menu/index.tsx

@@ -1,21 +1,15 @@
-/* eslint-disable jsx-a11y/anchor-is-valid */
 import { Box, useTheme } from "@mui/material";
 import CtaButton from "@src/components/cta-button";
 import useTranslation from "next-translate/useTranslation";
 import Link from "next/link";
-import * as React from "react";
 
 import CompanyMenuButton from "../company_menu_button";
 import { navItems } from "../config";
 import LangMenuButton from "../lang_menu_button";
 import ProductsMenuButton from "../products_menu_button";
 import classes from "./index.module.css";
 
-interface NavMenuProps {
-  itemColor: string | undefined;
-}
-
-const DesktopNavMenu = ({ itemColor }: NavMenuProps) => {
+const DesktopNavMenu = () => {
   const { t } = useTranslation("common");
   const theme = useTheme();
 
@@ -37,7 +31,9 @@ const DesktopNavMenu = ({ itemColor }: NavMenuProps) => {
             "fontWeight": 600,
             "fontSize": theme.spacing(2),
             "&:hover": {
-              color: itemColor || theme.palette.custom.forbole.indigo,
+              background: "rgba(0,0,0,0.2)",
+              borderRadius: "24px",
+              color: theme.palette.common.white,
             },
             "userSelect": "none",
           }}

src/components/nav/components/mobile_nav_menu/index.tsx

@@ -9,7 +9,7 @@ import { useWindowDimensions } from "@src/hooks";
 import { anchorElState } from "@src/recoil/settings/anchorEl";
 import useTranslation from "next-translate/useTranslation";
 import { useRouter } from "next/router";
-import * as React from "react";
+import { MouseEvent, useEffect, useState } from "react";
 import { useRecoilState } from "recoil";
 
 import CompanyMenuButton from "../company_menu_button";
@@ -24,15 +24,15 @@ const MobileNavMenu = () => {
   const { width } = windowDimensions;
   const [anchorEl, setAnchorEl] = useRecoilState(anchorElState);
   const open = Boolean(anchorEl);
-  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+  const handleClick = (event: MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);
   };
   const handleClose = () => {
     setAnchorEl(null);
   };
-  const [openDrawer, setOpenDrawer] = React.useState(false);
-  const [openShowCompany, setOpenShowCompany] = React.useState(false);
-  const [openShowProducts, setOpenShowProducts] = React.useState(false);
+  const [openDrawer, setOpenDrawer] = useState(false);
+  const [openShowCompany, setOpenShowCompany] = useState(false);
+  const [openShowProducts, setOpenShowProducts] = useState(false);
   const handleDropdownClick = () => {
     setOpenDrawer((prevState) => !prevState);
     setOpenShowCompany(() => false);
@@ -49,8 +49,8 @@ const MobileNavMenu = () => {
     setOpenShowCompany(() => false);
     setOpenShowProducts((prevState) => !prevState);
   };
-  // close other drawer
-  React.useEffect(() => {
+
+  useEffect(() => {
     setOpenDrawer(() => false);
     setOpenShowCompany(() => false);
     setOpenShowProducts(() => false);
@@ -147,13 +147,15 @@ const MobileNavMenu = () => {
             onClick={() => {
               router.push("/products").finally(handleClose);
             }}
+            role="button"
           >
             {t("Products")}
           </div>
           <div
             onClick={() => {
               handlerCLickShowProducts();
             }}
+            role="button"
           >
             {openShowProducts ? (
               <KeyboardArrowUpIcon />

src/components/nav/hooks.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable no-unused-vars */
 import { useScrollPosition } from "@n8tb1t/use-scroll-position";
 import { useEffect, useState } from "react";
 

src/components/nav/index.tsx

@@ -162,7 +162,7 @@ const Nav = ({ staking, stakeNowRef, itemColor }: NavProps) => {
                   },
                 }}
               >
-                <DesktopNavMenu itemColor={itemColor} />
+                <DesktopNavMenu />
               </Box>
             </>
           )}

src/components/selection-tab/index.tsx

@@ -1,12 +1,12 @@
 import Tab from "@mui/material/Tab";
 import Tabs from "@mui/material/Tabs";
 import { styled } from "@mui/material/styles";
-import * as React from "react";
+import { ReactElement, ReactNode, SyntheticEvent } from "react";
 
 interface StyledTabsProps {
-  children?: React.ReactNode;
+  children?: ReactNode;
   value: number;
-  onChange: (event: React.SyntheticEvent, newValue: number) => void;
+  onChange: (event: SyntheticEvent, newValue: number) => void;
 }
 
 export const StyledTabs = styled((props: StyledTabsProps) => (
@@ -31,7 +31,7 @@ export const StyledTabs = styled((props: StyledTabsProps) => (
 
 interface StyledTabProps {
   label: string;
-  icon?: string | React.ReactElement;
+  icon?: string | ReactElement;
   disabled?: boolean;
   value?: string;
   onClick?: (e: any) => void;

src/hooks/get_screen_size.ts

@@ -1,5 +1,5 @@
 import { useTheme } from "@mui/material";
-import * as React from "react";
+import { useEffect, useState } from "react";
 
 const getWindowDimensions = () => {
   const { innerWidth: width, innerHeight: height } = window;
@@ -10,17 +10,17 @@ const getWindowDimensions = () => {
 };
 
 export const useWindowDimensions = () => {
-  const [windowDimensions, setWindowDimensions] = React.useState({
+  const [windowDimensions, setWindowDimensions] = useState({
     width: 0,
     height: 0,
   }); // <-- don't invoke the function here
 
   const theme = useTheme();
-  const [isDesktop, setIsDesktop] = React.useState<boolean>(false);
-  const [isTablet, setIsTablet] = React.useState<boolean>(false);
-  const [isMobile, setIsMobile] = React.useState<boolean>(true);
+  const [isDesktop, setIsDesktop] = useState<boolean>(false);
+  const [isTablet, setIsTablet] = useState<boolean>(false);
+  const [isMobile, setIsMobile] = useState<boolean>(true);
 
-  React.useEffect(() => {
+  useEffect(() => {
     function handleResize() {
       setWindowDimensions(getWindowDimensions());
     }
@@ -33,7 +33,7 @@ export const useWindowDimensions = () => {
     };
   }, []);
 
-  React.useEffect(() => {
+  useEffect(() => {
     const width = windowDimensions?.width ?? 0;
     // is mobile
     if (width < theme?.breakpoints?.values?.tablet) {

src/pages/author/[author]/index.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable no-console */
 import { getAuthorBySlug, getPostsByAuthor } from "@api/authors";
 import { getPosts, getTags } from "@api/posts";
 import { Post, Tag } from "@models";
@@ -41,6 +40,7 @@ export async function getServerSideProps(context: { query: any }) {
     );
   } catch (err) {
     error = true;
+    // eslint-disable-next-line no-console
     console.log(error, "error");
   }
   return {