fix: Improvements & Bug fixes

apps/frontend/components/composed/auth/SignInForm.tsx

@@ -57,15 +57,17 @@ const SignInForm = () => {
         });
         toastSuccess({
           text: t('sign_in_page.sign_in_success'),
-          duration: 1500
+          duration: 1500,
+          position: 'top-center'
         });
 
         setTimeout(() => {
           login(access_token, refresh_token);
         }, 1500);
       } catch (e) {
         toastError({
-          text: t('sign_in_page.sign_in_error')
+          text: t('sign_in_page.sign_in_error'),
+          position: 'top-center'
         });
       }
     },

apps/frontend/components/composed/credentials/vcCommonColumns.tsx

@@ -133,7 +133,8 @@ export const useVCCommonColumns = (onRefetch: () => void) => {
     vcCommonColumnHelper.accessor('id', {
       id: 'actions',
       header: t('credentials.columns.actions'),
-      cell: ({ getValue }) => {
+      cell: ({ getValue, row }) => {
+        const status = row.original.status;
         const actions = [
           {
             label: t('credentials.columns.view'),
@@ -149,7 +150,8 @@ export const useVCCommonColumns = (onRefetch: () => void) => {
                 id: getValue(),
                 status: VCStatus.APPROVED
               });
-            }
+            },
+            disabled: status === VCStatus.APPROVED
           },
           {
             label: t('credentials.columns.reject'),
@@ -158,12 +160,14 @@ export const useVCCommonColumns = (onRefetch: () => void) => {
                 id: getValue(),
                 status: VCStatus.REJECTED
               });
-            }
+            },
+            disabled: status === VCStatus.REJECTED
           },
           {
             label: t('credentials.columns.report'),
             // eslint-disable-next-line
-            onClick: () => console.warn('report')
+            onClick: () => console.warn('report'),
+            disabled: true
           }
         ];
 

apps/frontend/components/composed/dashboard/DashboardContent.tsx

@@ -2,7 +2,7 @@
 
 import {
   BellIcon,
-  PlusIcon,
+  DocumentTextIcon,
   QuestionMarkCircleIcon
 } from '@heroicons/react/24/outline';
 import { useTranslations } from 'next-intl';
@@ -61,15 +61,15 @@ const DashboardContent = () => {
           className='w-full'
           title={overall || t('global.n_a')}
           label={t('dashboard.issued_credentials')}
-          icon={BellIcon}
+          icon={DocumentTextIcon}
           link={routes.app.credentials.overall.home}
           anchorText={t('dashboard.view_all_credentials')}
         />
         <InfoCard
           className='w-full'
           title={pending || t('global.n_a')}
           label={t('dashboard.pending_requests')}
-          icon={PlusIcon}
+          icon={BellIcon}
           link={routes.app.credentials.pending.home}
           anchorText={t('dashboard.view_pending_requests')}
         />

apps/frontend/components/ui/ActionMenu.tsx

@@ -7,6 +7,7 @@ import { FilterButton } from '@ui/table/filters/FilterWrapper';
 
 type ActionMenuItem = {
   label: string;
+  disabled?: boolean;
 } & ({ onClick: () => void } | { href: string });
 
 type ActionMenuProps = {
@@ -38,13 +39,14 @@ const ActionMenu: FC<ActionMenuProps> = ({ title, items = [], disabled }) => (
       <div>
         {items.map((item) => {
           const classes =
-            'block w-full text-start px-3 py-2 truncate text-sm font-medium text-slate-800 hover:bg-slate-50 active:bg-slate-50 focus-visible:outline-none focus-visible:bg-slate-50';
+            'block w-full text-start disabled:cursor-not-allowed disabled:text-slate-600 disabled:bg-slate-200 px-3 py-2 truncate text-sm font-medium text-slate-800 hover:bg-slate-50 active:bg-slate-50 focus-visible:outline-none focus-visible:bg-slate-50';
           if ('onClick' in item) {
             return (
               <button
                 className={classes}
                 onClick={item.onClick}
                 key={item.label}
+                disabled={item.disabled}
               >
                 <span>{item.label}</span>
               </button>

apps/frontend/components/ui/Toast.tsx

@@ -16,6 +16,7 @@ export type ToastProps = {
   duration?: number;
   detailsLink?: string;
   dismiss?: () => void;
+  position?: 'top-center' | 'top-right';
   actionText?: string;
   action?: () => void;
 } & VariantProps<typeof toastVariants>;
@@ -27,7 +28,7 @@ const variantIcon = {
 };
 
 export const toastVariants = cva(
-  'group pointer-events-auto relative rounded-2xl flex w-full justify-between items-center gap-2 overflow-hidden p-4 shadow-1 transition-all max-w-screen-sm',
+  'group pointer-events-auto relative rounded-2xl flex justify-between items-center gap-2 overflow-hidden p-4 shadow-1 transition-all w-content-w',
   {
     variants: {
       variant: {

apps/frontend/tailwind.config.ts

@@ -97,6 +97,7 @@ const config: Config = {
         50: '12.5rem', // 200px
         64: '16rem', // 256px
         '4/5': '80%',
+        'content-w': 'calc(100% - 224px)',
         'radix-popover-trigger': 'var(--radix-popover-trigger-width)'
       },
       maxHeight: {

apps/frontend/utils/toast.tsx

@@ -21,9 +21,13 @@ export const toastInfo = (props: ToastProps) =>
     variant: 'info'
   });
 
-const customToast = ({ duration = 3000, ...props }: ToastProps) => {
+const customToast = ({
+  duration = 3000,
+  position = 'top-right',
+  ...props
+}: ToastProps) => {
   toast.custom((t) => <Toast {...props} dismiss={() => toast.remove(t.id)} />, {
     duration,
-    position: 'top-center'
+    position
   });
 };