diff --git a/.eslintrc.json b/.eslintrc.json deleted file mode 100644 index e58a2d4..0000000 --- a/.eslintrc.json +++ /dev/null @@ -1,36 +0,0 @@ -{ - "extends": [ - "next/core-web-vitals", - "eslint:recommended" - ], - "parserOptions": { - "ecmaVersion": 6, - "sourceType": "module", - "ecmaFeatures": { - "jsx": true - } - }, - "rules": { - "react/no-unescaped-entities": "off", - "indent": [ - "warn", - "tab", - { - "SwitchCase": 1 - } - ], - "quotes": [ - "error", - "double" - ], - "semi": [ - "error", - "always" - ], - "no-unused-vars": "warn", - "react/react-in-jsx-scope": "off", - "react/jsx-uses-react": "off", - "no-unreachable": "warn", - "no-empty": "warn" - } -} diff --git a/app/_components/AlertMessage.module.scss b/app/_components/AlertMessage.module.scss index a60476b..ebefa98 100644 --- a/app/_components/AlertMessage.module.scss +++ b/app/_components/AlertMessage.module.scss @@ -1,4 +1,4 @@ -@import "../theme.scss"; +@use "@/_styles/theme" as *; .alertBox { diff --git a/app/_components/Button.module.scss b/app/_components/Button.module.scss index 58336d7..8ca2964 100644 --- a/app/_components/Button.module.scss +++ b/app/_components/Button.module.scss @@ -1,4 +1,4 @@ -@import "../theme.scss"; +@use "@/_styles/theme" as *; .button { diff --git a/app/_components/CookieBanner.module.scss b/app/_components/CookieBanner.module.scss index ed300c1..5bbc0ea 100644 --- a/app/_components/CookieBanner.module.scss +++ b/app/_components/CookieBanner.module.scss @@ -1,4 +1,4 @@ -@import "../theme.scss"; +@use "@/_styles/theme" as *; .banner { diff --git a/app/_components/Footer.module.scss b/app/_components/Footer.module.scss index 1bd60fc..e2ebcc2 100644 --- a/app/_components/Footer.module.scss +++ b/app/_components/Footer.module.scss @@ -1,4 +1,4 @@ -@import "../theme.scss"; +@use "@/_styles/theme" as *; .footer { diff --git a/app/_components/Header.module.scss b/app/_components/Header.module.scss index dc92e18..03c8f4c 100644 --- a/app/_components/Header.module.scss +++ b/app/_components/Header.module.scss @@ -1,4 +1,4 @@ -@import "../theme.scss"; +@use "@/_styles/theme" as *; .header { diff --git a/app/_components/NavigationLinks.module.scss b/app/_components/NavigationLinks.module.scss index 883470c..a52e29c 100644 --- a/app/_components/NavigationLinks.module.scss +++ b/app/_components/NavigationLinks.module.scss @@ -1,4 +1,4 @@ -@import "../theme.scss"; +@use "@/_styles/theme" as *; .navigation { diff --git a/app/_components/Sidemenu.module.scss b/app/_components/Sidemenu.module.scss index 7229a62..bbc6043 100644 --- a/app/_components/Sidemenu.module.scss +++ b/app/_components/Sidemenu.module.scss @@ -1,4 +1,4 @@ -@import "../theme.scss"; +@use "@/_styles/theme" as *; .dialog { @@ -15,6 +15,9 @@ color: unset; border: none; + transition: right $durationNormal $curveEasyEaseMax; + right: -350px; + &::backdrop { -webkit-backdrop-filter: blur(8px); @@ -64,9 +67,6 @@ } } - transition: right $durationNormal $curveEasyEaseMax; - right: -350px; - &.show { right: 0; diff --git a/app/_components/SocialLinks.module.scss b/app/_components/SocialLinks.module.scss index d83f029..d9b9d7c 100644 --- a/app/_components/SocialLinks.module.scss +++ b/app/_components/SocialLinks.module.scss @@ -1,4 +1,4 @@ -@import "../theme.scss"; +@use "@/_styles/theme" as *; .socials { diff --git a/app/_data/FrontSection.module.scss b/app/_data/FrontSection.module.scss index 58cf6b1..1a54ada 100644 --- a/app/_data/FrontSection.module.scss +++ b/app/_data/FrontSection.module.scss @@ -1,11 +1,12 @@ -@import "../theme.scss"; +@use "@/_styles/theme" as *; .section { - @include centerTwo; min-height: 75vh; align-items: end; + @include centerTwo; + .content { @include flex(column); diff --git a/app/_data/ThirdPartyAttributiont.tsx b/app/_data/ThirdPartyAttributiont.tsx index d38726a..d53f1a1 100644 --- a/app/_data/ThirdPartyAttributiont.tsx +++ b/app/_data/ThirdPartyAttributiont.tsx @@ -3,7 +3,7 @@ import React from "react"; const ThirdPartyAttribution: React.FC = () => <>

Iconography, typography, and color palette of this website are based on - Microsoft's Fluent Design System licensed under + Microsoft's Fluent Design System licensed under the MIT License.

diff --git a/app/_data/TitleLogo.module.scss b/app/_data/TitleLogo.module.scss index 2361b29..0f81810 100644 --- a/app/_data/TitleLogo.module.scss +++ b/app/_data/TitleLogo.module.scss @@ -1,4 +1,4 @@ -@import "../theme.scss"; +@use "@/_styles/theme" as *; .title { diff --git a/app/_page_sections/AboutSection.module.scss b/app/_page_sections/AboutSection.module.scss index a6a9edc..5d92eda 100644 --- a/app/_page_sections/AboutSection.module.scss +++ b/app/_page_sections/AboutSection.module.scss @@ -1,12 +1,13 @@ -@import "../theme.scss"; +@use "@/_styles/theme" as *; .section { - @include centerTwo; @include body2($fontFamilyBaseAlt); color: $colorNeutralForeground2; align-items: center; + @include centerTwo; + > div:first-child { @include flex(column); diff --git a/app/_page_sections/ContactSection.module.scss b/app/_page_sections/ContactSection.module.scss index e7b0ed0..fb49a58 100644 --- a/app/_page_sections/ContactSection.module.scss +++ b/app/_page_sections/ContactSection.module.scss @@ -1,4 +1,4 @@ -@import "../theme.scss"; +@use "@/_styles/theme" as *; .section { diff --git a/app/_page_sections/ContactSection.tsx b/app/_page_sections/ContactSection.tsx index e9e0a3b..b7b5d56 100644 --- a/app/_page_sections/ContactSection.tsx +++ b/app/_page_sections/ContactSection.tsx @@ -3,28 +3,31 @@ import Button from "@/_components/Button"; import SocialLinks from "@/_components/SocialLinks"; import contacts from "@/_data/contacts"; -import FormStatusTracker from "@/_utils/FormStatusTracker"; -import React, { InputHTMLAttributes, useEffect, useMemo, useState } from "react"; -import { useFormState } from "react-dom"; +import { getSitekey } from "@/_utils/turnstile"; +import React, { InputHTMLAttributes, useActionState, useEffect, useMemo, useState } from "react"; import Turnstile from "react-turnstile"; import sendInquiry, { FormStatus } from "../_utils/sendInquiry"; import cls from "./ContactSection.module.scss"; -import { getSitekey } from "@/_utils/turnstile"; const defaultState: FormStatus = { status: "idle" }; const ContactSection: React.FC = () => { - const [pending, setPending] = useState(false); - const [{ status, message }, formAction] = useFormState(sendInquiry, defaultState); + // Added state-backing for the form fields to prevent it from resetting on submit + // See https://github.com/facebook/react/issues/29034 + // FIXME: Remove form state once #29034 is fixed + const [form, setForm] = useState<{ email: string, subject: string, message: string; }>({ email: "", subject: "", message: "" }); + + const [{ status, message }, formAction, isPending] = useActionState(sendInquiry, defaultState); const { telephone: phone, email, socials } = contacts; const [cfSitekey, setCfSitekey] = useState(null); const sharedProps: InputHTMLAttributes = useMemo(() => ({ required: true, - disabled: pending, - readOnly: status === "success" - }), [status, pending]); + disabled: isPending, + readOnly: status === "success", + "data-clarity-mask": true + }), [status, isPending]); useEffect(() => { @@ -33,7 +36,7 @@ const ContactSection: React.FC = () => return (

-

Let's get in touch

+

Let's get in touch

@@ -41,19 +44,20 @@ const ContactSection: React.FC = () =>

Inquiries, requests or proposals

- - - setForm({ ...form, email: e.target.value }) } autoComplete="email" spellCheck="false" maxLength={ 60 } placeholder="Email" /> - setForm({ ...form, subject: e.target.value }) } autoComplete="off" spellCheck="true" maxLength={ 120 } placeholder="Subject" /> -