glass other page

src/features/auth/components/AuthFormWrapper.tsx

@@ -2,6 +2,7 @@
 
 // import LoadingOverlay from '@/components/overlays/LoadingOverlay';
 import React from 'react'
+import { glassSurfaceCard } from '@/lib/styles/glassSurface';
 
 type Props = {
   isPending: boolean,
@@ -24,7 +25,7 @@ function AuthFormWrapper({ children, isPending, onSubmit, ...restProps }: Props)
       onSubmit={handleSubmit}
       className='p-6 lg:py-[75px] w-full flex items-center justify-center py-4 lg:items-center lg:px-10 px-4 drop-shadow-black h-full'
     >
-      <div className='relative h-full w-full px-4 sm:px-6 lg:p-0 flex flex-col max-h-[812px] max-w-[1200px] bg-container rounded-container overflow-clip lg:flex-row justify-between'>
+      <div className={glassSurfaceCard('relative h-full w-full px-4 sm:px-6 lg:p-0 flex flex-col max-h-[812px] max-w-[1200px] overflow-clip lg:flex-row justify-between')}>
         {children}
         {/* <LoadingOverlay visible={isPending} bgOpacity={0} /> */}
       </div>

src/features/auth/components/StepEnterNumber.tsx

@@ -8,6 +8,7 @@ import Image from 'next/image'
 import React, { useState } from 'react'
 import type { ChangeEvent } from 'react'
 import { useTranslation } from 'react-i18next'
+import { glassSurfaceFlat } from '@/lib/styles/glassSurface'
 import { useFormik } from 'formik'
 import * as Yup from 'yup'
 import { useOtpRequest } from '@/app/auth/login/hooks/useAuthData'
@@ -115,7 +116,7 @@ function StepEnterNumber(_props: StepEnterNumberProps = {}) {
               inputMode='tel'
               autoComplete='tel'
               dir='ltr'
-              className='mt-10 w-full bg-container'
+              className={glassSurfaceFlat('mt-10 w-full')}
               inputClassName='text-left dltr'
               htmlFor={AUTH_PAGE_ELEMENT.INPUT_PHONE}
               labelText={t('Enter.LabelPhoneNumber')}

src/features/auth/components/StepEnterPassword.tsx

@@ -8,6 +8,7 @@ import Image from 'next/image'
 import Link from 'next/link'
 import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { glassSurfaceFlat } from '@/lib/styles/glassSurface'
 
 type Props = {
   onChange: ((e: React.ChangeEvent<HTMLInputElement>) => void) &
@@ -68,7 +69,7 @@ function StepEnterPassword ({
             aria-errormessage={error}
             autoFocus
             autoComplete='current-password'
-            className='mt-10 bg-container'
+            className={glassSurfaceFlat('mt-10')}
             htmlFor={AUTH_PAGE_ELEMENT.INPUT_PASSWORD}
             labelText={t('EnterPass.LabelPass')}
             value={value}

src/features/auth/components/StepNewPassword.tsx

@@ -7,6 +7,7 @@ import { AUTH_PAGE_ELEMENT } from '@/enums'
 import Image from 'next/image'
 import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { glassSurfaceFlat } from '@/lib/styles/glassSurface'
 
 type Props = {
   onChange: ((e: React.ChangeEvent<HTMLInputElement>) => void) &
@@ -84,7 +85,7 @@ function StepNewPassword ({
             valid={!hasError()}
             aria-errormessage={error}
             autoComplete='new-password'
-            className='mt-10 bg-container'
+            className={glassSurfaceFlat('mt-10')}
             htmlFor={AUTH_PAGE_ELEMENT.INPUT_PASSWORD}
             labelText={t('NewPassword.LabelPass')}
             value={value}
@@ -108,7 +109,7 @@ function StepNewPassword ({
             valid={!hasError(error2)}
             aria-errormessage={error2}
             autoComplete='new-password'
-            className='mt-6 bg-container'
+            className={glassSurfaceFlat('mt-6')}
             htmlFor={AUTH_PAGE_ELEMENT.INPUT_PASSWORD_REPEAT}
             labelText={t('NewPassword.LabelRepeatPass')}
             value={repeatValue}

src/features/auth/components/StepOtp.tsx

@@ -13,6 +13,7 @@ import { useBulkCart } from '@/app/[name]/(Main)/cart/hooks/useCartData'
 import { setRefreshToken, setToken } from '@/lib/api/func'
 import { useSearchParams } from 'next/navigation'
 import { AUTH_PAGE_ELEMENT } from '@/enums'
+import { glassSurfaceFlat } from '@/lib/styles/glassSurface'
 import clsx from 'clsx'
 import { formatCountdown } from '@/hooks/useCountdown'
 
@@ -110,7 +111,7 @@ const StepOtp = ({ phone, slug, timerRunning, secondsLeft, onResend, isResendPen
                             type='tel'
                             autoComplete="one-time-code"
                             inputMode="numeric"
-                            className='w-full h-[45px] sm:h-[50px] flex-1 mx-1 sm:mx-2 bg-container border border-border text-foreground outline-0 rounded-[10px] text-center text-sm' />
+                            className={glassSurfaceFlat('w-full h-[45px] sm:h-[50px] flex-1 mx-1 sm:mx-2 border border-border text-foreground outline-0 rounded-[10px] text-center text-sm')} />
                     }
                 />
             </div>