add: report problem page

src/app/[name]/layout.tsx

@@ -7,14 +7,17 @@ export const metadata = {
 
 export default function MenuLayout({
   children,
+  report
 }: Readonly<{
   children: React.ReactNode;
+  report: React.ReactNode,
 }>) {
 
   return (
     <ClientSideWrapper>
       <ClientMenuRouteWrapper>
         {children}
+        {report}
       </ClientMenuRouteWrapper>
     </ClientSideWrapper>
   );

src/app/[name]/report/page.tsx

@@ -0,0 +1,75 @@
+'use client';
+
+import Button from '@/components/button/PrimaryButton';
+import InputField from '@/components/input/InputField';
+import { ArrowLeft } from 'iconsax-react';
+import Image from 'next/image'
+import { useRouter } from 'next/navigation';
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+type Props = object;
+
+function ReportIndex({ }: Props) {
+    const router = useRouter();
+
+    const { t } = useTranslation('parallels', {
+        keyPrefix: 'Report'
+    })
+
+    return (
+        <div className='w-full z-[100] px-6 py-6 absolute top-0 left-0 right-0 bottom-0 bg-background'>
+            <ArrowLeft
+                className='absolute top-6 left-6 cursor-pointer'
+                size='24'
+                color='currentColor'
+                onClick={() => { router.back() }}
+            />
+            <Image
+                className='place-self-center w-full px-4'
+                src={'/assets/images/report-hero.svg'}
+                height={200}
+                width={312}
+                unoptimized
+                alt='report hero image'
+            />
+            <div className='w-full px-4 mt-6'>
+                <h2 className='text-sm2 font-bold'>{t('Heading')}</h2>
+                <p className='text-sm2 text-disabled-text mt-2'>{t('Description')}</p>
+            </div>
+
+            <form>
+                <InputField
+                    className='w-full mt-6 px-4 bg-background'
+                    type='text'
+                    placeholder={t('InputTitle.Placeholder')}
+                    labelText={t('InputTitle.Label')}
+                    htmlFor='report-title'
+                    onChange={() => { }}
+                />
+
+                <div className='relative'>
+                    <textarea
+                        className='w-full px-4 py-2.5 mt-6 text-sm2 leading-6 outline-0 border border-border rounded-normal resize-none h-[200px] focus:ring-0'
+                        placeholder={t('InputDescription.Placeholder')}
+                        id='report-description'
+                        name='report-description'
+                    ></textarea>
+                    <span className='absolute top-4 right-2 px-2 bg-background text-foreground text-xs'>
+                        {t('InputDescription.Label')}
+                    </span>
+                </div>
+
+                <Button
+                    className='w-full px-4 mt-6'
+                    type='submit'
+                    onClick={() => { }}
+                >
+                    {t('ButtonSubmit')}
+                </Button>
+            </form>
+        </div>
+    )
+}
+
+export default ReportIndex

src/app/globals.css

@@ -88,6 +88,23 @@ input[type="password"] {
   background: #555;
 }
 
+input:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0px 0px transparent inset !important;
+  box-shadow: 0 0 0px 0px transparent inset !important;
+  -webkit-text-fill-color: #000 !important;
+  background: currentColor !important;
+  transition: background-color 10000s ease-in-out 0s;
+}
+
+input:autofill {
+  -webkit-box-shadow: 0 0 0px 0px transparent inset !important;
+  box-shadow: 0 0 0px 0px transparent inset !important;
+  -webkit-text-fill-color: #000 !important;
+  background: currentColor !important;
+  transition: background-color 10000s ease-in-out 0s;
+}
+
+
 .box-shadow-normal {
   box-shadow: 0px 2px 16px 0px #00000014;
 }

src/app/layout.tsx

@@ -11,7 +11,7 @@ export const metadata: Metadata = {
   description: 'Webapp dashboard',
 }
 
-const i18nNamespaces = ['common', 'menu', 'orders', 'auth', "rating", "chat", "notifications"];
+const i18nNamespaces = ['common', 'menu', 'orders', 'auth', "rating", "chat", "notifications", 'parallels'];
 
 export default async function RootLayout({
   children,

src/components/input/InputField.tsx

@@ -15,7 +15,7 @@ function InputField({ onChange, htmlFor, labelText, children, valid = true, clas
     return (
         <div className={`${className} ${valid ? 'border-border' : 'border-invalid'} h-11 inline-flex relative border px-3 w-full rounded-normal group focus-within:border`}>
             <label
-                className='absolute start-2 -top-2.5 px-2 bg-container text-[12px] text-foreground'
+                className='absolute start-2 -top-2.5 px-2 bg-inherit text-[12px] text-foreground'
                 htmlFor={htmlFor}>
                 {labelText}
             </label>
@@ -25,7 +25,7 @@ function InputField({ onChange, htmlFor, labelText, children, valid = true, clas
                     onChange={onChange}
                     className={clsx(
                         inputProps['aria-errormessage'] && '!text-red-300',
-                        'py-2.5 pt-3.5 text-base w-full outline-0 !leading-6'
+                        'py-2.5 pt-3.5 text-sm2 w-full outline-0 !leading-6'
                     )}
                     name={htmlFor}
                     {...inputProps} />

src/components/menu/SideMenu.tsx

@@ -40,7 +40,7 @@ const menuItems: Array<Array<MenuItemType>> = [
         { href: 'transactions', title: 'Transactions', icon: <ReceiptIcon width={20} height={20} /> },
         { href: '/', title: 'Games', icon: <GameControllerIcon width={20} height={20} /> },
         { href: '?share', title: 'ShareWithFriends', icon: <ThumbsUpIcon width={20} height={20} /> },
-        { href: 'services', title: 'ReportProblem', icon: <NoteBoardIcon width={20} height={20} /> },
+        { href: 'report', title: 'ReportProblem', icon: <NoteBoardIcon width={20} height={20} /> },
         { href: 'invoices', title: 'InstallApp', icon: <DirectboxReceiveIcon width={20} height={20} /> }
     ],
     [],

src/components/wrapper/ClientMenuRouteWrapper.tsx.tsx

@@ -66,7 +66,7 @@ function ClientMenuRouteWrapper({ children }: Props) {
 
 
       <main
-        className="noscrollbar overflow-y-auto h-svh pt-0 pb-12 outline mx-2 outline-blue-500 px-4"
+        className="noscrollbar overflow-y-auto h-svh pt-0 pb-12 mx-2 px-2"
       >
         {children}
       </main>

src/locales/fa/parallels.json

@@ -0,0 +1,15 @@
+{
+    "Report": {
+        "Heading": "با برنامه به مشکلی برخوردید؟",
+        "Description": "توضیحات خود را برای بررسی توسط ما ثبت کنید",
+        "InputTitle": {
+            "Label": "عنوان گزارش",
+            "Placeholder": "عنوان گزارش خود را وارد کنید"
+        },
+        "InputDescription": {
+            "Label": "توضیحات",
+            "Placeholder": "توضیحات خود را وارد کنید"
+        },
+        "ButtonSubmit": "ثبت"
+    }
+}