remove inputs autofill background #9

.env

@@ -13,5 +13,3 @@ NEXT_PUBLIC_CONTACT_PHONE="+374 431 085 88"
 
 NEXT_PUBLIC_LOCATION_GOOGLE_MAPS_LINK="https://shorturl.at/gsuK5"
 NEXT_PUBLIC_LOCATION_ADDRESS_TEXT=" 41, 4 Abovyan St, Yerevan 0009"
-
-PUBLIC

app/contact/page.tsx

@@ -18,7 +18,7 @@ export const metadata: Metadata = {
 const titleVariants = getTextSlideIntoViewVarinats('right');
 
 const containerCn = clsx('flex', 'flex-col', 'min-h-screen', 'w-full');
-const titleCn = clsx('text-8xl', 'mt-24', 'ml-4');
+const titleCn = clsx('text-8xl', 'mt-24', 'ml-4', 'text-center');
 
 /**
  * @returns React component.

app/gallery/page.tsx

@@ -37,7 +37,6 @@ const galleryTextItem = clsx(
   'text-center',
 );
 const titleCn = clsx('text-4xl');
-const textCn = clsx('text-xl');
 const subTitleCn = clsx('text-2xl');
 
 /**
@@ -55,14 +54,7 @@ export default function GalleryPage() {
           SALSAVIVA GALLERY
         </AppearInViewport>
         <AppearInViewport
-          transition={{delay: 1.5, duration: TransitionDuration.LONG}}
-          className={textCn}
-        >
-          Welcome to our vibrant dancing studio image gallery, where the rhythm comes alive through
-          captivating moments frozen in time.
-        </AppearInViewport>
-        <AppearInViewport
-          transition={{delay: 3, duration: TransitionDuration.VERY_LONG}}
+          transition={{delay: 2, duration: TransitionDuration.VERY_LONG}}
           className={subTitleCn}
         >
           Enjoy!
@@ -74,7 +66,7 @@ export default function GalleryPage() {
           className={subTitleCn}
           as="h3"
         >
-          Whant more? Follow us on social media!
+          Want more? Follow us on social media!
         </AppearInViewport>
         <SocialIcons iconSize="2x" />
       </div>

app/layout.tsx

@@ -23,6 +23,7 @@ const bodyCn = clsx(
   'min-h-screen',
   'bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-black via-alternate to-black',
   'bg-fixed',
+  'animate-gradient-melting',
 );
 
 const mainCn = clsx('flex', 'flex-col', 'items-center', 'justify-start', 'grow');

components/pages/About/WhyJoinBlock/WhyJoinBlock.tsx

@@ -26,7 +26,7 @@ const variants: Variants = {
  */
 export default function WhyJoinBlock() {
   const containerCn =
-    'w-full flex flex-col items-center justify-center border-t-8 border-white border-dashed';
+    'w-full flex flex-col items-center justify-center border-t-8 border-white border-dashed px-4';
   const titleCn = 'w-full text-8xl mt-24 text-accent2 text-right justify-end mr-32 mb-32';
   const gridCn = 'grid grid-cols-3 w-full gap-4';
 

components/pages/Contact/DynamicFormBg/DynamicFormBg.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+/**
+ *
+ */
+type DynamicFormBgProps = {
+  steps: number;
+  maxSteps: number;
+};
+
+/**
+ * @param {DynamicFormBgProps} props Props.
+ * @returns {React.JSX.Element} Background for the contact form.
+ */
+export const DynamicFormBg = ({steps, maxSteps}: DynamicFormBgProps) => {
+  return (
+    <div className="bg-gray-100 py-16">
+      <div className="container mx-auto">
+        <div className="flex flex-col items-center">
+          <h2 className="mb-4 text-center text-4xl font-bold text-gray-900">SV</h2>
+        </div>
+      </div>
+    </div>
+  );
+};

components/pages/Contact/Form/ErrorMessage.tsx

@@ -9,13 +9,13 @@ type ErrorMessageProps = {
   hasError?: boolean;
 };
 
-const messageCn = clsx('');
-
 /**
  * @param {ErrorMessageProps} props Props.
  * @returns React component.
  */
 function ErrorMessage({message, hasError}: ErrorMessageProps) {
+  const messageCn = clsx('text-red-500', 'text-sm', 'mt-1', 'absolute', 'bottom-0', 'left-0');
+
   return <div className={messageCn}>{hasError ? message : null}</div>;
 }
 

components/pages/Contact/Form/Form.tsx

@@ -27,6 +27,8 @@ const {NEXT_PUBLIC_FORMSPREE_ID} = env;
  * @returns React element.
  */
 export default function Form({onSubmit: onSuccessSubmit}: FormProps) {
+  const mottoCn = 'text-center text-gray-300 mt-16';
+  const btnCn = 'mt-8';
   const [{status}, submit] = useFormspree<ContactFormData>(NEXT_PUBLIC_FORMSPREE_ID!);
   // eslint-disable-next-line jsdoc/require-jsdoc
   const onSubmit = async (values: ContactFormData) => {
@@ -48,13 +50,14 @@ export default function Form({onSubmit: onSuccessSubmit}: FormProps) {
         <form onSubmit={handleSubmit}>
           <FormField name="name" />
           <FormField name="message" />
-          <div>Select your preferred method of contact.</div>
+          <div className={mottoCn}>Select your preferred method of contact:</div>
           <FormField name="email" />
           <FormField name="tel" />
           <FormField name="telegram" />
           <Button
             type="submit"
             disabled={isSubmitting || !isValid || !dirty}
+            className={btnCn}
           >
             Submit
           </Button>

components/pages/Contact/Form/FormField.tsx

@@ -1,4 +1,5 @@
 import {useField} from 'formik';
+import clsx from 'clsx';
 import formConfig from './formConfig';
 import type {ContactFormData} from './validationSchema';
 import TextField from '../TextField/TextField';
@@ -19,9 +20,10 @@ export default function FormField({name}: FormFieldProps) {
   const configData = formConfig[name];
   const [field, meta] = useField(name);
   const hasError = meta.touched && !!meta.error;
+  const fieldCn = clsx('relative', 'h-12');
 
   return (
-    <>
+    <div className={fieldCn}>
       <TextField
         {...configData}
         {...field}
@@ -30,6 +32,6 @@ export default function FormField({name}: FormFieldProps) {
         hasError={hasError}
         message={meta.error}
       />
-    </>
+    </div>
   );
 }

components/pages/Contact/FormWrapper/FormWrapper.tsx

@@ -5,13 +5,12 @@ import clsx from 'clsx';
 import Form from '../Form/Form';
 import SubmittedForm from './SubmittedForm';
 
-const wrapperCn = clsx();
-
 /**
  * @returns React element.
  */
 export default function FormWrapper() {
   const [isSubmitted, setIsSubmitted] = useState(false);
+  const wrapperCn = clsx('w-96', 'sm:w-100', 'mx-auto', 'mt-8');
 
   return (
     <div className={wrapperCn}>

components/pages/Contact/TextField/TextField.tsx

@@ -38,7 +38,7 @@ const labelCn = (hasError: TextFieldProps['hasError']) =>
     'block',
     'relative',
     'border-b',
-    'border-gray-500',
+    'border-gray-200',
     'focus-within:border-white',
     'overflow-hidden',
     'transition-border',
@@ -65,8 +65,8 @@ const spanCn = clsx(
   'start-0',
   'top-2',
   '-translate-y-1/2',
-  'text-xs',
-  'text-gray-700',
+  'text-sm',
+  'text-white',
   'transition-all',
   'peer-placeholder-shown:top-1/2',
   'peer-placeholder-shown:text-sm',

components/pages/Teachers/TeacherInfo.tsx

@@ -26,6 +26,9 @@ const containerCn = clsx(
   'left-0',
   'z-10',
   'mb-16',
+  'overflow-hidden',
+  'px-4',
+  'text-center',
 );
 const nameCn = clsx('text-4xl', 'font-bold', 'text-center', 'pointer-events-auto');
 

components/pages/Teachers/teachersListConfig.ts

@@ -17,13 +17,6 @@ const teachersListConfig: TeachersListConfigItem[] = [
     imgSrc: 'teachers.0.jpg',
     id: 'monica-conde',
   },
-  {
-    name: 'Yuriy Pikhun',
-    subtitle: 'Top teacher',
-    danceStyles: ['Bachata', 'Kizomba', 'Casino'],
-    imgSrc: 'teachers.1.jpg',
-    id: 'yuriy-pikhun',
-  },
   {
     name: 'Anna Militonyan',
     subtitle: 'Top teacher',
@@ -38,6 +31,13 @@ const teachersListConfig: TeachersListConfigItem[] = [
     imgSrc: 'teachers.3.jpg',
     id: 'annie-ghantarjian',
   },
+  {
+    name: 'Yuriy Pikhun',
+    subtitle: 'Top teacher',
+    danceStyles: ['Bachata', 'Kizomba', 'Casino'],
+    imgSrc: 'teachers.1.jpg',
+    id: 'yuriy-pikhun',
+  },
   {
     name: 'Dima & Sveta',
     subtitle: 'Top teachers',

lib/shared/useDisableBodyScroll.ts

@@ -1,14 +1,15 @@
-'use client';
-
 import {useEffect} from 'react';
+import {isServer} from '@/utils/isServer';
 
 /**
  * Disable body scroll if overflow element is open.
  * Prevent layout shift by adding padding right to body.
  * @param open Is open.
  */
 export default function useDisableBodyScroll(open: boolean) {
-  const scrollBarWidth = window.innerWidth - document.body.clientWidth;
+  const isSSR = isServer();
+
+  const scrollBarWidth = !isSSR ? window.innerWidth - document.body.clientWidth : 0;
 
   useEffect(() => {
     if (open) {

tailwind.config.ts

@@ -1,5 +1,6 @@
 import type {Config} from 'tailwindcss';
 import theme from './tailwind/theme';
+import {removeSelectionBg} from './tailwind/removeSelectionBg';
 
 export default {
   content: [
@@ -12,5 +13,6 @@ export default {
     require('@tailwindcss/forms')({
       strategy: 'base',
     }),
+    removeSelectionBg,
   ],
 } satisfies Config;

tailwind/removeSelectionBg.ts

@@ -0,0 +1,20 @@
+// eslint-disable-next-line jsdoc/require-param
+/**
+ * Remove selection background.
+ */
+export function removeSelectionBg({addBase}: {addBase: Function}) {
+  addBase({
+    'input:-webkit-autofill': {
+      transition: 'background-color 0s 600000s, color 0s 600000s !important;',
+    },
+    'textarea:-webkit-autofill': {
+      transition: 'background-color 0s 600000s, color 0s 600000s !important;',
+    },
+    'input:-webkit-autofill:focus': {
+      transition: 'background-color 0s 600000s, color 0s 600000s !important;',
+    },
+    'textarea:-webkit-autofill:focus': {
+      transition: 'background-color 0s 600000s, color 0s 600000s !important;',
+    },
+  });
+}