From 8022e3a6629d865c939f4a40fd963de1a0dba606 Mon Sep 17 00:00:00 2001
From: Md Asif <md.asif5@tcs.com>
Date: Mon, 30 Sep 2024 20:23:47 +0530
Subject: [PATCH] Refactor language selector and separator components

---
 src/components/LanguageSelector.jsx |  2 +-
 src/components/Separator.jsx        |  2 +-
 src/pages/Home.jsx                  | 22 +++++++++++++++-------
 3 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/components/LanguageSelector.jsx b/src/components/LanguageSelector.jsx
index 2e52453..abded28 100644
--- a/src/components/LanguageSelector.jsx
+++ b/src/components/LanguageSelector.jsx
@@ -9,7 +9,7 @@ const LanguageSelector = () => {
 
   return (
     <div>
-      <select className='rounded-md bg-secondary dark:bg-secondary-dark focus:outline-none' id="language-select" onChange={changeLanguage} value={i18n.language}>
+      <select className='font-body rounded-md bg-secondary dark:bg-secondary-dark' id="language-select" onChange={changeLanguage} value={i18n.language}>
         <option value="en">English</option>
         <option value="bn">বাংলা</option>
         <option value="hi">हिन्दी</option>
diff --git a/src/components/Separator.jsx b/src/components/Separator.jsx
index 05efc82..77b6fb6 100644
--- a/src/components/Separator.jsx
+++ b/src/components/Separator.jsx
@@ -1,7 +1,7 @@
 function Separator() {
   return (
     <div className="h-[2px]">
-        <div className="h-full w-full bg-white rounded-md"></div>
+        <div className="h-full w-full bg-white dark:bg-primary rounded-md"></div>
     </div>
   )
 }
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index 540e0d2..dc2de1f 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -1,25 +1,33 @@
 import FormBox from "../components/FormBox";
 import { useTranslation } from "react-i18next";
+import { getUserInfoFromSession } from "../util/util";
 
 function Home() {
   const { t } = useTranslation();
   const holidayList = [{ date: '23 May, 2024', name: 'Buddha Purnima' }, { date: '15 June, 2024', name: 'Raja Sankranti' }];
   const homePageNotifications = ['hpn_complete_before_31', 'hpn_npa', 'hpn_helpdesk_contact', 'hpn_rupay_kcc_time', 'hpn_rupay_kcc_atm'];
+  const userInformation = getUserInfoFromSession();
 
   return (
     <div className="py-7 flex flex-grow gap-7">
       <div className="flex gap-7 flex-col basis-1/3">
         <div className="flex-grow">
-          <FormBox title={t('information')}>
-            <h1>Welcome to the Home Page</h1>
+          <FormBox title={t('holidayList')}>
+            <ul className="list-inside list-disc px-4">
+              {holidayList.map((holiday, index) => (
+                <li key={index} className="font-body py-1 text-surface-dark dark:text-surface text-lg/loose">{holiday.date} - {holiday.name}</li>
+              ))}
+            </ul>
           </FormBox>
         </div>
         <div className="flex-grow">
-          <FormBox title={t('holidayList')}>
-            <ul>
-              {holidayList.map((holiday, index) => (
-                <li key={index}>{holiday.date} - {holiday.name}</li>
-              ))}
+          <FormBox title={t('information')}>
+            <ul className="list-inside list-disc px-4">
+              {
+                Object.keys(userInformation).map((key, index) => (
+                  <li key={index} className="font-body py-1 text-surface-dark dark:text-surface text-lg/loose">{t(key)}: {t(userInformation[key])}</li>
+                ))
+              }
             </ul>
           </FormBox>
         </div>