box height adjusted

src/components/Icons.jsx

@@ -11,7 +11,7 @@ import { LuPanelRight } from "react-icons/lu";
 import { FcGoogle } from "react-icons/fc";
 import { IoLogoApple } from "react-icons/io5";
 import { FcSalesPerformance } from "react-icons/fc";
-
+import { FaLongArrowAltRight } from "react-icons/fa";
 
 export default function Icons({name, className}) {
   return (
@@ -48,6 +48,8 @@ export default function Icons({name, className}) {
     <IoLogoApple className={`text-base ${className}`} />
     :name.toLowerCase() == 'sales' ?
     <FcSalesPerformance className={`text-base ${className}`} />
+    :name.toLowerCase() == 'arrow-right' ?
+    <FaLongArrowAltRight className={`text-base ${className}`} />
     :
     null
     }

src/components/layouts/aside/AsideLinkWithSubLinks.jsx

@@ -24,7 +24,7 @@ export default function AsideLinkWithSubLinks({name, icon, to, children, isOpen}
             <span className="flex gap-2 items-center">{icon && <Icons name={icon} />}{shrinkAside ? '' : name}</span>
             <FaCaretDown className={`text-base ${(hideSubMenu) ? 'rotate-180' : 'rotate-0'}`} />
         </button>
-        <div className={`w-full ${(hideSubMenu) ? 'block' : 'hidden'}`}>
+        <div className={`w-full ${(hideSubMenu) ? 'opacity-100' : 'opacity-0'} transition-aall duration-500`}>
             {children}
         </div>
     </div>

src/components/layouts/aside/DashboardAside.jsx

@@ -145,13 +145,13 @@ export default function DashboardAside() {
 
 const asideNavLinks = [
     {name:'Dashboard', status:1, icon: 'dashboard', to: RouteLinks.homePage},
-    {name:'Salary Loan', title:'Loan', status:1, icon: 'money', subLinks: [
+    {name:'Salary Loan', title:'Loan', status:1, icon: 'arrow-right', subLinks: [
         {name: 'Selected Loans', status:1, icon: 'dot', to: RouteLinks.selectedLoanPage},
         {name: 'Applications', status:1, icon: 'dot', to: RouteLinks.applicationsLoanPage},
         {name: 'Approved Loans', status:1, icon: 'dot', to: RouteLinks.approvedLoansPage},
         {name: 'Disbursements', status:1, icon: 'dot', to: RouteLinks.disbursementsLoanPage},
         {name: 'Payments', status:1, icon: 'dot', to: ''},
-        {name: 'Configurations', status:1, icon: 'dot', subLinks: [
+        {name: 'Configurations', status:1, icon: 'arrow-right', subLinks: [
             {name: 'Loan Offers', status:1, icon: 'dot', to: RouteLinks.loanOffersPage },
             ]
         },

src/pages/HomePage.jsx

@@ -11,21 +11,21 @@ export default function HomePage() {
       <BreadcrumbCom title='Dashboard' paths={['Home', 'Dashboard']} />
       <div className='grid grid-cols-1 gap-8'>
         <div className='w-full grid grid-cols-1 lg:grid-cols-3 gap-8'>
-          <div className='p-8 w-full flex flex-col justify-between bg-[#F7D9E3] dark:bg-black-box text-black-body dark:text-white-body hover:scale-[1.0] cursor-pointer rounded-lg h-[200px] shadow-round_black dark:shadow-round_white'>
+          <div className='p-8 w-full flex flex-col justify-between bg-[#F7D9E3] dark:bg-black-box text-black-body dark:text-white-body hover:scale-[1.0] cursor-pointer rounded-lg h-[230px] shadow-round_black dark:shadow-round_white'>
             <p className='text-base sm:text-lg font-bold'>Earnings</p>
             <div className='flex gap-2 items-end font-bold'>
               <p className='text-3xl'><CustomCounter targetNumber='47' timeInSeconds='1' /></p>
               <p>- 12% this week</p>
             </div>
           </div>
-          <div className='p-8 w-full flex flex-col justify-between bg-[#CBF0F5] dark:bg-black-box text-black-body dark:text-white-body hover:scale-[1.0] cursor-pointer rounded-lg h-[200px] shadow-round_black dark:shadow-round_white'>
+          <div className='p-8 w-full flex flex-col justify-between bg-[#CBF0F5] dark:bg-black-box text-black-body dark:text-white-body hover:scale-[1.0] cursor-pointer rounded-lg h-[230px] shadow-round_black dark:shadow-round_white'>
             <p className='text-base sm:text-lg font-bold'>Contributions</p>
             <div className='flex gap-2 items-end font-bold'>
               <p className='text-3xl'>$<CustomCounter targetNumber='500' timeInSeconds='1' /></p>
               <p>+ 56% this week</p>
             </div>
           </div>
-          <div className='p-8 w-full flex flex-col justify-between bg-[#CBD4F4] dark:bg-black-box text-black-body dark:text-white-body hover:scale-[1.0] cursor-pointer rounded-lg h-[200px] shadow-round_black dark:shadow-round_white'>
+          <div className='p-8 w-full flex flex-col justify-between bg-[#CBD4F4] dark:bg-black-box text-black-body dark:text-white-body hover:scale-[1.0] cursor-pointer rounded-lg h-[230px] shadow-round_black dark:shadow-round_white'>
             <p className='text-base sm:text-lg font-bold'>Summary</p>
             <div className='grid grid-cols-2 gap-4 font-bold'>
               <div className='flex items-center gap-2'>
@@ -66,7 +66,7 @@ export default function HomePage() {
               </div>
             </div>
           </div>
-          {/* <div className='p-8 w-full bg-[#F7D9E3] dark:bg-black-box text-black-body dark:text-white-body hover:scale-[1.0] cursor-pointer rounded-lg h-[200px] shadow-round_black dark:shadow-round_white'>
+          {/* <div className='p-8 w-full bg-[#F7D9E3] dark:bg-black-box text-black-body dark:text-white-body hover:scale-[1.0] cursor-pointer rounded-lg h-[230px] shadow-round_black dark:shadow-round_white'>
             <p className='text-base sm:text-lg font-bold'>Earnings</p>
           </div> */}
         </div>