refactor: 🔥 restructuring the project and ui fixes

.gitignore

@@ -27,5 +27,6 @@ yarn-error.log*
 
 .idea
 
-.vscode/settings.json
+.vscode
+.vscode*
 .vercel

src/features/Apiexplorer/index.tsx

@@ -20,7 +20,7 @@ export default function ApiExplorerFeatures() {
   const has_info = Object.keys(request_info).length === 0;
   return (
     <>
-      <div className='breadcrumbs_wrapper'>
+      <div className='breadcrumbs-wrapper'>
         <Breadcrumbs
           links={[
             {

src/features/Apiexplorer/styles.module.scss

@@ -1,4 +1,5 @@
 @use 'src/styles/utility' as *;
+@use 'src/styles/mixins' as *;
 
 .schemaContainer {
   position: relative;
@@ -38,7 +39,7 @@
         justify-content: center;
         width: 95%;
         gap: rem(2);
-        @media screen and (max-width: 1024px) {
+        @include tablet {
           flex-direction: column;
           align-items: center;
         }
@@ -51,7 +52,7 @@
   display: flex;
   flex-direction: column;
   width: 50%;
-  @media screen and (max-width: 1024px) {
+  @include tablet {
     width: 100%;
   }
 }
@@ -62,7 +63,7 @@
   gap: rem(2);
   margin-bottom: rem(1);
   width: 50%;
-  @media screen and (max-width: 1024px) {
+  @include tablet {
     width: 100%;
   }
 }

src/features/dashboard/components/Table/__tests__/Table.test.tsx

@@ -4,11 +4,11 @@ import userEvent from '@testing-library/user-event';
 import React, { act } from 'react';
 import Table from '..';
 import useDeleteToken from '../../../hooks/useDeleteToken';
-import { TTokenColumn } from '../../ApiTokenTable';
-import ApiLastUsedCell from '../../ApiTokenTable/table.lastused.cell';
-import ApiTokenCell from '../../ApiTokenTable/table.token.cell';
+import { TTokenColumn } from '../../api-token-table';
+import ApiLastUsedCell from '../../api-token-table/cell-last-used';
+import ApiTokenCell from '../../api-token-table/cell-token';
 import ScopesCell from '../scopes.cell';
-import TokenActionsCell from '../../ApiTokenTable/delete.token.cell';
+import TokenActionsCell from '../../api-token-table/cell-delete-token';
 
 jest.mock('../../../hooks/useDeleteToken');
 

src/features/dashboard/components/Table/index.ts

@@ -0,0 +1,3 @@
+import Table from './table';
+
+export default Table;

src/features/dashboard/components/Tabs/index.ts

@@ -0,0 +1,3 @@
+import Tabs from './tabs';
+
+export default Tabs;

src/features/dashboard/components/TokenRegister/index.tsx

@@ -1,13 +1,13 @@
 import React, { HTMLAttributes, useCallback, useEffect, useState } from 'react';
 import { Text, Heading } from '@deriv-com/quill-ui';
-import { useForm, FormProvider } from 'react-hook-form';
+import { useForm } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { scopesObjectToArray } from '@site/src/utils';
-import ApiTokenCard from '../ApiTokenCard';
+import ApiTokenCard from '../api-token-card';
 import useCreateToken from '@site/src/features/dashboard/hooks/useCreateToken';
 import * as yup from 'yup';
 import './token-register.scss';
-import CreateTokenField from '../ApiTokenForm/CreateTokenField';
+import CreateTokenField from '../api-token-form';
 import AccountSwitcher from '@site/src/components/AccountSwitcher';
 
 const schema = yup

src/features/dashboard/components/ApiTokenCard/index.tsx → src/features/dashboard/components/api-token-card/api-token-cards.tsx

@@ -5,7 +5,7 @@ import useDeviceType from '@site/src/hooks/useDeviceType';
 import CustomCheckbox from '@site/src/components/CustomCheckbox';
 import { Text, Heading, Modal, SectionMessage } from '@deriv-com/quill-ui';
 import { StandaloneCircleExclamationRegularIcon } from '@deriv/quill-icons';
-import { TApiTokenForm, TApiTokenFormItemsNames } from '../ApiTokenForm/api-token.form';
+import { TApiTokenForm, TApiTokenFormItemsNames } from '../api-token-form/api-token.form';
 import styles from './api-token.card.module.scss';
 
 interface IApiTokenCardProps {

src/features/dashboard/components/api-token-card/index.ts

@@ -0,0 +1,3 @@
+import ApiTokenCard from './api-token-cards';
+
+export default ApiTokenCard;

src/features/dashboard/components/ApiTokenForm/api-token.form.tsx → src/features/dashboard/components/api-token-form/api-token-form.tsx

@@ -4,13 +4,12 @@ import { useForm } from 'react-hook-form';
 import Spinner from '@site/src/components/Spinner';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { scopesObjectToArray } from '@site/src/utils';
-import ApiTokenCard from '../ApiTokenCard';
+import ApiTokenCard from '../api-token-card';
 import useCreateToken from '@site/src/features/dashboard/hooks/useCreateToken';
 import * as yup from 'yup';
-import styles from './api-token.form.module.scss';
+import styles from './api-token-form.module.scss';
 import TokenNameRestrictions from '../TokenNameRestrictions/TokenNameRestrictions';
-import CreateTokenField from './CreateTokenField';
-import useApiToken from '@site/src/hooks/useApiToken';
+import CreateTokenField from './create-token-field';
 
 const schema = yup
   .object({

src/features/dashboard/components/ApiTokenForm/CreateTokenField/index.tsx → src/features/dashboard/components/api-token-form/create-token-field.tsx

@@ -4,10 +4,10 @@ import useApiToken from '@site/src/hooks/useApiToken';
 import useAppManager from '@site/src/hooks/useAppManager';
 import { TDashboardTab } from '@site/src/contexts/app-manager/app-manager.context';
 import { Text, Button, TextField } from '@deriv-com/quill-ui';
-import TokenCreationDialogSuccess from '../../Dialogs/TokenCreationDialogSuccess';
-import TokenNameRestrictions from '../../TokenNameRestrictions/TokenNameRestrictions';
-import CustomErrors from './CustomErrors';
-import styles from '../api-token.form.module.scss';
+import TokenCreationDialogSuccess from '../dialogs/token-creation-dialog-success';
+import TokenNameRestrictions from '../TokenNameRestrictions/TokenNameRestrictions';
+import CustomErrors from './custom-error';
+import styles from './api-token-form.module.scss';
 
 type TCreateTokenField = {
   register: UseFormRegisterReturn;

src/features/dashboard/components/api-token-form/index.ts

@@ -0,0 +1,3 @@
+import ApiTokenForm from './api-token-form';
+
+export default ApiTokenForm;

src/features/dashboard/components/ApiTokenTable/CopyButton/__tests__/CopyButton.test.tsx → src/features/dashboard/components/api-token-table/__tests__/copy-button.test.tsx

@@ -1,5 +1,5 @@
 import React, { act } from 'react';
-import CopyButton from '..';
+import CopyButton from '../copy-button';
 import userEvent from '@testing-library/user-event';
 import { render, screen } from '@testing-library/react';
 

src/features/dashboard/components/ApiTokenTable/delete.token.cell.tsx → src/features/dashboard/components/api-token-table/cell-delete-token.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { LabelPairedTrashMdRegularIcon } from '@deriv/quill-icons';
 import CustomTooltip from '@site/src/components/CustomTooltip';
 import useApiToken from '@site/src/hooks/useApiToken';
-import DeleteTokenDialog from './DeleteTokenDialog';
+import DeleteTokenDialog from './delete-token-dialog';
 import styles from './cells.module.scss';
 
 type TTokenActionsCellProps = {

src/features/dashboard/components/ApiTokenTable/CopyButton/index.tsx → src/features/dashboard/components/api-token-table/copy-button.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
-import CopyTokenDialog from '../CopyTokenDialog';
-import styles from '../token-cell.module.scss';
+import CopyTokenDialog from './copy-token-dialog';
+import styles from './token-cell.module.scss';
 
 type TCopyButton = {
   value: string;

src/features/dashboard/components/ApiTokenTable/CopyTokenDialog/index.tsx → src/features/dashboard/components/api-token-table/copy-token-dialog/copy-token-dialog.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo, useCallback } from 'react';
 import { Modal } from '@deriv/ui';
 import { TModalActionButton } from '@deriv/ui/dist/types/src/components/core/modal/types';
-import styles from './CopyTokenDialog.module.scss';
+import styles from './copy-token-dialog.module.scss';
 import Translate, { translate } from '@docusaurus/Translate';
 
 type TCopyTokenDialog = {

src/features/dashboard/components/api-token-table/copy-token-dialog/index.ts

@@ -0,0 +1,3 @@
+import CopyTokenDialog from './copy-token-dialog';
+
+export default CopyTokenDialog;

src/features/dashboard/components/api-token-table/delete-token-dialog/index.ts

@@ -0,0 +1,3 @@
+import DeleteTokenDialog from './delete-token-dialog';
+
+export default DeleteTokenDialog;

src/features/dashboard/components/ApiTokenTable/index.tsx → src/features/dashboard/components/api-token-table/index.tsx

@@ -8,12 +8,12 @@ import Spinner from '@site/src/components/Spinner';
 import useApiToken from '@site/src/hooks/useApiToken';
 import useDeviceType from '@site/src/hooks/useDeviceType';
 import AccountSwitcher from '@site/src/components/AccountSwitcher';
-import ScopesCell from '../Table/scopes.cell';
-import Table from '../Table';
-import ApiTokenCell from './table.token.cell';
-import ApiLastUsedCell from './table.lastused.cell';
-import TokenActionsCell from './delete.token.cell';
-import AccountTypeCell from './account.type.cell';
+import ScopesCell from '../table/scopes.cell';
+import Table from '../table';
+import ApiTokenCell from './cell-token';
+import ApiLastUsedCell from './cell-last-used';
+import TokenActionsCell from './cell-delete-token';
+import AccountTypeCell from './cell-account-type';
 import ResponsiveTable from './responsive-table';
 import useAppManager from '@site/src/hooks/useAppManager';
 import styles from './api-table.module.scss';

src/features/dashboard/components/ApiTokenTable/responsive-table.tsx → src/features/dashboard/components/api-token-table/responsive-table.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import CustomAccordion from '@site/src/components/CustomAccordion';
 import { TTokenType } from '@site/src/types';
-import ScopesCell from '../Table/scopes.cell';
-import TokenActionsCell from './delete.token.cell';
-import AccountTypeCell from './account.type.cell';
-import ApiLastUsedCell from './table.lastused.cell';
+import ScopesCell from '../table/scopes.cell';
+import TokenActionsCell from './cell-delete-token';
+import AccountTypeCell from './cell-account-type';
+import ApiLastUsedCell from './cell-last-used';
 
 type TResponsiveTableProps = {
   tokens: TTokenType[];

src/features/dashboard/components/AppForm/__tests__/app-form.test.tsx → src/features/dashboard/components/app-form/__tests__/app-form.test.tsx

@@ -6,7 +6,7 @@ import React, { act } from 'react';
 import AppForm from '..';
 import { ApplicationObject } from '@deriv/api-types';
 import useAppManager from '@site/src/hooks/useAppManager';
-import { app_name_error_map } from '../../AppRegister/types';
+import { app_name_error_map } from '../../app-register/types';
 
 jest.mock('@site/src/hooks/useApiToken');
 jest.mock('@site/src/utils', () => ({

src/features/dashboard/components/AppForm/index.tsx → src/features/dashboard/components/app-form/app-form.tsx

@@ -1,7 +1,6 @@
-import React, { Dispatch, ReactNode, SetStateAction, useEffect, useMemo, useState } from 'react';
+import React, { Dispatch, ReactNode, SetStateAction, useEffect, useState } from 'react';
 import { Button, Text } from '@deriv/ui';
 import { useForm } from 'react-hook-form';
-import { isNotDemoCurrency } from '@site/src/utils';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { appRegisterSchema, appEditSchema, IRegisterAppForm } from '../../types';
 import useApiToken from '@site/src/hooks/useApiToken';
@@ -16,7 +15,7 @@ import styles from './app-form.module.scss';
 import clsx from 'clsx';
 import useAppManager from '@site/src/hooks/useAppManager';
 import useWS from '@site/src/hooks/useWs';
-import RestrictionsAppname from '../RestrictionsAppname';
+import RestrictionsAppname from '../restrictions-appname';
 
 type TAppFormProps = {
   initialValues?: Partial<IRegisterAppForm>;

src/features/dashboard/components/app-form/index.ts

@@ -0,0 +1,3 @@
+import AppForm from './app-form';
+
+export default AppForm;

src/features/dashboard/components/Modals/AppRegisterSuccessModal/index.tsx → src/features/dashboard/components/app-register-success-modal/app-register-success-modal.tsx

@@ -3,16 +3,16 @@ import useAppManager from '@site/src/hooks/useAppManager';
 import { Heading, Modal, Text } from '@deriv-com/quill-ui';
 import { StandaloneCircleCheckRegularIcon } from '@deriv/quill-icons';
 import useDeviceType from '@site/src/hooks/useDeviceType';
-import '../../Dialogs/DeleteAppDialog/delete-app-dialog.scss';
-import useDisableScroll from '../../../hooks/useDisableScroll';
+import useDisableScroll from '../../hooks/useDisableScroll';
 import Translate from '@docusaurus/Translate';
+import '../dialogs/delete-app-dialog/delete-app-dialog.scss';
 
 interface IAppRegisterSuccessModalProps {
   onConfigure: () => void;
   onCancel: () => void;
 }
 
-export const AppRegisterSuccessModal = ({
+const AppRegisterSuccessModal = ({
   onConfigure,
   onCancel,
 }: IAppRegisterSuccessModalProps) => {
@@ -75,3 +75,5 @@ export const AppRegisterSuccessModal = ({
     </Modal>
   );
 };
+
+export default AppRegisterSuccessModal;

src/features/dashboard/components/app-register-success-modal/index.ts

@@ -0,0 +1,3 @@
+import AppRegisterSuccessModal from './app-register-success-modal';
+
+export default AppRegisterSuccessModal;

src/features/dashboard/components/AppRegister/app-register.scss → src/features/dashboard/components/app-register/app-register.scss

@@ -1,9 +1,13 @@
-.app_register_container {
+@use 'src/styles/mixins' as *;
+
+.app-register-container {
   margin-inline: 16px;
   margin-top: 60px;
   max-width: 608px;
-  &_input {
-    padding: 16px;
+  &__input {
+    padding-block: 12px;
+    padding-inline-end: 12px;
+    padding-inline-start: 4px;
     width: 90%;
     border: none;
 
@@ -16,18 +20,22 @@
     justify-content: center;
   }
 
-  @media screen and (max-width: 992px) {
+  @include tablet {
     margin-top: 48px;
   }
 
   &__fields {
     display: flex;
     align-items: center;
-    border: 1px solid #00000014;
-    padding-block: 5px;
-    padding-inline-end: 12px;
+    border: 1px solid var(--opacity-black-100);
+    padding-block: 12px;
+    padding-inline: 12px;
     border-radius: 8px;
 
+    @include mobile {
+      padding-block: 4px;
+    }
+
     &.error-border {
       border: 1px solid var(--colors-coral500);
     }
@@ -38,13 +46,19 @@
   }
 
   &__restrictions {
-    color: #0000007a;
+    color: var(--validation-text-light);
     margin-top: 4px;
-    margin-left: 16px;
     font-size: 14px;
     ul {
-      list-style: disc;
       line-height: 24px;
+      padding-left: 32px;
+      @include mobile {
+        line-height: 18px;
+        padding: 0 16px 0 32px;
+        li {
+          font-size: 12px;
+        }
+      }
     }
   }
 
@@ -54,8 +68,8 @@
       font-weight: 400;
       font-size: 16px;
       position: relative;
-      top: 0px;
-      @media screen and (max-width: 992px) {
+      line-height: 24px;
+      @include tablet {
         font-size: 14px;
         top: -4px;
       }