fix: added hover feature and pointer arrow on list enabled item

Author: Dhruv-deriv

Diff for: packages/appstore/src/components/modals/verification-docs-list-modal/ListItem.tsx

@@ -7,6 +7,7 @@ import { Text, StatusBadge } from '@deriv/components';
 import { AUTH_STATUS_CODES } from '@deriv/shared';
 import './verification-docs-list-modal.scss';
 import { useDevice } from '@deriv-com/ui';
+import classNames from 'classnames';
 
 type TListItemProps = {
     id: string;
@@ -63,7 +64,12 @@ const ListItem = observer(({ id, text, status, route }: TListItemProps) => {
     };
 
     return (
-        <div className='verification-docs-list-modal__content-list-item' onClick={onClickItem}>
+        <div
+            className={classNames('verification-docs-list-modal__content-list-item', {
+                'verification-docs-list-modal__content-list-item--disabled': is_document_submitted,
+            })}
+            onClick={onClickItem}
+        >
             <Text size={isMobile ? 'xxs' : 'xs'} line_height='xl'>
                 <Localize i18n_default_text={text} />
             </Text>

Diff for: packages/appstore/src/components/modals/verification-docs-list-modal/verification-docs-list-modal.scss

@@ -8,6 +8,7 @@
         &-list {
             width: 100%;
             &-item {
+                cursor: pointer;
                 display: flex;
                 min-height: 5.6rem;
                 align-items: center;
@@ -16,6 +17,16 @@
                 padding: 0.8rem 1.6rem;
                 justify-content: space-between;
                 margin: 1.6rem auto;
+
+                &:hover {
+                    background: var(--icon-grey-background-hover);
+                    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); // Add shadow on hover
+                }
+
+                &--disabled {
+                    cursor: not-allowed;
+                    pointer-events: none;
+                }
             }
         }
     }